mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-22 15:39:11 +00:00
@@ -1,5 +1,5 @@
|
|||||||
import { FormEvent, useEffect } from 'react';
|
import { FormEvent, useEffect } from 'react';
|
||||||
import { useLocation, useSearchParams } from 'react-router-dom';
|
import { useSearchParams } from 'react-router-dom';
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
Drawer,
|
Drawer,
|
||||||
@@ -12,30 +12,26 @@ import {
|
|||||||
useDisclosure,
|
useDisclosure,
|
||||||
} from '@chakra-ui/react';
|
} from '@chakra-ui/react';
|
||||||
|
|
||||||
import { useLocalStorage } from '../../hooks/useLocalStorage';
|
|
||||||
|
|
||||||
import ParamInput from './ParamInput';
|
import ParamInput from './ParamInput';
|
||||||
import { ParamField } from './types';
|
import { ParamField } from './types';
|
||||||
|
|
||||||
import style from './ViewParamsEditor.module.scss';
|
import style from './ViewParamsEditor.module.scss';
|
||||||
|
|
||||||
type ViewParamsObj = { [key: string]: string | FormDataEntryValue };
|
type ViewParamsObj = { [key: string]: string | FormDataEntryValue };
|
||||||
type SavedViewParams = Record<string, ViewParamsObj>;
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Makes a new URLSearchParams object from the given params object
|
||||||
|
*/
|
||||||
const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj, paramFields: ParamField[]) => {
|
const getURLSearchParamsFromObj = (paramsObj: ViewParamsObj, paramFields: ParamField[]) => {
|
||||||
const defaultValues = paramFields.reduce<Record<string, string>>((acc, { id, defaultValue }) => {
|
const defaultValues = paramFields.reduce<Record<string, string>>((acc, { id, defaultValue }) => {
|
||||||
return { ...acc, [id]: String(defaultValue) };
|
acc[id] = String(defaultValue);
|
||||||
|
return acc;
|
||||||
}, {});
|
}, {});
|
||||||
|
|
||||||
return Object.entries(paramsObj).reduce((newSearchParams, [id, value]) => {
|
return Object.entries(paramsObj).reduce((newSearchParams, [id, value]) => {
|
||||||
if (typeof value === 'string' && value.length) {
|
if (typeof value === 'string' && value.length && defaultValues[id] !== value) {
|
||||||
if (defaultValues[id] === value) {
|
|
||||||
return newSearchParams;
|
|
||||||
}
|
|
||||||
newSearchParams.set(id, value);
|
newSearchParams.set(id, value);
|
||||||
|
|
||||||
return newSearchParams;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return newSearchParams;
|
return newSearchParams;
|
||||||
}, new URLSearchParams());
|
}, new URLSearchParams());
|
||||||
};
|
};
|
||||||
@@ -47,8 +43,6 @@ interface EditFormDrawerProps {
|
|||||||
export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
|
export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
|
||||||
const [searchParams, setSearchParams] = useSearchParams();
|
const [searchParams, setSearchParams] = useSearchParams();
|
||||||
const { isOpen, onClose, onOpen } = useDisclosure();
|
const { isOpen, onClose, onOpen } = useDisclosure();
|
||||||
const { pathname } = useLocation();
|
|
||||||
const [storedViewParams, setStoredViewParams] = useLocalStorage<SavedViewParams>('ontime-views', {});
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const isEditing = searchParams.get('edit');
|
const isEditing = searchParams.get('edit');
|
||||||
@@ -58,27 +52,6 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
|
|||||||
}
|
}
|
||||||
}, [searchParams, onOpen]);
|
}, [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 = () => {
|
const onCloseWithoutSaving = () => {
|
||||||
onClose();
|
onClose();
|
||||||
|
|
||||||
@@ -87,7 +60,6 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const resetParams = () => {
|
const resetParams = () => {
|
||||||
setStoredViewParams({ ...storedViewParams, [pathname]: {} });
|
|
||||||
setSearchParams();
|
setSearchParams();
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -96,8 +68,6 @@ export default function ViewParamsEditor({ paramFields }: EditFormDrawerProps) {
|
|||||||
|
|
||||||
const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget));
|
const newParamsObject = Object.fromEntries(new FormData(formEvent.currentTarget));
|
||||||
const newSearchParams = getURLSearchParamsFromObj(newParamsObject, paramFields);
|
const newSearchParams = getURLSearchParamsFromObj(newParamsObject, paramFields);
|
||||||
|
|
||||||
setStoredViewParams({ ...storedViewParams, [pathname]: newParamsObject });
|
|
||||||
setSearchParams(newSearchParams);
|
setSearchParams(newSearchParams);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user