Merge pull request #895 from unfoldingWord/zach-867-autoSave-WIP

autosave wip

Author: ancientTexts-net

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tc-create-app",
   "homepage": "https://create.translationcore.com/",
-  "version": "1.3.0-rc.4",
+  "version": "1.4.0-rc.1",
   "license": "MIT",
   "private": false,
   "bugs": {
@@ -16,6 +16,7 @@
     "styleguide:build": "styleguidist build && mv styleguide build",
     "start": "bash -c \"source ./scripts/set-env.sh && rescripts start\"",
     "build": "bash -c \"source ./scripts/set-env.sh && rescripts build && yarn styleguide:build\"",
+    "publishDev": "bash -c \"source ./scripts/set-env.sh && rescripts build && yarn styleguide:build && netlify deploy\"",
     "electron:build": "react-scripts build",
     "deploy": "yarn build && netlify deploy",
     "cypress:run": "NODE_ENV=test cypress run",
@@ -32,19 +33,19 @@
     "@material-ui/lab": "^4.0.0-alpha.35",
     "@material-ui/styles": "^4.11.3",
     "axios": "^0.21.0",
-    "datatable-translatable": "0.11.1-3.rc-1",
+    "datatable-translatable": "0.11.13.rc-4",
     "deep-freeze": "^0.0.1",
     "eslint-plugin-test-selectors": "^1.3.0",
-    "gitea-react-toolkit": "1.9.3",
+    "gitea-react-toolkit": "1.11.1-rc.1",
     "lodash.isequal": "^4.5.0",
-    "markdown-translatable": "1.3.1",
+    "markdown-translatable": "1.3.1-rc.1",
     "react": "^16.14.0",
     "react-beforeunload": "^2.5.1",
     "react-dom": "^16.12.0",
     "react-headroom": "^3.0.0",
     "react-select": "^4.1.0",
     "react-waypoint": "^9.0.2",
-    "scripture-resources-rcl": "4.1.6",
+    "scripture-resources-rcl": "4.1.9-rc.1",
     "use-deep-compare-effect": "^1.3.1",
     "usfm-js": "^2.1.0",
     "uw-content-validation": "2.1.6",

public/build_number

@@ -1 +1 @@
-73-4c6c391
+73-27a5017

src/App.js

@@ -17,6 +17,8 @@ import {
   loadState,
   loadAuthentication,
   saveAuthentication,
+  loadFileCache,
+  saveFileCache
 } from './core/persistence';
 
 import Workspace from './Workspace';
@@ -68,6 +70,24 @@ function AppComponent() {
     }
     return notices;
   }
