From 01a86bdd7acb50dee8e4d0a69ca4cc6e24b12303 Mon Sep 17 00:00:00 2001
From: Dion <qdraw@users.noreply.github.com>
Date: Mon, 11 Dec 2023 18:34:50 +0100
Subject: [PATCH] code smells

---
 starsky/starsky/clientapp/package.json        |   2 +-
 .../color-class-filter/color-class-filter.tsx |   2 +-
 .../color-class-select/color-class-select.tsx |   2 +-
 .../menu-inline-search/menu-inline-search.tsx |   4 +-
 .../shared/go-to-parent-folder.tsx            |  25 +---
 .../src/contexts/archive-context.tsx          | 135 +++++++++++-------
 .../src/contexts/detailview-context.tsx       | 125 +++++++++-------
 .../starsky/clientapp/src/shared/url-path.ts  |  11 +-
 .../clientapp/src/style/css/03-button.css     |  22 ---
 .../style/css/03-button.danger-warning.css    |  23 +++
 .../clientapp/src/style/css/10-menu.css       |   4 +
 .../src/style/css/26-colorfilter.css          |   6 +-
 .../src/style/css/34-search-header.css        |   4 -
 .../src/client/css/29-switch-button.css       |  10 +-
 14 files changed, 217 insertions(+), 158 deletions(-)
 create mode 100644 starsky/starsky/clientapp/src/style/css/03-button.danger-warning.css

diff --git a/starsky/starsky/clientapp/package.json b/starsky/starsky/clientapp/package.json
index d7048916dd..02ad098a5a 100644
--- a/starsky/starsky/clientapp/package.json
+++ b/starsky/starsky/clientapp/package.json
@@ -169,7 +169,7 @@
       "@typescript-eslint/ban-types": "warn",
       "no-case-declarations": "warn",
       "react/display-name": "off",
-      "react/prop-types": "warn",
+      "react/prop-types": "off",
       "@typescript-eslint/no-loss-of-precision": "warn",
       "react/react-in-jsx-scope": "off"
     },
diff --git a/starsky/starsky/clientapp/src/components/molecules/color-class-filter/color-class-filter.tsx b/starsky/starsky/clientapp/src/components/molecules/color-class-filter/color-class-filter.tsx
index b6c46359fb..0063d89c3b 100644
--- a/starsky/starsky/clientapp/src/components/molecules/color-class-filter/color-class-filter.tsx
+++ b/starsky/starsky/clientapp/src/components/molecules/color-class-filter/color-class-filter.tsx
@@ -160,7 +160,7 @@ const ColorClassFilter: React.FunctionComponent<IColorClassProp> = memo(
                   : "btn colorclass colorclass--" + item
               }
             >
-              <label />
+              <span className="label" />
               <span>{colorContent[item]}</span>{" "}
             </Link>
           ) : (
diff --git a/starsky/starsky/clientapp/src/components/molecules/color-class-select/color-class-select.tsx b/starsky/starsky/clientapp/src/components/molecules/color-class-select/color-class-select.tsx
index a9a2c04e18..a3b11dd1ad 100644
--- a/starsky/starsky/clientapp/src/components/molecules/color-class-select/color-class-select.tsx
+++ b/starsky/starsky/clientapp/src/components/molecules/color-class-select/color-class-select.tsx
@@ -100,7 +100,7 @@ const ColorClassSelect: React.FunctionComponent<IColorClassSelectProps> = (
                 : "btn colorclass colorclass--" + index
             }
           >
-            <label />
+            <span className="label" />
             <span>{item}</span>
           </button>
         ))}
