remove use effect and add to doc preview

Author: Davy-c

src/cloud/components/DocPreview/DocPreviewRealtime.tsx

@@ -1,10 +1,5 @@
-import {
-  mdiCloudOffOutline,
-  mdiCloudSyncOutline,
-  mdiFileDocumentOutline,
-} from '@mdi/js'
+import { mdiFileDocumentOutline } from '@mdi/js'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import Button from '../../../design/components/atoms/Button'
 import Flexbox from '../../../design/components/atoms/Flexbox'
 import LoaderDocEditor from '../../../design/components/atoms/loaders/LoaderDocEditor'
 import styled from '../../../design/lib/styled'
@@ -27,10 +22,10 @@ import EditorToolbar from '../Editor/EditorToolbar'
 import EditorToolbarUpload from '../Editor/EditorToolbarUpload'
 import EditorToolButton from '../Editor/EditorToolButton'
 import cc from 'classcat'
-import WithTooltip from '../../../design/components/atoms/WithTooltip'
 import { useEffectOnUnmount } from '../../../lib/hooks'
 import { useDocEditor } from '../../lib/hooks/editor/docEditor'
 import { SerializedSubscription } from '../../interfaces/db/subscription'
+import SyncStatus from '../Topbar/SyncStatus'
 
 interface DocPreviewRealtimeProps {
   team: SerializedTeam
@@ -130,73 +125,6 @@ const DocPreviewRealtime = ({
     }
   }, [mode, editorRef])
 
-  useEffect(() => {
-    switch (connState) {
-      case 'disconnected':
-        setRenderHeader(() => (
-          <WithTooltip
-            tooltip={
-              <>
-                {translate(lngKeys.EditorReconnectDisconnected1)}
-                <br />
-                {translate(lngKeys.EditorReconnectDisconnected2)}
-              </>
-            }
-          >
-            <Button
-              iconPath={mdiCloudOffOutline}
-              variant='danger'
-              onClick={() => realtime.connect()}
-            >
-              {translate(lngKeys.EditorReconnectDisconnected)}
-            </Button>
-          </WithTooltip>
-        ))
-        break
-      case 'reconnecting':
-        setRenderHeader(() => (
-          <WithTooltip
-            tooltip={
-              <>
-                {translate(lngKeys.EditorReconnectAttempt1)}
-                <br />
-                {translate(lngKeys.EditorReconnectAttempt2)}
-              </>
-            }
-          >
-            <Button
-              iconPath={mdiCloudSyncOutline}
-              variant='danger'
-              disabled={true}
-            >
-              {translate(lngKeys.EditorReconnectAttempt)}
-            </Button>
-          </WithTooltip>
-        ))
-        break
-      case 'loaded':
-        setRenderHeader(() => (
-          <WithTooltip
-            tooltip={
-              <>
-                {translate(lngKeys.EditorReconnectSyncing1)}
-                <br />
-                {translate(lngKeys.EditorReconnectSyncing2)}
-              </>
-            }
-          >
-            <Button variant='secondary' disabled={true}>
-              {translate(lngKeys.EditorReconnectSyncing)}
-            </Button>
-          </WithTooltip>
-        ))
-        break
-      default:
-        setRenderHeader(() => null)
-        break
-    }
-  }, [connState, translate, setRenderHeader, realtime])
-
   useEffectOnUnmount(() => {
     setRenderHeader(() => null)
   })
