Merge pull request #972 from syucream/fix/refine-advanced-search-para…

…ms-props Refine props passed in advanced search params
dmm-com · Oct 16, 2023 · 2004e3b · 2004e3b
2 parents e3e758c + 9f116d7
commit 2004e3b
Show file tree

Hide file tree

Showing 9 changed files with 302 additions and 274 deletions.
diff --git a/frontend/src/components/entry/AdvancedSearchModal.tsx b/frontend/src/components/entry/AdvancedSearchModal.tsx
@@ -58,7 +58,7 @@ export const AdvancedSearchModal: FC<Props> = ({
 
   const handleUpdatePageURL = () => {
     const params = formatAdvancedSearchParams({
-      attrFilter: Object.fromEntries(
+      attrsFilter: Object.fromEntries(
         selectedAttrNames.map((attrName) => {
           const attrInfo = attrInfos.find((info) => info.name === attrName);
           return [

diff --git a/frontend/src/components/entry/SearchResultControlMenu.tsx b/frontend/src/components/entry/SearchResultControlMenu.tsx
@@ -13,7 +13,7 @@ import {
 import { styled } from "@mui/material/styles";
 import React, { ChangeEvent, FC } from "react";
 
-import { AttrsFilter } from "../../services/entry/AdvancedSearch";
+import { AttrFilter } from "../../services/entry/AdvancedSearch";
 
 const StyledTextField = styled(TextField)({
   margin: "8px",
@@ -24,75 +24,61 @@ const StyledBox = styled(Box)({
 });
 
 interface Props {
-  attrName: string;
-  attrsFilter: AttrsFilter;
+  attrFilter: AttrFilter;
   anchorElem: HTMLButtonElement | null;
-  handleClose: (name: string) => void;
-  setAttrsFilter: (filter: AttrsFilter) => void;
-  handleSelectFilterConditions: (
-    attrfilter?: AttrsFilter,
-    overwriteEntryName?: string | undefined,
-    overwriteReferral?: string | undefined
-  ) => void;
+  handleUpdateAttrFilter: (filter: AttrFilter) => void;
+  handleSelectFilterConditions: (attrFilter: AttrFilter) => void;
+  handleClose: () => void;
 }
 
 export const SearchResultControlMenu: FC<Props> = ({
-  attrName,
-  attrsFilter,
+  attrFilter,
   anchorElem,
-  handleClose,
-  setAttrsFilter,
+  handleUpdateAttrFilter,
   handleSelectFilterConditions,
+  handleClose,
 }) => {
   const handleClick = (key: AdvancedSearchResultAttrInfoFilterKeyEnum) => {
     // If the selected filter is the same, remove the filter.
-    if (attrsFilter[attrName].filterKey === key) {
+    if (attrFilter.filterKey === key) {
       handleSelectFilterConditions({
-        ...attrsFilter,
-        [attrName]: {
-          ...attrsFilter[attrName],
-          filterKey: AdvancedSearchResultAttrInfoFilterKeyEnum.CLEARED,
-        },
+        ...attrFilter,
+        filterKey: AdvancedSearchResultAttrInfoFilterKeyEnum.CLEARED,
       });
       return;
     }
 
-    setAttrsFilter({
-      ...attrsFilter,
-      [attrName]: { ...attrsFilter[attrName], filterKey: key },
+    handleUpdateAttrFilter({
+      ...attrFilter,
+      filterKey: key,
     });
 
     switch (key) {
       case AdvancedSearchResultAttrInfoFilterKeyEnum.DUPLICATED:
       case AdvancedSearchResultAttrInfoFilterKeyEnum.EMPTY:
       case AdvancedSearchResultAttrInfoFilterKeyEnum.NON_EMPTY:
         handleSelectFilterConditions({
-          ...attrsFilter,
-          [attrName]: { ...attrsFilter[attrName], filterKey: key },
+          ...attrFilter,
+          filterKey: key,
         });
-
+        break;
       case AdvancedSearchResultAttrInfoFilterKeyEnum.CLEARED:
         handleSelectFilterConditions({
-          ...attrsFilter,
-          [attrName]: {
-            ...attrsFilter[attrName],
-            filterKey: key,
-            keyword: "",
-          },
+          ...attrFilter,
+          filterKey: key,
+          keyword: "",
         });
+        break;
     }
   };
 
   const handleChangeKeyword =
     (filterKey: AdvancedSearchResultAttrInfoFilterKeyEnum) =>
     (e: ChangeEvent<HTMLInputElement>) => {
-      setAttrsFilter({
-        ...attrsFilter,
-        [attrName]: {
-          ...attrsFilter[attrName],
-          keyword: e.target.value,
-          filterKey,
-        },
+      handleUpdateAttrFilter({
+        ...attrFilter,
+        keyword: e.target.value,
+        filterKey,
       });
     };
 
@@ -101,25 +87,20 @@ export const SearchResultControlMenu: FC<Props> = ({
     (e: React.KeyboardEvent<HTMLDivElement>) => {
       if (e.key === "Enter") {
         handleSelectFilterConditions({
-          ...attrsFilter,
-          [attrName]: {
-            ...attrsFilter[attrName],
-            filterKey,
-          },
+          ...attrFilter,
+          filterKey,
         });
       }
     };
 
   const filterKey =
-    attrsFilter[attrName].filterKey ??
-    AdvancedSearchResultAttrInfoFilterKeyEnum.CLEARED;
-  const keyword = attrsFilter[attrName].keyword ?? "";
+    attrFilter.filterKey ?? AdvancedSearchResultAttrInfoFilterKeyEnum.CLEARED;
+  const keyword = attrFilter.keyword ?? "";
 
   return (
     <Menu
-      id={attrName}
       open={Boolean(anchorElem)}
-      onClose={() => handleClose(attrName)}
+      onClose={handleClose}
       anchorEl={anchorElem}
     >
       <Box pl="16px" py="8px">

diff --git a/frontend/src/components/entry/SearchResultControlMenuForEntry.tsx b/frontend/src/components/entry/SearchResultControlMenuForEntry.tsx
@@ -7,9 +7,7 @@ import {
   Typography,
 } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import React, { FC } from "react";
-
-import { AttrsFilter } from "../../services/entry/AdvancedSearch";
+import React, { ChangeEvent, Dispatch, FC, KeyboardEvent } from "react";
 
 const StyledTextField = styled(TextField)({
   margin: "8px",
@@ -23,12 +21,10 @@ interface Props {
   entryFilter: string;
   anchorElem: HTMLButtonElement | null;
   handleClose: () => void;
-  entryFilterDispatcher: any;
-  handleSelectFilterConditions: (
-    attrfilter?: AttrsFilter,
-    overwriteEntryName?: string | undefined,
-    overwriteReferral?: string | undefined
-  ) => void;
+  entryFilterDispatcher: Dispatch<
+    ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  >;
+  handleSelectFilterConditions: () => void;
   handleClear: () => void;
 }
 
@@ -40,7 +36,7 @@ export const SearchResultControlMenuForEntry: FC<Props> = ({
   handleSelectFilterConditions,
   handleClear,
 }) => {
-  const handleKeyPressKeyword = (e: any) => {
+  const handleKeyPressKeyword = (e: KeyboardEvent<HTMLDivElement>) => {
     if (e.key === "Enter") {
       handleSelectFilterConditions();
     }

diff --git a/frontend/src/components/entry/SearchResultControlMenuForReferral.tsx b/frontend/src/components/entry/SearchResultControlMenuForReferral.tsx
@@ -11,9 +11,9 @@ import {
   Typography,
 } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import React, { FC, useState } from "react";
+import React, { ChangeEvent, Dispatch, FC, useState } from "react";
 
-import { AttrsFilter } from "../../services/entry/AdvancedSearch";
+import { AttrFilter } from "../../services/entry/AdvancedSearch";
 
 const StyledTextField = styled(TextField)({
   margin: "8px",
@@ -27,9 +27,11 @@ interface Props {
   referralFilter: string;
   anchorElem: HTMLButtonElement | null;
   handleClose: () => void;
-  referralFilterDispatcher: any;
+  referralFilterDispatcher: Dispatch<
+    ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  >;
   handleSelectFilterConditions: (
-    attrfilter?: AttrsFilter,
+    attrFilter?: AttrFilter,
     overwriteEntryName?: string | undefined,
     overwriteReferral?: string | undefined
   ) => void;