From 35a32f8706f8b732c39a4a8e4c01bc9232995822 Mon Sep 17 00:00:00 2001 From: HaGuesto Date: Tue, 19 Nov 2024 12:19:55 +0100 Subject: [PATCH 1/3] fix default timerange filter in statviz --- .../components/filter/TimeRangeSelect.tsx | 21 ++++++++++--------- statviz/types/generated/gql.ts | 3 +-- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/shared-components/statviz/components/filter/TimeRangeSelect.tsx b/shared-components/statviz/components/filter/TimeRangeSelect.tsx index b7d500cb2..cc995c15d 100644 --- a/shared-components/statviz/components/filter/TimeRangeSelect.tsx +++ b/shared-components/statviz/components/filter/TimeRangeSelect.tsx @@ -43,15 +43,16 @@ export default function TimeRangeSelect() { useEffect(() => { const currentQuery = searchParams.toString(); + const newSearchParams = searchParams; if (!searchParams.get("from")) { - searchParams.append("from", date2String(subMonths(new Date(), 3))); + newSearchParams.append("from", date2String(subMonths(new Date(), 3))); } if (!searchParams.get("to")) { - searchParams.append("to", date2String(new Date())); + newSearchParams.append("to", date2String(new Date())); } - const from = searchParams.get("from")!; - const to = searchParams.get("to")!; + const from = newSearchParams.get("from")!; + const to = newSearchParams.get("to")!; if (toFormValue === undefined) { setValue("to", to); @@ -62,16 +63,16 @@ export default function TimeRangeSelect() { } if (toFormValue && date2String(new Date(toFormValue)) !== to) { - searchParams.delete("to"); const newToDate = date2String(new Date(toFormValue)); - searchParams.append("to", newToDate); + newSearchParams.delete("to"); + newSearchParams.append("to", newToDate); trackFilter({ filterId: "timeRange", newToDate, from }); } if (fromFormValue && date2String(new Date(fromFormValue)) !== from) { const newFromDate = date2String(new Date(fromFormValue)); - searchParams.delete("from"); - searchParams.append("from", newFromDate); + newSearchParams.delete("from"); + newSearchParams.append("from", newFromDate); trackFilter({ filterId: "timeRange", from: newFromDate, @@ -79,8 +80,8 @@ export default function TimeRangeSelect() { }); } - if (searchParams.toString() !== currentQuery) { - setSearchParams(searchParams); + if (newSearchParams.toString() !== currentQuery) { + setSearchParams(newSearchParams); } }, [searchParams, setValue, setSearchParams, fromFormValue, toFormValue]); diff --git a/statviz/types/generated/gql.ts b/statviz/types/generated/gql.ts index 938a4ea78..d8cea8124 100644 --- a/statviz/types/generated/gql.ts +++ b/statviz/types/generated/gql.ts @@ -11,7 +11,6 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/ * 3. It does not support dead code elimination, so it will add unused operations. * * Therefore it is highly recommended to use the babel or swc plugin for production. - * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size */ const documents = { "\n query createdBoxes($baseId: Int!) {\n createdBoxes(baseId: $baseId) {\n facts {\n boxesCount\n productId\n categoryId\n createdOn\n tagIds\n gender\n itemsCount\n }\n dimensions {\n product {\n id\n name\n gender\n }\n category {\n id\n name\n }\n tag {\n id\n name\n color\n }\n }\n }\n }\n": types.CreatedBoxesDocument, @@ -65,4 +64,4 @@ export function gql(source: string) { return (documents as any)[source] ?? {}; } -export type DocumentType> = TDocumentNode extends DocumentNode< infer TType, any> ? TType : never; \ No newline at end of file +export type DocumentType> = TDocumentNode extends DocumentNode< infer TType, any> ? TType : never; From 396a91efa2a9ef1a156087449babbf45761b2945 Mon Sep 17 00:00:00 2001 From: HaGuesto Date: Thu, 21 Nov 2024 15:23:05 +0100 Subject: [PATCH 2/3] move setting defaultfiltervalues in statviz higher up in the DOM --- .../components/filter/MultiSelectFilter.tsx | 10 +----- .../components/filter/TimeRangeSelect.tsx | 11 ++----- .../statviz/components/filter/ValueFilter.tsx | 14 ++------ .../statviz/dashboard/Dashboard.tsx | 32 ++++++++++++++++++- 4 files changed, 37 insertions(+), 30 deletions(-) diff --git a/shared-components/statviz/components/filter/MultiSelectFilter.tsx b/shared-components/statviz/components/filter/MultiSelectFilter.tsx index b4473a502..900d4de97 100644 --- a/shared-components/statviz/components/filter/MultiSelectFilter.tsx +++ b/shared-components/statviz/components/filter/MultiSelectFilter.tsx @@ -39,10 +39,7 @@ export default function MultiSelectFilter({ filterValue, fieldLabel = "display by", onFilterChange, - defaultFilterValues = undefined, }: IValueFilterProps) { - const [searchParams, setSearchParams] = useSearchParams(); - const { setValue, control, @@ -51,6 +48,7 @@ export default function MultiSelectFilter({ resolver: zodResolver(ValueFilterSchema), defaultValues: values, }); + useEffect(() => { if (filterValue) { // @ts-expect-error ts(2345) @@ -58,12 +56,6 @@ export default function MultiSelectFilter({ } }, [filterId, filterValue, setValue]); - useEffect(() => { - if (defaultFilterValues && searchParams.get(filterId) === null) { - searchParams.append(filterId, urlFilterValuesEncode(defaultFilterValues)); - setSearchParams(searchParams); - } - }); return ( { 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); diff --git a/shared-components/statviz/components/filter/ValueFilter.tsx b/shared-components/statviz/components/filter/ValueFilter.tsx index a7d8e20c9..ae449539b 100644 --- a/shared-components/statviz/components/filter/ValueFilter.tsx +++ b/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 ( { + 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 (
Dashboard From 366c66caa3adcee80c1c59a0f1cf927a19726cc7 Mon Sep 17 00:00:00 2001 From: HaGuesto Date: Thu, 21 Nov 2024 15:36:07 +0100 Subject: [PATCH 3/3] fix build errors --- .../statviz/components/filter/MultiSelectFilter.tsx | 2 -- shared-components/statviz/components/filter/TimeRangeSelect.tsx | 1 - 2 files changed, 3 deletions(-) diff --git a/shared-components/statviz/components/filter/MultiSelectFilter.tsx b/shared-components/statviz/components/filter/MultiSelectFilter.tsx index 900d4de97..7e822dcac 100644 --- a/shared-components/statviz/components/filter/MultiSelectFilter.tsx +++ b/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; diff --git a/shared-components/statviz/components/filter/TimeRangeSelect.tsx b/shared-components/statviz/components/filter/TimeRangeSelect.tsx index 072e8b604..29a6db25b 100644 --- a/shared-components/statviz/components/filter/TimeRangeSelect.tsx +++ b/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 "../../..";