From 0a8155b6e3fab0ecafb4a5ef18524dc107da6e2d Mon Sep 17 00:00:00 2001 From: Carlos Valente <34649812+cpvalente@users.noreply.github.com> Date: Fri, 15 Mar 2024 16:52:33 +0100 Subject: [PATCH] Param nav (#822) * refactor: remove unused * refactor: simplify logic --- .../view-params-editor/ViewParamsEditor.tsx | 46 ++++--------------- 1 file changed, 8 insertions(+), 38 deletions(-) diff --git a/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx b/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx index 2947ab64f..676b9cfe5 100644 --- a/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx +++ b/apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx @@ -1,5 +1,5 @@ import { FormEvent, useEffect } from 'react'; -import { useLocation, useSearchParams } from 'react-router-dom'; +import { useSearchParams } from 'react-router-dom'; import { Button, Drawer, @@ -12,30 +12,26 @@ import { useDisclosure, } from '@chakra-ui/react'; -import { useLocalStorage } from '../../hooks/useLocalStorage'; - import ParamInput from './ParamInput'; import { ParamField } from './types'; import style from './ViewParamsEditor.module.scss'; type ViewParamsObj = { [key: string]: string | FormDataEntryValue }; -type SavedViewParams = Record; +/** + * Makes a new URLSearchParams object from the given params object + */ const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj, paramFields: ParamField[]) => { const defaultValues = paramFields.reduce>((acc, { id, defaultValue }) => { - return { ...acc, [id]: String(defaultValue) }; + acc[id] = String(defaultValue); + return acc; }, {}); + return Object.entries(paramsObj).reduce((newSearchParams, [id, value]) => { - if (typeof value === 'string' && value.length) { - if (defaultValues[id] === value) { - return newSearchParams; - } + if (typeof value === 'string' && value.length && defaultValues[id] !== value) { newSearchParams.set(id, value); - - return newSearchParams; } - return newSearchParams; }, new URLSearchParams()); }; @@ -47,8 +43,6 @@ interface EditFormDrawerProps { export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) { const [searchParams, setSearchParams] = useSearchParams(); const { isOpen, onClose, onOpen } = useDisclosure(); - const { pathname } = useLocation(); - const [storedViewParams, setStoredViewParams] = useLocalStorage('ontime-views', {}); useEffect(() => { const isEditing = searchParams.get('edit'); @@ -58,27 +52,6 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) { } }, [searchParams, onOpen]); - /** - * disabling this for now, this feature needs more testing - * - we seem to have a bug where this is conflicting with the aliases - * - I wonder if the logic below needs to be inside an effect, - * both localStorage and searchParams should trigger a component update when they change - - useEffect(() => { - const viewParamsObjFromLocalStorage = storedViewParams[pathname]; - - if (viewParamsObjFromLocalStorage !== undefined) { - const defaultSearchParams = getURLSearchParamsFromObj(viewParamsObjFromLocalStorage); - setSearchParams(defaultSearchParams); - } - - // linter is asking for `setSearchParams` & `storedViewParams` in the useEffect deps - // rule is disabled since adding `setSearchParams` & `storedViewParams` results in unnecessary re-renders - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [pathname]); - - */ - const onCloseWithoutSaving = () => { onClose(); @@ -87,7 +60,6 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) { }; const resetParams = () => { - setStoredViewParams({ ...storedViewParams, [pathname]: {} }); setSearchParams(); }; @@ -96,8 +68,6 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) { const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget)); const newSearchParams = getURLSearchParamsFromObj(newParamsObject, paramFields); - - setStoredViewParams({ ...storedViewParams, [pathname]: newParamsObject }); setSearchParams(newSearchParams); };