Merge pull request #64 from FRC2713/fix-config-editing

Fix form not acting correctly when config changes
FRC2713 · Jan 15, 2025 · 7b3abba · 7b3abba
2 parents 6320a8e + 0de36c7
commit 7b3abba
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 17 deletions.
diff --git 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
@@ -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
@@ -16,18 +16,19 @@ export default function NumberInput(props: ConfigurableInputProps) {
 
   const [value, setValue] = React.useState<number | ''>(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);
     }
   }, [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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -7,6 +7,7 @@ interface AppEvent<PayloadType = unknown> extends Event {
 export interface CustomWindowEventMap extends WindowEventMap {
   /* Custom Event */
   resetFields: AppEvent<string>;
+  forceResetFields: AppEvent<string>;
 }
 
 export const useEvent = <PayloadType = unknown>(

diff --git 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<void> {