Feature: Chunks Fallback (#18)

* add way to cache chunks

* add chunk fallback

* rename chunkFallback to defaultChunks

Author: BosEriko

src/Editmode.jsx

@@ -3,7 +3,7 @@ import React, { useEffect } from "react";
 import { EditmodeContext } from "./EditmodeContext";
 import { Platform } from 'react-native';
 
-export function Editmode({ children, projectId }) {
+export function Editmode({ children, projectId, defaultChunks }) {
   if (!projectId) {
     throw new Error("<Editmode projectId={...}> is missing a valid projectId");
   }
@@ -25,7 +25,7 @@ export function Editmode({ children, projectId }) {
   }
 
   return (
-    <EditmodeContext.Provider value={{ branch, projectId }}>
+    <EditmodeContext.Provider value={{ branch, projectId, defaultChunks }}>
       {children}
     </EditmodeContext.Provider>
   );

src/EditmodeContext.js

@@ -3,4 +3,5 @@ import { createContext } from "react";
 export const EditmodeContext = createContext({
   branch: null,
   projectId: null,
+  defaultChunks: null,
 });

src/useChunk.js

@@ -5,9 +5,10 @@ import { api } from "./api";
 import { EditmodeContext } from "./EditmodeContext";
 import { renderChunk } from "./utils/renderChunk.jsx";
 import { computeContentKey } from "./utils/computeContentKey";
+import { Platform, AsyncStorage } from 'react-native';
 
 export function useChunk(defaultContent, { identifier, type }) {
-  const { projectId } = useContext(EditmodeContext);
+  const { projectId, defaultChunks } = useContext(EditmodeContext);
   const [[error, chunk], setResponse] = useState([undefined, undefined]);
   const contentKey = defaultContent ? computeContentKey(defaultContent) : null;
   const url = identifier
@@ -43,13 +44,61 @@ export function useChunk(defaultContent, { identifier, type }) {
     };
   }
 
+  const fallbackChunk = defaultChunks.filter(chunkItem => chunkItem.identifier === identifier)[0];
+
   if (!chunk) {
-    return {
-      Component() {
-        return null;
-      },
-      content: defaultContent,
-    };
+    if (!defaultContent && !fallbackChunk) {
+      let cachedChunk;
+
+      // Fetch Data
+      if(Platform.OS === 'web') {
+        cachedChunk = localStorage.getItem(identifier);
+      } else {
+        const fetchChunk = async () => {
+          try {
+            cachedChunk = await AsyncStorage.getItem(identifier);
+          } catch (error) {
+            console.log('Error in fetching chunk.', error);
+          }
+        };
+      }
+      return {
+        Component() {
+          return null;
+        },
+        content: cachedChunk,
+      };
+    } else if (fallbackChunk) {
+      return {
+        Component() {
+          return null;
+        },
+        content: fallbackChunk,
+      };
+    } else if (defaultContent) {
+      return {
+        Component() {
+          return null;
+        },
+        content: defaultContent,
+      };
+    }
+  } else {
+    // Store Data
+    if(Platform.OS === 'web') {
+      localStorage.setItem(chunk.identifier, JSON.stringify(chunk));
+    } else {
+      const storeChunk = async () => {
+        try {
+          await AsyncStorage.setItem(
+            chunk.identifier,
+            JSON.stringify(chunk)
+          );
+        } catch (error) {
+          console.log('Error in saving chunk.', error);
+        }
+      }
+    }
   }
 
   return {