refactor: Simplify <Editor> with hooks

src/components/notes/editor-view.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useEffect } from 'react'
+import React, { useCallback, useRef, useEffect, useMemo } from 'react'
 
 import { Editor, WithEditorActions } from '@atlaskit/editor-core'
 
@@ -17,7 +17,6 @@ function EditorView(props) {
   const {
     defaultValue,
     onTitleChange,
-    onContentChange,
     defaultTitle,
     title,
     collabProvider,
@@ -37,6 +36,14 @@ function EditorView(props) {
     [onTitleChange]
   )
 
+  const onContentChange = useMemo(
+    () => {
+      const nullCallback = () => {}
+      return props.onContentChange || nullCallback
+    },
+    [props.onContentChange]
+  )
+
   useEffect(() => updateTextareaHeight(titleEl.current), [])
 
   return (

src/components/notes/editor.jsx

@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  useState,
-  useEffect,
-  useMemo,
-  useContext
-} from 'react'
+import React, { useEffect, useMemo, useContext } from 'react'
 
 import { withClient } from 'cozy-client'
 
@@ -13,150 +7,50 @@ import EditorLoading from 'components/notes/editor-loading'
 import EditorLoadingError from 'components/notes/editor-loading-error'
 import SharingWidget from 'components/notes/sharing'
 import BackFromEditing from 'components/notes/back_from_editing'
-
 import IsPublicContext from 'components/IsPublicContext'
 
-import CollabProvider from 'lib/collab/provider'
-import ServiceClient from 'lib/collab/stack-client'
+import useNote from 'hooks/useNote'
+import useServiceClient from 'hooks/useServiceClient'
+import useCollabProvider from 'hooks/useCollabProvider'
+import useTitleChanges from 'hooks/useTitleChanges'
+import useForceSync from 'hooks/useForceSync'
 
-import {
-  getShortNameFromClient,
-  getParentFolderLink,
-  getAppFullName
-} from 'lib/utils.js'
+import { getShortNameFromClient, getParentFolderLink } from 'lib/utils.js'
 
 import { translate } from 'cozy-ui/react/I18n'
 import useEventListener from 'cozy-ui/react/hooks/useEventListener'
 
-function setPageTitle(appFullName, title) {
-  document.title =
-    title && title != '' ? `${appFullName} - ${title}` : appFullName
-}
-
-async function loadNote(
-  serviceClient,
-  noteId,
-  loading,
-  setLoading,
-  setDoc,
-  setTitle
-) {
-  try {
-    if (!loading) {
-      setLoading(true)
-    }
-    const doc = await serviceClient.getDoc(noteId)
-    setTitle(doc.title || '')
-    setDoc(doc)
-  } catch (e) {
-    setTitle(false)
-    setDoc(false)
-  }
-  setLoading(false)
-}
-
-function getLocalTitleChangeCallback(serviceClient, noteId, title, setTitle) {
-  return e => {
-    const newTitle = e.target.value
-    const modifiedTitle = newTitle
-    if (title != modifiedTitle) {
-      setTitle(modifiedTitle)
-      serviceClient.setTitle(noteId, modifiedTitle)
-    }
-  }
-}
-
 const Editor = translate()(
   withClient(function(props) {
+    // base parameters
     const { client, noteId, t } = props
     const userName = useMemo(
       () => props.userName || getShortNameFromClient(client),
       [props.userName]
     )
-    const appFullName = useMemo(getAppFullName)
     const isPublic = useContext(IsPublicContext)
 
     // alias for later shortcuts
     const docId = noteId
     const userId = userName
     const cozyClient = client
 
-    // state
-    const [loading, setLoading] = useState(true)
-    const [doc, setDoc] = useState(undefined)
-    const [title, setTitle] = useState(undefined)
-
     // plugins and config
-    const serviceClient = useMemo(
-      () => {
-        return new ServiceClient({ userId, userName, cozyClient })
-      },
-      [noteId]
-    )
-    const docVersion = doc && doc.version
-    //console.log("docVersion", doc, doc && doc.version, docVersion)
-    const collabProvider = useMemo(
-      () => {
-        //console.log("collab provider memo", docVersion)
-        if (docVersion !== undefined) {
-          //console.log('new collabProvider')
-          const provider = new CollabProvider(
-            { version: doc.version, docId },
-            serviceClient
-          )
-          // The following object is defined in an Atlassian API.
-          // `provider` expects a Promise, even if we wouldn't
-          //  need it ourselves.
-          return {
-            useNativePlugin: true,
-            provider: Promise.resolve(provider),
-            inviteToEditHandler: () => undefined,
-            isInviteToEditButtonSelected: false,
-            userId: serviceClient.getSessionId()
-          }
-        } else {
-          return null
-        }
-      },
-      [noteId, docVersion, userName, serviceClient]
-    )
-    //console.log("end collabProviderMemo", collabProvider)
-
-    // fetch the actual note on load
-    useEffect(
-      () => {
-        loadNote(serviceClient, noteId, loading, setLoading, setDoc, setTitle)
-      },
-      [noteId]
-    )
+    const serviceClient = useServiceClient({ userId, userName, cozyClient })
+    const { loading, title, doc, setTitle } = useNote({ serviceClient, noteId })
+    const collabProvider = useCollabProvider({
+      docId,
+      serviceClient,
+      docVersion: doc && doc.version
+    })
 
     // callbacks
-    const onContentChange = useCallback(() => null, [noteId])
-    const onLocalTitleChange = useCallback(
-      getLocalTitleChangeCallback(serviceClient, noteId, title, setTitle),
-      [noteId, setTitle, serviceClient]
-    )
-    const onRemoteTitleChange = useCallback(
-      modifiedTitle => {
-        if (title != modifiedTitle) {
-          setTitle(modifiedTitle)
-        }
-      },
-      [noteId, setTitle]
-    )
-    useMemo(
-      () => {
-        serviceClient.onTitleUpdated(noteId, onRemoteTitleChange)
-      },
-      [onRemoteTitleChange, serviceClient]
-    )
-
-    useEffect(
-      () => {
-        setPageTitle(appFullName, title)
-      },
-      [title]
-    )
+    const { onLocalTitleChange } = useTitleChanges({
+      noteId,
+      title,
+      setTitle,
+      serviceClient
+    })
 
     const returnUrl = useMemo(
       () => {
@@ -173,36 +67,15 @@ const Editor = translate()(
       [props.returnUrl, doc]
     )
 
-    // Failure in loading the note ?
-    useEffect(
-      () => {
-        if (!loading && !doc) {
-          // eslint-disable-next-line no-console
-          console.warn(`Could not load note ${noteId}`)
-        }
-      },
-      [loading, doc]
-    )
-
-    // Be sure to save everything before leaving
-    // and force sync with the io.cozy.file
-    async function forceSync() {
-      if (doc) {
-        // wait for every event to finish
-        const provider = await collabProvider.provider
-        await provider.channel.ensureEmptyQueue()
-        // then force a server sync
-        await serviceClient.sync(docId)
-      }
-    }
-    useEffect(() => forceSync, [docId, doc])
-    // Sync on unload will probably be stopped by the browser,
-    // as most async code on unload, but let's try anyway
-    const emergencySync = useCallback(function() {
-      if (doc && docId) {
-        serviceClient.sync(docId) // force a server sync
-      }
-    }, [])
+    const { forceSync, emergencySync } = useForceSync({
+      doc,
+      docId,
+      serviceClient,
+      collabProvider
+    })
+    // when leaving the component or changing doc
+    useEffect(() => forceSync, [docId, doc, forceSync])
+    // when quitting the webpage
     useEventListener(window, 'unload', emergencySync)
 
     // rendering
@@ -212,7 +85,6 @@ const Editor = translate()(
       return (
         <EditorView
           onTitleChange={onLocalTitleChange}
-          onContentChange={onContentChange}
           collabProvider={collabProvider}
           defaultTitle={t('Notes.Editor.title_placeholder')}
           defaultValue={{ ...doc.doc, version: doc.version }}

src/hooks/useCollabProvider.js

@@ -0,0 +1,30 @@
+import { useMemo } from 'react'
+import CollabProvider from 'lib/collab/provider'
+
+function useCollabProvider({ docVersion, docId, serviceClient }) {
+  return useMemo(
+    () => {
+      if (serviceClient && docVersion !== undefined) {
+        const provider = new CollabProvider(
+          { version: docVersion, docId },
+          serviceClient
+        )
+        // The following object is defined in an Atlassian API.
+        // `provider` expects a Promise, even if we wouldn't
+        //  need it ourselves.
+        return {
+          useNativePlugin: true,
+          provider: Promise.resolve(provider),
+          inviteToEditHandler: () => undefined,
+          isInviteToEditButtonSelected: false,
+          userId: serviceClient.getSessionId()
+        }
+      } else {
+        return null
+      }
+    },
+    [docId, docVersion, serviceClient]
+  )
+}
+
+export default useCollabProvider

src/hooks/useFetchNotesByIds.jsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
 import cloneDeep from 'lodash/cloneDeep'
 import get from 'lodash/get'
+
 const useFetchNotesByIds = client => {
   const [notes, setNotes] = useState([])
   const [fetchStatus, setFetchStatus] = useState('loading')
@@ -33,6 +34,7 @@ const useFetchNotesByIds = client => {
         setFetchStatus('loaded')
       } catch (error) {
         setFetchStatus('errored')
+        // eslint-disable-next-line no-console
         console.log({ error })
       }
     }

src/hooks/useForceSync.js

@@ -0,0 +1,33 @@
+import { useCallback } from 'react'
+
+function useForceSync({ doc, docId, serviceClient, collabProvider }) {
+  // Be sure to save everything before leaving
+  // and force sync with the io.cozy.file
+  const forceSync = useCallback(
+    async function forceSync() {
+      if (doc && collabProvider && serviceClient) {
+        // wait for every event to finish
+        const provider = await collabProvider.provider
+        await provider.channel.ensureEmptyQueue()
+        // then force a server sync
+        await serviceClient.sync(docId)
+      }
+    },
+    [docId, doc, collabProvider]
+  )
+
+  // Sync on unload will probably be stopped by the browser,
+  // as most async code on unload, but let's try anyway
+  const emergencySync = useCallback(
+    function() {
+      if (doc && docId && serviceClient) {
+        serviceClient.sync(docId) // force a server sync
+      }
+    },
+    [docId, doc, serviceClient]
+  )
+
+  return { forceSync, emergencySync }
+}
+
+export default useForceSync

src/hooks/useNote.js

@@ -0,0 +1,50 @@
+import { useState, useEffect } from 'react'
+
+function useNote({ serviceClient, noteId }) {
+  const [docId, setDocId] = useState(noteId)
+  const [loading, setLoading] = useState(true)
+  const [doc, setDoc] = useState(undefined)
+  const [title, setTitle] = useState(undefined)
+
+  // reload if ever noteId changes
+  useEffect(
+    () => {
+      if (docId !== noteId) {
+        setLoading(true)
+        setTitle(undefined)
+        setDoc(undefined)
+        setDocId(noteId)
+      }
+    },
+    [noteId, docId, setLoading, setTitle, setDoc, setDocId]
+  )
+
+  // load the note
+  useEffect(
+    () => {
+      const loadNote = async function() {
+        try {
+          if (!loading) setLoading(true)
+          const doc = await serviceClient.getDoc(docId)
+          setTitle(doc.title || '')
+          setDoc(doc)
+        } catch (e) {
+          setTitle(false)
+          setDoc(false)
+          // eslint-disable-next-line no-console
+          console.warn(`Could not load note ${docId}`)
+        }
+        setLoading(false)
+      }
+      if (serviceClient) {
+        if (!doc || doc.file.id != docId) loadNote()
+      }
+    },
+    [docId, setLoading, serviceClient, setDoc, setTitle]
+  )
+
+  if (docId == noteId) return { loading, title, doc, setTitle }
+  else return { loading: true, title: undefined, doc: undefined, setTitle }
+}
+
+export default useNote