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,7 +61,11 @@ const ReportDetail = () => {
 
   // Download and show report
   useEffect(() => {
+    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,"}
@@ -68,6 +73,10 @@ const ReportDetail = () => {
         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}`,
     });