Skip to content

Commit bfd402d

Browse files
ZhaoYongchaoZhaoYongchao
committed
refactor: endpoint,endpointId && message rules
Signed-off-by: ZhaoYongchao <zhao.yc@callgent.com>
1 parent 5305430 commit bfd402d

9 files changed

Lines changed: 52 additions & 55 deletions

File tree

‎src/components/quick-start/register-account.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ import axios from 'axios';
77
const RegisterAccount = () => {
88
const isBrowser = useIsBrowser();
99
if (!isBrowser) { return null; }
10-
const [isSubmitting, handleSubmit] = useSubmit();
11-
const [importState, setImportState] = useState<boolean | string | null>(null);
10+
const [isSubmitting, handleSubmit, message] = useSubmit();
1211

1312
const submitFunction = async (e: React.FormEvent<HTMLFormElement>) => {
1413
e.preventDefault();
@@ -22,10 +21,9 @@ const RegisterAccount = () => {
2221
await axios.post('/api/users/send-confirm-email', body).then(req => {
2322
const { data } = req;
2423
localStorage.setItem('callgent', JSON.stringify(data))
25-
setImportState(true);
2624
}).catch(error => {
2725
const { data } = error.response;
28-
setImportState(data.message);
26+
throw new Error(JSON.stringify(data.message));
2927
});
3028
}
3129

@@ -47,8 +45,8 @@ const RegisterAccount = () => {
4745
Send Email
4846
</button>
4947
</form>
50-
{importState === true && <span className="margin--md text--success">Please check your email to confirm registration!</span>}
51-
{importState !== true && importState !== null && <span className="margin--md text--danger">{importState}</span>}
48+
{message === true && <span className="margin--md text--success">Please check your email to confirm registration!</span>}
49+
{message !== true && message !== null && <span className="margin--md text--danger">{message}</span>}
5250
</>
5351
);
5452
};

‎src/components/tree/callgent.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,17 @@ const Callgent: React.FC<ModalFormProps> = ({ initialData, treeData, setTreeData
88
const isBrowser = useIsBrowser();
99
if (!isBrowser) { return null; }
1010
const formRef = useRef<HTMLFormElement>(null);
11-
const [importState, setImportState] = useState<boolean | string | null>(null);
12-
const [isSubmitting, handleSubmit] = useSubmit();
11+
const [isSubmitting, handleSubmit, message] = useSubmit();
1312
const submitFunction = async () => {
1413
const formData = new FormData(formRef.current);
1514
const formValues = Object.fromEntries(formData.entries()) as { name: string };
1615
try {
1716
await axios.put('/api/callgents/' + initialData.id, formValues)
18-
setImportState(true);
1917
setTimeout(() => { onClose(); }, 350);
2018
setTreeData([{ ...treeData, name: formValues.name }])
2119
} catch (error) {
2220
const { data } = error.response;
23-
setImportState(data.message);
21+
throw new Error(JSON.stringify(data.message));
2422
}
2523
};
2624

@@ -31,8 +29,8 @@ const Callgent: React.FC<ModalFormProps> = ({ initialData, treeData, setTreeData
3129
<input type="text" id='name' name="name" defaultValue={initialData?.name} />
3230
</div>
3331
<div>
34-
{importState === true && <span className="margin--md text--success">Successfully {initialData ? 'Edit' : 'Create'}!</span>}
35-
{importState !== true && importState !== null && <span className="margin--md text--danger">{importState}</span>}
32+
{message === true && <span className="margin--md text--success">Successfully {initialData ? 'Edit' : 'Create'}!</span>}
33+
{message !== true && message !== null && <span className="margin--md text--danger">{message}</span>}
3634
</div>
3735
<div className="modal-footer">
3836
<button type="button" className="cancel-button" onClick={onClose}>

‎src/components/tree/confirm-delete.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,7 @@ const Popconfirm: React.FC<PopconfirmProps> = ({ title, description, initialData
1212
const [fadeOut, setFadeOut] = useState(false);
1313
const triggerRef = useRef<HTMLDivElement>(null);
1414
const popconfirmRef = useRef<HTMLDivElement>(null);
15-
const [isSubmitting, handleSubmit] = useSubmit();
16-
const [importState, setImportState] = useState<boolean | string | null>(null);
15+
const [isSubmitting, handleSubmit, message] = useSubmit();
1716
const handleClickOutside = (event: MouseEvent) => {
1817
if (popconfirmRef.current && !popconfirmRef.current.contains(event.target as Node) &&
1918
triggerRef.current && !triggerRef.current.contains(event.target as Node)) {
@@ -43,7 +42,7 @@ const Popconfirm: React.FC<PopconfirmProps> = ({ title, description, initialData
4342
}, 500);
4443
}).catch((error) => {
4544
const { data } = error.response;
46-
setImportState(data.message);
45+
throw new Error(JSON.stringify(data.message));
4746
})
4847
return null;
4948
} else if (level === 3) {
@@ -66,7 +65,7 @@ const Popconfirm: React.FC<PopconfirmProps> = ({ title, description, initialData
6665
}, 500);
6766
}).catch((error) => {
6867
const { data } = error.response;
69-
setImportState(data.message);
68+
throw new Error(JSON.stringify(data.message));
7069
})
7170
}
7271
};
@@ -85,8 +84,8 @@ const Popconfirm: React.FC<PopconfirmProps> = ({ title, description, initialData
8584
<div className="popconfirm-title">{title}</div>
8685
<div className="popconfirm-description">{description}</div>
8786
<div>
88-
{importState === true && <span className="margin--md text--success">Successfully!</span>}
89-
{importState !== true && importState !== null && <span className="margin--md text--danger">{importState}</span>}
87+
{message === true && <span className="margin--md text--success">Successfully!</span>}
88+
{message !== true && message !== null && <span className="margin--md text--danger">{message}</span>}
9089
</div>
9190
<div className="popconfirm-buttons">
9291
<button onClick={handleCancel}>{cancelText}</button>

‎src/components/tree/endpoints.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,14 @@ const Endpoints: React.FC<ModalFormProps> = ({ initialData, type, adaptorKey, tr
88
const isBrowser = useIsBrowser();
99
if (!isBrowser) { return null; }
1010
const formRef = useRef<HTMLFormElement>(null);
11-
const [isSubmitting, handleSubmit] = useSubmit();
12-
const [importState, setImportState] = useState<boolean | string | null>(null);
11+
const [isSubmitting, handleSubmit, message] = useSubmit();
1312
const submitFunction = async () => {
1413
const formData = new FormData(formRef.current);
1514
const formValues = Object.fromEntries(formData.entries()) as { type: string, host: any, callgentId: string };
1615
formValues.callgentId = treeData.id;
1716
formValues.type = initialData.id;
1817
type === 'Edit' ?
1918
await axios.put('/api/endpoints/' + initialData.id, { host: formValues.host }).then(req => {
20-
setImportState(true);
2119
setTimeout(() => { onClose(); }, 350);
2220
let { data } = req.data;
2321
data.id = data.id;
@@ -27,11 +25,10 @@ const Endpoints: React.FC<ModalFormProps> = ({ initialData, type, adaptorKey, tr
2725
onSubmit(data)
2826
}).catch(error => {
2927
const { data } = error.response;
30-
setImportState(data.message);
28+
throw new Error(JSON.stringify(data.message));
3129
})
3230
:
3331
await axios.post('/api/endpoints/' + adaptorKey + '/create', formValues).then(req => {
34-
setImportState(true);
3532
setTimeout(() => { onClose(); }, 350);
3633
let { data } = req.data;
3734
data.id = data.id;
@@ -42,7 +39,7 @@ const Endpoints: React.FC<ModalFormProps> = ({ initialData, type, adaptorKey, tr
4239
onSubmit(data)
4340
}).catch(error => {
4441
const { data } = error.response;
45-
setImportState(data.message);
42+
throw new Error(JSON.stringify(data.message));
4643
});
4744
};
4845

@@ -67,8 +64,8 @@ const Endpoints: React.FC<ModalFormProps> = ({ initialData, type, adaptorKey, tr
6764
/>
6865
</div>
6966
<div>
70-
{importState === true && <span className="margin--md text--success">Successfully {type}!</span>}
71-
{importState !== true && importState !== null && <span className="margin--md text--danger">{importState}</span>}
67+
{message === true && <span className="margin--md text--success">Successfully {type}!</span>}
68+
{message !== true && message !== null && <span className="margin--md text--danger">{message}</span>}
7269
</div>
7370
<div className="modal-footer">
7471
<button type="button" className="cancel-button" onClick={onClose}>

‎src/components/tree/import.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,11 @@ const Import: React.FC<ModalFormProps> = ({ initialData, type, adaptorKey, treeD
88
const isBrowser = useIsBrowser();
99
if (!isBrowser) { return null; }
1010
const formRef = useRef<HTMLFormElement>(null);
11-
const [isSubmitting, handleSubmit] = useSubmit();
12-
const [importState, setImportState] = useState<boolean | string | null>(null);
11+
const [isSubmitting, handleSubmit, message] = useSubmit();
1312
const submitFunction = async () => {
1413
const formData = new FormData(formRef.current);
15-
const formValues = Object.fromEntries(formData.entries()) as { endpoint: string, text: any, format: string };
16-
formValues.endpoint = initialData.id;
14+
const formValues = Object.fromEntries(formData.entries()) as { endpointId: string, text: any, format: string };
15+
formValues.endpointId = initialData.id;
1716
formValues.format = "openAPI";
1817
type === 'Edit' ?
1918
// await axios.post('/api/endpoints/' + adaptorKey + '/create', formValues).then(req => {
@@ -27,13 +26,12 @@ const Import: React.FC<ModalFormProps> = ({ initialData, type, adaptorKey, treeD
2726
// onSubmit(data)
2827
// }).catch(error => {
2928
// const { data } = error.response;
30-
// setImportState(data.message);
29+
// throw new Error(JSON.stringify(data.message));
3130
// });
3231
null
3332
:
3433
await axios.post('/api/bff/callgent-functions/import', formValues).then((req) => {
3534
const { data } = req.data;
36-
setImportState(true);
3735
setTimeout(onClose, 350);
3836
data
3937
.filter((item: TreeNodeType) =>
@@ -45,19 +43,18 @@ const Import: React.FC<ModalFormProps> = ({ initialData, type, adaptorKey, treeD
4543
});
4644
}).catch(error => {
4745
const { data } = error.response;
48-
setImportState(data.message);
46+
throw new Error(JSON.stringify(data.message));
4947
});
5048
};
51-
5249
return (
5350
<form ref={formRef}>
5451
<div className="form-group">
5552
<label htmlFor="text">Import SEP Functions</label>
5653
<textarea className="customTextarea" name='text' id='text' style={{ maxHeight: '180px', }}></textarea>
5754
</div>
5855
<div>
59-
{importState === true && <span className="margin--md text--success">Successfully {type}!</span>}
60-
{importState !== true && importState !== null && <span className="margin--md text--danger">{importState}</span>}
56+
{message === true && <span className="margin--md text--success">Successfully {type}!</span>}
57+
{message !== true && message !== null && <span className="margin--md text--danger">{message}</span>}
6158
</div>
6259
<div className="modal-footer">
6360
<button type="button" className="cancel-button" onClick={onClose}>

‎src/components/user-as-a-service/create-callgent.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,9 @@ interface CreateCallgentProps {
1313
const CreateCallgent: React.FC<CreateCallgentProps> = ({ name, onDataReceived }) => {
1414
const isBrowser = useIsBrowser();
1515
if (!isBrowser) { return null; }
16-
const [importState, setImportState] = useState<boolean | string | null>(null);
1716
const formRef = useRef<HTMLFormElement>(null);
1817

19-
const [isSubmitting, handleSubmit] = useSubmit();
18+
const [isSubmitting, handleSubmit, message] = useSubmit();
2019
const submitFunction = async () => {
2120
const formData = new FormData(formRef.current);
2221
const formValues = Object.fromEntries(formData.entries()) as { name: string };
@@ -25,10 +24,9 @@ const CreateCallgent: React.FC<CreateCallgentProps> = ({ name, onDataReceived })
2524
if (onDataReceived) {
2625
onDataReceived(data.data);
2726
}
28-
setImportState(true);
2927
} catch (error) {
3028
const { data } = error.response;
31-
setImportState(data.message);
29+
throw new Error(JSON.stringify(data.message));
3230
}
3331
};
3432

@@ -49,8 +47,8 @@ const CreateCallgent: React.FC<CreateCallgentProps> = ({ name, onDataReceived })
4947
>
5048
Create
5149
</button>
52-
{importState === true && <span className="margin--md text--success">Successfully created!</span>}
53-
{importState !== true && importState !== null && <span className="margin--md text--danger">{importState}</span>}
50+
{message === true && <span className="margin--md text--success">Successfully created!</span>}
51+
{message !== true && message !== null && <span className="margin--md text--danger">{message}</span>}
5452
</form>
5553
);
5654
};

‎src/components/user-as-a-service/create-endpoints.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@ const CreateEndpoints = () => {
99
if (!isBrowser) { return null; }
1010
const userinfo = JSON.parse(localStorage.getItem('userinfo'));
1111
const [callgent, setCallgent] = useState(JSON.parse(localStorage.getItem('callgent')));
12-
const [isSubmitting, handleSubmit] = useSubmit();
13-
const [importState, setImportState] = useState<boolean | string | null>(null);
12+
const [isSubmitting, handleSubmit, message] = useSubmit();
1413
const submitFunction = async (event: React.FormEvent<HTMLFormElement>) => {
1514
event.preventDefault();
1615
const formData = new FormData(event.currentTarget);
@@ -21,11 +20,10 @@ const CreateEndpoints = () => {
2120
"callgentId": callgent.id
2221
}
2322
await axios.post('/api/endpoints/email/callgents', data).then(req => {
24-
setImportState(true);
2523
localStorage.removeItem('callgent');
2624
}).catch(error => {
2725
const { data } = error.response;
28-
setImportState(data.message);
26+
throw new Error(JSON.stringify(data.message));
2927
});
3028
};
3129

@@ -53,8 +51,8 @@ const CreateEndpoints = () => {
5351
<button className="button col col--2 margin--sm button--info button--secondary" disabled={isSubmitting || !callgent?.id}>
5452
Create
5553
</button>
56-
{importState === true && <span className="margin--md text--success">Successfully created!</span>}
57-
{importState !== true && importState !== null && <span className="margin--md text--danger">{importState}</span>}
54+
{message === true && <span className="margin--md text--success">Successfully created!</span>}
55+
{message !== true && message !== null && <span className="margin--md text--danger">{message}</span>}
5856
{!callgent?.id && <span className={styles.please}>Please create a callgent First!</span>}
5957
</form>
6058
);

‎src/components/user-as-a-service/import-api.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const ImportApi = () => {
1010
if (!isBrowser) { return null; }
1111
const textareaRef = useRef<HTMLTextAreaElement>(null);
1212
const [importState, setImportState] = useState<boolean | string | null>(null);
13-
const [isSubmitting, handleSubmit] = useSubmit();
13+
const [isSubmitting, handleSubmit, message] = useSubmit();
1414

1515
const submitFunction = async () => {
1616
const body = {
@@ -22,7 +22,7 @@ const ImportApi = () => {
2222
setImportState(true);
2323
}).catch(error => {
2424
const { data } = error.response;
25-
setImportState(data.message);
25+
throw new Error(JSON.stringify(data.message));
2626
});
2727
};
2828

‎src/hooks/button.tsx‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,12 @@ import { useState, useCallback, useContext } from 'react';
22
import { GlobalContext } from '@site/src/context/GlobalContext';
33
import { getCookie } from '../util/cookie';
44

5-
function useSubmit(): [boolean, (submitFunction: () => Promise<void>, requireLogin?: boolean) => Promise<void>] {
5+
function useSubmit(): [
6+
boolean,
7+
(submitFunction: () => Promise<void>, requireLogin?: boolean) => Promise<void>, string | null | boolean
8+
] {
69
const [isSubmitting, setIsSubmitting] = useState(false);
10+
const [message, setMessage] = useState<string | null | boolean>(null);
711
const { setShowLogin } = useContext(GlobalContext);
812

913
const handleSubmit = useCallback(async (submitFunction: () => Promise<void>, requireLogin: boolean = true) => {
@@ -12,15 +16,23 @@ function useSubmit(): [boolean, (submitFunction: () => Promise<void>, requireLog
1216
}
1317
if (isSubmitting) return;
1418
setIsSubmitting(true);
19+
setMessage(null);
1520
try {
1621
await submitFunction();
17-
} catch (error) {
18-
console.error('Error:', error);
22+
setMessage(true);
23+
} catch (error: any) {
24+
if (Array.isArray(JSON.parse(error.message))) {
25+
setMessage(JSON.parse(error.message)[0]);
26+
} else if (typeof error.message === 'string') {
27+
setMessage(JSON.parse(error.message));
28+
} else {
29+
setMessage('An unknown error occurred');
30+
}
1931
} finally {
2032
setIsSubmitting(false);
2133
}
2234
}, [isSubmitting, setShowLogin]);
23-
return [isSubmitting, handleSubmit];
35+
return [isSubmitting, handleSubmit, message];
2436
}
2537

26-
export default useSubmit;
38+
export default useSubmit;

0 commit comments

Comments
 (0)