Skip to content
This repository was archived by the owner on Jun 19, 2025. It is now read-only.

Commit 9829004

Browse files
safeamiiirsafeamiiir
authored
fix(fetch): handle in case some error happened in Fetch (#177)
* fix(fetch): handle in case some error happend in Fetch * fix(toast): add file name to the toast
1 parent 6f5565e commit 9829004

File tree

5 files changed

+54
-25
lines changed

5 files changed

+54
-25
lines changed

‎aqueductcore/frontend/src/components/molecules/ExtensionActions/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const HiddenRadio = styled(Radio)`
1717
display: none;
1818
`;
1919

20-
const ActionHeader = styled(Grid, {shouldForwardProp: (prop) => prop !== "$isselected"})<{$isselected: boolean}>`
20+
const ActionHeader = styled(Grid, { shouldForwardProp: (prop) => prop !== "$isselected" }) <{ $isselected: boolean }>`
2121
padding: 0 ${(props) => props.theme.spacing(1.5)};
2222
background-color: ${({ theme, $isselected }) => $isselected ? theme.palette.primary.main : theme.palette.background.default};
2323
border-bottom: 1px solid ${({ theme }) => theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[300]};
@@ -52,8 +52,8 @@ const ActionDescription = styled(Typography)`
5252
padding: ${(props) => props.theme.spacing(0.75)} ${(props) => props.theme.spacing(1.5)};
5353
background-color: ${(props) =>
5454
props.theme.palette.mode === "dark"
55-
? props.theme.palette.background.card
56-
: props.theme.palette.common.white};
55+
? props.theme.palette.background.card
56+
: props.theme.palette.common.white};
5757
border-radius: 0 0 ${(props) => props.theme.spacing(0.5)} ${(props) => props.theme.spacing(0.5)};
5858
`;
5959

‎aqueductcore/frontend/src/components/organisms/Attachments/Viewer/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,6 @@ function Viewer({
121121
});
122122
} else if (contentType?.includes("text/html")) {
123123
response.text().then(() => {
124-
console.log('fileURL', fileURL)
125124
setInfo({
126125
data: fileURL,
127126
type: "HTML",

‎aqueductcore/frontend/src/components/organisms/ExtensionModal/index.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@ const ModalContainer = styled(Box)`
3535

3636
const ModalHeader = styled(Grid)`
3737
background-color: ${(props) =>
38-
props.theme.palette.mode === "dark"
39-
? props.theme.palette.common.black
40-
: props.theme.palette.grey[300]};
38+
props.theme.palette.mode === "dark"
39+
? props.theme.palette.common.black
40+
: props.theme.palette.grey[300]};
4141
border-radius: ${(props) => props.theme.spacing(1)} ${(props) => props.theme.spacing(1)} 0 0;
4242
line-height: 3.25rem;
4343
border-bottom: 1px solid ${({ theme }) => theme.palette.mode === "dark" ? theme.palette.grey[800] : theme.palette.grey[400]};
@@ -76,9 +76,9 @@ const ModalOptionsGrid = styled(Grid)`
7676
height: 620px;
7777
background-color: ${({ theme }) => theme.palette.grey[200]};
7878
background-color: ${(props) =>
79-
props.theme.palette.mode === "dark"
80-
? props.theme.palette.grey[900]
81-
: props.theme.palette.grey[200]};
79+
props.theme.palette.mode === "dark"
80+
? props.theme.palette.grey[900]
81+
: props.theme.palette.grey[200]};
8282
border-right: 1px solid rgba(0,0,0,0.3);
8383
padding: ${(props) => props.theme.spacing(2.5)} ${(props) => props.theme.spacing(3)};
8484
`;
@@ -89,9 +89,9 @@ const RunExtension = styled(Button)`
8989

9090
const ModalStepGrid = styled(Grid)`
9191
background-color: ${(props) =>
92-
props.theme.palette.mode === "dark"
93-
? props.theme.palette.background.card
94-
: props.theme.palette.common.white};
92+
props.theme.palette.mode === "dark"
93+
? props.theme.palette.background.card
94+
: props.theme.palette.common.white};
9595
height: 620px;
9696
position: relative;
9797
`;

‎aqueductcore/frontend/src/hooks/useUploadFile.test.ts‎

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,8 @@ test('should handle successful file upload', async () => {
5050
include: 'active',
5151
});
5252
expect(setSelectedFileMock).toHaveBeenCalledWith('test.txt');
53-
expect(toast.success).toHaveBeenCalledWith('Upload success!', {
54-
id: 'upload_success',
53+
expect(toast.success).toHaveBeenCalledWith('Upload success!' ?? 'File uploaded successfully!', {
54+
id: 'upload_success' + 'test.txt',
5555
});
5656
});
5757

@@ -69,9 +69,12 @@ test('should handle failed file upload with error message', async () => {
6969
result.current.handleExperimentFileUpload(new File(['dummy content'], 'test.txt', { type: 'text/plain' }));
7070
});
7171

72-
expect(toast.error).toHaveBeenCalledWith('Upload failed!', {
73-
id: 'upload_failed',
74-
});
72+
expect(toast.error).toHaveBeenCalledWith(
73+
`file name: "test.txt"\nUpload failed!`,
74+
{
75+
id: 'upload_failedtest.txt',
76+
}
77+
);
7578
});
7679

7780
test('should handle failed file upload without error message', async () => {
@@ -88,7 +91,28 @@ test('should handle failed file upload without error message', async () => {
8891
result.current.handleExperimentFileUpload(new File(['dummy content'], 'test.txt', { type: 'text/plain' }));
8992
});
9093

91-
expect(toast.error).toHaveBeenCalledWith('Bad Request', {
92-
id: 'upload_catch',
94+
expect(toast.error).toHaveBeenCalledWith(
95+
`file name: "test.txt"\nBad Request`,
96+
{
97+
id: 'upload_catchtest.txt',
98+
}
99+
);
100+
});
101+
102+
test('should handle fetch failure', async () => {
103+
const mockError = new Error('Network Error');
104+
(fetch as jest.Mock).mockRejectedValue(mockError);
105+
106+
const { result } = renderHook(() => useFileUpload('test-uuid'));
107+
108+
await act(async () => {
109+
result.current.handleExperimentFileUpload(new File(['dummy content'], 'test.txt', { type: 'text/plain' }));
93110
});
111+
112+
expect(toast.error).toHaveBeenCalledWith(
113+
`file name: "test.txt"\nNetwork Error`,
114+
{
115+
id: 'file_catchtest.txt',
116+
}
117+
);
94118
});

‎aqueductcore/frontend/src/hooks/useUploadFile.ts‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,24 +35,30 @@ function useFileUpload(experimentUuid: ExperimentDataType['uuid']) {
3535
// TODO: it should be in the response.
3636
setSelectedFile(file.name)
3737
toast.success(data.result ?? "File uploaded successfully!", {
38-
id: "upload_success",
38+
id: "upload_success" + file.name,
3939
});
4040
})
4141
// Response failure message
4242
} else {
4343
response.json().then((error) => {
44-
toast.error(error.detail ?? statusText, {
45-
id: "upload_failed",
44+
toast.error(`file name: "${file.name}"\n` + (error.detail ?? statusText), {
45+
id: "upload_failed" + file.name,
4646
});
4747
})
4848
// No failure message
4949
.catch(() => {
50-
toast.error(statusText, {
51-
id: "upload_catch",
50+
toast.error(`file name: "${file.name}"\n` + statusText, {
51+
id: "upload_catch" + file.name,
5252
});
5353
});
5454
}
5555
})
56+
// Somethings went wrong with the file
57+
.catch((error) => {
58+
toast.error(`file name: "${file.name}"\n` + (error.message ?? `Unable to upload file.`), {
59+
id: "file_catch" + file.name,
60+
});
61+
});
5662
}
5763
return { handleExperimentFileUpload }
5864
}

0 commit comments

Comments
 (0)