Reset implemented. Group state unified into a single object.

Author: DovydasNavickas

src/components/reset.tsx

@@ -0,0 +1,16 @@
+import React, { useContext } from "react";
+import { GroupContext } from "../contexts/group-context";
+
+export interface ResetButtonProps {
+    children: React.ReactNode;
+}
+
+export const ResetButton = (props: ResetButtonProps) => {
+    const { store, groupId, test } = useContext(GroupContext);
+
+    const onClick: React.MouseEventHandler<HTMLButtonElement> = event => {
+        store.reset();
+    };
+
+    return <button onClick={onClick}>{props.children}</button>;
+};

src/components/text-field.tsx

@@ -39,10 +39,6 @@ function useField(props: TextFieldProps): FieldResult {
             defaultValue = "";
         }
 
-        if (initialValue == null) {
-            initialValue = defaultValue;
-        }
-
         store.registerField(props.name, groupId, defaultValue, initialValue);
 
         const storeUpdated = () => {

src/stores/group-store.ts

@@ -3,31 +3,71 @@ import { produce } from "immer";
 
 export const SEPARATOR = ".";
 
+interface Status {
+    isFocused: boolean;
+    isTouched: boolean;
+}
+
 interface Field {
     id: string;
     name: string;
 
-    defaultValue?: string;
-    initialValue?: string;
+    defaultValue: string;
+    initialValue: string;
     currentValue: string;
 
-    isFocused: boolean;
-    isTouched: boolean;
+    status: Status;
 }
 
 type Fields = {
     [key: string]: Field | undefined;
 };
 
-export class GroupStoreMutable extends TinyEmitter<Callback> {
-    protected fields: Fields = {};
+interface GroupState {
+    fields: Fields;
+    status: Status;
+}
+
+const defaultStatus = (): Status => ({ isFocused: false, isTouched: false });
 
-    constructor() {
-        super();
+const calculateGroupStatus = (state: GroupState): Status => {
+    let isFocused = false;
+    let isTouched = false;
+
+    for (const key of Object.keys(state.fields)) {
+        const field = state.fields[key];
+        if (field == null) {
+            continue;
+        }
+
+        if (field.status.isFocused) {
+            isFocused = true;
+        }
+        if (field.status.isTouched) {
+            isTouched = true;
+        }
+
+        // If group is both focused and touched already, nothing is going to change anymore
+        if (isFocused && isTouched) {
+            // Thus, break.
+            break;
+        }
     }
 
+    return {
+        isFocused: isFocused,
+        isTouched: isTouched
+    };
+};
+
+export class GroupStoreMutable extends TinyEmitter<Callback> {
+    protected state: GroupState = {
+        fields: {},
+        status: defaultStatus()
+    };
+
     public getField(fieldId: string): Field | undefined {
-        return this.fields[fieldId];
+        return this.state.fields[fieldId];
     }
 
     public generateFieldId(name: string, groupId: string): string {
@@ -38,56 +78,60 @@ export class GroupStoreMutable extends TinyEmitter<Callback> {
         name: string,
         groupId: string,
         defaultValue: string,
-        initialValue: string
+        initialValue?: string
     ): void {
         const id = this.generateFieldId(name, groupId);
 
-        if (this.fields[id] != null) {
+        if (this.state.fields[id] != null) {
             throw new Error(`Field with an id '${id}' is already registered.`);
         }
 
+        if (initialValue == null) {
+            initialValue = defaultValue;
+        }
+
         const newField: Field = {
             id: id,
             name: name,
             defaultValue: defaultValue,
             initialValue: initialValue,
-            currentValue: initialValue || defaultValue,
-            isFocused: false,
-            isTouched: false
+            currentValue: initialValue,
+            status: defaultStatus()
         };
 
-        this.fields = produce(this.fields, fields => {
-            fields[id] = newField;
+        this.state = produce(this.state, state => {
+            state.fields[id] = newField;
         });
         this.emit();
     }
 
     public unregisterField(id: string): void {
-        if (this.fields[id] == null) {
+        if (this.state.fields[id] == null) {
             return;
         }
 
-        this.fields = produce(this.fields, fields => {
-            fields[id] = undefined;
+        this.state = produce(this.state, state => {
+            state.fields[id] = undefined;
         });
         this.emit();
     }
 
     public updateValue(fieldId: string, value: string): void {
-        if (this.fields[fieldId] == null) {
+        console.log(`Value updated ${fieldId}`);
+        if (this.state.fields[fieldId] == null) {
             throw new Error(
                 `Cannot update non-existent field value. (field id '${fieldId}').`
             );
         }
-        this.fields = produce(this.fields, fields => {
-            const field = fields[fieldId];
+        this.state = produce(this.state, state => {
+            const field = state.fields[fieldId];
             if (field == null) {
                 return;
             }
 
             // Value equality check should be abstracted for particular component and value type
             if (field.currentValue !== value) {
-                field.isTouched = true;
+                field.status.isTouched = true;
             }
             field.currentValue = value;
         });
@@ -96,41 +140,69 @@ export class GroupStoreMutable extends TinyEmitter<Callback> {
     }
 
     public focus(fieldId: string): void {
+        console.log(`Focus ${fieldId}`);
         this.setFocused(fieldId, true);
         this.emit();
     }
 
     public blur(fieldId: string): void {
+        console.log(`Blur ${fieldId}`);
         this.setFocused(fieldId, false);
         this.emit();
     }
 
     private setFocused(fieldId: string, isFocused: boolean): void {
-        console.log(`Setting focus for field '${fieldId}' to ${isFocused}`);
-        if (this.fields[fieldId] == null) {
+        if (this.state.fields[fieldId] == null) {
             throw new Error(
                 `Cannot update non-existent field value. (field id '${fieldId}').`
             );
         }
-        this.fields = produce(this.fields, fields => {
-            const field = fields[fieldId];
-            if (field == null) {
+
+        this.state = produce(this.state, state => {
+            const field = state.fields[fieldId];
+            if (field == null || field.status.isFocused === isFocused) {
                 return;
             }
-            field.isFocused = isFocused;
+
+            field.status.isFocused = isFocused;
 
             // If the field is not touched yet and got focused, make it touched.
-            if (!field.isTouched && isFocused) {
-                field.isTouched = true;
+            if (!field.status.isTouched && isFocused) {
+                field.status.isTouched = true;
+            }
+
+            // Recalculate group status, because field status has changed
+            state.status = calculateGroupStatus(state);
+        });
+    }
+
+    public reset(): void {
+        console.log(`Reset state`);
+        this.state = produce(this.state, state => {
+            // Reset fields
+            const fields = state.fields;
+            for (const key of Object.keys(fields)) {
+                const field = fields[key];
+                if (field == null) {
+                    continue;
+                }
+
+                field.currentValue = field.initialValue;
+                field.status = defaultStatus();
             }
+
+            // Reset group status
+            state.status = defaultStatus();
         });
+        this.emit();
     }
 
     public toObject(): unknown {
         const result: { [key: string]: unknown } = {};
-        for (const key in this.fields) {
-            if (this.fields.hasOwnProperty(key)) {
-                const field = this.fields[key];
+        const fields = this.state.fields;
+        for (const key in fields) {
+            if (fields.hasOwnProperty(key)) {
+                const field = fields[key];
                 if (field == null) {
                     continue;
                 }

src/tests/test1.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { TextField } from "../components/text-field";
+import { ResetButton } from "../components/reset";
 
 export const Test1 = () => {
     const [show, setShow] = useState(true);
@@ -19,6 +20,11 @@ export const Test1 = () => {
                         <TextField name="lastName" initialValue="Smith" />
                     ) : null}
                 </label>
+                <div>
+                    <ResetButton>
+                        Reset
+                    </ResetButton>
+                </div>
             </div>
         </>
     );