Merge Back to filter results

Closes #121
GeoWerkstatt · Oct 18, 2022 · 71c5c40 · 71c5c40
2 parents 44a0fd5 + cdf31ec
commit 71c5c40
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 28 deletions.
diff --git a/src/ClientApp/src/components/Detail.js b/src/ClientApp/src/components/Detail.js
@@ -27,8 +27,13 @@ export function Detail() {
   const navigate = useNavigate();
   const { md5, name } = useParams();
 
-  const backToSearch = () => navigate(`/${location.state.searchQuery}`, { replace: true });
   const toHome = () => navigate("/");
+  const backToSearch = () => {
+    navigate(`/${location.state.searchQuery}`, {
+      replace: true,
+      state: location.state,
+    });
+  };
 
   const linkToModelOrSearch = async (modelname) => {
     var url = new URL(window.location);
@@ -41,7 +46,7 @@ export function Detail() {
       if (matchingModels.length === 1) {
         navigate("/detail/" + matchingModels[0].mD5 + "/" + matchingModels[0].name, {
           replace: true,
-          state: { searchQuery: location.state.searchQuery },
+          state: location.state,
         });
       } else {
         navigate("/" + url.search);

diff --git a/src/ClientApp/src/components/Filter.js b/src/ClientApp/src/components/Filter.js
@@ -19,17 +19,27 @@ import TreeItem from "@mui/lab/TreeItem";
 import { SchemaLanguages } from "./SchemaLanguages";
 
 export function Filter(props) {
-  const { models, filteredModels, setFilteredModels, setPage, repositoryTree } = props;
+  const {
+    models,
+    filteredModels,
+    setFilteredModels,
+    setPage,
+    repositoryTree,
+    filterDefaultValues,
+    setFilterDefaultValues,
+  } = props;
   const [filterApplied, setFilterApplied] = useState(false);
-  const [referencedModels, setReferencedModels] = useState([]);
   const [hideReferencedModelResults, setHideReferencedModelResults] = useState(false);
-  const [allIssuerSelected, setAllIssuerSelected] = useState(false);
+  const [allIssuerSelected, setAllIssuerSelected] = useState(true);
   const [allSchemaLanguageSelected, setAllSchemaLanguageSelected] = useState(true);
 
   const { t } = useTranslation("common");
-  const { control, getValues, register, reset, setValue, handleSubmit, watch } = useForm();
+  const { control, getValues, register, reset, setValue, handleSubmit, watch } = useForm({
+    defaultValues: filterDefaultValues,
+  });
 
   const onSubmit = (data) => {
+    setFilterDefaultValues(data);
     let filtered = models;
     if (Array.isArray(data.modelRepository)) {
       filtered = filtered.filter((m) => data.modelRepository.some((repo) => m.modelRepository.includes(repo)));
@@ -40,8 +50,8 @@ export function Filter(props) {
     if (Array.isArray(data.schemaLanguage)) {
       filtered = filtered.filter((m) => data.schemaLanguage.includes(m.schemaLanguage));
     }
-    if (referencedModels.length > 0) {
-      filtered = filtered.filter((m) => m.dependsOnModel.some((m) => referencedModels.includes(m)));
+    if (Array.isArray(data.referencedModels) && data.referencedModels.length > 0) {
+      filtered = filtered.filter((m) => m.dependsOnModel.some((m) => data.referencedModels.includes(m)));
     }
     if (hideReferencedModelResults) {
       filtered = filtered.filter((m) => m.isDependOnModelResult === false);
@@ -61,11 +71,17 @@ export function Filter(props) {
     a.localeCompare(b)
   );
 
-  // Set default checkboxes checked for tree
   useEffect(() => {
-    setChildrenCheckStatus(repositoryTree, true);
-    checkAllSchemaLanguage(true);
-    checkAllIssuer(true);
+    // Set default checkboxes checked for tree
+    if (!filterDefaultValues) {
+      setChildrenCheckStatus(repositoryTree, true);
+      checkAllSchemaLanguage(true);
+      checkAllIssuer(true);
+    } else {
+      // Immediately submit filter form if filter default values were passed to component
+      handleSubmit(onSubmit)();
+      setFilterApplied(true);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -98,9 +114,9 @@ export function Filter(props) {
 
   const resetFilter = () => {
     reset();
+    setFilterDefaultValues(null);
     setFilteredModels(models);
     setFilterApplied(false);
-    setReferencedModels([]);
     setHideReferencedModelResults(false);
     checkAllSchemaLanguage(true);
     checkAllIssuer(true);
@@ -271,16 +287,24 @@ export function Filter(props) {
           <Typography mt={8} variant="h6">
             {t("referenced-models")}
           </Typography>
-          <Autocomplete
-            multiple
-            options={currentDependsOnModelOptions}
-            noOptionsText={t("no-depends-on-model")}
-            value={referencedModels}
-            onChange={(e, data) => {
-              setReferencedModels(data);
-            }}
-            renderInput={(params) => (
-              <TextField {...params} type="text" variant="standard" placeholder={t("model-name")} />
+          <Controller
+            name="referencedModels"
+            control={control}
+            defaultValue={[]}
+            render={({ field }) => (
+              <Autocomplete
+                {...field}
+                multiple
+                options={currentDependsOnModelOptions}
+                noOptionsText={t("no-depends-on-model")}
+                onChange={(e, data) => {
+                  field.onChange(data);
+                }}
+                value={field.value}
+                renderInput={(params) => (
+                  <TextField {...params} type="text" variant="standard" placeholder={t("model-name")} />
+                )}
+              />
             )}
           />
         </Box>

diff --git a/src/ClientApp/src/components/Home.js b/src/ClientApp/src/components/Home.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams, useLocation } from "react-router-dom";
 import { Autocomplete, Box, Button, CircularProgress, IconButton, TextField, Tooltip, Stack } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import SearchIcon from "@mui/icons-material/Search";
@@ -24,6 +24,8 @@ export function Home() {
   const [searchOptions, setSearchOptions] = useState([]);
   const [loading, setLoading] = useState();
   const [searchUrl, setSearchUrl] = useState();
+  const location = useLocation();
+  const [filterDefaultValues, setFilterDefaultValues] = useState();
 
   const { t } = useTranslation("common");
 
@@ -59,6 +61,7 @@ export function Home() {
 
   async function search(searchString) {
     const url = getSearchUrl();
+    setFilterDefaultValues(null);
     setSearchParams(
       {
         query: searchString,
@@ -117,7 +120,7 @@ export function Home() {
   };
 
   // If component is first loaded with search params present in URL the search should immediately be executed.
-  // On first load the hideFilter state should be set for all following requests.
+  // On first load the hideFilter state and all permanent filters should be set for all following requests.
   useEffect(() => {
     setHideFilter(searchParams.get("hideFilter"));
     !!searchParams.get(FilterValues.SchemaLanguages)
@@ -132,7 +135,13 @@ export function Home() {
       : setDependsOnModels([]);
     if (inputValue !== "") {
       search(inputValue);
+    } else {
+      // Case if user is returning to an empty search after filtering.
+      if (location.state?.filterDefaultValues) {
+        search("");
+      }
     }
+    setFilterDefaultValues(location.state?.filterDefaultValues || null);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -202,7 +211,15 @@ export function Home() {
           <CircularProgress />
         </Box>
       )}
-      {models !== null && <Results searchUrl={searchUrl} models={models} repositoryTree={repositoryTree}></Results>}
+      {models !== null && (
+        <Results
+          searchUrl={searchUrl}
+          models={models}
+          repositoryTree={repositoryTree}
+          filterDefaultValues={filterDefaultValues}
+          setFilterDefaultValues={setFilterDefaultValues}
+        ></Results>
+      )}
     </Box>
   );
 }
diff --git a/src/ClientApp/src/components/Results.js b/src/ClientApp/src/components/Results.js
@@ -16,7 +16,7 @@ import { Filter } from "./Filter";
 import { SchemaLanguages } from "./SchemaLanguages";
 
 export function Results(props) {
-  const { models, repositoryTree, searchUrl } = props;
+  const { models, repositoryTree, searchUrl, filterDefaultValues, setFilterDefaultValues } = props;
   const hideFilter = searchUrl.searchParams.get("hideFilter") === "true";
   const { t } = useTranslation("common");
   const [page, setPage] = useState(1);
@@ -39,6 +39,12 @@ export function Results(props) {
     setShowFilter(false);
   }, [models]);
 
+  useEffect(() => {
+    if (filterDefaultValues) {
+      setShowFilter(true);
+    }
+  }, [filterDefaultValues]);
+
   return (
     <React.Fragment>
       <Stack direction="row" justifyContent="space-between" alignItems="flex-end" spacing={2}>
@@ -58,6 +64,8 @@ export function Results(props) {
           repositoryTree={repositoryTree}
           setFilteredModels={setFilteredModels}
           setPage={setPage}
+          filterDefaultValues={filterDefaultValues ?? null}
+          setFilterDefaultValues={setFilterDefaultValues}
         ></Filter>
       )}
       <Box sx={{ width: "100%", bgcolor: "background.paper", marginBottom: 8 }}>
@@ -76,7 +84,7 @@ export function Results(props) {
                     <Link
                       style={{ color: "inherit", textDecoration: "inherit", fontSize: 20, margin: -1 }}
                       to={{ pathname: "/detail/" + model.mD5 + "/" + model.name }}
-                      state={{ searchQuery: searchUrl.search }}
+                      state={{ searchQuery: searchUrl.search, filterDefaultValues: filterDefaultValues }}
                     >
                       {model.name}
                     </Link>