remove some duplicate code

qdraw · Nov 5, 2023 · f14099d · f14099d
1 parent 1cb7d65
commit f14099d
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 88 deletions.
diff --git a/starsky/starsky/clientapp/src/components/molecules/menu-select-count/menu-select-count.tsx b/starsky/starsky/clientapp/src/components/molecules/menu-select-count/menu-select-count.tsx
@@ -0,0 +1,53 @@
+import useGlobalSettings from "../../../hooks/use-global-settings";
+import localization from "../../../localization/localization.json";
+import { Language } from "../../../shared/language";
+
+export interface IMenuSelectCountProps {
+  select?: string[];
+  removeSidebarSelection: () => void;
+}
+
+export const MenuSelectCount: React.FunctionComponent<
+  IMenuSelectCountProps
+> = ({ select, removeSidebarSelection }) => {
+  const settings = useGlobalSettings();
+  const language = new Language(settings.language);
+  const MessageNoneSelected = language.key(localization.MessageNoneSelected);
+
+  const MessageSelectPresentPerfect = language.key(
+    localization.MessageSelectPresentPerfect
+  );
+
+  return (
+    <>
+      {select && select.length === 0 ? (
+        <button
+          data-test="selected-0"
+          onClick={() => {
+            removeSidebarSelection();
+          }}
+          onKeyDown={(event) => {
+            event.key === "Enter" && removeSidebarSelection();
+          }}
+          className="item item--first item--close"
+        >
+          {MessageNoneSelected}
+        </button>
+      ) : null}
+      {select && select.length >= 1 ? (
+        <button
+          data-test={`selected-${select.length}`}
+          onClick={() => {
+            removeSidebarSelection();
+          }}
+          onKeyDown={(event) => {
+            event.key === "Enter" && removeSidebarSelection();
+          }}
+          className="item item--first item--close"
+        >
+          {select.length} {MessageSelectPresentPerfect}
+        </button>
+      ) : 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,7 @@ 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 { 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";
 import ModalArchiveRename from "../modal-archive-rename/modal-archive-rename";
@@ -224,34 +225,11 @@ const MenuArchive: React.FunctionComponent<IMenuArchiveProps> = memo(() => {
             setHamburgerMenu={setHamburgerMenu}
           />
 
-          {select && select.length === 0 ? (
-            <button
-              data-test="selected-0"
-              onClick={() => {
-                removeSidebarSelection();
-              }}
-              onKeyDown={(event) => {
-                event.key === "Enter" && removeSidebarSelection();
-              }}
-              className="item item--first item--close"
-            >
-              {MessageNoneSelected}
-            </button>
-          ) : null}
-          {select && select.length >= 1 ? (
-            <button
-              data-test={`selected-${select.length}`}
-              onClick={() => {
-                removeSidebarSelection();
-              }}
-              onKeyDown={(event) => {
-                event.key === "Enter" && removeSidebarSelection();
-              }}
-              className="item item--first item--close"
-            >
-              {select.length} {MessageSelectPresentPerfect}
-            </button>
-          ) : null}
+          <MenuSelectCount
+            select={select}
+            removeSidebarSelection={removeSidebarSelection}
+          />
+
           {!select ? (
             <div
               className="item item--select"

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,7 @@ 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 { 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";
 import NavContainer from "../nav-container/nav-container";
@@ -39,11 +40,6 @@ export const MenuSearch: React.FunctionComponent<IMenuSearchProps> = ({
   const language = new Language(settings.language);
 
   // Content
-  const MessageNoneSelected = language.text(
-    "Niets geselecteerd",
-    "Nothing selected"
-  );
-  const MessageSelectPresentPerfect = language.text("geselecteerd", "selected");
   const MessageSelectAction = language.text("Selecteer", "Select");
   const MessageSelectAll = language.text("Alles selecteren", "Select all");
   const MessageUndoSelection = language.text("Undo selectie", "Undo selection");
@@ -121,36 +117,12 @@ export const MenuSearch: React.FunctionComponent<IMenuSearchProps> = ({
             setHamburgerMenu={setHamburgerMenu}
           />
 
-          {select && select.length === 0 ? (
-            <button
-              data-test="selected-0"
-              onClick={() => {
-                removeSidebarSelection();
-              }}
-              onKeyDown={(event) => {
-                event.key === "Enter" && removeSidebarSelection();
-              }}
-              className="item item--first item--close"
-            >
-              {MessageNoneSelected}
-            </button>
-          ) : null}
-          {select && select.length >= 1 ? (
-            <button
-              data-test={`selected-${select.length}`}
-              onClick={() => {
-                removeSidebarSelection();
-              }}
-              onKeyDown={(event) => {
-                event.key === "Enter" && removeSidebarSelection();
-              }}
-              className="item item--first item--close"
-            >
-              {select.length} {MessageSelectPresentPerfect}
-            </button>
-          ) : null}
+          <MenuSelectCount
+            select={select}
+            removeSidebarSelection={removeSidebarSelection}
+          />
 
-          {/* te select button with checkbox*/}
+          {/* the select button with checkbox*/}
           {!select ? (
             <div
               className={

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,7 @@ 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 { 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";
 
@@ -137,32 +138,10 @@ const MenuTrash: React.FunctionComponent<IMenuTrashProps> = ({
             setHamburgerMenu={setHamburgerMenu}
           />
 
-          {select && select.length === 0 ? (
-            <button
-              onClick={() => {
-                removeSidebarSelection();
-              }}
-              onKeyDown={(event) => {
-                event.key === "Enter" && removeSidebarSelection();
-              }}
-              className="item item--first item--close"
-            >
-              {MessageNoneSelected}
-            </button>
-          ) : null}
-          {select && select.length >= 1 ? (
-            <button
-              onClick={() => {
-                removeSidebarSelection();
-              }}
-              onKeyDown={(event) => {
-                event.key === "Enter" && removeSidebarSelection();
-              }}
-              className="item item--first item--close"
-            >
-              {select.length} {MessageSelectPresentPerfect}
-            </button>
-          ) : null}
+          <MenuSelectCount
+            select={select}
+            removeSidebarSelection={removeSidebarSelection}
+          />
 
           {!select && state.fileIndexItems.length >= 1 ? (
             <div

diff --git a/starsky/starsky/clientapp/src/localization/localization.json b/starsky/starsky/clientapp/src/localization/localization.json
@@ -127,8 +127,24 @@
     "en": "There are more items, but these are outside of your filters. To see everything click on 'Reset Filter'",
     "nl": "Er zijn meer items, maar deze vallen buiten je filters. Om alles te zien klik op 'Herstel Filter'"
   },
+  "MessageSelectPresentPerfect": {
+    "en": "selected",
+    "nl": "geselecteerd"
+  },
+  "MessageSelectAction": {
+    "en": "Selecteer",
+    "nl": "Select"
+  },
+  "MessageNoneSelected": {
+    "en": "Nothing selected",
+    "nl": "Niets geselecteerd"
+  },
   "temp": {
     "en": "",
     "nl": ""
+  },
+  "temp1": {
+    "en": "",
+    "nl": ""
   }
 }