split duplicate code

qdraw · Nov 5, 2023 · 3a40ffa · 3a40ffa
1 parent 86b6db4
commit 3a40ffa
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 85 deletions.
diff --git a/...lientapp/src/components/molecules/menu-option-selection-all/menu-option-selection-all.tsx b/...lientapp/src/components/molecules/menu-option-selection-all/menu-option-selection-all.tsx
@@ -0,0 +1,36 @@
+import useGlobalSettings from "../../../hooks/use-global-settings";
+import { IArchiveProps } from "../../../interfaces/IArchiveProps";
+import localization from "../../../localization/localization.json";
+import { Language } from "../../../shared/language";
+
+export interface IMenuOptionUndoSelectionProps {
+  select: string[];
+  state: IArchiveProps;
+  allSelection: () => void;
+}
+
+export const MenuOptionSelectionAll: React.FunctionComponent<
+  IMenuOptionUndoSelectionProps
+> = ({ select, state, allSelection }) => {
+  const settings = useGlobalSettings();
+  const language = new Language(settings.language);
+  const MessageSelectAll = language.key(localization.MessageSelectAll);
+
+  return (
+    <>
+      {select.length !== state.fileIndexItems.length ? (
+        <li
+          className="menu-option"
+          data-test="select-all"
+          onClick={() => allSelection()}
+          tabIndex={0}
+          onKeyDown={(event) => {
+            event.key === "Enter" && allSelection();
+          }}
+        >
+          {MessageSelectAll}
+        </li>
+      ) : null}
+    </>
+  );
+};
diff --git a/...entapp/src/components/molecules/menu-option-selection-undo/menu-option-selection-undo.tsx b/...entapp/src/components/molecules/menu-option-selection-undo/menu-option-selection-undo.tsx
@@ -0,0 +1,36 @@
+import useGlobalSettings from "../../../hooks/use-global-settings";
+import { IArchiveProps } from "../../../interfaces/IArchiveProps";
+import localization from "../../../localization/localization.json";
+import { Language } from "../../../shared/language";
+
+export interface IMenuOptionSelectionUndoProps {
+  select: string[];
+  state: IArchiveProps;
+  undoSelection: () => void;
+}
+
+export const MenuOptionSelectionUndo: React.FunctionComponent<
+  IMenuOptionSelectionUndoProps
+> = ({ select, state, undoSelection }) => {
+  const settings = useGlobalSettings();
+  const language = new Language(settings.language);
+  const MessageUndoSelection = language.key(localization.MessageUndoSelection);
+
+  return (
+    <>
+      {select.length === state.fileIndexItems.length ? (
+        <li
+          data-test="undo-selection"
+          className="menu-option"
+          onClick={() => undoSelection()}
+          tabIndex={0}
+          onKeyDown={(event) => {
+            event.key === "Enter" && undoSelection();
+          }}
+        >
+          {MessageUndoSelection}
+        </li>
+      ) : null}
+    </>
+  );
+};
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
@@ -22,6 +22,8 @@ import MoreMenu from "../../atoms/more-menu/more-menu";
 import MenuSearchBar from "../../molecules/menu-inline-search/menu-inline-search";
 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 ModalDropAreaFilesAdded from "../../molecules/modal-drop-area-files-added/modal-drop-area-files-added";
 import ModalArchiveMkdir from "../modal-archive-mkdir/modal-archive-mkdir";
