Cache data sources

devinit · May 3, 2021 · 863586a · 863586a
1 parent 0815d32
commit 863586a
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/frontend/src/components/OperationSteps/OperationSteps.tsx b/frontend/src/components/OperationSteps/OperationSteps.tsx
@@ -59,7 +59,7 @@ const OperationSteps: FunctionComponent<OperationStepsProps> = (props) => {
   });
 
   const renderOperationSteps = (steps: List<OperationStepMap>, activeStep?: OperationStepMap) => {
-    if (steps.count()) {
+    if (steps.count() && activeSource) {
       return (
         <Row>
           <ListGroup variant="flush" className="w-100">

diff --git a/frontend/src/hooks/sources.ts b/frontend/src/hooks/sources.ts
@@ -20,18 +20,16 @@ const defaultOptions: Options = {
   search: '',
 };
 
-export const useSources = (options: Options = defaultOptions): List<SourceMap> => {
+export const useSources = (options: Options = defaultOptions, fetch = false): List<SourceMap> => {
   const [token, setToken] = useState('');
   const [sources, setSources] = useState<List<SourceMap>>(fromJS([]));
   useEffect(() => {
     localForage.getItem<string>(localForageKeys.API_KEY).then((_token) => {
       if (_token) setToken(_token);
     });
   }, []);
-  useEffect(() => {
-    if (!token) {
-      return;
-    }
+
+  const fetchSources = (): void => {
     const url = `${api.routes.SOURCES}?limit=${options.limit}&offset=${options.offset}&search=${
       options.search || ''
     }`;
@@ -47,6 +45,7 @@ export const useSources = (options: Options = defaultOptions): List<SourceMap> =
       .then(({ status, data, statusText }: AxiosResponse<APIResponse<Source[]>>) => {
         if (status === 200 && data.results) {
           setSources(fromJS(data.results));
+          localForage.setItem(localForageKeys.SOURCES, data.results);
         } else if (status === 401) {
           console.log('Failed to fetch sources: ', statusText);
           setSources(fromJS([]));
@@ -58,6 +57,25 @@ export const useSources = (options: Options = defaultOptions): List<SourceMap> =
         );
         setSources(fromJS([]));
       });
+  };
+
+  useEffect(() => {
+    if (!token) {
+      return;
+    }
+    if (fetch) {
+      fetchSources();
+    } else {
+      localForage.getItem<Source[] | undefined>(localForageKeys.SOURCES).then((sources) => {
+        console.log('testing', sources);
+
+        if (sources && sources.length) {
+          setSources(fromJS(sources));
+        } else {
+          fetchSources();
+        }
+      });
+    }
   }, [token, options.limit, options.offset, options.search]);
 
   return sources;

diff --git a/frontend/src/utils/localForage.ts b/frontend/src/utils/localForage.ts
@@ -6,6 +6,7 @@ export const localForageKeys = {
   USER: 'USER',
   ACTIVE_SOURCE: 'ACTIVE_SOURCE',
   ACTIVE_OPERATION: 'ACTIVE_OPERATION',
+  SOURCES: 'SOURCES',
   DATASET_DATA: 'DATASET_DATA',
   DATASET_DATA_UPDATED_ON: 'DATASET_DATA_UPDATED_ON',
   DATASET_UPDATED_ON: 'DATASET_UPDATED_ON',