Solve race condition on update branch (#1571)

* solving race condition

* fixed effect dep

* ensure branch check after save

public/build_number

@@ -1 +1 @@
-251-fcff0e4
+254-bb7a029

src/components/branch-merger/hooks/useBranchMerger.js

@@ -65,8 +65,13 @@ export default function useBranchMerger({ server, owner, repo, userBranch, token
   const checkUpdateStatus = useCallback(() => {
     setLoadingUpdate(true);
     const setter = setUpdateStatus;
-    const handler = checkUpdate
-    return runMergeHandler({setter,handler,params}).then(r => { setLoadingUpdate(false);  return r})
+    const handler = checkUpdate;
+    console.log("branch-merger: started checking update");
+    return runMergeHandler({setter,handler,params}).then(r => { 
+      setLoadingUpdate(false);
+      console.log("branch-merger: finished checking update");
+      return r
+    })
   },[params,runMergeHandler])
 
   /**

src/components/translatable/Translatable.js

@@ -78,7 +78,10 @@ function Translatable() {
       } else if (filepath.match(/\.tsv$/)) {
         console.log('TSV file selected');
         const onSave = async function (...args) {
-          return await saveTranslation(...args);
+          console.log("branch-merger: started saving");
+          const saved = await saveTranslation(...args);
+          console.log("branch-merger: finished saving");
+          return saved;
         }
         const onEdit = function (...args) {
           autoSaveOnEdit(...args);

src/components/translatable/TranslatableTSV.js

@@ -137,7 +137,7 @@ export default function TranslatableTSV({
     return _config;
   }, [columnNames, rowHeader]);
 
-  const updateButtonProps = useContentUpdateProps();
+  const updateButtonProps = useContentUpdateProps({isSaving});
   const {
     isErrorDialogOpen,
     onCloseErrorDialog,

src/hooks/useContentUpdateProps.js

@@ -2,7 +2,7 @@ import { useContext, useEffect, useMemo, useState } from 'react'
 import { AppContext } from '../App.context';
 import { BranchMergerContext } from '../components/branch-merger/context/BranchMergerProvider';
 
-export function useContentUpdateProps({isLoading: _isLoading = false} = {}) {
+export function useContentUpdateProps({isLoading: _isLoading = false, isSaving = false} = {}) {
   const [isLoading, setIsLoading] = useState(_isLoading);
   const [isErrorDialogOpen,setIsErrorDialogOpen] = useState(false);
 
@@ -20,18 +20,16 @@ export function useContentUpdateProps({isLoading: _isLoading = false} = {}) {
   const loadingProps = { color: loadingUpdate ? "primary" : "secondary" };
 
   const { load: loadTargetFile } = targetFileHook.actions || {};
-  const { publishedContent } = targetFileHook.state || {};
 
   useEffect(() => {
-    /* publishedContent is undefined when the content is being saved
-    and an empty string when the content has finished saving. */
-    if(publishedContent !== undefined) {
-      setIsLoading(false);
-    } else {
+    if(isSaving & !isLoading) {
       setIsLoading(true);
-      checkUpdateStatus(); //check after content is being saved and reloaded
     }
-  },[publishedContent, checkUpdateStatus])
+    if(!isSaving & isLoading) {
+      checkUpdateStatus();
+      setIsLoading(false);
+    }
+  },[isSaving,isLoading,checkUpdateStatus])
 
   const  {conflict,mergeNeeded,error,message,pullRequest} = updateStatus
   const pending = mergeNeeded || conflict