Show error message for report details

cope2n-fe/src/pages/reports/report_detail/index.tsx

@@ -33,6 +33,7 @@ const HeaderContainer = styled(Space)`
 `;
 
 const ReportDetail = () => {
+  const [error, setError] = useState(null);
   const [fileObject, setFileObject] = useState(null);
   const [pagination, setPagination] = useState({
     page: 1,
@@ -60,14 +61,22 @@ const ReportDetail = () => {
 
   // Download and show report
   useEffect(() => {
-    downloadReport(id, (fileDetails) => {
-      var blob = new Blob(
-          [fileDetails.file],
-          {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,"}
-      );
-      let blobUrl = URL.createObjectURL(blob);
-      setFileObject(blobUrl);
-    });
+    try {
+      downloadReport(id, (fileDetails) => {
+        if (!fileDetails?.file) {
+          setError("The report has not been ready to preview.");
+        }
+        var blob = new Blob(
+            [fileDetails.file],
+            {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,"}
+        );
+        let blobUrl = URL.createObjectURL(blob);
+        setFileObject(blobUrl);
+      });
+    } catch (error) {
+      setError("The report has not been ready to preview.");
+      console.log(error);
+    }
   }, []);
 
   const handleBack = () => {
@@ -129,7 +138,9 @@ const ReportDetail = () => {
         </Typography.Title>
       </HeaderContainer>
       <ReportContainer>
-        {fileObject && <SheetViewer file={fileObject} />}
+        {(fileObject && !error) && <SheetViewer file={fileObject} />}
+        {(!fileObject && !error) && <Typography.Title level={5}>Loading...</Typography.Title>}
+        {error && <Typography.Title level={5}>{error}</Typography.Title>}
       </ReportContainer>
     </>
   );

cope2n-fe/src/request/report.ts

@@ -113,6 +113,10 @@ export async function downloadReport(report_id: string, downloadFinishedCallback
       filename: filename,
     }
   } catch (error) {
+    downloadFinishedCallback && downloadFinishedCallback({
+      file: null,
+      filename: null,
+    });
     notification.error({
       message: `${error?.message}`,
     });