refactor(CollabEditor): get ydoc versions in CollabHistory when modal…

… opened - Fix when no snapshots user can edit document in CollabHistory - Add no histories translation
cofacts · Sep 13, 2023 · a09b2e9 · a09b2e9
1 parent 23fb1a5
commit a09b2e9
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 80 deletions.
diff --git a/components/Collaborate/CollabEditor.js b/components/Collaborate/CollabEditor.js
@@ -21,8 +21,6 @@ import useCurrentUser from 'lib/useCurrentUser';
 import PlaceholderPlugin from './Placeholder';
 import getConfig from 'next/config';
 import CollabHistory from './CollabHistory';
-import gql from 'graphql-tag';
-import { useQuery } from '@apollo/react-hooks';
 
 const {
   publicRuntimeConfig: { PUBLIC_COLLAB_SERVER_URL },
@@ -83,17 +81,6 @@ const colors = [
 
 const color = colors[Math.floor(Math.random() * colors.length)];
 
-const YDOC_VERSIONS_QUERY = gql`
-  query GetYdocVersions($id: String!) {
-    GetYdoc(id: $id) {
-      versions {
-        createdAt
-        snapshot
-      }
-    }
-  }
-`;
-
 const Editor = ({ provider, currentUser, className, innerRef, onUnmount }) => {
   useEffect(() => {
     // console.log('editor mount');
@@ -152,14 +139,6 @@ const CollabEditor = ({ article }) => {
   // onTranscribe setup provider for both Editor and CollabHistory to use.
   // And, to avoid duplicated connection, provider will be destroyed(close connection) when Editor unmounted.
   const [provider, setProvider] = useState(null);
-  const { loading, data: getYdocData, refetch } = useQuery(
-    YDOC_VERSIONS_QUERY,
-    {
-      variables: { id: article.id },
-      ssr: false, // No need to fetch on server
-    }
-  );
-  const versionList = getYdocData?.GetYdoc?.versions || [];
 
   const onTranscribe = () => {
     if (!currentUser) {
@@ -208,10 +187,6 @@ const CollabEditor = ({ article }) => {
       // TODO: listen textChanged event?
       article.text = text;
     }
-
-    // refetch to get latest versionList
-    refetch({ id: article.id });
-
     setShowEditor(false);
   };
 
@@ -263,12 +238,8 @@ const CollabEditor = ({ article }) => {
                 {t`Edit`}
               </Button>
             ) : (
-              isSynced &&
-              !loading && (
-                <CollabHistory
-                  ydoc={provider.document}
-                  versionList={versionList}
-                />
+              isSynced && (
+                <CollabHistory ydoc={provider.document} docName={article.id} />
               )
             )}
           </>

diff --git a/components/Collaborate/CollabHistory.js b/components/Collaborate/CollabHistory.js
@@ -9,6 +9,19 @@ import { Button, Modal, Box, Typography } from '@material-ui/core';
 import { ToggleButtonGroup, ToggleButton } from '@material-ui/lab';
 import { makeStyles } from '@material-ui/core/styles';
 import CloseIcon from '@material-ui/icons/Close';
+import gql from 'graphql-tag';
+import { useQuery } from '@apollo/react-hooks';
+
+const YDOC_VERSIONS_QUERY = gql`
+  query GetYdocVersions($id: String!) {
+    GetYdoc(id: $id) {
+      versions {
+        createdAt
+        snapshot
+      }
+    }
+  }
+`;
 
 const useStyles = makeStyles(theme => ({
   prosemirrorEditor: {
@@ -107,35 +120,31 @@ const Versions = ({ editorView, versionList, onSelect }) => {
   return (
     <>
       <Typography variant="h6">{t`Versions`}</Typography>
-      {versionList.length > 0 ? (
-        <ToggleButtonGroup
-          orientation="vertical"
-          value={selectedVersion}
-          exclusive
-          onChange={toggleChanged}
-          style={{ overflow: 'auto' }}
-        >
-          {versionList.map((v, i) => {
-            // list version in reverse order
-            const reverseIdx = versionList.length - 1 - i;
-            const version = versionList[reverseIdx];
-
-            return (
-              <ToggleButton key={reverseIdx} value={reverseIdx}>
-                {new Date(version.createdAt).toLocaleString()}
-              </ToggleButton>
-            );
-          })}
-        </ToggleButtonGroup>
-      ) : (
-        <div>No snapshots..</div>
-      )}
+      <ToggleButtonGroup
+        orientation="vertical"
+        value={selectedVersion}
+        exclusive
+        onChange={toggleChanged}
+        style={{ overflow: 'auto' }}
+      >
+        {versionList.map((v, i) => {
+          // list version in reverse order
+          const reverseIdx = versionList.length - 1 - i;
+          const version = versionList[reverseIdx];
+
+          return (
+            <ToggleButton key={reverseIdx} value={reverseIdx}>
+              {new Date(version.createdAt).toLocaleString()}
+            </ToggleButton>
+          );
+        })}
+      </ToggleButtonGroup>
     </>
   );
 };
 
 const CustomModalContent = forwardRef(function CustomModalContent(
-  { ydoc, onClose, versionList },
+  { ydoc, docName, onClose },
   ref
 ) {
   const editor = useRef(ref);
@@ -149,6 +158,13 @@ const CustomModalContent = forwardRef(function CustomModalContent(
     setEditorLoaded(true);
   };
 
+  const { loading, data: getYdocData } = useQuery(YDOC_VERSIONS_QUERY, {
+    variables: { id: docName },
+    fetchPolicy: 'network-only',
+    ssr: false, // No need to fetch on server
+  });
+  const versionList = getYdocData?.GetYdoc?.versions || [];
+
   const [state, setState] = useProseMirror({
     schema,
     plugins: [
@@ -162,28 +178,38 @@ const CustomModalContent = forwardRef(function CustomModalContent(
   return (
     <>
       <Box className={classes.modal}>
-        <Box className={classes.modalSideBar}>
-          {/* show Versions after editorLoaded to ensure default snapshot rendered correctly */}
-          {editorLoaded && (
-            <Versions
-              editorView={editor.current.view}
-              ydoc={ydoc}
-              onSelect={version =>
-                setVersionTitle(new Date(version.createdAt).toLocaleString())
-              }
-              versionList={versionList}
-            />
-          )}
-        </Box>
-        <Box className={classes.modalMain}>
-          <Typography variant="h6">{t`Difference between version ${versionTitle} and its previous version`}</Typography>
-          <ProseMirror
-            ref={editor}
-            state={state}
-            onChange={setState}
-            className={classes.prosemirrorEditor}
-          />
-        </Box>
+        {loading ? (
+          <div>{t`Loading...`}</div>
+        ) : versionList.length > 0 ? (
+          <>
+            <Box className={classes.modalSideBar}>
+              {/* show Versions after editorLoaded to ensure default snapshot rendered correctly */}
+              {editorLoaded && (
+                <Versions
+                  editorView={editor.current.view}
+                  ydoc={ydoc}
+                  versionList={versionList}
+                  onSelect={version =>
+                    setVersionTitle(
+                      new Date(version.createdAt).toLocaleString()
+                    )
+                  }
+                />
+              )}
+            </Box>
+            <Box className={classes.modalMain}>
+              <Typography variant="h6">{t`Difference between version ${versionTitle} and its previous version`}</Typography>
+              <ProseMirror
+                ref={editor}
+                state={state}
+                onChange={setState}
+                className={classes.prosemirrorEditor}
+              />
+            </Box>
+          </>
+        ) : (
+          <div>{t`No histories...`}</div>
+        )}
         <CloseIcon className={classes.modalClose} onClick={onClose} />
       </Box>
     </>
@@ -192,9 +218,9 @@ const CustomModalContent = forwardRef(function CustomModalContent(
 
 /**
  * @param {Y.Doc} ydoc
- * @param {Array<{snapshot: string, createdAt: string}>} versionList
+ * @param {String} docName - Used to query versionList
  */
-const CollabHistory = ({ ydoc, versionList }) => {
+const CollabHistory = ({ ydoc, docName }) => {
   const [open, setOpen] = useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
@@ -214,8 +240,8 @@ const CollabHistory = ({ ydoc, versionList }) => {
         <Modal open={open} onClose={handleClose}>
           <CustomModalContent
             ydoc={ydoc}
-            versionList={versionList}
             onClose={handleClose}
+            docName={docName}
           />
         </Modal>
       </div>

diff --git a/i18n/zh_TW.po b/i18n/zh_TW.po
@@ -2551,6 +2551,10 @@ msgstr "版本 ${ versionTitle } 與上一個版本的差異"
 msgid "History"
 msgstr "歷史紀錄"
 
+#: components\Collaborate\CollabHistory.js:211
+msgid "No histories..."
+msgstr "尚無歷史紀錄"
+
 #: pages\index.js:29
 msgctxt "site title"
 msgid "Cofacts"