Merge pull request #120 from unfoldingWord/bugfix-klappy-multiple-load-content

Bugfix klappy multiple load content

Author: jincypjose

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gitea-react-toolkit",
-  "version": "2.0.2-rc.2",
+  "version": "2.0.2-rc.13",
   "license": "MIT",
   "description": "A Gitea API React Toolkit Component Library",
   "homepage": "https://gitea-react-toolkit.netlify.com/",
@@ -14,6 +14,7 @@
     "axios": "0.19.0",
     "axios-cache-adapter": "2.4.1",
     "base-64": "0.1.0",
+    "deep-equal": "^2.0.5",
     "jszip": "^3.5.0",
     "localforage": "1.7.3",
     "markdown-translatable": "1.3.1-rc.1",

src/components/file/useFile.js

@@ -9,12 +9,12 @@ import useDeepCompareEffect from 'use-deep-compare-effect';
 import { useDeepCompareCallback } from 'use-deep-compare';
 
 import {
-  getContentFromFile, saveFile, ensureFile, deleteFile,
+  saveFile, ensureFile, deleteFile,
 } from './helpers';
 import {
   FileCard, FileForm, useBlob, RepositoryContext,
 } from '..';
-import {fetchCatalogContent} from './dcsCatalogNextApis';
+import useFileContent from './useFileContent';
 
 function useFile({
   authentication,
@@ -37,6 +37,13 @@ function useFile({
   const { actions: { updateBranch }, config: repositoryConfig } = useContext(RepositoryContext);
 
   const config = _config || repositoryConfig;
+  const { state: { content, publishedContent } } = useFileContent({
+    authentication,
+    repository,
+    config,
+    file,
+    onLoadCache,
+  });
   const branch = repository && (repository.branch || repository.default_branch);
   const [deleted, setDeleted] = useState();
 
@@ -77,42 +84,29 @@ function useFile({
   const load = useDeepCompareCallback(async () => {
     if (config && repository && filepath) {
       const _file = await ensureFile({
-        filepath, defaultContent, authentication, config, repository, branch, onOpenValidation,
+        authentication,
+        branch,
+        config,
+        defaultContent,
+        filepath,
+        repository,
+        onOpenValidation,
       });
-
-      console.log("ensureFile:", _file);
-
-      let defaultCachedContentFile;
-      if (onLoadCache && _file && _file.html_url) {
-        defaultCachedContentFile = await onLoadCache({authentication, repository, branch, html_url: _file.html_url, file: _file});
-      }
-      
-      // console.log("GRT defaultContent", '|', defaultContent);
-      // console.log("GRT defaultCachedContent", '|', defaultCachedContentFile);
-
-      let content;
-      let _publishedContent;
-
-      if (defaultCachedContentFile && defaultCachedContentFile.content) {
-        // Load autosaved content:
-        content = defaultCachedContentFile.content;
-      } else {
-        // Get SERVER content: Overwrite cache:
-        content = await getContentFromFile(_file);
-
-        // Check catalog next:
-        const prodTag = repository.catalog?.prod?.branch_or_tag_name;
-        if ( prodTag ) {
-          _publishedContent = await fetchCatalogContent('unfoldingword', repository.name, prodTag, filepath, config);
-        }
-      }
-
+      // console.log("\nuseFile.load():", _file);
       update({
-        ..._file, branch, content, filepath: _file.path, publishedContent: _publishedContent,
+        ..._file,
+        branch,
+        filepath: _file.path,
       });
-    }
-  }, [config, repository, filepath, onLoadCache, ensureFile, update,
-      defaultContent, authentication, branch, onOpenValidation
+    };
+  }, [
+    authentication,
+    branch,
+    config,
+    defaultContent,
+    filepath,
+    repository,
+    update,
   ]);
 
   const createFile = useDeepCompareCallback(async ({
@@ -145,16 +139,16 @@ function useFile({
     update();
   }, [update, blobActions, onFilepath]);
 
-  const saveCache = useDeepCompareCallback(async (content) => {
+  const saveCache = useDeepCompareCallback(async (_content) => {
     if (onSaveCache) {
-      await onSaveCache({authentication, repository, branch, file, content});
+      await onSaveCache({authentication, repository, branch, file, content: _content});
     }
   }, [writeable, authentication, repository, branch, file, onSaveCache]);
 
-  const save = useDeepCompareCallback(async (content) => {
+  const save = useDeepCompareCallback(async (_content) => {
     //console.log("GRT save // will save file");
     await saveFile({
-      authentication, repository, branch, file, content,
+      authentication, repository, branch, file, content: _content,
     }).then(
       // Empty cache if user has saved this file
       // (save() will not happen for "OFFLINE" system files)
@@ -182,6 +176,7 @@ function useFile({
     const loadNew = (file && filepath && file.filepath !== filepath);
 
     if (notLoaded || loadNew) {
+      // console.log("useFile.useDeepCompareEffect(): notLoaded || loadNew", file);
       load();
     }
   }, [deleted, filepath, load, file]);
@@ -247,10 +242,12 @@ function useFile({
     } else {
       component = components.browse;
     }
-  }
+  };
+
+  const state = file && { ...file, content, publishedContent };
 
   return {
-    state: file,
+    state,
     stateValues: {isChanged},
     actions,
     component,

src/components/file/useFileContent.js

@@ -0,0 +1,92 @@
+import { useCallback, useState } from "react";
+import { useDeepCompareCallback } from "use-deep-compare";
+import useDeepCompareEffect from "use-deep-compare-effect";
+import deepEqual from "deep-equal";
+
+import { fetchCatalogContent } from "./dcsCatalogNextApis";
+import { getContentFromFile } from "./helpers";
+
+export default function useFileContent ({
+  authentication,
+  repository,
+  config,
+  file,
+  onLoadCache,
+}) {
+  const defaultState = {
+    file: undefined,
+    content: undefined,
+    publishedContent: undefined,
+  };
+  const [state, setState] = useState(defaultState);
+
+  const _onLoadCache = useDeepCompareCallback( async () => {
+    let cachedFile;
+    if (onLoadCache && file?.html_url) {
+      cachedFile = await onLoadCache({
+        authentication,
+        repository,
+        branch: file.branch,
+        html_url: file.html_url,
+        file: file
+      });
+    };
+    // console.log("useFileContent._onLoadCache():", cachedFile);
+    return cachedFile;
+  }, [
+    authentication,
+    repository,
+    file,
+  ]);
+
+  const _fetchCatalogContent = useDeepCompareCallback( async ({prodTag}) => {
+    const publishedContent = await fetchCatalogContent(
+      'unfoldingword',
+      repository.name,
+      prodTag,
+      file.filepath,
+      config,
+    );
+    // console.log("useFileContent._fetchCatalogContent():", publishedContent);
+    return publishedContent;
+  }, [
+    repository,
+    file,
+    config,
+  ]);
+
+  const load = useDeepCompareCallback( async () => {
+    if (file) {
+      const cachedFile = await _onLoadCache();
+      // Load autosaved content:
+      let content = cachedFile?.content;
+      let publishedContent;
+  
+      if (!content) content = await getContentFromFile(file);
+
+      if (!publishedContent) {
+        // Check catalog next:
+        const prodTag = repository?.catalog?.prod?.branch_or_tag_name;
+        if ( prodTag ) {
+          publishedContent = await _fetchCatalogContent({prodTag});
+        }
+      };
+      // console.log("\nuseFileContent.load()\n");
+      setState({ content, publishedContent });
+    };
+  }, [file, repository, _onLoadCache, _fetchCatalogContent]);
+
+  const reset = useCallback(() => {
+    setState(defaultState);
+  }, []);
+
+  useDeepCompareEffect(() => {
+    if (!file && state.file) reset();
+    if (state.file && !deepEqual(file, state.file)) reset();
+    if (file && !state.file) {
+      load();
+    };
+  }, [file, state.file, reset, load]);
+
+  return { state };
+};