Merge pull request #3 from editmodelabs/fallback_content_for_missing_variable

Modify content flow with variables

Author: notthatjen

.DS_Store

@@ -6,7 +6,8 @@ import { useChunk } from "./useChunk";
 export function Chunk({ children, identifier, src, contentKey, ...props }) {
   const type = src ? "image" : undefined;
   const defaultContent = src || children;
-  const { Component } = useChunk(defaultContent, { identifier, type, contentKey });
+  const variables = props.variables;
+  const { Component } = useChunk(defaultContent, { identifier, type, contentKey, variables });
 
   return <Component {...props} />;
 }

.gitmodules

@@ -2,8 +2,8 @@
 import React, { useEffect, useState } from "react";
 
 import { ChunkCollectionContext } from "./ChunkCollectionContext";
-import { api } from './utils'
-import { getCachedData, storeCache } from './utils/native'
+import { api } from './utilities'
+import { getCachedData, storeCache } from './utilities'
 
 export function ChunkCollection({
   children,

src/Chunk.jsx

@@ -1,6 +1,6 @@
 import React, { useContext } from "react";
 
-import { renderChunk } from "./utils/native";
+import { renderChunk } from "./utilities";
 import { ChunkCollectionContext } from "./ChunkCollectionContext";
 
 export function ChunkFieldValue({ children, identifier, ...props }) {

src/ChunkCollection.jsx

@@ -2,10 +2,10 @@
 import { useContext, useEffect, useState, useMemo } from "react";
 
 import { EditmodeContext } from "./EditmodeContext";
-import { api, computeContentKey } from './utils'
-import { renderChunk, getCachedData, storeCache } from './utils/native'
+import { api, computeContentKey } from './utilities'
+import { renderChunk, getCachedData, storeCache, sanitizeContent } from './utilities'
 
-export function useChunk(defaultContent = "", { identifier, type, contentKey }) {
+export function useChunk(defaultContent = "", { identifier, type, contentKey, variables }) {
   const { projectId, defaultChunks } = useContext(EditmodeContext);
   const [chunk, setChunk] = useState(undefined);
 
@@ -34,11 +34,20 @@ export function useChunk(defaultContent = "", { identifier, type, contentKey })
   useEffect(() => {
     // Render content
     (async () =>{
-      const cachedChunk = await getCachedData(cacheId);
-      const newChunk = cachedChunk ? JSON.parse(cachedChunk) : fallbackChunk || {
-        chunk_type: type || "single_line_text",
-        content: defaultContent,
-        content_key: contentKey
+      let cachedChunk = await getCachedData(cacheId)
+      let newChunk;
+      if (cachedChunk) {
+        let dataChunk = JSON.parse(cachedChunk);
+        const parsedChunk = sanitizeContent(dataChunk, variables, fallbackChunk)
+        newChunk = parsedChunk;
+      } else if (fallbackChunk) {
+        newChunk = fallbackChunk;
+      } else {
+        newChunk = {
+          chunk_type: type || "single_line_text",
+          content: defaultContent,
+          content_key: contentKey
+        }
       }
 
       if (newChunk) setChunk(newChunk)
@@ -49,7 +58,10 @@ export function useChunk(defaultContent = "", { identifier, type, contentKey })
         .get(url)
         .then((res) => {
           storeCache(cacheId, res.data)
-          if (!cachedChunk) setChunk(res.data)
+          if (!cachedChunk) {
+            const parsedChunk = sanitizeContent(res.data, variables, fallbackChunk)
+            setChunk(parsedChunk)
+          }
         }) // Store chunk to localstorage
         .catch((error) => console.log(error)); // Set error state
 

src/ChunkFieldValue.jsx

@@ -0,0 +1,8 @@
+import axios from "axios";
+
+export const api = axios.create({
+  baseURL: "https://api.editmode.com/",
+  headers: {
+    Accept: "application/json",
+  },
+});

src/useChunk.js

@@ -0,0 +1,25 @@
+import AsyncStorage from '@react-native-community/async-storage';
+import { Platform } from 'react-native';
+
+export const getCachedData = Platform.OS === 'web'
+  ? (id) => localStorage.getItem(id)
+  : async (id) => {
+    try {
+      return await AsyncStorage.getItem(id);
+    } catch (error) {
+      console.error('Error in fetching chunk.', error);
+    }
+  };
+
+export const storeCache = Platform.OS === 'web'
+  ? (id, data) =>  localStorage.setItem(id, JSON.stringify(data))
+  : async (id, data) => {
+    try {
+      await AsyncStorage.setItem(
+        id,
+        JSON.stringify(data)
+      );
+    } catch (error) {
+      console.error('Error in saving chunk.', error);
+    }
+  };

src/utilities/api.js

@@ -0,0 +1,13 @@
+import hash from "@emotion/hash";
+import kebabCase from "lodash.kebabcase";
+
+export function computeContentKey(content) {
+  if (typeof content !== "string") {
+    console.error(
+      `Cannot compute chunk.content_key. Expected a string, received ${typeof content}.`
+    );
+    return;
+  }
+
+  return `${kebabCase(content.slice(0, 32))}-${hash(content)}`;
+}

src/utilities/caching.js

@@ -0,0 +1,6 @@
+export { getCachedData, storeCache } from './caching'
+export { computeContentKey } from './computeContentKey'
+export { sanitizeContent } from './sanitizeContent'
+export { api } from './api'
+
+export { renderChunk } from './renderChunk.jsx'