From 0de36c7a98e316b59b4895bdd74c08d1a44bcac1 Mon Sep 17 00:00:00 2001 From: Owen-Morgan825 Date: Tue, 14 Jan 2025 19:55:36 -0500 Subject: [PATCH] add force reset event (nuke the form) --- src/components/inputs/CheckboxInput.tsx | 5 +++-- src/components/inputs/CounterInput.tsx | 6 +++++- src/components/inputs/NumberInput.tsx | 7 ++++--- src/components/inputs/RangeInput.tsx | 5 +++-- src/components/inputs/SelectInput.tsx | 5 +++-- src/components/inputs/StringInput.tsx | 5 +++-- src/components/inputs/TimerInput.tsx | 7 ++++--- src/hooks/useEvent.ts | 1 + src/store/store.ts | 11 +++++++++-- 9 files changed, 35 insertions(+), 17 deletions(-) diff --git a/src/components/inputs/CheckboxInput.tsx b/src/components/inputs/CheckboxInput.tsx index 307bdd4..b7495ef 100644 --- a/src/components/inputs/CheckboxInput.tsx +++ b/src/components/inputs/CheckboxInput.tsx @@ -16,14 +16,15 @@ export default function CheckboxInput(props: ConfigurableInputProps) { const [checked, setChecked] = React.useState(data.defaultValue); - const resetState = React.useCallback(() => { - if (data.preserveDataOnReset || props.preserveSection) { + const resetState = React.useCallback((force = false) => { + if (!force && (data.preserveDataOnReset || props.preserveSection)) { return; } setChecked(data.defaultValue); }, [data.defaultValue]); useEvent('resetFields', resetState); + useEvent('forceResetFields', () => resetState(true) ); useEffect(() => { updateValue(props.code, checked); diff --git a/src/components/inputs/CounterInput.tsx b/src/components/inputs/CounterInput.tsx index 4bed88d..f5698a0 100644 --- a/src/components/inputs/CounterInput.tsx +++ b/src/components/inputs/CounterInput.tsx @@ -17,11 +17,15 @@ export default function CounterInput(props: ConfigurableInputProps) { const [value, setValue] = useState(data.defaultValue); - const resetState = useCallback(() => { + const resetState = useCallback((force = false) => { + if(!force && (data.preserveDataOnReset || props.preserveSection)) { + return; + }; setValue(data.defaultValue); }, []); useEvent('resetFields', resetState); + useEvent('forceResetFields', () => resetState(true) ); const handleChange = useCallback( (increment: number) => { diff --git a/src/components/inputs/NumberInput.tsx b/src/components/inputs/NumberInput.tsx index 1cb0dee..038852f 100644 --- a/src/components/inputs/NumberInput.tsx +++ b/src/components/inputs/NumberInput.tsx @@ -16,11 +16,11 @@ export default function NumberInput(props: ConfigurableInputProps) { const [value, setValue] = React.useState(data.defaultValue); - const resetState = useCallback(() => { - if (data.preserveDataOnReset || props.preserveSection) { + const resetState = useCallback((force = false) => { + if (!force && (data.preserveDataOnReset || props.preserveSection)) { return; } - if (data.autoIncrementOnReset) { + if (!force && data.autoIncrementOnReset) { setValue(value ?? 0 + 1); } else { setValue(data.defaultValue); @@ -28,6 +28,7 @@ export default function NumberInput(props: ConfigurableInputProps) { }, [data.defaultValue]); useEvent('resetFields', resetState); + useEvent('forceResetFields', () => resetState(true) ); useEffect(() => { updateValue(props.code, value); diff --git a/src/components/inputs/RangeInput.tsx b/src/components/inputs/RangeInput.tsx index 899a41d..35b4276 100644 --- a/src/components/inputs/RangeInput.tsx +++ b/src/components/inputs/RangeInput.tsx @@ -16,14 +16,15 @@ export default function RangeInput(props: ConfigurableInputProps) { const [value, setValue] = useState(data.defaultValue); - const resetState = useCallback(() => { - if (data.preserveDataOnReset || props.preserveSection) { + const resetState = useCallback((force = false) => { + if (!force && (data.preserveDataOnReset || props.preserveSection)) { return; } setValue(data.defaultValue); }, [data.defaultValue]); useEvent('resetFields', resetState); + useEvent('forceResetFields', () => resetState(true) ); const handleChange = useCallback((value: number[]) => { setValue(value[0]); diff --git a/src/components/inputs/SelectInput.tsx b/src/components/inputs/SelectInput.tsx index a516508..2c11871 100644 --- a/src/components/inputs/SelectInput.tsx +++ b/src/components/inputs/SelectInput.tsx @@ -26,14 +26,15 @@ export default function SelectInput(props: ConfigurableInputProps) { updateValue(props.code, value); }, [value]); - const resetState = useCallback(() => { - if (data.preserveDataOnReset || props.preserveSection) { + const resetState = useCallback((force = false) => { + if (!force && (data.preserveDataOnReset || props.preserveSection)) { return; } setValue(data.defaultValue); }, [data.defaultValue]); useEvent('resetFields', resetState); + useEvent('forceResetFields', () => resetState(true) ); const handleSelect = useCallback((value: string) => { setValue(value); diff --git a/src/components/inputs/StringInput.tsx b/src/components/inputs/StringInput.tsx index 73a5a1d..042b2f1 100644 --- a/src/components/inputs/StringInput.tsx +++ b/src/components/inputs/StringInput.tsx @@ -16,14 +16,15 @@ export default function StringInput(props: ConfigurableInputProps) { const [value, setValue] = React.useState(data.defaultValue); - const resetState = useCallback(() => { - if (data.preserveDataOnReset || props.preserveSection) { + const resetState = useCallback((force = false) => { + if (!force && (data.preserveDataOnReset || props.preserveSection)) { return; } setValue(data.defaultValue); }, [data.defaultValue]); useEvent('resetFields', resetState); + useEvent('forceResetFields', () => resetState(true) ); useEffect(() => { updateValue(props.code, value); diff --git a/src/components/inputs/TimerInput.tsx b/src/components/inputs/TimerInput.tsx index 9b9e32f..c135599 100644 --- a/src/components/inputs/TimerInput.tsx +++ b/src/components/inputs/TimerInput.tsx @@ -31,8 +31,8 @@ export default function TimerInput(props: ConfigurableInputProps) { const average = useMemo(() => getAvg(times), [times]); - const resetState = useCallback(() => { - if (data.preserveDataOnReset || props.preserveSection) { + const resetState = useCallback((force = false) => { + if (!force && (data.preserveDataOnReset || props.preserveSection)) { return; } @@ -43,7 +43,8 @@ export default function TimerInput(props: ConfigurableInputProps) { }, []); useEvent('resetFields', resetState); - + useEvent('forceResetFields', () => resetState(true) ); + function startStop() { toggleTimer(!isRunning); } diff --git a/src/hooks/useEvent.ts b/src/hooks/useEvent.ts index 8b39726..e5fb024 100644 --- a/src/hooks/useEvent.ts +++ b/src/hooks/useEvent.ts @@ -7,6 +7,7 @@ interface AppEvent extends Event { export interface CustomWindowEventMap extends WindowEventMap { /* Custom Event */ resetFields: AppEvent; + forceResetFields: AppEvent; } export const useEvent = ( diff --git a/src/store/store.ts b/src/store/store.ts index db2ae16..ae5826c 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -70,10 +70,17 @@ export function resetFields() { window.dispatchEvent(new CustomEvent('resetFields', { detail: 'reset' })); } +export function forceResetFields() { + window.dispatchEvent(new CustomEvent('forceResetFields', { detail: 'forceReset' })); +} + export function setFormData(config: Config) { const oldState = useQRScoutState.getState(); - - useQRScoutState.setState({ ...oldState, formData: config }); + forceResetFields(); + const newFieldValues = config.sections.flatMap(s => + s.fields.map(f => ({ code: f.code, value: f.defaultValue })), + ); + useQRScoutState.setState({ ...oldState, fieldValues: newFieldValues, formData: config }); } export function setConfig(configText: string): Result {