@@ -52,8 +54,6 @@ const MenuArchive: React.FunctionComponent<IMenuArchiveProps> = memo(() => {
     "Verder selecteren",
     "Select further"
   );
-  const MessageSelectAll = language.text("Alles selecteren", "Select all");
-  const MessageUndoSelection = language.text("Undo selectie", "Undo selection");
 
   const [hamburgerMenu, setHamburgerMenu] = React.useState(false);
   const [enableMoreMenu, setEnableMoreMenu] = React.useState(false);
@@ -310,32 +310,18 @@ const MenuArchive: React.FunctionComponent<IMenuArchiveProps> = memo(() => {
               setEnableMoreMenu={setEnableMoreMenu}
               enableMoreMenu={enableMoreMenu}
             >
-              {select.length === state.fileIndexItems.length ? (
-                <li
-                  className="menu-option"
-                  data-test="undo-selection"
-                  onClick={() => undoSelection()}
-                  tabIndex={0}
-                  onKeyDown={(event) => {
-                    event.key === "Enter" && undoSelection();
-                  }}
-                >
-                  {MessageUndoSelection}
-                </li>
-              ) : null}
-              {select.length !== state.fileIndexItems.length ? (
-                <li
-                  className="menu-option"
-                  data-test="select-all"
-                  onClick={() => allSelection()}
-                  tabIndex={0}
-                  onKeyDown={(event) => {
-                    event.key === "Enter" && allSelection();
-                  }}
-                >
-                  {MessageSelectAll}
-                </li>
-              ) : null}
+              <MenuOptionSelectionUndo
+                select={select}
+                state={state}
+                undoSelection={undoSelection}
+              />
+
+              <MenuOptionSelectionAll
+                select={select}
+                state={state}
+                allSelection={allSelection}
+              />
+
               {select.length >= 1 ? (
                 <>
                   <MenuOption

diff --git a/starsky/starsky/clientapp/src/components/organisms/menu-search/menu-search.tsx b/starsky/starsky/clientapp/src/components/organisms/menu-search/menu-search.tsx
@@ -18,6 +18,8 @@ import MenuOption from "../../atoms/menu-option/menu-option";
 import MoreMenu from "../../atoms/more-menu/more-menu";
 import MenuSearchBar from "../../molecules/menu-inline-search/menu-inline-search";
 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 ModalDownload from "../modal-download/modal-download";
 import ModalPublishToggleWrapper from "../modal-publish/modal-publish-toggle-wrapper";
@@ -42,7 +44,6 @@ export const MenuSearch: React.FunctionComponent<IMenuSearchProps> = ({
   // Content
   const MessageSelectAction = language.text("Selecteer", "Select");
   const MessageSelectAll = language.text("Alles selecteren", "Select all");
-  const MessageUndoSelection = language.text("Undo selectie", "Undo selection");
   const MessageSelectFurther = language.text(
     "Verder selecteren",
     "Select further"
@@ -187,32 +188,18 @@ export const MenuSearch: React.FunctionComponent<IMenuSearchProps> = ({
               setEnableMoreMenu={setEnableMoreMenu}
               enableMoreMenu={enableMoreMenu}
             >
-              {select.length === state.fileIndexItems.length ? (
-                <li
-                  data-test="undo-selection"
-                  className="menu-option"
-                  onClick={() => undoSelection()}
-                  tabIndex={0}
-                  onKeyDown={(event) => {
-                    event.key === "Enter" && undoSelection();
-                  }}
-                >
-                  {MessageUndoSelection}
-                </li>
-              ) : null}
-              {select.length !== state.fileIndexItems.length ? (
-                <li
-                  className="menu-option"
-                  data-test="select-all"
-                  tabIndex={0}
-                  onClick={() => allSelection()}
-                  onKeyDown={(event) => {
-                    event.key === "Enter" && allSelection();
-                  }}
-                >
-                  {MessageSelectAll}
-                </li>
-              ) : null}
+              <MenuOptionSelectionUndo
+                select={select}
+                state={state}
+                undoSelection={undoSelection}
+              />
+
+              <MenuOptionSelectionAll
+                select={select}
+                state={state}
+                allSelection={allSelection}
+              />
+
               <MenuOption
                 isReadOnly={false}
                 testName="export"

diff --git a/starsky/starsky/clientapp/src/components/organisms/menu-trash/menu-trash.tsx b/starsky/starsky/clientapp/src/components/organisms/menu-trash/menu-trash.tsx
@@ -15,6 +15,8 @@ import HamburgerMenuToggle from "../../atoms/hamburger-menu-toggle/hamburger-men
 import MoreMenu from "../../atoms/more-menu/more-menu";
 import Preloader from "../../atoms/preloader/preloader";
 import MenuSearchBar from "../../molecules/menu-inline-search/menu-inline-search";
+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 ModalForceDelete from "../modal-force-delete/modal-force-delete";
 import NavContainer from "../nav-container/nav-container";
@@ -34,7 +36,6 @@ const MenuTrash: React.FunctionComponent<IMenuTrashProps> = ({
   // Content
   const MessageSelectAction = language.text("Selecteer", "Select");
   const MessageSelectAll = language.text("Alles selecteren", "Select all");
-  const MessageUndoSelection = language.text("Undo selectie", "Undo selection");
   const MessageRestoreFromTrash = language.text(
     "Zet terug uit prullenmand",
     "Restore from Trash"
@@ -190,32 +191,18 @@ const MenuTrash: React.FunctionComponent<IMenuTrashProps> = ({
               setEnableMoreMenu={setEnableMoreMenu}
               enableMoreMenu={enableMoreMenu}
             >
-              {select.length === state.fileIndexItems.length ? (
-                <li
-                  data-test="undo-selection"
-                  className="menu-option"
-                  onClick={() => undoSelection()}
-                  tabIndex={0}
-                  onKeyDown={(event) => {
-                    event.key === "Enter" && undoSelection();
-                  }}
-                >
-                  {MessageUndoSelection}
-                </li>
-              ) : null}
-              {select.length !== state.fileIndexItems.length ? (
-                <li
-                  className="menu-option"
-                  data-test="select-all"
-                  onClick={() => allSelection()}
-                  tabIndex={0}
-                  onKeyDown={(event) => {
-                    event.key === "Enter" && allSelection();
-                  }}
-                >
-                  {MessageSelectAll}
-                </li>
-              ) : null}
+              <MenuOptionSelectionUndo
+                select={select}
+                state={state}
+                undoSelection={undoSelection}
+              />
+
+              <MenuOptionSelectionAll
+                select={select}
+                state={state}
+                allSelection={allSelection}
+              />
+
               <li
                 className="menu-option"
                 data-test="restore-from-trash"

diff --git a/starsky/starsky/clientapp/src/localization/localization.json b/starsky/starsky/clientapp/src/localization/localization.json
@@ -139,9 +139,13 @@
     "en": "Nothing selected",
     "nl": "Niets geselecteerd"
   },
-  "temp": {
-    "en": "",
-    "nl": ""
+  "MessageUndoSelection": {
+    "en": "Undo selection",
+    "nl": "Undo selectie"
+  },
+  "MessageSelectAll": {
+    "en": "Select all",
+    "nl": "Alles selecteren"
   },
   "temp1": {
     "en": "",