+  
+  const _onLoadCache = async ({authentication, repository, branch, html_url}) => {
+    console.log("tcc // _onLoadCache", html_url);
+
+    if (html_url)
+    {
+      return await loadFileCache(html_url);
+    }
+  }
+  
+  const _onSaveCache = ({authentication, repository, branch, file, content}) => {
+    console.log("tcc // _onSaveCache");
+    console.log(file);
+
+    if (file) {
+      saveFileCache(file, content);
+    }
+  };
 
   const handleClose = useCallback( () => {
     setCriticalErrors([]);
@@ -149,6 +169,8 @@ function AppComponent() {
                 filepath={filepath}
                 onFilepath={setFilepath}
                 onOpenValidation={_onOpenValidation}
+                onLoadCache={_onLoadCache}
+                onSaveCache={_onSaveCache}
                 onConfirmClose={_onConfirmClose}
               >
               {

src/components/files-header/FilesHeader.js

@@ -45,8 +45,8 @@ function FilesHeader({
       style={style}
     />
   ), [classes.header]);
-  const sourceBranch = sourceRepository.branch || sourceRepository.default_branch;
-  const targetBranch = targetRepository.branch || targetRepository.default_branch;
+  const sourceBranch = sourceRepository?.branch || sourceRepository?.default_branch;
+  const targetBranch = targetRepository?.branch || targetRepository?.default_branch;
 
   let sourceCompareLink, targetCompareLink;
   const sourceLanguage = getLanguage({ 

src/components/translatable/Translatable.js

@@ -105,6 +105,10 @@ function Translatable() {
       async (content) => {
         setSavingTargetFileContent(content);
 
+        // DEBUG
+        console.log("targetFile");
+        console.log(targetFile);
+
         try {
           await targetFileActions.save(content);
         } catch (error) {
@@ -118,6 +122,14 @@ function Translatable() {
         }
       }
     );
+
+    const autoSaveOnEdit = (
+      async (content) => {
+        console.log("tC Create / autosave", targetFile, content);
+        targetFileActions.saveCache(content);
+      }
+    );
+
     if (
       filepath &&
       sourceFile &&
@@ -132,13 +144,13 @@ function Translatable() {
           onTranslation: saveOnTranslation,
           onContentIsDirty: setContentIsDirty,
         };
-        _translatable = <MarkdownContextProvider><MarkDownTranslatable {...translatableProps} /></MarkdownContextProvider>;
+        _translatable = <MarkdownContextProvider><MarkDownTranslatable {...translatableProps} onEdit={autoSaveOnEdit} /></MarkdownContextProvider>;
       } else if (sourceFile.filepath.match(/^tq_...\.tsv$/)) {
-        _translatable = <TranslatableTqTSV onSave={saveOnTranslation} onContentIsDirty={setContentIsDirty} />;
+        _translatable = <TranslatableTqTSV onSave={saveOnTranslation} onEdit={autoSaveOnEdit} onContentIsDirty={setContentIsDirty} />;
       } else if (sourceFile.filepath.match(/^twl_...\.tsv$/)) {
-        _translatable = <TranslatableTwlTSV onSave={saveOnTranslation} onContentIsDirty={setContentIsDirty} />;
+        _translatable = <TranslatableTwlTSV onSave={saveOnTranslation} onEdit={autoSaveOnEdit} onContentIsDirty={setContentIsDirty} />;
       } else if (sourceFile.filepath.match(/\.tsv$/)) {
-        _translatable = <TranslatableTSV onSave={saveOnTranslation} onContentIsDirty={setContentIsDirty} />;
+        _translatable = <TranslatableTSV onSave={saveOnTranslation} onEdit={autoSaveOnEdit} onContentIsDirty={setContentIsDirty} />;
       } else {
         _translatable = <h3 style={{ 'textAlign': 'center' }} >Unsupported File. Please select .md or .tsv files.</h3>;
       }
@@ -150,6 +162,11 @@ function Translatable() {
     scrollToTop();
   }, [filepath, scrollToTop]);
 
+  console.log("targetFile");
+  console.log(targetFile);
+  console.log("targetRepository");
+  console.log(targetRepository);
+
   const filesHeader = targetFile && targetRepository && (
     <FilesHeader
       sourceRepository={sourceRepository}

src/components/translatable/TranslatableTSV.js

@@ -34,7 +34,7 @@ const _config = {
   ],
 };
 
-function TranslatableTSVWrapper({ onSave, onContentIsDirty }) {
+function TranslatableTSVWrapper({ onSave, onEdit, onContentIsDirty }) {
   // manage the state of the resources for the provider context
   const [resources, setResources] = useState([]);
   const [open, setOpen] = React.useState(false);
@@ -184,9 +184,10 @@ function TranslatableTSVWrapper({ onSave, onContentIsDirty }) {
     _config.rowHeader = rowHeader;
     return (
       <DataTable
-        sourceFile={sourceFile.content}
-        targetFile={targetFile.content}
+        sourceFile={sourceFile && sourceFile.content}
+        targetFile={targetFile && targetFile.content}
         onSave={onSave}
+        onEdit={onEdit}
         onValidate={onValidate}
         onContentIsDirty={onContentIsDirty}
         delimiters={delimiters}
@@ -195,7 +196,7 @@ function TranslatableTSVWrapper({ onSave, onContentIsDirty }) {
         options={options}
       />
     );
-  }, [sourceFile.content, targetFile.content, onSave, onValidate, onContentIsDirty, generateRowId, options, rowHeader]);
+  }, [sourceFile, targetFile, onSave, onEdit, onValidate, onContentIsDirty, generateRowId, options, rowHeader, ]);
 
   return (
     <>

src/core/TargetFile.context.js

@@ -15,7 +15,7 @@ function TargetFileContextProvider({
     } = {},
   } = useContext(AppContext);
 
-  const { state: sourceFile, stateValues: sourceStateValues } = useContext(FileContext) || {};
+  const { state: sourceFile, stateValues: sourceStateValues, actions: sourceFileActions } = useContext(FileContext) || {};
 
   const appContext = useContext(AppContext);
   const sourceContext = useContext(FileContext);
@@ -53,6 +53,10 @@ function TargetFileContextProvider({
     onFilepath: setFilepath,
     defaultContent: _defaultContent,
     onOpenValidation: onOpenValidation,
+    // Pass cache actions from the app's FileContext (happens to be SOURCE).
+    // Sharing actions allows the app to use onCacheChange events.
+    onLoadCache: sourceFileActions.onLoadCache,
+    onSaveCache: sourceFileActions.onSaveCache,
     onConfirmClose: null,
   });
 

src/core/persistence.js

@@ -11,6 +11,11 @@ export const loadState = async (key) => {
   return value;
 };
 
+export const loadValue = async (store, key) => {
+  let value = await store.getItem(key);
+  return value;
+};
+
 export const saveState = async (key, value) => {
   let response;
 
@@ -22,6 +27,17 @@ export const saveState = async (key, value) => {
   return response;
 };
 
+export const saveKeyValue = async (store, key, value) => {
+  let response;
+
+  if (value === null || value === undefined) {
+    response = await store.removeItem(key);
+  } else {
+    response = await store.setItem(key, value);
+  }
+  return response;
+};
+
 export const loadAuthentication = async () => {
   let _authentication = await loadState('authentication');
 
@@ -37,3 +53,37 @@ export const loadAuthentication = async () => {
 export const saveAuthentication = async (authentication) => {
   saveState('authentication', authentication);
 };
+
+const cacheStore = localforage.createInstance({
+  driver: [localforage.INDEXEDDB],
+  name: `${appPackage.name}-cache-store`,
+});
+
+export const saveFileCache = async (file, content) => {
+  console.log("tcc saveFileCache", file, content);
+
+  let response;
+  const key = file.html_url;
+
+  const cachedContent = {
+    html_url: file.html_url,
+    filepath: file.filepath,
+    sha: file.sha,
+    timestamp: new Date(),
+    content: content
+  };
+
+  if (content === null || content === undefined) {
+    console.log("tcc saveFileCache // REMOVING", file, content);
+    response = await cacheStore.removeItem(key);
+  } else {
+    response = await cacheStore.setItem(key, cachedContent);
+  }
+  return response;
+};
+
+export const loadFileCache = async (html_url) => {
+  const cachedFile = await loadValue(cacheStore, html_url);
+  console.log("tc create loadCacheTargetFile", html_url, cachedFile);
+  return cachedFile;
+};

yarn.lock

@@ -5442,14 +5442,14 @@ data-urls@^1.0.0, data-urls@^1.1.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
-datatable-translatable@0.11.11:
-  version "0.11.11"
-  resolved "https://registry.yarnpkg.com/datatable-translatable/-/datatable-translatable-0.11.11.tgz#54a0c200e6bb8570fa52decf8ec71fec6cab7e86"
-  integrity sha512-QfLQh//qHvRhZkbcGn2MEaPBFWRsTGwNZdSnO8aK7tw/M0ttQFU8mIyhAWcCfdyyypy56Vh7KYxBOXHwOwARDw==
+datatable-translatable@0.11.13.rc-4:
+  version "0.11.1-3.rc-4"
+  resolved "https://registry.yarnpkg.com/datatable-translatable/-/datatable-translatable-0.11.1-3.rc-4.tgz#f29bc2b912ceaed11f8387d11db4376e85027f9b"
+  integrity sha512-XzmS4XkI6a3C4n+1HJhW10kL1eohHjHlohzzyw5USFbhaH9MgkrHM+aYq/yw9eQFUBExaOJBZThpCxygrMXW9A==
   dependencies:
     deep-freeze "^0.0.1"
     lodash.isequal "^4.5.0"
-    markdown-translatable "1.3.1"
+    markdown-translatable "1.3.1-rc.1"
     mui-datatables "3.3.1"
     use-deep-compare-effect "^1.3.1"
 
@@ -7557,34 +7557,18 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
-gitea-react-toolkit@1.6.4:
-  version "1.6.4"
-  resolved "https://registry.yarnpkg.com/gitea-react-toolkit/-/gitea-react-toolkit-1.6.4.tgz#43ef60643c4015ed106d3dbe009cfb11c08a15eb"
-  integrity sha512-xSL//jpDh7A/Uqxat2bVMT+4fNp2oGi9N6kSpN57YML1l134rgIKJ26/Rhiamk8Sg3ni2fwTw2FMxADg4YibFQ==
+gitea-react-toolkit@1.11.1-rc.1:
+  version "1.11.1-rc.1"
+  resolved "https://registry.yarnpkg.com/gitea-react-toolkit/-/gitea-react-toolkit-1.11.1-rc.1.tgz#05f34898cb4a20d569742b43da2a92d817d1a97e"
+  integrity sha512-y4tsFuUe2veQgIGpvAlnj/0aNGY9EXDWp+51tIWnhSONC3nS7qpBYMwHJk4BI+vnjrnAr9ObT1gxtLnQIbt1uQ==
   dependencies:
     awesome-debounce-promise "2.1.0"
     axios "0.19.0"
     axios-cache-adapter "2.4.1"
     base-64 "0.1.0"
     jszip "^3.5.0"
     localforage "1.7.3"
-    markdown-translatable "1.2.16"
-    prop-types "15.7.2"
-    use-deep-compare-effect "^1.3.1"
-    utf8 "3.0.0"
-
-gitea-react-toolkit@1.9.3:
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/gitea-react-toolkit/-/gitea-react-toolkit-1.9.3.tgz#0f1467087fbb814aa68f6f6bc695407c76cd3966"
-  integrity sha512-JubGD8xmLFTSa4unszKIohVxq/6N04mISkA7XekyuPhH1Bm3GBBScETO5zUyZD2x7YeOnUyqCo4lBNKS/6HD9Q==
-  dependencies:
-    awesome-debounce-promise "2.1.0"
-    axios "0.19.0"
-    axios-cache-adapter "2.4.1"
-    base-64 "0.1.0"
-    jszip "^3.5.0"
-    localforage "1.7.3"
-    markdown-translatable "1.3.1"
+    markdown-translatable "1.3.1-rc.1"
     prop-types "15.7.2"
     use-deep-compare-effect "^1.3.1"
     utf8 "3.0.0"
@@ -10602,24 +10586,10 @@ markdown-to-jsx@^6.11.4:
     prop-types "^15.6.2"
     unquote "^1.1.0"
 
-markdown-translatable@1.2.16:
-  version "1.2.16"
-  resolved "https://registry.yarnpkg.com/markdown-translatable/-/markdown-translatable-1.2.16.tgz#048624bb4762370db30030c4d0265b721c54f7e8"
-  integrity sha512-miTzfgoCCFwodkNN9EuUlGg2HoKZbJlYt1BqbqsfpT2jbXbu7jMPVB4d+Jj7wh3wyNSJzON4GqV4X90ke6Gt1w==
-  dependencies:
-    deep-freeze "^0.0.1"
-    md5 "^2.2.1"
-    prop-types "^15.7.2"
-    react-headroom "^3.1.0"
-    react-markdown "4.0.6"
-    showdown "^1.9.1"
-    turndown "^7.0.0"
-    turndown-plugin-gfm "^1.0.2"
-
-markdown-translatable@1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/markdown-translatable/-/markdown-translatable-1.3.1.tgz#29393f8650be38885c7991f2e2e661bbe9d000ae"
-  integrity sha512-oZieaVOCjxZISyGDvcpb3XsJsnPvKd4xCULFQawQ/L395EwGHFERG6gCH65b3w3HjkLEWhdPknWf1BLK6Mu6Tg==
+markdown-translatable@1.3.1-rc.1:
+  version "1.3.1-rc.1"
+  resolved "https://registry.yarnpkg.com/markdown-translatable/-/markdown-translatable-1.3.1-rc.1.tgz#498a264d544f87511465ae06dd454565be1daabb"
+  integrity sha512-Cn6GFYHZTAQOBy+XCtweOzDVMmshTjIgd2z9oex9DlNWVqlHO54yEvXduFg4YOl4qgTxkdeH+i3Z3VA+01d71w==
   dependencies:
     deep-freeze "^0.0.1"
     md5 "^2.2.1"
@@ -14468,16 +14438,16 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
-scripture-resources-rcl@4.1.6:
-  version "4.1.6"
-  resolved "https://registry.yarnpkg.com/scripture-resources-rcl/-/scripture-resources-rcl-4.1.6.tgz#3b173c84994055c4d042ae6e39e3827179cc98c6"
-  integrity sha512-VISwN0+DYKA9E4eaQmFeXeP9IcpHmRK/Db6kU2P4Xdiosta8ZBjsTroRHJoWUEggCNpouYJlIoP9Yn7vMx6I1w==
+scripture-resources-rcl@4.1.9-rc.1:
+  version "4.1.9-rc.1"
+  resolved "https://registry.yarnpkg.com/scripture-resources-rcl/-/scripture-resources-rcl-4.1.9-rc.1.tgz#ef9cd5c8ec8dd8d6af67fd9175410e8260153703"
+  integrity sha512-UTUQKWgfBS76CBsfClmpbgYU48CCufizxcpSpeI3A7eRKJUM31qSB+losGUQRICD2gFq6JuMB/Jrodr1bCGrLw==
   dependencies:
     deep-freeze "^0.0.1"
-    gitea-react-toolkit "1.6.4"
+    gitea-react-toolkit "1.11.1-rc.1"
     js-yaml-parser "^1.0.0"
     lodash "^4.17.15"
-    markdown-translatable "1.2.16"
+    markdown-translatable "1.3.1-rc.1"
     nyc "^15.0.0-beta.3"
     prop-types "^15.7.2"
     react-waypoint "^9.0.2"