Extract new doc row

Author: Rokt33r

src/cloud/components/Views/Table/TableViewContentManager.tsx

@@ -35,7 +35,7 @@ import { getDocLinkHref } from '../../Link/DocLink'
 import PropPicker from '../../Props/PropPicker'
 import DocTagsList from '../../DocPage/DocTagsList'
 import { getFormattedBoosthubDateTime } from '../../../lib/date'
-import { mdiFileDocumentOutline, mdiPlus } from '@mdi/js'
+import { mdiFileDocumentOutline } from '@mdi/js'
 import NavigationItem from '../../../../design/components/molecules/Navigation/NavigationItem'
 import TableAddPropertyContext from './TableAddPropertyContext'
 import { TableViewActionsRef } from '../../../lib/hooks/views/tableView'
@@ -48,17 +48,14 @@ import Button from '../../../../design/components/atoms/Button'
 import TablePropertiesContext from './TablePropertiesContext'
 import TableViewContentManagerFolderRow from './TableViewContentManagerFolderRow'
 import TableViewContentManagerRow from './TableViewContentManagerRow'
-import TableContentManagerRow from './TableContentManagerRow'
 import { overflowEllipsis } from '../../../../design/lib/styled/styleFunctions'
 import { usePreferences } from '../../../lib/stores/preferences'
 import SortingOption, {
   sortingOrders,
 } from '../../ContentManager/SortingOption'
 import { FormSelectOption } from '../../../../design/components/molecules/Form/atoms/FormSelect'
-import FormInput from '../../../../design/components/molecules/Form/atoms/FormInput'
-import { useCloudApi } from '../../../lib/hooks/useCloudApi'
-import Spinner from '../../../../design/components/atoms/Spinner'
 import TableViewContentManagerNewFolderRow from './TableViewContentmanagerNewFolderRow'
