fix: prend en compte le statut de la session collaborative

Bloque l'édition et le fait de pouvoir quitter la session collaborative (et donc de sauvegarder le contenu de l'éditeur texte) tant que la session collaborative n'est pas démarrée.

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
       />
     </>
   )