refactor(frontend): refactor singleSelectFilter

openfoodfacts · Apr 10, 2024 · 1a34e1f · 1a34e1f
1 parent 52313f3
commit 1a34e1f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 36 deletions.
diff --git a/taxonomy-editor-frontend/src/pages/project/search/FiltersArea.tsx b/taxonomy-editor-frontend/src/pages/project/search/FiltersArea.tsx
@@ -92,27 +92,17 @@ export const FiltersArea = ({
     updateFiltersStates(filters);
   }, [filters, updateFiltersStates]);
 
-  const reverseDict = (dict) => {
-    return Object.fromEntries(
-      Object.entries(dict).map(([key, value]) => [value, key])
-    );
-  };
-
   const scopeOptions = {
-    external: "Only Outside Current Taxonomy",
-    "not:external": "Only In Current Taxonomy",
-    both: "Both In and Outside Current Taxonomy",
+    "Only Outside Current Taxonomy": "external",
+    "Only In Current Taxonomy": "not:external",
+    "Both In and Outside Current Taxonomy": "both",
   };
 
-  const scopeOptionsReverse = reverseDict(scopeOptions);
-
   const levelOptions = {
-    root: "Without parents level",
-    both: "All levels",
+    "Without parents level": "root",
+    "All levels": "both",
   };
 
-  const levelOptionsReverse = reverseDict(levelOptions);
-
   return (
     <Box
       sx={{
@@ -131,19 +121,17 @@ export const FiltersArea = ({
       <SingleSelectFilter
         label="Hierarchy Level"
         filterValue={nodesLevel}
-        listOfChoices={Object.values(levelOptions)}
-        mapCodeToValue={(code: string) => levelOptions[code]}
-        mapValueToCode={(value: string) => levelOptionsReverse[value]}
+        listOfChoices={Object.keys(levelOptions)}
+        mapValueToCode={(value: string) => levelOptions[value]}
         setQ={setQ}
         keySearchTerm="is"
         setCurrentPage={setCurrentPage}
       />
       <SingleSelectFilter
         label="Scope"
         filterValue={taxonomyScope}
-        listOfChoices={Object.values(scopeOptions)}
-        mapCodeToValue={(code: string) => scopeOptions[code]}
-        mapValueToCode={(value: string) => scopeOptionsReverse[value]}
+        listOfChoices={Object.keys(scopeOptions)}
+        mapValueToCode={(value: string) => scopeOptions[value]}
         setQ={setQ}
         keySearchTerm="is"
         setCurrentPage={setCurrentPage}

diff --git a/taxonomy-editor-frontend/src/pages/project/search/SingleSelectFilter.tsx b/taxonomy-editor-frontend/src/pages/project/search/SingleSelectFilter.tsx
@@ -1,6 +1,5 @@
 import {
   FormControl,
-  Checkbox,
   Select,
   MenuItem,
   InputLabel,
@@ -12,7 +11,6 @@ type SingleSelectFilterType = {
   label: string;
   filterValue: string;
   listOfChoices: string[];
-  mapCodeToValue: (code: string) => string;
   mapValueToCode: (value: string) => string;
   setQ: Dispatch<SetStateAction<string>>;
   keySearchTerm: string;
@@ -23,18 +21,15 @@ export const SingleSelectFilter = ({
   label,
   filterValue,
   listOfChoices,
-  mapCodeToValue = () => "",
   mapValueToCode = () => "",
   setQ,
   keySearchTerm,
   setCurrentPage,
 }: SingleSelectFilterType) => {
   const [menuOpen, setMenuOpen] = useState(false);
 
-  const handleChange = (
-    event: ChangeEvent<HTMLInputElement>,
-    codeItem: string
-  ) => {
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const codeItem = event.target.value;
     setCurrentPage(1);
     if (filterValue !== codeItem) {
       setQ((prevQ) => {
@@ -59,24 +54,20 @@ export const SingleSelectFilter = ({
 
   return (
     <FormControl sx={{ m: 1 }}>
-      <InputLabel id="multiple-select-label">{label}</InputLabel>
+      <InputLabel id="single-select-label">{label}</InputLabel>
       <Select
         id="languages-filter"
         sx={{ width: "170px" }}
         open={menuOpen}
         onClose={handleSelectClose}
         onOpen={handleSelectOpen}
-        value={mapCodeToValue(filterValue)}
-        renderValue={(selected) => selected}
+        value={filterValue}
+        onChange={handleChange}
       >
         {listOfChoices.map((languageNameItem) => {
           const languageCodeItem = mapValueToCode(languageNameItem);
           return (
             <MenuItem key={languageCodeItem} value={languageCodeItem}>
-              <Checkbox
-                checked={filterValue === languageCodeItem}
-                onChange={(event) => handleChange(event, languageCodeItem)}
-              />
               <ListItemText primary={languageNameItem} />
             </MenuItem>
           );

diff --git a/taxonomy-editor-frontend/src/pages/project/search/index.tsx b/taxonomy-editor-frontend/src/pages/project/search/index.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import { Box } from "@mui/material";
 import { DefaultService } from "@/client";
 
-import { useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import { AdvancedResearchResults } from "./SearchResults";
 import { SearchExpressionInput } from "./SearchExpressionInput";
 import { FiltersArea } from "./FiltersArea";
@@ -47,6 +47,7 @@ export const AdvancedSearchForm = () => {
         );
       return nodesResult;
     },
+    placeholderData: keepPreviousData,
   });
 
   useEffect(() => {