code smells & filenames hidden #1305

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"
     },

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>
           ) : (

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>
         ))}

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>
   );
 };

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}
     </>
   );

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;
+    colorclass?: number;
+    description?: string;
+    title?: string;
+    append?: boolean;
+    select: string[];
+    fileHash?: string;
+  },
+  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":