move comment thread control up and trigger comment sidebar on location change

Author: ButteryCrumpet

src/cloud/components/molecules/Editor/index.tsx

@@ -91,6 +91,7 @@ import { getDocLinkHref } from '../../atoms/Link/DocLink'
 import throttle from 'lodash.throttle'
 import { useI18n } from '../../../lib/hooks/useI18n'
 import { lngKeys } from '../../../lib/i18n/types'
+import { parse } from 'querystring'
 
 type LayoutMode = 'split' | 'preview' | 'editor'
 
@@ -101,7 +102,6 @@ interface EditorProps {
   revisionHistory: SerializedRevision[]
   contributors: SerializedUser[]
   backLinks: SerializedDoc[]
-  thread?: string
 }
 
 interface EditorPosition {
@@ -124,7 +124,6 @@ const Editor = ({
   contributors,
   backLinks,
   revisionHistory,
-  thread,
 }: EditorProps) => {
   const { translate } = useI18n()
   const { currentUserPermissions, permissions } = usePage()
@@ -141,7 +140,8 @@ const Editor = ({
   )
   const [editorContent, setEditorContent] = useState('')
   const docRef = useRef<string>('')
-  const { state, push } = useRouter()
+  const router = useRouter()
+  const { state, push } = router
   const [shortcodeConvertMenu, setShortcodeConvertMenu] = useState<{
     pos: PositionRange
     cb: Callback
@@ -195,7 +195,16 @@ const Editor = ({
     userInfo,
   })
 
-  const [commentState, commentActions] = useCommentManagerState(doc.id, thread)
+  const [commentState, commentActions] = useCommentManagerState(doc.id)
+
+  useEffect(() => {
+    const { thread } = parse(router.search.slice(1))
+    const threadId = Array.isArray(thread) ? thread[0] : thread
+    if (threadId != null) {
+      commentActions.setMode({ mode: 'thread', thread: { id: threadId } })
+      setPreferences({ docContextMode: 'comment' })
+    }
+  }, [router, commentActions, setPreferences])
 
   const normalizedCommentState = useMemo(() => {
     if (commentState.mode === 'list_loading' || permissions == null) {

src/cloud/components/organisms/CommentManager.tsx

@@ -20,7 +20,7 @@ import { useI18n } from '../../lib/hooks/useI18n'
 import { lngKeys } from '../../lib/i18n/types'
 
 export type State =
-  | { mode: 'list_loading' }
+  | { mode: 'list_loading'; thread?: { id: string } }
   | { mode: 'list'; threads: Thread[]; filter?: (thread: Thread) => boolean }
   | { mode: 'thread_loading'; thread: Thread; threads: Thread[] }
   | { mode: 'thread'; thread: Thread; comments: Comment[]; threads: Thread[] }
@@ -31,7 +31,7 @@ export type State =
     }
 
 export type ModeTransition =
-  | { mode: 'thread'; thread: Thread }
+  | { mode: 'thread'; thread: { id: string } }
   | { mode: 'list'; filter?: (thread: Thread) => boolean }
   | {
       mode: 'new_thread'

src/cloud/components/organisms/DocPage/Edit.tsx

@@ -17,7 +17,6 @@ interface EditPageProps {
   contributors: SerializedUser[]
   revisionHistory: SerializedRevision[]
   backLinks: SerializedDoc[]
-  thread?: string
 }
 
 const EditPage = ({
@@ -27,7 +26,6 @@ const EditPage = ({
   contributors,
   revisionHistory,
   backLinks,
-  thread,
 }: EditPageProps) => {
   return (
     <StyledDocEditPage>
@@ -38,7 +36,6 @@ const EditPage = ({
         contributors={contributors}
         backLinks={backLinks}
         revisionHistory={revisionHistory}
-        thread={thread}
       />
     </StyledDocEditPage>
   )

src/cloud/components/organisms/DocPage/View.tsx

@@ -46,6 +46,7 @@ import { TopbarControlProps } from '../../../../shared/components/organisms/Topb
 import { getDocLinkHref } from '../../atoms/Link/DocLink'
 import { useI18n } from '../../../lib/hooks/useI18n'
 import { lngKeys } from '../../../lib/i18n/types'
+import { parse } from 'querystring'
 
 interface ViewPageProps {
   team: SerializedTeam
@@ -68,7 +69,8 @@ const ViewPage = ({
 }: ViewPageProps) => {
   const { preferences, setPreferences } = usePreferences()
   const { foldersMap, workspacesMap, loadDoc } = useNav()
-  const { push } = useRouter()
+  const router = useRouter()
+  const { push } = router
   const { currentUserIsCoreMember, permissions } = usePage()
   const { sendingMap, toggleDocBookmark } = useCloudApi()
   const {
@@ -119,6 +121,15 @@ const ViewPage = ({
 
   const [commentState, commentActions] = useCommentManagerState(doc.id)
 
+  useEffect(() => {
+    const { thread } = parse(router.search.slice(1))
+    const threadId = Array.isArray(thread) ? thread[0] : thread
+    if (threadId != null) {
+      commentActions.setMode({ mode: 'thread', thread: { id: threadId } })
+      setPreferences({ docContextMode: 'comment' })
+    }
+  }, [router, commentActions, setPreferences])
+
   const normalizedCommentState = useMemo(() => {
     if (commentState.mode === 'list_loading' || permissions == null) {
       return commentState

src/cloud/components/organisms/DocPage/index.tsx

@@ -22,6 +22,7 @@ import Application from '../../Application'
 import { SerializedUser } from '../../../interfaces/db/user'
 import { SerializedRevision } from '../../../interfaces/db/revision'
 import { useRouter } from '../../../lib/router'
+import { parse } from 'querystring'
 
 interface DocPageProps {
   doc: SerializedDocWithBookmark
@@ -36,7 +37,6 @@ const DocPage = ({
   contributors,
   backLinks,
   revisionHistory,
-  thread,
 }: DocPageProps) => {
   const {
     team,
@@ -164,7 +164,6 @@ const DocPage = ({
       contributors={contributors}
       backLinks={currentBacklinks}
       revisionHistory={revisionHistory}
-      thread={thread}
     />
   ) : (
     <ViewPage

src/cloud/lib/hooks/useCommentManagerState.ts

@@ -6,60 +6,20 @@ import {
   Actions,
   ModeTransition,
 } from '../../../cloud/components/organisms/CommentManager'
-import { useRouter } from '../../../cloud/lib/router'
-import { parse as parseQuery } from 'querystring'
 
-function useCommentManagerState(
-  docId: string,
-  initialThread?: string
-): [State, Actions] {
-  const location = useRouter()
+function useCommentManagerState(docId: string): [State, Actions] {
   const {
     observeDocThreads,
     observeComments,
     threadActions,
     commentActions,
   } = useComments()
   const [state, setState] = useState<State>({ mode: 'list_loading' })
-  const initialThreadRef = useRef(initialThread)
-
-  useEffect(() => {
-    initialThreadRef.current = initialThread
-  }, [initialThread])
-
-  useEffect(() => {
-    setState((prev) => {
-      if (prev.mode === 'list_loading') {
-        return prev
-      }
-
-      const { thread: threadId } = parseQuery(location.search.slice(1))
-      if (threadId == null) {
-        return prev
-      }
-
-      const thread = prev.threads.find((thread) => thread.id === threadId)
-      if (thread == null) {
-        return prev
-      }
-
-      return transitionState({ mode: 'thread', thread })(prev)
-    })
-  }, [location])
 
   useEffect(() => {
     setState({ mode: 'list_loading' })
     return observeDocThreads(docId, (threads) => {
       setState(updateThreads(threads))
-      if (initialThreadRef.current !== '') {
-        setState(
-          transitionState({
-            mode: 'thread',
-            thread: { id: initialThreadRef.current } as Thread,
-          })
-        )
-        initialThreadRef.current = ''
-      }
     })
   }, [docId, observeDocThreads])
 
@@ -121,12 +81,19 @@ function useCommentManagerState(
 function updateThreads(threads: Thread[]) {
   return (oldState: State): State => {
     switch (oldState.mode) {
-      case 'list_loading': {
-        return { mode: 'list', threads }
-      }
       case 'list': {
         return { mode: 'list', threads }
       }
+      case 'list_loading': {
+        if (oldState.thread == null) {
+          return { mode: 'list', threads }
+        }
+        const threadId = oldState.thread.id
+        const updated = threads.find((thread) => thread.id === threadId)
+        return updated != null
+          ? { mode: 'thread_loading', thread: updated, threads }
+          : { mode: 'list', threads }
+      }
       case 'thread_loading': {
         const updated = threads.find(
           (thread) => thread.id === oldState.thread.id
@@ -166,6 +133,9 @@ function updateComments(comments: Comment[]) {
 function transitionState(transition: ModeTransition) {
   return (state: State): State => {
     if (state.mode === 'list_loading') {
+      if (transition.mode === 'thread') {
+        return { ...state, thread: transition.thread }
+      }
       return state
     }