diff --git a/starsky/starsky/clientapp/src/components/molecules/menu-inline-search/menu-inline-search.tsx b/starsky/starsky/clientapp/src/components/molecules/menu-inline-search/menu-inline-search.tsx
index 19c0a0e347..d260fe59e9 100644
--- a/starsky/starsky/clientapp/src/components/molecules/menu-inline-search/menu-inline-search.tsx
+++ b/starsky/starsky/clientapp/src/components/molecules/menu-inline-search/menu-inline-search.tsx
@@ -99,7 +99,7 @@ const MenuInlineSearch: React.FunctionComponent<IMenuSearchBarProps> = (
 
   return (
     <div className="menu-inline-search">
-      <div
+      <button
         className={!formFocus ? "blur" : ""}
         onFocus={() => setFormFocus(true)}
       >
@@ -157,7 +157,7 @@ const MenuInlineSearch: React.FunctionComponent<IMenuSearchBarProps> = (
             featuresResult={featuresResult}
           />
         </ul>
-      </div>
+      </button>
     </div>
   );
 };
diff --git a/starsky/starsky/clientapp/src/components/organisms/menu-detail-view/shared/go-to-parent-folder.tsx b/starsky/starsky/clientapp/src/components/organisms/menu-detail-view/shared/go-to-parent-folder.tsx
index aefed39d35..ba0c91f241 100644
--- a/starsky/starsky/clientapp/src/components/organisms/menu-detail-view/shared/go-to-parent-folder.tsx
+++ b/starsky/starsky/clientapp/src/components/organisms/menu-detail-view/shared/go-to-parent-folder.tsx
@@ -1,10 +1,9 @@
-import useGlobalSettings from "../../../../hooks/use-global-settings";
 import { IUseLocation } from "../../../../hooks/use-location/interfaces/IUseLocation";
 import { IDetailView } from "../../../../interfaces/IDetailView";
 import { INavigateState } from "../../../../interfaces/INavigateState";
 import localization from "../../../../localization/localization.json";
-import { Language } from "../../../../shared/language";
 import { UrlQuery } from "../../../../shared/url-query";
+import MenuOption from "../../../atoms/menu-option/menu-option";
 
 export interface IGoToParentFolderProps {
   isSearchQuery: boolean;
@@ -15,12 +14,6 @@ export interface IGoToParentFolderProps {
 export const GoToParentFolder: React.FunctionComponent<
   IGoToParentFolderProps
 > = ({ isSearchQuery, history, state }) => {
-  const settings = useGlobalSettings();
-  const language = new Language(settings.language);
-  const MessageGoToParentFolder = language.key(
-    localization.MessageGoToParentFolder
-  );
-
   function navigateToParentFolder() {
     history.navigate(
       new UrlQuery().updateFilePathHash(
@@ -39,16 +32,12 @@ export const GoToParentFolder: React.FunctionComponent<
   return (
     <>
       {isSearchQuery ? (
-        <li
-          className="menu-option"
-          data-test="go-to-parent-folder"
-          onClick={() => navigateToParentFolder()}
-          onKeyDown={(event) => {
-            event.key === "Enter" && navigateToParentFolder();
-          }}
-        >
-          {MessageGoToParentFolder}
-        </li>
+        <MenuOption
+          isReadOnly={false}
+          onClickKeydown={() => navigateToParentFolder()}
+          testName="go-to-parent-folder"
+          localization={localization.MessageGoToParentFolder}
+        />
       ) : null}
     </>
   );
diff --git a/starsky/starsky/clientapp/src/contexts/archive-context.tsx b/starsky/starsky/clientapp/src/contexts/archive-context.tsx
index 00d33db811..93dfc157cd 100644
--- a/starsky/starsky/clientapp/src/contexts/archive-context.tsx
+++ b/starsky/starsky/clientapp/src/contexts/archive-context.tsx
@@ -107,6 +107,34 @@ function updateArchiveReducerTagsDescriptionTitleSet(
   if (update.title) state.fileIndexItems[index].title = update.title;
 }
 
+function updateArchiveReducerHelper(
+  action: {
+    type: "update";
+    tags?: string | undefined;
+    colorclass?: number | undefined;
+    description?: string | undefined;
+    title?: string | undefined;
+    append?: boolean | undefined;
+    select: string[];
+    fileHash?: string | undefined;
+  },
+  state: IArchiveProps
+) {
+  const { select, tags, description, title, append, colorclass, fileHash } =
+    action;
+  const update = {
+    select,
+    tags,
+    description,
+    title,
+    append,
+    colorclass,
+    fileHash
+  };
+
+  return updateArchiveReducer(state, update);
+}
+
 function updateArchiveReducer(
   state: IArchiveProps,
   update: IUpdateArchiveReducer
@@ -252,6 +280,58 @@ function filterDeletedItems(
   return fileIndexItems;
 }
 
+function removeReducer(
+  action: {
+    type: "remove";
+    toRemoveFileList: string[];
+  },
+  state: IArchiveProps
+) {
+  // files == subpath style not only the name (/dir/file.jpg)
+  const { toRemoveFileList } = action;
+
+  let deletedFilesCount = 0;
+  const afterFileIndexItems: IFileIndexItem[] = [];
+
+  state.fileIndexItems.forEach((item) => {
+    if (toRemoveFileList.indexOf(item.filePath) === -1) {
+      afterFileIndexItems.push(item);
+    } else {
+      deletedFilesCount++;
+    }
+  });
+
+  // to update the total results
+  const collectionsCount = state.collectionsCount - deletedFilesCount;
+
+  const newState = {
+    ...state,
+    fileIndexItems: afterFileIndexItems,
+    collectionsCount,
+    lastUpdated: new Date()
+  };
+
+  // when you remove the last item of the directory
+  if (newState.fileIndexItems.length === 0) {
+    newState.colorClassUsage = [];
+  }
+  return updateCache(newState);
+}
+
+function forceResetReducer(action: {
+  type: "force-reset";
+  payload: IArchiveProps;
+}) {
+  // also update the cache
+  const forceResetUpdated = {
+    ...action.payload,
+    fileIndexItems: sorter(
+      new ArrayHelper().UniqueResults(action.payload.fileIndexItems, "filePath")
+    )
+  };
+  return updateCache(forceResetUpdated);
+}
+
 export function archiveReducer(state: State, action: ArchiveAction): State {
   switch (action.type) {
     case "remove-folder":
@@ -263,62 +343,13 @@ export function archiveReducer(state: State, action: ArchiveAction): State {
         fileIndexItems: []
       });
     case "remove":
-      // files == subpath style not only the name (/dir/file.jpg)
-      const { toRemoveFileList } = action;
-
-      let deletedFilesCount = 0;
-      const afterFileIndexItems: IFileIndexItem[] = [];
-
-      state.fileIndexItems.forEach((item) => {
-        if (toRemoveFileList.indexOf(item.filePath) === -1) {
-          afterFileIndexItems.push(item);
-        } else {
-          deletedFilesCount++;
-        }
-      });
-
-      // to update the total results
-      const collectionsCount = state.collectionsCount - deletedFilesCount;
-
-      const newState = {
-        ...state,
-        fileIndexItems: afterFileIndexItems,
-        collectionsCount,
-        lastUpdated: new Date()
-      };
-
-      // when you remove the last item of the directory
-      if (newState.fileIndexItems.length === 0) {
-        newState.colorClassUsage = [];
-      }
-      return updateCache(newState);
+      return removeReducer(action, state);
     case "update":
-      const { select, tags, description, title, append, colorclass, fileHash } =
-        action;
-      const update = {
-        select,
-        tags,
-        description,
-        title,
-        append,
-        colorclass,
-        fileHash
-      };
-      return updateArchiveReducer(state, update);
+      return updateArchiveReducerHelper(action, state);
     case "set":
       return setArchiveReducer(action.payload);
     case "force-reset":
-      // also update the cache
-      const forceResetUpdated = {
-        ...action.payload,
-        fileIndexItems: sorter(
-          new ArrayHelper().UniqueResults(
-            action.payload.fileIndexItems,
-            "filePath"
-          )
-        )
-      };
-      return updateCache(forceResetUpdated);
+      return forceResetReducer(action);
     case "rename-folder":
       return updateCache({ ...state, subPath: action.path });
     case "add":
diff --git a/starsky/starsky/clientapp/src/contexts/detailview-context.tsx b/starsky/starsky/clientapp/src/contexts/detailview-context.tsx
index 776e6a716f..d3dd82b5c5 100644
--- a/starsky/starsky/clientapp/src/contexts/detailview-context.tsx
+++ b/starsky/starsky/clientapp/src/contexts/detailview-context.tsx
@@ -63,6 +63,80 @@ export type IDetailViewContext = {
   state: IDetailView;
   dispatch: React.Dispatch<DetailViewAction>;
 };
+
+function updateReducer(
+  action: {
+    type: "update";
+    filePath: string;
+    tags?: string | undefined;
+    colorclass?: number | undefined;
+    description?: string | undefined;
+    title?: string | undefined;
+    fileHash?: string | undefined;
+    locationState?: string | undefined;
+    status?: IExifStatus;
+    orientation?: Orientation;
+    lastEdited?: string;
+    dateTime?: string;
+    latitude?: number;
+    longitude?: number;
+    locationCountry?: string;
+    locationCountryCode?: string;
+    locationCity?: string;
+  },
+  state: IDetailView
+) {
+  const {
+    filePath,
+    tags,
+    description,
+    title,
+    status,
+    colorclass,
+    fileHash,
+    orientation,
+    lastEdited,
+    dateTime,
+    latitude,
+    longitude,
+    locationCity,
+    locationCountry,
+    locationCountryCode,
+    locationState
+  } = action;
+
+  if (filePath !== state.fileIndexItem.filePath) {
+    console.log(
+      `Error: filePath is not the same ${filePath} != ${state.fileIndexItem.filePath}`
+    );
+    return state;
+  }
+
+  if (tags !== undefined) state.fileIndexItem.tags = tags;
+  if (description !== undefined) state.fileIndexItem.description = description;
+  if (title !== undefined) state.fileIndexItem.title = title;
+  if (colorclass !== undefined && colorclass !== -1)
+    state.fileIndexItem.colorClass = colorclass;
+  if (status) state.fileIndexItem.status = status;
+  if (fileHash) state.fileIndexItem.fileHash = fileHash;
+  if (orientation) state.fileIndexItem.orientation = orientation;
+  if (lastEdited) state.fileIndexItem.lastEdited = lastEdited;
+  if (dateTime) state.fileIndexItem.dateTime = dateTime;
+  if (latitude) state.fileIndexItem.latitude = latitude;
+  if (longitude) state.fileIndexItem.longitude = longitude;
+  if (locationCity) state.fileIndexItem.locationCity = locationCity;
+  if (locationCountry) {
+    state.fileIndexItem.locationCountry = locationCountry;
+  }
+  if (locationCountryCode) {
+    state.fileIndexItem.locationCountryCode = locationCountryCode;
+  }
+  if (locationState) state.fileIndexItem.locationState = locationState;
+
+  // Need to update otherwise other events are not triggered
+  return updateCache({ ...state, lastUpdated: new Date() });
+}
+
 export function detailviewReducer(
   state: IDetailView,
   action: DetailViewAction
@@ -81,56 +155,7 @@ export function detailviewReducer(
       // Need to update otherwise other events are not triggered
       return updateCache({ ...state, lastUpdated: new Date() });
     case "update":
-      const {
-        filePath,
-        tags,
-        description,
-        title,
-        status,
-        colorclass,
-        fileHash,
-        orientation,
-        lastEdited,
-        dateTime,
-        latitude,
-        longitude,
-        locationCity,
-        locationCountry,
-        locationCountryCode,
-        locationState
-      } = action;
-
-      if (filePath !== state.fileIndexItem.filePath) {
-        console.log(
-          `Error: filePath is not the same ${filePath} != ${state.fileIndexItem.filePath}`
-        );
-        return state;
-      }
-
-      if (tags !== undefined) state.fileIndexItem.tags = tags;
-      if (description !== undefined)
-        state.fileIndexItem.description = description;
-      if (title !== undefined) state.fileIndexItem.title = title;
-      if (colorclass !== undefined && colorclass !== -1)
-        state.fileIndexItem.colorClass = colorclass;
-      if (status) state.fileIndexItem.status = status;
-      if (fileHash) state.fileIndexItem.fileHash = fileHash;
-      if (orientation) state.fileIndexItem.orientation = orientation;
-      if (lastEdited) state.fileIndexItem.lastEdited = lastEdited;
-      if (dateTime) state.fileIndexItem.dateTime = dateTime;
-      if (latitude) state.fileIndexItem.latitude = latitude;
-      if (longitude) state.fileIndexItem.longitude = longitude;
-      if (locationCity) state.fileIndexItem.locationCity = locationCity;
-      if (locationCountry) {
-        state.fileIndexItem.locationCountry = locationCountry;
-      }
-      if (locationCountryCode) {
-        state.fileIndexItem.locationCountryCode = locationCountryCode;
-      }
-      if (locationState) state.fileIndexItem.locationState = locationState;
-
-      // Need to update otherwise other events are not triggered
-      return updateCache({ ...state, lastUpdated: new Date() });
+      return updateReducer(action, state);
     case "reset":
       // this is triggered a lot when loading a page
       return action.payload;
diff --git a/starsky/starsky/clientapp/src/shared/url-path.ts b/starsky/starsky/clientapp/src/shared/url-path.ts
index c915171610..68fe53fc80 100644
--- a/starsky/starsky/clientapp/src/shared/url-path.ts
+++ b/starsky/starsky/clientapp/src/shared/url-path.ts
@@ -8,6 +8,12 @@ export class URLPath {
     return filePath.split("/")[filePath.split("/").length - 1];
   }
 
+  private parsePagination(key: [string, string], urlObject: IUrl) {
+    const pagination = Number(key[1]);
+    if (isNaN(pagination)) return;
+    urlObject.p = pagination;
+  }
+
   public StringToIUrl(locationHash: string): IUrl {
     const hash = this.RemovePrefixUrl(locationHash);
     const params = new URLSearchParams(hash).entries();
@@ -39,10 +45,7 @@ export class URLPath {
           urlObject.t = key[1];
           break;
         case "p": // used for search pagination
-          // eslint-disable-next-line no-case-declarations
-          const pagination = Number(key[1]);
-          if (isNaN(pagination)) continue;
-          urlObject.p = pagination;
+          this.parsePagination(key, urlObject);
           break;
         case "select".toLowerCase():
           urlObject.select = this.getStringArrayFromCommaSeparatedString(
diff --git a/starsky/starsky/clientapp/src/style/css/03-button.css b/starsky/starsky/clientapp/src/style/css/03-button.css
index fc4f34d250..ca9ee74f52 100644
--- a/starsky/starsky/clientapp/src/style/css/03-button.css
+++ b/starsky/starsky/clientapp/src/style/css/03-button.css
@@ -57,28 +57,6 @@
   }
 }
 
-/* .btn-danger {
-    color: #fff;
-    background-color: #BF360C;
-    border-color: #B71C1C;
-}
-.btn-warning {
-    color: #212529;
-    background-color: #ffc107;
-    border-color: #ffc107;
-}
-
-.btn-info {
-    color: #007bff;
-    background-color: #EBEBEB;
-}
-.btn-secondary {
-    text-decoration: none;
-    color: #fff;
-    background-color: #5a6268;
-    border-color: #545b62;
-} */
-
 .btn.disabled,
 .btn:disabled {
   cursor: not-allowed;
diff --git a/starsky/starsky/clientapp/src/style/css/03-button.danger-warning.css b/starsky/starsky/clientapp/src/style/css/03-button.danger-warning.css
new file mode 100644
index 0000000000..cb1e451a25
--- /dev/null
+++ b/starsky/starsky/clientapp/src/style/css/03-button.danger-warning.css
@@ -0,0 +1,23 @@
+/* not loaded at the moment */
+
+.btn-danger {
+    color: #fff;
+    background-color: #BF360C;
+    border-color: #B71C1C;
+}
+.btn-warning {
+    color: #212529;
+    background-color: #ffc107;
+    border-color: #ffc107;
+}
+
+.btn-info {
+    color: #007bff;
+    background-color: #EBEBEB;
+}
+.btn-secondary {
+    text-decoration: none;
+    color: #fff;
+    background-color: #5a6268;
+    border-color: #545b62;
+}
diff --git a/starsky/starsky/clientapp/src/style/css/10-menu.css b/starsky/starsky/clientapp/src/style/css/10-menu.css
index 952f2dc6bf..c9aa029f3c 100644
--- a/starsky/starsky/clientapp/src/style/css/10-menu.css
+++ b/starsky/starsky/clientapp/src/style/css/10-menu.css
@@ -59,6 +59,10 @@
   box-shadow: none;
 }
 
+.header .menu-inline-search button {
+  width: 100%;
+}
+
 .header .menu-item {
   list-style: none;
   font-size: 16px;
diff --git a/starsky/starsky/clientapp/src/style/css/26-colorfilter.css b/starsky/starsky/clientapp/src/style/css/26-colorfilter.css
index e45ec2363e..525c35e27c 100644
--- a/starsky/starsky/clientapp/src/style/css/26-colorfilter.css
+++ b/starsky/starsky/clientapp/src/style/css/26-colorfilter.css
@@ -96,7 +96,7 @@
   height: 35px;
 }
 
-.colorclass > div.colorclass label,
+.colorclass > .btn.colorclass .label,
 .colorclass > .btn.colorclass label {
   height: 20px;
   width: 20px;
@@ -109,7 +109,7 @@
   cursor: pointer;
 }
 
-.colorclass > div.colorclass.active label:before,
+.colorclass > .btn.colorclass.active .label:before,
 .colorclass > .btn.colorclass.active label:before {
   content: "";
   display: inline-block;
@@ -131,10 +131,12 @@
   cursor: not-allowed;
 }
 
+.colorclass.colorclass--disabled > .btn.colorclass .label,
 .colorclass.colorclass--disabled > .btn.colorclass label {
   cursor: not-allowed;
 }
 
+.colorclass--select > .btn.colorclass.active .label:before,
 .colorclass--select > .btn.colorclass.active label:before {
   content: "";
   border: 0px;
diff --git a/starsky/starsky/clientapp/src/style/css/34-search-header.css b/starsky/starsky/clientapp/src/style/css/34-search-header.css
index 9ccba953b7..38a0b78875 100644
--- a/starsky/starsky/clientapp/src/style/css/34-search-header.css
+++ b/starsky/starsky/clientapp/src/style/css/34-search-header.css
@@ -78,7 +78,3 @@
   background-color: #607d8b;
 }
 
-/* this is the search bar, and in dark mode the color is different */
-.search-header .menu-item:first-child {
-  background-color: transparent;
-}
diff --git a/starskydesktop/src/client/css/29-switch-button.css b/starskydesktop/src/client/css/29-switch-button.css
index e7c19651ab..68622dfcc6 100644
--- a/starskydesktop/src/client/css/29-switch-button.css
+++ b/starskydesktop/src/client/css/29-switch-button.css
@@ -7,6 +7,7 @@
     opacity: 0;
 }
 
+.switch-field .label,
 .switch-field label {
   border: 1px solid rgba(0, 0, 0, 0.2);
   display: inline-block;
@@ -23,17 +24,19 @@
 
 /* switches opposite colors */
 @media (prefers-color-scheme: dark) {
+  .switch-field .label,
   .switch-field label {
     background-color: #263238;
     color: #fff;
   }
 }
 
-
+.switch-field .label:hover
 .switch-field label:hover {
 	cursor: pointer;
 }
 
+.switch-field input:checked + .label,
 .switch-field input:checked + label {
   background-color: #263238;
 	color: #fff;
@@ -43,6 +46,7 @@
 /* white is selected instead of black */
 /* switches opposite colors */
 @media (prefers-color-scheme: dark) {
+  .switch-field input:checked + .label,
   .switch-field input:checked + label {
     background-color: #fff;
     color: #263238;
@@ -50,19 +54,23 @@
 }
 
 
+.switch-field.disabled input:checked + .label,
 .switch-field.disabled input:checked + label{
   background-color: #ECEFF1;
   color: #263238;
 }
 
+.switch-field.disabled .label,
 .switch-field.disabled label {
   cursor: not-allowed;
 }
 
+.switch-field .label:first-of-type,
 .switch-field label:first-of-type {
   border-radius: 16px 0 0 16px;
 }
 
+.switch-field .label:last-of-type,
 .switch-field label:last-of-type {
   border-radius: 0 16px 16px 0;
 }