Separate file loader out

app/scripts/components/common/blocks/lazy-components.js

@@ -68,7 +68,7 @@ export function LazyTable(props) {
       offset={50}
       once
     >
-      <Table />
+      <Table {...props} />
     </LazyLoad>
   );
 }

app/scripts/components/common/table/index.tsx

@@ -1,37 +1,34 @@
-import React, { ReactNode, useState, useEffect, useRef } from 'react';
-import { read, utils } from "xlsx";
+import React, { useRef } from 'react';
 import {
   flexRender,
   getCoreRowModel,
   useReactTable,
   ColumnDef
 } from '@tanstack/react-table';
 import { useVirtual } from 'react-virtual';
+import { Sheet2JSONOpts } from 'xlsx';
+import { PlaceHolderWrapper, TableWrapper, StyledTable } from './markup';
+import { ChartLoading } from '$components/common/loading-skeleton';
+import useLoadFile from '$utils/use-load-file';
 
-import { TableWrapper, StyledTable } from './markup';
-
-const testExcelFile = '/public/2021_data_summary_spreadsheets/ghgp_data_by_year.xlsx';
 /* column pinning,  - no out of box style support, use position: sticky */
 const pinnedColumns = ['Facility Id'];
 
-export default function TableComponent() {
-  const [data, setData] = useState<unknown[]>([]);
+interface TablecomponentProps {
+  fileName: string;
+  excelOption?: Sheet2JSONOpts;
+}
+
+export default function TableComponent({ fileName, excelOption }:TablecomponentProps) {
   const tableContainerRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    (async() => {
-    const f = await (await fetch(testExcelFile)).arrayBuffer();
-    const wb = read(f); // parse the array buffer
-    const ws = wb.Sheets[wb.SheetNames[0]]; // get the first sheet
-    const data = utils.sheet_to_json(ws,{ range: 3 }); // generate objects
-    setData(data);
-  })();},[]);
-
-  const columns: ColumnDef<unknown>[] = data.length? Object.keys(data[0]).map(key => {
+  const {data, dataLoading, dataError} = useLoadFile(fileName, excelOption);
+  const dataLoaded = !dataLoading && !dataError;
+
+  const columns: ColumnDef<unknown>[] = data.length? (Object.keys(data[0]) as string[]).map(key => {
     return  {
       accessorKey: key,
-      cell: info => info.getValue(),
-      header: () => (<React.Fragment><span>{key}</span></React.Fragment>),
+      cell: info => info.getValue()
     };
   }) : [];
 
@@ -56,8 +53,11 @@ export default function TableComponent() {
     virtualRows.length > 0
       ? totalSize - (virtualRows[virtualRows.length - 1]?.end || 0)
       : 0;
-
   return (
+    <>
+    {dataLoading && <PlaceHolderWrapper><ChartLoading message='Loading' /></PlaceHolderWrapper>}
+    {dataError && <PlaceHolderWrapper> <p> Soemthing went wrong while loading the data. Please try later. </p></PlaceHolderWrapper> }
+    {dataLoaded &&
     <TableWrapper ref={tableContainerRef}>
       <StyledTable>
         <thead>
@@ -103,6 +103,7 @@ export default function TableComponent() {
             )}
       </tbody>
       </StyledTable>
-    </TableWrapper>);
+    </TableWrapper>}
+    </>);
 }
 

app/scripts/components/common/table/markup.tsx

@@ -3,6 +3,10 @@ import styled from "styled-components";
 import { themeVal } from '@devseed-ui/theme-provider';
 import { variableGlsp } from '$styles/variable-utils';
 
+export const PlaceHolderWrapper = styled.div`
+  height: 400px;
+`;
+
 export const TableWrapper = styled.div`
   display: flex;
   max-width: 100%;

app/scripts/components/sandbox/table/table.mdx

@@ -1,5 +1,5 @@
 <Block>
   <Figure>
-    <Table />
+    <Table fileName="/public/2021_data_summary_spreadsheets/ghgp_data_by_year.xlsx" excelOption={{ range: 3 }} />
   </Figure>
 </Block>

app/scripts/utils/use-load-file.ts

@@ -0,0 +1,68 @@
+import React, { useState, useEffect } from 'react';
+import { Sheet2JSONOpts } from 'xlsx';
+import axios from 'axios';
+
+type FileExtension = 'xlsx' | 'json' | 'csv';
+
+const useFileLoader = (fileName: string, excelOption?: Sheet2JSONOpts) => {
+  const [data, setData] = useState<object[]>([]);
+  const [dataLoading, setLoading] = useState<boolean>(false);
+  const [dataError, setError] = useState<boolean>(false);
+
+  useEffect(() => {
+
+    const controller = new AbortController();
+    const { signal } = controller;
+    const loadData = async () => {
+      setLoading(true);
+
+      try {
+        // eslint-disable-next-line fp/no-mutating-methods
+        const extension: FileExtension = fileName.split('.').pop()?.toLowerCase() as FileExtension;
+        switch (extension) {
+          case 'xlsx': {
+            const { read, utils } = await import('xlsx');
+            const f = await (await axios.get(fileName,  { responseType: 'blob', signal: signal }).then(response => response.data)).arrayBuffer();
+            const wb = read(f); // parse the array buffer
+            const ws = wb.Sheets[wb.SheetNames[0]]; // get the first sheet by default
+            const data = utils.sheet_to_json(ws, excelOption); // generate objects
+            setData(data);
+            setLoading(false);
+            break;
+          } case 'json': {
+            const { data } = await axios.get(fileName,  { signal: signal });
+            setData(data);
+            setLoading(false);
+            break;
+          } case 'csv':{
+            const { csvParse } = await import('d3');
+            const { data } = await axios.get(fileName,  { responseType: 'blob', signal: signal });
+            const csvData = data.text().then(csvStr => {
+              csvParse(csvStr);
+            });
+            setData(csvData);
+            setLoading(false);
+            break;
+          }
+          default: {
+            throw new Error('Unsupported file extension.');
+          }
+        }
+      } catch (error) {
+          setData([]);
+          setLoading(false);
+          setError(true);
+      }
+    };
+
+    loadData();
+
+    return () => {
+      controller.abort();
+    };
+  }, [fileName, excelOption]);
+
+  return { data, dataLoading, dataError };
+};
+
+export default useFileLoader;