@@ -222,6 +150,8 @@ const DocPreviewRealtime = ({
               getEmbed={getEmbed}
             />
           </StyledPreview>
+
+          <SyncStatus provider={realtime} connState={connState} />
         </StyledEditor>
       </Container>
     )
@@ -286,6 +216,7 @@ const DocPreviewRealtime = ({
             />
           </StyledPreview>
         </StyledEditor>
+        <SyncStatus provider={realtime} connState={connState} />
       </Container>
       {mode !== 'preview' && (
         <StyledBottomBar className='doc-preview__toolbar'>

src/cloud/components/Editor/index.tsx

@@ -158,8 +158,6 @@ const Editor = ({
       : 'preview'
   )
   const [editorContent, setEditorContent] = useState('')
-  const [showingConnectIssueMessage, setShowingShowingConnectIssueMessage] =
-    useState<boolean>(false)
   const docRef = useRef<string>('')
   const router = useRouter()
   const { state } = router
@@ -486,16 +484,6 @@ const Editor = ({
     })
   }, [openModal, onTemplatePickCallback])
 
-  useEffect(() => {
-    if (connState == 'reconnecting') {
-      setShowingShowingConnectIssueMessage(true)
-    } else if (connState == 'disconnected') {
-      setShowingShowingConnectIssueMessage(true)
-    } else {
-      setShowingShowingConnectIssueMessage(false)
-    }
-  }, [connState])
-
   const toggleScrollSync = useCallback(() => {
     setScrollSync(not)
   }, [])
@@ -1029,9 +1017,7 @@ const Editor = ({
             )}
           </Container>
         </EditorLayout>
-        {showingConnectIssueMessage && (
-          <SyncStatus provider={realtime} connState={connState} />
-        )}
+        <SyncStatus provider={realtime} connState={connState} />
       </ApplicationContent>
     </ApplicationPage>
   )

src/cloud/components/Topbar/SyncStatus.tsx

@@ -21,56 +21,60 @@ const SyncStatus = ({ provider, connState }: SyncStatusProps) => {
     switch (connState) {
       case 'reconnecting':
         return (
-          <div className={'sync__status__container_reconnecting'}>
-            <div className={'sync__status__header'}>
-              <Spinner variant={'warning'} size={20} />
-              <div className={'sync__status__header_text'}>Connecting..</div>
-            </div>
-            <div>
-              Changes will not be synced with the server until reconnection
+          <ConnectIssueContainer>
+            <div className={'sync__status__container_reconnecting'}>
+              <div className={'sync__status__header'}>
+                <Spinner variant={'warning'} size={20} />
+                <div className={'sync__status__header_text'}>Connecting..</div>
+              </div>
+              <div>
+                Changes will not be synced with the server until reconnection
+              </div>
             </div>
-          </div>
+          </ConnectIssueContainer>
         )
       case 'disconnected':
         return (
-          <div className={'sync__status__container_disconnected'}>
-            <div className={'sync__status__header'}>
-              <Icon
-                className={'sync__status__header_warn_color'}
-                path={mdiAlertOutline}
-                size={20}
-              />
-              <div className={'sync__status__header_text'}>
-                Please try reconnecting
+          <ConnectIssueContainer>
+            <div className={'sync__status__container_disconnected'}>
+              <div className={'sync__status__header'}>
+                <Icon
+                  className={'sync__status__header_warn_color'}
+                  path={mdiAlertOutline}
+                  size={20}
+                />
+                <div className={'sync__status__header_text'}>
+                  Please try reconnecting
+                </div>
               </div>
+              <div>
+                Edit session has expired. Changes will not be synced with the
+                server until reconnection.
+              </div>
+              <Button
+                className={'sync__status__reconnect_button'}
+                variant='warning'
+                onClick={reconnect}
+                size={'md'}
+              >
+                Reconnect
+              </Button>
             </div>
-            <div>
-              Edit session has expired. Changes will not be synced with the
-              server until reconnection.
-            </div>
-            <Button
-              className={'sync__status__reconnect_button'}
-              variant='warning'
-              onClick={reconnect}
-              size={'md'}
-            >
-              Reconnect
-            </Button>
-          </div>
+          </ConnectIssueContainer>
         )
       default:
-        return undefined
+        return null
     }
   }, [connState, reconnect])
 
-  return <ConnectIssueContainer>{content}</ConnectIssueContainer>
+  return content
 }
 
 const ConnectIssueContainer = styled.div`
   position: absolute;
   bottom: 24px;
   right: 46px;
-  z-index: 9999;
+  z-index: 1;
   width: 300px;
 
   background-color: ${({ theme }) => theme.colors.background.tertiary};