move setting defaultfiltervalues in statviz higher up in the DOM

shared-components/statviz/components/filter/MultiSelectFilter.tsx

@@ -1,10 +1,8 @@
 import { zodResolver } from "@hookform/resolvers/zod/src/zod.js";
 import { useForm } from "react-hook-form";
-import { useSearchParams } from "react-router-dom";
 import { z } from "zod";
 import { useEffect } from "react";
 import SelectField from "../../../form/SelectField";
-import { urlFilterValuesEncode } from "../../hooks/useMultiSelectFilter";
 
 export interface IFilterValue {
   value: string;
@@ -39,10 +37,7 @@ export default function MultiSelectFilter({
   filterValue,
   fieldLabel = "display by",
   onFilterChange,
-  defaultFilterValues = undefined,
 }: IValueFilterProps) {
-  const [searchParams, setSearchParams] = useSearchParams();
-
   const {
     setValue,
     control,
@@ -51,19 +46,14 @@ export default function MultiSelectFilter({
     resolver: zodResolver(ValueFilterSchema),
     defaultValues: values,
   });
+
   useEffect(() => {
     if (filterValue) {
       // @ts-expect-error ts(2345)
       setValue(filterId, filterValue);
     }
   }, [filterId, filterValue, setValue]);
 
-  useEffect(() => {
-    if (defaultFilterValues && searchParams.get(filterId) === null) {
-      searchParams.append(filterId, urlFilterValuesEncode(defaultFilterValues));
-      setSearchParams(searchParams);
-    }
-  });
   return (
     <SelectField
       fieldId={filterId}

shared-components/statviz/components/filter/TimeRangeSelect.tsx

@@ -2,7 +2,6 @@ import { Wrap, WrapItem } from "@chakra-ui/react";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod/src/zod.js";
 import { useForm } from "react-hook-form";
-import { subMonths } from "date-fns";
 import { useEffect } from "react";
 import { useSearchParams } from "react-router-dom";
 import { DateField } from "../../..";
@@ -45,14 +44,8 @@ export default function TimeRangeSelect() {
     const currentQuery = searchParams.toString();
     const newSearchParams = searchParams;
 
-    if (!searchParams.get("from")) {
-      newSearchParams.append("from", date2String(subMonths(new Date(), 3)));
-    }
-    if (!searchParams.get("to")) {
-      newSearchParams.append("to", date2String(new Date()));
-    }
-    const from = newSearchParams.get("from")!;
-    const to = newSearchParams.get("to")!;
+    const from = searchParams.get("from")!;
+    const to = searchParams.get("to")!;
 
     if (toFormValue === undefined) {
       setValue("to", to);

shared-components/statviz/components/filter/ValueFilter.tsx

@@ -36,11 +36,11 @@ export default function ValueFilter({
   onFilterChange,
   defaultFilterValue = undefined,
 }: IValueFilterProps) {
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams] = useSearchParams();
 
   const {
-    setValue,
     control,
+    setValue,
     formState: { errors },
   } = useForm({
     resolver: zodResolver(ValueFilterSchema),
@@ -53,16 +53,8 @@ export default function ValueFilter({
     if (filterOption) {
       // @ts-expect-error
       setValue(filterId, filterOption);
-    } else {
-      if (filterValue !== null) {
-        searchParams.delete(filterId);
-      }
-      if (defaultFilterValue) {
-        searchParams.append(filterId, defaultFilterValue.urlId);
-      }
-      setSearchParams(searchParams);
     }
-  }, [defaultFilterValue, filterId, searchParams, setSearchParams, setValue, values]);
+  }, [filterId, searchParams, setValue, values]);
 
   return (
     <SelectField

shared-components/statviz/dashboard/Dashboard.tsx

@@ -4,11 +4,41 @@ import Demographics from "./Demographics";
 import MovedBoxes from "./MovedBoxes";
 import ItemsAndBoxes from "./ItemsAndBoxes";
 import StockOverview from "./StockOverview";
-import BoxesOrItemsSelect from "../components/filter/BoxesOrItemsSelect";
+import BoxesOrItemsSelect, {
+  boxesOrItemsFilterValues,
+} from "../components/filter/BoxesOrItemsSelect";
 import GenderProductFilter from "../components/filter/GenderProductFilter";
 import TagFilter from "../components/filter/TagFilter";
+import { useSearchParams } from "react-router-dom";
+import { useEffect } from "react";
+import { date2String } from "../../utils/helpers";
+import { subMonths } from "date-fns";
 
 export default function Dashboard() {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  // set default filter states
+  // TODO: this is a quick fix and we should revisit the state handling of filters since it seems to be all over the place.
+  useEffect(() => {
+    const currentQuery = searchParams.toString();
+    const newSearchParams = searchParams;
+
+    // TimeRangeFilter
+    if (!searchParams.get("from")) {
+      newSearchParams.append("from", date2String(subMonths(new Date(), 3)));
+    }
+    if (!searchParams.get("to")) {
+      newSearchParams.append("to", date2String(new Date()));
+    }
+    if (!searchParams.get("boi")) {
+      newSearchParams.append("boi", boxesOrItemsFilterValues[0].urlId);
+    }
+
+    if (newSearchParams.toString() !== currentQuery) {
+      setSearchParams(newSearchParams);
+    }
+  }, [searchParams, setSearchParams]);
+
   return (
     <div>
       <Heading style={{ marginBottom: "15px" }}>Dashboard</Heading>