mkdir move to separate component

qdraw · Oct 17, 2024 · 092b40f · 092b40f
1 parent a9df46a
commit 092b40f
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 20 deletions.
diff --git a/starsky/starsky/clientapp/src/components/molecules/menu-option-mkdir/menu-option-mkdir.tsx b/starsky/starsky/clientapp/src/components/molecules/menu-option-mkdir/menu-option-mkdir.tsx
@@ -0,0 +1,42 @@
+import { useState } from "react";
+import { ArchiveAction } from "../../../contexts/archive-context";
+import { IArchiveProps } from "../../../interfaces/IArchiveProps";
+import localization from "../../../localization/localization.json";
+import MenuOptionModal from "../../atoms/menu-option-modal/menu-option-modal";
+import ModalArchiveMkdir from "../../organisms/modal-archive-mkdir/modal-archive-mkdir";
+
+interface IMenuOptionMkdirProps {
+  readOnly: boolean;
+  state: IArchiveProps;
+  dispatch: React.Dispatch<ArchiveAction>;
+}
+
+export const MenuOptionMkdir: React.FunctionComponent<IMenuOptionMkdirProps> = ({
+  readOnly,
+  state,
+  dispatch
+}) => {
+  const [isModalMkdirOpen, setIsModalMkdirOpen] = useState(false);
+
+  return (
+    <>
+      {/* Modal new directory */}
+      {isModalMkdirOpen && !readOnly ? (
+        <ModalArchiveMkdir
+          state={state}
+          dispatch={dispatch}
+          handleExit={() => setIsModalMkdirOpen(!isModalMkdirOpen)}
+          isOpen={isModalMkdirOpen}
+        />
+      ) : null}
+
+      <MenuOptionModal
+        isReadOnly={readOnly}
+        isSet={isModalMkdirOpen}
+        set={() => setIsModalMkdirOpen(!isModalMkdirOpen)}
+        localization={localization.MessageMkdir}
+        testName="mkdir"
+      />
+    </>
+  );
+};
diff --git a/starsky/starsky/clientapp/src/components/organisms/menu-archive/menu-archive.tsx b/starsky/starsky/clientapp/src/components/organisms/menu-archive/menu-archive.tsx
@@ -14,22 +14,22 @@ import MoreMenu from "../../atoms/more-menu/more-menu";
 import MenuSearchBar from "../../molecules/menu-inline-search/menu-inline-search";
 import MenuOptionDesktopEditorOpenSelectionNoSelectWarning from "../../molecules/menu-option-desktop-editor-open-selection-no-select-warning/menu-option-desktop-editor-open-selection-no-select-warning";
 import MenuOptionDesktopEditorOpenSelection from "../../molecules/menu-option-desktop-editor-open-selection/menu-option-desktop-editor-open-selection";
+import { MenuOptionMkdir } from "../../molecules/menu-option-mkdir/menu-option-mkdir.tsx";
 import MenuOptionMoveFolderToTrash from "../../molecules/menu-option-move-folder-to-trash/menu-option-move-folder-to-trash";
 import MenuOptionMoveToTrash from "../../molecules/menu-option-move-to-trash/menu-option-move-to-trash";
 import { MenuOptionSelectionAll } from "../../molecules/menu-option-selection-all/menu-option-selection-all";
 import { MenuOptionSelectionUndo } from "../../molecules/menu-option-selection-undo/menu-option-selection-undo";
 import { MenuSelectCount } from "../../molecules/menu-select-count/menu-select-count";
 import { MenuSelectFurther } from "../../molecules/menu-select-further/menu-select-further";
 import ModalDropAreaFilesAdded from "../../molecules/modal-drop-area-files-added/modal-drop-area-files-added";
-import ModalArchiveMkdir from "../modal-archive-mkdir/modal-archive-mkdir";
 import ModalArchiveRename from "../modal-archive-rename/modal-archive-rename";
 import ModalArchiveSynchronizeManually from "../modal-archive-synchronize-manually/modal-archive-synchronize-manually";
 import ModalDisplayOptions from "../modal-display-options/modal-display-options";
 import ModalDownload from "../modal-download/modal-download";
 import ModalPublishToggleWrapper from "../modal-publish/modal-publish-toggle-wrapper";
 import NavContainer from "../nav-container/nav-container";
-import { UploadMenuItem } from "./internal/upload-menu-item";
 import { SelectMenuItem } from "./internal/select-menu-item.tsx";
+import { UploadMenuItem } from "./internal/upload-menu-item";
 
 interface IMenuArchiveProps {}
 
@@ -80,7 +80,6 @@ const MenuArchive: React.FunctionComponent<IMenuArchiveProps> = memo(() => {
 
   const [isDisplayOptionsOpen, setIsDisplayOptionsOpen] = React.useState(false);
   const [isSynchronizeManuallyOpen, setIsSynchronizeManuallyOpen] = React.useState(false);
-  const [isModalMkdirOpen, setIsModalMkdirOpen] = React.useState(false);
   const [isModalRenameFolder, setIsModalRenameFolder] = React.useState(false);
   const [dropAreaUploadFilesList, setDropAreaUploadFilesList] =
     React.useState(newIFileIndexItemArray());
@@ -117,16 +116,6 @@ const MenuArchive: React.FunctionComponent<IMenuArchiveProps> = memo(() => {
         />
       ) : null}
 
-      {/* Modal new directory */}
-      {isModalMkdirOpen && !readOnly ? (
-        <ModalArchiveMkdir
-          state={state}
-          dispatch={dispatch}
-          handleExit={() => setIsModalMkdirOpen(!isModalMkdirOpen)}
-          isOpen={isModalMkdirOpen}
-        />
-      ) : null}
-
       {isModalRenameFolder && !readOnly && state.subPath !== "/" ? (
         <ModalArchiveRename
           subPath={state.subPath}
@@ -179,13 +168,7 @@ const MenuArchive: React.FunctionComponent<IMenuArchiveProps> = memo(() => {
           {/* default more menu */}
           {!select ? (
             <MoreMenu setEnableMoreMenu={setEnableMoreMenu} enableMoreMenu={enableMoreMenu}>
-              <MenuOptionModal
-                isReadOnly={readOnly}
-                isSet={isModalMkdirOpen}
-                set={() => setIsModalMkdirOpen(!isModalMkdirOpen)}
-                localization={localization.MessageMkdir}
-                testName="mkdir"
-              />
+              <MenuOptionMkdir dispatch={dispatch} readOnly={readOnly} state={state} />
 
               <MenuOptionModal
                 isReadOnly={false}