fix: prend en compte le statut de la session collaborative (#1168)

front/src/components/collaborative/CollaborativeEditorStatus.jsx

@@ -9,7 +9,6 @@ import PropTypes from 'prop-types'
 import React, { useCallback } from 'react'
 import { StopCircle } from 'react-feather'
 import { useTranslation } from 'react-i18next'
-import { shallowEqual, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
 import { useMutation } from '../../hooks/graphql.js'
 import CollaborativeEditorWebSocketStatus from './CollaborativeEditorWebSocketStatus.jsx'
@@ -22,21 +21,12 @@ import styles from './CollaborativeEditorStatus.module.scss'
 export default function CollaborativeEditorStatus({
   articleId,
   websocketStatus,
-  collaborativeSessionCreatorId,
+  collaborativeSessionState,
 }) {
   const { t } = useTranslation()
   const mutation = useMutation()
   const { setToast } = useToasts()
   const history = useHistory()
-  const activeUser = useSelector(
-    (state) => ({
-      _id: state.activeUser._id,
-      email: state.activeUser.email,
-      displayName: state.activeUser.displayName,
-      username: state.activeUser.username,
-    }),
-    shallowEqual
-  )
 
   const {
     visible: collaborativeSessionEndVisible,
@@ -74,18 +64,24 @@ export default function CollaborativeEditorStatus({
           <CollaborativeEditorWriters />
         </div>
         <div className={styles.status}>
-          <CollaborativeEditorWebSocketStatus status={websocketStatus} />
+          <CollaborativeEditorWebSocketStatus
+            status={websocketStatus}
+            state={collaborativeSessionState}
+          />
         </div>
-        <Button
-          className={clsx(styles.button)}
-          type="error"
-          ghost
-          auto
-          scale={0.4}
-          onClick={handleConfirmCollaborativeSessionEnd}
-        >
-          <StopCircle /> End collaborative session
-        </Button>
+        {websocketStatus === 'connected' &&
+          collaborativeSessionState === 'started' && (
+            <Button
+              className={clsx(styles.button)}
+              type="error"
+              ghost
+              auto
+              scale={0.4}
+              onClick={handleConfirmCollaborativeSessionEnd}
+            >
+              <StopCircle /> End collaborative session
+            </Button>
+          )}
       </div>
       <GeistModal
         width="35rem"
@@ -114,5 +110,5 @@ export default function CollaborativeEditorStatus({
 CollaborativeEditorStatus.propTypes = {
   articleId: PropTypes.string.isRequired,
   websocketStatus: PropTypes.string.isRequired,
-  collaborativeSessionCreatorId: PropTypes.string.isRequired,
+  collaborativeSessionState: PropTypes.string.isRequired,
 }

front/src/components/collaborative/CollaborativeEditorWebSocketStatus.jsx

@@ -1,10 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Dot, Loading } from '@geist-ui/core'
+import { Dot } from '@geist-ui/core'
+import { Loader } from 'react-feather'
 
 import styles from './CollaborativeEditorWebSocketStatus.module.scss'
 
-export default function CollaborativeEditorWebSocketStatus({ status }) {
+export default function CollaborativeEditorWebSocketStatus({ status, state }) {
+  if (state !== 'started') {
+    return (
+      <Dot type="warning" className={styles.dot}>
+        Connecting
+        <Loader className={styles.loadingIndicator} />
+      </Dot>
+    )
+  }
   return (
     <>
       {status === 'connected' && (
@@ -19,13 +28,15 @@ export default function CollaborativeEditorWebSocketStatus({ status }) {
       )}
       {status === 'connecting' && (
         <Dot type="warning" className={styles.dot}>
-          Connecting <Loading />
+          Connecting
+          <Loader className={styles.loadingIndicator} />
         </Dot>
       )}
     </>
   )
 }
 
 CollaborativeEditorWebSocketStatus.propTypes = {
+  state: PropTypes.string.isRequired,
   status: PropTypes.string.isRequired,
 }

front/src/components/collaborative/CollaborativeEditorWebSocketStatus.module.scss

@@ -1,3 +1,28 @@
 .dot {
   font-size: 0.8rem !important;
+
+  :global {
+    .label {
+      display: flex;
+      gap: 0.25rem;
+    }
+  }
+}
+
+.loadingIndicator {
+  height: 1em;
+  width: 1em;
+  animation: rotation 2.5s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  flex-shrink: 0;
+}
+
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
 }

front/src/components/collaborative/CollaborativeTextEditor.jsx

@@ -50,6 +50,7 @@ export default function CollaborativeTextEditor({
   const connectingRef = useRef(false)
   const [dynamicStyles, setDynamicStyles] = useState('')
   const [websocketStatus, setWebsocketStatus] = useState('')
+  const [collaborativeSessionState, setCollaborativeSessionState] = useState('')
   const [yText, setYText] = useState(null)
   const [awareness, setAwareness] = useState(null)
   const { websocketEndpoint } = useSelector(
@@ -75,7 +76,9 @@ export default function CollaborativeTextEditor({
   const options = useMemo(
     () => ({
       automaticLayout: true,
-      readOnly: websocketStatus !== 'connected',
+      readOnly:
+        websocketStatus !== 'connected' ||
+        collaborativeSessionState !== 'started',
       contextmenu: websocketStatus === 'connected',
       autoClosingBrackets: 'never',
       wordBasedSuggestions: false,
@@ -143,8 +146,18 @@ export default function CollaborativeTextEditor({
     [setWebsocketStatus]
   )
 
+  const handleEditorDidMount = useCallback(
+    (editor) => {
+      editorRef.current = editor
+      new MonacoBinding(yText, editor.getModel(), new Set([editor]), awareness)
+    },
+    [yText, awareness]
+  )
+
   useEffect(() => {
-    if (connectingRef.current) return
+    if (connectingRef.current) {
+      return
+    }
     connectingRef.current = true
     const {
       awareness,
@@ -163,29 +176,19 @@ export default function CollaborativeTextEditor({
       handleUpdateArticleStructureAndStats({ text: yText.toString() })
     })
     yState.observe(function () {
+      setCollaborativeSessionState(yState.toString())
       onCollaborativeSessionStateUpdated({ state: yState.toString() })
     })
     setAwareness(awareness)
     setYText(yText)
     return () => {
-      try {
-        awareness.destroy()
-        wsProvider.disconnect()
-        wsProvider.destroy()
-      } catch (err) {
-        // try to disconnect...
-      }
+      connectingRef.current = false
+      awareness.destroy()
+      wsProvider.disconnect()
+      wsProvider.destroy()
     }
   }, [collaborativeSessionId, websocketEndpoint, writerInfo])
 
-  const handleEditorDidMount = useCallback(
-    (editor) => {
-      editorRef.current = editor
-      new MonacoBinding(yText, editor.getModel(), new Set([editor]), awareness)
-    },
-    [yText, awareness]
-  )
-
   useEffect(() => {
     const line = editorCursorPosition.lineNumber
     const editor = editorRef.current
@@ -204,6 +207,7 @@ export default function CollaborativeTextEditor({
       <style>{dynamicStyles}</style>
       <CollaborativeEditorStatus
         articleId={articleId}
+        collaborativeSessionState={collaborativeSessionState}
         websocketStatus={websocketStatus}
         collaborativeSessionCreatorId={collaborativeSessionCreatorId}
       />
@@ -212,7 +216,6 @@ export default function CollaborativeTextEditor({
         className={styles.editor}
         defaultLanguage="markdown"
         onMount={handleEditorDidMount}
-        on
       />
     </>
   )