Skip to content

Commit 89e2035

Browse files
MiladSadeghiMiladSadeghi
committed
refactor(web): Improve API error handling on ChatGPT-related pages
1 parent 5426f7c commit 89e2035

8 files changed

Lines changed: 130 additions & 77 deletions

File tree

‎web/src/pages/basic/basic.tsx‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { usePost } from '@/core/react-query';
55
import { BasicBody, BasicMessage, BasicResponse } from './basic.types';
66
import { API } from '@/enums/api.enums';
77
import { BeatLoader } from 'react-spinners';
8+
import { isAxiosError } from 'axios';
89

910
const Basic: FC = () => {
1011
const { mutateAsync } = usePost<BasicResponse, BasicBody>(API.Basic, 'basic');
@@ -54,16 +55,22 @@ const Basic: FC = () => {
5455
} catch (error) {
5556
console.log(error);
5657
setMessages((prev) => prev.slice(0, -1));
57-
toast.error('Something went wrong');
58+
if (isAxiosError(error)) {
59+
if (error.response?.data.detail) {
60+
toast.error(error.response.data.detail);
61+
} else {
62+
toast.error('Something went wrong');
63+
}
64+
}
5865
}
5966
};
6067

6168
return (
6269
<div className="flex h-[calc(100vh-56px)] w-full items-center justify-center text-black dark:text-white">
6370
<div className="w-full max-w-[1024px]">
64-
<div className="w-full rounded-md p-2">
65-
<div className="flex h-full w-full items-center justify-center gap-3">
66-
<div className="flex w-full flex-col">
71+
<div className="w-full p-2 rounded-md">
72+
<div className="flex items-center justify-center w-full h-full gap-3">
73+
<div className="flex flex-col w-full">
6774
<label htmlFor="min_token" className="mb-2">
6875
Min Token
6976
</label>
@@ -72,10 +79,10 @@ const Basic: FC = () => {
7279
type="number"
7380
value={minToken}
7481
onChange={(e) => setMinToken(e.target.value)}
75-
className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
82+
className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
7683
/>
7784
</div>
78-
<div className="flex w-full flex-col">
85+
<div className="flex flex-col w-full">
7986
<label htmlFor="max_token" className="mb-2">
8087
Max Token
8188
</label>
@@ -84,10 +91,10 @@ const Basic: FC = () => {
8491
type="number"
8592
value={maxToken}
8693
onChange={(e) => setMaxToken(e.target.value)}
87-
className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
94+
className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
8895
/>
8996
</div>
90-
<div className="flex w-full flex-col">
97+
<div className="flex flex-col w-full">
9198
<label htmlFor="service" className="mb-2">
9299
Service
93100
</label>
@@ -96,7 +103,7 @@ const Basic: FC = () => {
96103
type="text"
97104
value={service}
98105
onChange={(e) => setService(e.target.value)}
99-
className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
106+
className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
100107
/>
101108
</div>
102109
</div>
@@ -107,14 +114,14 @@ const Basic: FC = () => {
107114
>
108115
{messages.map((message) =>
109116
message.role === 'user' ? (
110-
<div className="chat chat-end max-w-full">
111-
<div className="chat-bubble bg-gray-600 text-white">
117+
<div className="max-w-full chat chat-end">
118+
<div className="text-white bg-gray-600 chat-bubble">
112119
{message.content}
113120
</div>
114121
</div>
115122
) : (
116-
<div className="chat chat-start max-w-full">
117-
<div className="chat-bubble text-white">
123+
<div className="max-w-full chat chat-start">
124+
<div className="text-white chat-bubble">
118125
{message.loading ? (
119126
<BeatLoader color="#e3e3e3" size={10} />
120127
) : (
@@ -131,12 +138,12 @@ const Basic: FC = () => {
131138
value={input}
132139
onChange={(e) => setInput(e.target.value)}
133140
rows={2}
134-
className="w-full resize-none rounded-md bg-gray-200 p-4 pr-16 outline-none dark:bg-black-1"
141+
className="w-full p-4 pr-16 bg-gray-200 rounded-md outline-none resize-none dark:bg-black-1"
135142
/>
136143
<button
137144
disabled={!input}
138145
onClick={handleSendMessage}
139-
className="absolute right-3 top-5 flex items-center justify-center rounded-full bg-white p-2 transition-all disabled:opacity-50"
146+
className="absolute flex items-center justify-center p-2 transition-all bg-white rounded-full right-3 top-5 disabled:opacity-50"
140147
>
141148
<Send className="size-6 stroke-[#121212]" />
142149
</button>

‎web/src/pages/bug-fix/bug-fix.tsx‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { BugFixBody, BugFixMessage, BugFixResponse } from './bug-fix.types';
55
import { usePost } from '@/core/react-query';
66
import { toast } from 'sonner';
77
import { BeatLoader } from 'react-spinners';
8+
import { isAxiosError } from 'axios';
89

910
const BugFix: FC = () => {
1011
const { mutateAsync } = usePost<BugFixResponse, BugFixBody>(
@@ -57,18 +58,23 @@ const BugFix: FC = () => {
5758
),
5859
);
5960
} catch (error) {
60-
console.log(error);
6161
setMessages((prev) => prev.slice(0, -1));
62-
toast.error('Something went wrong');
62+
if (isAxiosError(error)) {
63+
if (error.response?.data.detail) {
64+
toast.error(error.response.data.detail);
65+
} else {
66+
toast.error('Something went wrong');
67+
}
68+
}
6369
}
6470
};
6571

6672
return (
6773
<div className="flex h-[calc(100vh-56px)] w-full items-center justify-center text-black dark:text-white">
6874
<div className="w-full max-w-[1024px]">
69-
<div className="w-full rounded-md p-2">
70-
<div className="flex h-full w-full items-center justify-center gap-3">
71-
<div className="flex w-full flex-col">
75+
<div className="w-full p-2 rounded-md">
76+
<div className="flex items-center justify-center w-full h-full gap-3">
77+
<div className="flex flex-col w-full">
7278
<label htmlFor="min_token" className="mb-2">
7379
Min Token
7480
</label>
@@ -77,10 +83,10 @@ const BugFix: FC = () => {
7783
type="number"
7884
value={minToken}
7985
onChange={(e) => setMinToken(e.target.value)}
80-
className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
86+
className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
8187
/>
8288
</div>
83-
<div className="flex w-full flex-col">
89+
<div className="flex flex-col w-full">
8490
<label htmlFor="max_token" className="mb-2">
8591
Max Token
8692
</label>
@@ -89,10 +95,10 @@ const BugFix: FC = () => {
8995
type="number"
9096
value={maxToken}
9197
onChange={(e) => setMaxToken(e.target.value)}
92-
className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
98+
className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
9399
/>
94100
</div>
95-
<div className="flex w-full flex-col">
101+
<div className="flex flex-col w-full">
96102
<label htmlFor="service" className="mb-2">
97103
Service
98104
</label>
@@ -101,10 +107,10 @@ const BugFix: FC = () => {
101107
type="text"
102108
value={service}
103109
onChange={(e) => setService(e.target.value)}
104-
className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
110+
className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
105111
/>
106112
</div>
107-
<div className="flex w-full flex-col">
113+
<div className="flex flex-col w-full">
108114
<label htmlFor="version" className="mb-2">
109115
Version
110116
</label>
@@ -113,7 +119,7 @@ const BugFix: FC = () => {
113119
type="text"
114120
value={version}
115121
onChange={(e) => setVersion(e.target.value)}
116-
className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
122+
className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
117123
/>
118124
</div>
119125
</div>
@@ -124,14 +130,14 @@ const BugFix: FC = () => {
124130
>
125131
{messages.map((message) =>
126132
message.role === 'user' ? (
127-
<div className="chat chat-end max-w-full">
128-
<div className="chat-bubble bg-gray-600 text-white">
133+
<div className="max-w-full chat chat-end">
134+
<div className="text-white bg-gray-600 chat-bubble">
129135
{message.content}
130136
</div>
131137
</div>
132138
) : (
133-
<div className="chat chat-start max-w-full">
134-
<div className="chat-bubble text-white">
139+
<div className="max-w-full chat chat-start">
140+
<div className="text-white chat-bubble">
135141
{message.loading ? (
136142
<BeatLoader color="#e3e3e3" size={10} />
137143
) : (
@@ -148,12 +154,12 @@ const BugFix: FC = () => {
148154
value={bugDescription}
149155
onChange={(e) => setBugDescription(e.target.value)}
150156
rows={2}
151-
className="w-full resize-none rounded-md bg-gray-200 p-4 pr-16 outline-none dark:bg-black-1"
157+
className="w-full p-4 pr-16 bg-gray-200 rounded-md outline-none resize-none dark:bg-black-1"
152158
/>
153159
<button
154160
disabled={!bugDescription}
155161
onClick={handleSendMessage}
156-
className="absolute right-3 top-5 flex items-center justify-center rounded-full bg-white p-2 transition-all disabled:opacity-50"
162+
className="absolute flex items-center justify-center p-2 transition-all bg-white rounded-full right-3 top-5 disabled:opacity-50"
157163
>
158164
<Send className="size-6 stroke-[#121212]" />
159165
</button>

‎web/src/pages/installation/installation.tsx‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,19 @@ const Installation: FC = () => {
5151
URL.revokeObjectURL(url);
5252
} catch (error) {
5353
if (isAxiosError<InstallationValidationError>(error)) {
54-
toast.error(error.response?.data.detail[0].msg);
55-
} else {
56-
toast.error('Something went wrong');
54+
if (
55+
Array.isArray(error.response?.data.detail) &&
56+
error.response?.data.detail[0].msg
57+
) {
58+
toast.error(error.response.data.detail[0].msg);
59+
} else if (
60+
!Array.isArray(error.response?.data.detail) &&
61+
error.response?.data.detail
62+
) {
63+
toast.error(error.response.data.detail);
64+
} else {
65+
toast.error('Something went wrong');
66+
}
5767
}
5868
}
5969
};
@@ -64,7 +74,7 @@ const Installation: FC = () => {
6474
className="flex h-[calc(100vh-56px)] w-full items-center justify-center"
6575
>
6676
<div className="w-full max-w-96">
67-
<div className="divide-y divide-gray-500 rounded-md border border-gray-500">
77+
<div className="border border-gray-500 divide-y divide-gray-500 rounded-md">
6878
<Select
6979
options={osSelectOptions}
7080
placeholder="os"
@@ -83,7 +93,7 @@ const Installation: FC = () => {
8393
<button
8494
type="submit"
8595
disabled={isPending || !os || !tool}
86-
className="btn mt-3 w-full bg-orange-base text-white hover:bg-orange-base/70 disabled:bg-orange-base/50 disabled:text-white/70"
96+
className="w-full mt-3 text-white btn bg-orange-base hover:bg-orange-base/70 disabled:bg-orange-base/50 disabled:text-white/70"
8797
>
8898
{isPending ? 'Wait...' : 'Generate'}
8999
</button>

‎web/src/pages/terraform-template/ARGOCD/argocd.tsx‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { usePost } from '@/core/react-query';
66
import { ArgocdBody, ArgocdResponse } from './argocd.types';
77
import { toast } from 'sonner';
88
import { useDownload } from '@/hooks';
9+
import { isAxiosError } from 'axios';
910

1011
const Argocd: FC = () => {
1112
const { mutateAsync: argocdMutate, isPending: argocdPending } = usePost<
@@ -63,19 +64,24 @@ const Argocd: FC = () => {
6364
await argocdMutate(argocdBody);
6465
await download();
6566
} catch (error) {
66-
console.log(error);
67-
toast.error('Something went wrong');
67+
if (isAxiosError(error)) {
68+
if (error.response?.data.detail) {
69+
toast.error(error.response.data.detail);
70+
} else {
71+
toast.error('Something went wrong');
72+
}
73+
}
6874
}
6975
};
7076

7177
return (
7278
<form
7379
onSubmit={handleForm}
74-
className="w-full max-w-96 text-black dark:text-white"
80+
className="w-full text-black max-w-96 dark:text-white"
7581
>
76-
<div className="rounded-md border border-gray-500">
82+
<div className="border border-gray-500 rounded-md">
7783
<div className="divide-y divide-gray-500">
78-
<div className="flex w-full items-center justify-between px-3 py-3">
84+
<div className="flex items-center justify-between w-full px-3 py-3">
7985
<p>Argo Application</p>
8086
<input
8187
type="checkbox"
@@ -95,7 +101,7 @@ const Argocd: FC = () => {
95101
)}
96102
>
97103
<div
98-
className="flex cursor-pointer items-center justify-between py-3 pl-10 pr-3"
104+
className="flex items-center justify-between py-3 pl-10 pr-3 cursor-pointer"
99105
onClick={() => handleDropdown('sync_policy')}
100106
>
101107
<p>Sync Policy</p>
@@ -137,7 +143,7 @@ const Argocd: FC = () => {
137143
</div>
138144
</div>
139145
</div>
140-
<div className="flex w-full items-center justify-between px-3 py-3">
146+
<div className="flex items-center justify-between w-full px-3 py-3">
141147
<p>ArgoCD Repository</p>
142148
<input
143149
type="checkbox"
@@ -148,7 +154,7 @@ const Argocd: FC = () => {
148154
onChange={() => handleServices('argocd_repository')}
149155
/>
150156
</div>
151-
<div className="flex w-full items-center justify-between px-3 py-3">
157+
<div className="flex items-center justify-between w-full px-3 py-3">
152158
<p>Application Depends Repository</p>
153159
<input
154160
type="checkbox"
@@ -164,7 +170,7 @@ const Argocd: FC = () => {
164170
<button
165171
type="submit"
166172
disabled={argocdPending || downloadPending}
167-
className="btn mt-3 w-full bg-orange-base text-white hover:bg-orange-base/70 disabled:bg-orange-base/50 disabled:text-white/70"
173+
className="w-full mt-3 text-white btn bg-orange-base hover:bg-orange-base/70 disabled:bg-orange-base/50 disabled:text-white/70"
168174
>
169175
{argocdPending
170176
? 'Wait...'

‎web/src/pages/terraform-template/Docker/docker.tsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { usePost } from '@/core/react-query';
55
import { useDownload } from '@/hooks';
66
import { TerraformTemplateAPI } from '@/enums/api.enums';
77
import { toast } from 'sonner';
8+
import { isAxiosError } from 'axios';
89

910
const Docker: FC = () => {
1011
const { mutateAsync: dockerMutate, isPending: dockerPending } = usePost<
@@ -40,19 +41,24 @@ const Docker: FC = () => {
4041
await dockerMutate(dockerBody);
4142
await download();
4243
} catch (error) {
43-
console.log(error);
44-
toast.error('Something went wrong');
44+
if (isAxiosError(error)) {
45+
if (error.response?.data.detail) {
46+
toast.error(error.response.data.detail);
47+
} else {
48+
toast.error('Something went wrong');
49+
}
50+
}
4551
}
4652
};
4753

4854
return (
4955
<form
5056
onSubmit={handleForm}
51-
className="w-full max-w-96 text-black dark:text-white"
57+
className="w-full text-black max-w-96 dark:text-white"
5258
>
53-
<div className="rounded-md border border-gray-500">
59+
<div className="border border-gray-500 rounded-md">
5460
<div className="divide-y divide-gray-500">
55-
<div className="flex w-full items-center justify-between px-3 py-3">
61+
<div className="flex items-center justify-between w-full px-3 py-3">
5662
<p>Key Pair</p>
5763
<input
5864
type="checkbox"
@@ -62,7 +68,7 @@ const Docker: FC = () => {
6268
onChange={() => handleServices('docker_image')}
6369
/>
6470
</div>
65-
<div className="flex w-full items-center justify-between px-3 py-3">
71+
<div className="flex items-center justify-between w-full px-3 py-3">
6672
<p>Security Group</p>
6773
<input
6874
type="checkbox"
@@ -78,7 +84,7 @@ const Docker: FC = () => {
7884
<button
7985
type="submit"
8086
disabled={dockerPending || downloadPending}
81-
className="btn mt-3 w-full bg-orange-base text-white hover:bg-orange-base/70 disabled:bg-orange-base/50 disabled:text-white/70"
87+
className="w-full mt-3 text-white btn bg-orange-base hover:bg-orange-base/70 disabled:bg-orange-base/50 disabled:text-white/70"
8288
>
8389
{dockerPending
8490
? 'Wait...'

0 commit comments

Comments
 (0)