+import TableViewContentManagerNewDocRow from './TableViewContentManagerNewDocRow'
 
 interface ContentManagerProps {
   team: SerializedTeam
@@ -86,7 +83,6 @@ const TableViewContentManager = ({
 }: ContentManagerProps) => {
   const { translate } = useI18n()
   const { openContextModal, closeAllModals } = useModal()
-  const { createDoc } = useCloudApi()
   const { push } = useRouter()
   const { preferences, setPreferences } = usePreferences()
   const [order, setOrder] = useState<typeof sortingOrders[number]['value']>(
@@ -255,36 +251,6 @@ const TableViewContentManager = ({
     [setPreferences]
   )
 
-  const [newDocRowState, setNewDocRowState] = useState<
-    'idle' | 'editing' | 'submitting'
-  >('idle')
-  const [newDocName, setNewDocName] = useState('')
-  const newDocCompositionStateRef = useRef(false)
-  const newDocInputRef = useRef<HTMLInputElement>(null)
-
-  useEffect(() => {
-    if (newDocInputRef.current != null && newDocRowState === 'editing') {
-      newDocInputRef.current.focus()
-    }
-  }, [newDocRowState])
-
-  const createNewDoc = useCallback(async () => {
-    setNewDocRowState('submitting')
-    if (currentWorkspaceId != null) {
-      await createDoc(
-        team,
-        {
-          title: newDocName,
-          workspaceId: currentWorkspaceId,
-          parentFolderId: currentFolderId,
-        },
-        { skipRedirect: true }
-      )
-    }
-    setNewDocName('')
-    setNewDocRowState('idle')
-  }, [currentWorkspaceId, createDoc, team, newDocName, currentFolderId])
-
   return (
     <Container>
       <Scroller className='cm__scroller'>
@@ -475,56 +441,11 @@ const TableViewContentManager = ({
           />
           {orderedDocs.length === 0 && <EmptyRow label='No Documents' />}
           {currentWorkspaceId != null && (
-            <TableContentManagerRow>
-              {newDocRowState === 'idle' ? (
-                <Button
-                  className='content__manager--no-padding'
-                  variant='transparent'
-                  iconPath={mdiPlus}
-                  onClick={() => setNewDocRowState('editing')}
-                >
-                  {translate(lngKeys.ModalsCreateNewDocument)}
-                </Button>
-              ) : newDocRowState === 'editing' ? (
-                <FormInput
-                  ref={newDocInputRef}
-                  value={newDocName}
-                  onChange={(event) => {
-                    setNewDocName(event.target.value)
-                  }}
-                  onCompositionStart={() => {
-                    newDocCompositionStateRef.current = true
-                  }}
-                  onCompositionEnd={() => {
-                    newDocCompositionStateRef.current = false
-                    if (newDocInputRef.current != null) {
-                      newDocInputRef.current.focus()
-                    }
-                  }}
-                  onKeyPress={(event) => {
-                    if (newDocCompositionStateRef.current) {
-                      return
-                    }
-                    switch (event.key) {
-                      case 'Escape':
-                        event.preventDefault()
-                        setNewDocRowState('idle')
-                        setNewDocName('')
-                        return
-                      case 'Enter':
-                        event.preventDefault()
-                        createNewDoc()
-                        return
-                    }
-                  }}
-                  onBlur={() => {
-                    createNewDoc()
-                  }}
-                />
-              ) : (
-                <Spinner />
-              )}
-            </TableContentManagerRow>
+            <TableViewContentManagerNewDocRow
+              team={team}
+              workspaceId={currentWorkspaceId}
+              folderId={currentFolderId}
+            />
           )}
 
           {folders != null && (

src/cloud/components/Views/Table/TableViewContentManagerNewDocRow.tsx

@@ -0,0 +1,113 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react'
+import { mdiPlus } from '@mdi/js'
+import Button from '../../../../design/components/atoms/Button'
+import TableContentManagerRow from './TableContentManagerRow'
+import { useCloudApi } from '../../../lib/hooks/useCloudApi'
+import { SerializedTeam } from '../../../interfaces/db/team'
+import FormInput from '../../../../design/components/molecules/Form/atoms/FormInput'
+import Spinner from '../../../../design/components/atoms/Spinner'
+import { useI18n } from '../../../lib/hooks/useI18n'
+import { lngKeys } from '../../../lib/i18n/types'
+
+interface TableViewContentManagerNewFolderRowProps {
+  team: SerializedTeam
+  workspaceId: string
+  folderId?: string
+  className?: string
+}
+
+const TableViewContentManagerNewDocRow = ({
+  team,
+  workspaceId,
+  folderId,
+  className,
+}: TableViewContentManagerNewFolderRowProps) => {
+  const { translate } = useI18n()
+  const { createDoc } = useCloudApi()
+  const [formState, setFormState] = useState<'idle' | 'editing' | 'submitting'>(
+    'idle'
+  )
+  const [newTitle, setNewTitle] = useState('')
+  const compositionStateRef = useRef(false)
+  const newTitleInputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (newTitleInputRef.current != null && formState === 'editing') {
+      newTitleInputRef.current.focus()
+    }
+  }, [formState])
+
+  const createNewDoc = useCallback(async () => {
+    setFormState('submitting')
+    if (workspaceId != null) {
+      await createDoc(
+        team,
+        {
+          title: newTitle,
+          workspaceId,
+          parentFolderId: folderId,
+        },
+        { skipRedirect: true }
+      )
+    }
+    setNewTitle('')
+    setFormState('idle')
+  }, [workspaceId, folderId, createDoc, team, newTitle])
+
+  const cancelEditing = useCallback(() => {
+    setFormState('idle')
+    setNewTitle('')
+  }, [])
+
+  return (
+    <TableContentManagerRow className={className}>
+      {formState === 'idle' ? (
+        <Button
+          className='content__manager--no-padding'
+          variant='transparent'
+          iconPath={mdiPlus}
+          onClick={() => setFormState('editing')}
+        >
+          {translate(lngKeys.ModalsCreateNewDocument)}
+        </Button>
+      ) : formState === 'editing' ? (
+        <FormInput
+          ref={newTitleInputRef}
+          value={newTitle}
+          onChange={(event) => {
+            setNewTitle(event.target.value)
+          }}
+          onCompositionStart={() => {
+            compositionStateRef.current = true
+          }}
+          onCompositionEnd={() => {
+            compositionStateRef.current = false
+            if (newTitleInputRef.current != null) {
+              newTitleInputRef.current.focus()
+            }
+          }}
+          onKeyPress={(event) => {
+            if (compositionStateRef.current) {
+              return
+            }
+            switch (event.key) {
+              case 'Escape':
+                event.preventDefault()
+                cancelEditing()
+                return
+              case 'Enter':
+                event.preventDefault()
+                createNewDoc()
+                return
+            }
+          }}
+          onBlur={cancelEditing}
+        />
+      ) : (
+        <Spinner />
+      )}
+    </TableContentManagerRow>
+  )
+}
+
+export default TableViewContentManagerNewDocRow