feat: delete the added model #503 and display an error message when the requested file fails to parse #684 (#708)

### What problem does this PR solve?

feat: delete the added model #503
feat: display an error message when the requested file fails to parse
#684

### Type of change

- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/document-viewer/excel/index.tsx

@@ -1,35 +1,19 @@
-import jsPreviewExcel from '@js-preview/excel';
 import '@js-preview/excel/lib/index.css';
-import { useEffect } from 'react';
+import FileError from '../file-error';
+import { useFetchExcel } from '../hooks';
 
 const Excel = ({ filePath }: { filePath: string }) => {
-  const fetchDocument = async () => {
-    const myExcelPreviewer = jsPreviewExcel.init(
-      document.getElementById('excel'),
-    );
-    const jsonFile = new XMLHttpRequest();
-    jsonFile.open('GET', filePath, true);
-    jsonFile.send();
-    jsonFile.responseType = 'arraybuffer';
-    jsonFile.onreadystatechange = () => {
-      if (jsonFile.readyState === 4 && jsonFile.status === 200) {
-        myExcelPreviewer
-          .preview(jsonFile.response)
-          .then((res: any) => {
-            console.log('succeed');
-          })
-          .catch((e) => {
-            console.log('failed', e);
-          });
-      }
-    };
-  };
+  const { status, containerRef } = useFetchExcel(filePath);
 
-  useEffect(() => {
-    fetchDocument();
-  }, []);
-
-  return <div id="excel" style={{ height: '100%' }}></div>;
+  return (
+    <div
+      id="excel"
+      ref={containerRef}
+      style={{ height: '100%', width: '100%' }}
+    >
+      {status || <FileError></FileError>}
+    </div>
+  );
 };
 
 export default Excel;