fix: cannot create folder properly

foray1010 · Dec 11, 2020 · 0eeff5d · 0eeff5d
1 parent e483499
commit 0eeff5d
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 51 deletions.
diff --git a/src/popup/components/editor/Editor.tsx b/src/popup/components/editor/Editor.tsx
@@ -8,15 +8,15 @@ import Input from '../../../core/components/baseItems/Input'
 import classes from './editor.css'
 
 interface Props {
+  defaultTitle?: string
+  defaultUrl?: string
   header: string
-  initialTitle: string
-  initialUrl: string
   isAllowedToEditUrl: boolean
   onCancel: () => void
   onConfirm: (title: string, url: string) => void
   width: number
 }
-const Editor = ({ onConfirm, ...props }: Props) => {
+export default function Editor({ onConfirm, ...props }: Props) {
   const { register, handleSubmit } = useForm<{
     title: string
     url: string
@@ -43,13 +43,13 @@ const Editor = ({ onConfirm, ...props }: Props) => {
         ref={register}
         autoFocus
         className={classes.input}
-        defaultValue={props.initialTitle}
+        defaultValue={props.defaultTitle}
         name='title'
       />
       <Input
         ref={register}
         className={classes.input}
-        defaultValue={props.initialUrl}
+        defaultValue={props.defaultUrl}
         hidden={!props.isAllowedToEditUrl}
         name='url'
       />
@@ -61,5 +61,3 @@ const Editor = ({ onConfirm, ...props }: Props) => {
     </ActionlessForm>
   )
 }
-
-export default Editor
diff --git a/src/popup/components/editor/EditorContainer.tsx b/src/popup/components/editor/EditorContainer.tsx
@@ -12,49 +12,91 @@ import AbsolutePosition from '../absolutePosition/AbsolutePosition'
 import KeyBindingsWindow from '../keyBindings/KeyBindingsWindow'
 import Mask from '../Mask'
 import Editor from './Editor'
-import { useEditorContext } from './useEditor'
+import { useEditorContext } from './EditorContext'
 
-const EditorContainer = () => {
-  const { close, state } = useEditorContext()
+type EditorProps = React.ComponentProps<typeof Editor>
 
-  const { data: bookmarkInfo, isLoading } = useGetBookmarkInfo(
-    state.isOpen && !state.isCreating ? state.editTargetId : undefined,
+interface CreateEditorProps extends EditorProps {
+  createAfterId: string
+}
+const CreateEditor = ({
+  createAfterId,
+  onConfirm,
+  ...editorProps
+}: CreateEditorProps) => {
+  const createBookmarkAfterId = useAction(
+    bookmarkCreators.createBookmarkAfterId,
   )
-  const [initialTitle, setInitialTitle] = React.useState('')
-  const [initialUrl, setInitialUrl] = React.useState('')
-  React.useEffect(() => {
-    if (bookmarkInfo) {
-      setInitialTitle(bookmarkInfo.title)
-      setInitialUrl(bookmarkInfo.url ?? '')
-    }
-  }, [bookmarkInfo])
 
-  const width = useSelector(
-    (state: RootState) => state.options[OPTIONS.SET_WIDTH],
+  const handleConfirm = React.useCallback(
+    (title: string, url: string) => {
+      createBookmarkAfterId(createAfterId, title, url)
+
+      onConfirm(title, url)
+    },
+    [createAfterId, createBookmarkAfterId, onConfirm],
   )
 
-  const createBookmarkAfterId = useAction(
-    bookmarkCreators.createBookmarkAfterId,
+  return (
+    <Editor
+      {...editorProps}
+      defaultTitle={webExtension.i18n.getMessage('newFolder')}
+      onConfirm={handleConfirm}
+    />
   )
+}
+
+interface UpdateEditorProps extends EditorProps {
+  editTargetId: string
+}
+const UpdateEditor = ({
+  editTargetId,
+  onConfirm,
+  ...editorProps
+}: UpdateEditorProps) => {
+  const { data: bookmarkInfo } = useGetBookmarkInfo(editTargetId)
+
   const editBookmark = useAction(bookmarkCreators.editBookmark)
 
   const handleConfirm = React.useCallback(
     (title: string, url: string) => {
-      if (!state.isOpen) return
+      editBookmark(editTargetId, title, url)
 
-      if (state.isCreating) {
-        createBookmarkAfterId(state.createAfterId, title, url)
-      } else {
-        editBookmark(state.editTargetId, title, url)
-      }
-
-      close()
+      onConfirm(title, url)
     },
-    [close, createBookmarkAfterId, editBookmark, state],
+    [editBookmark, editTargetId, onConfirm],
   )
 
-  if (!state.isOpen || isLoading) return null
+  if (!bookmarkInfo) return null
 
+  return (
+    <Editor
+      {...editorProps}
+      defaultTitle={bookmarkInfo.title}
+      defaultUrl={bookmarkInfo.url}
+      onConfirm={handleConfirm}
+    />
+  )
+}
+
+export default function EditorContainer() {
+  const { close, state } = useEditorContext()
+
+  const width = useSelector(
+    (state: RootState) => state.options[OPTIONS.SET_WIDTH],
+  )
+
+  if (!state.isOpen) return null
+
+  const commonProps: EditorProps = {
+    header: state.isAllowedToEditUrl
+      ? webExtension.i18n.getMessage('edit')
+      : webExtension.i18n.getMessage('rename'),
+    isAllowedToEditUrl: state.isAllowedToEditUrl,
+    width: width ?? 0,
+    onCancel: close,
+    onConfirm: close,
+  }
   return (
     <>
       <Mask opacity={0.3} onClick={close} />
@@ -63,23 +105,16 @@ const EditorContainer = () => {
         positionTop={state.positions.top}
       >
         <KeyBindingsWindow windowId={EDITOR_WINDOW}>
-          <Editor
-            header={
-              state.isAllowedToEditUrl
-                ? webExtension.i18n.getMessage('edit')
-                : webExtension.i18n.getMessage('rename')
-            }
-            initialTitle={initialTitle}
-            initialUrl={initialUrl}
-            isAllowedToEditUrl={state.isAllowedToEditUrl}
-            width={width ?? 0}
-            onCancel={close}
-            onConfirm={handleConfirm}
-          />
+          {state.isCreating ? (
+            <CreateEditor
+              {...commonProps}
+              createAfterId={state.createAfterId}
+            />
+          ) : (
+            <UpdateEditor {...commonProps} editTargetId={state.editTargetId} />
+          )}
         </KeyBindingsWindow>
       </AbsolutePosition>
     </>
   )
 }
-
-export default EditorContainer
diff --git a/src/popup/components/editor/useEditor.ts → src/popup/components/editor/EditorContext.ts b/src/popup/components/editor/useEditor.ts → src/popup/components/editor/EditorContext.ts
diff --git a/src/popup/components/editor/index.ts b/src/popup/components/editor/index.ts
@@ -1,2 +1,2 @@
 export { default as Editor } from './EditorContainer'
-export * from './useEditor'
+export * from './EditorContext'
diff --git a/src/popup/components/menu/MenuContainer.tsx b/src/popup/components/menu/MenuContainer.tsx
@@ -48,7 +48,7 @@ const useClickMenuRow = (rowName?: string) => {
       case CST.MENU_ADD_FOLDER:
         openEditor({
           createAfterId: bookmarkInfo.id,
-          isAllowedToEditUrl: bookmarkInfo.type !== CST.BOOKMARK_TYPES.FOLDER,
+          isAllowedToEditUrl: false,
           isCreating: true,
           positions: state.positions,
         })