WIP.

Author: DovydasNavickas

src/app.tsx

@@ -7,6 +7,7 @@ import { useForceUpdate } from "./force-update";
 
 import "./reset.scss";
 import "./app.scss";
+import { Test1 } from "./tests/test1";
 
 const store = new GroupStoreMutable();
 const Test = () => {
@@ -26,30 +27,11 @@ const Test = () => {
         groupId: "person"
     };
 
-    const [show, setShow] = useState(true);
-
     return (
         <>
             <div className="forms">
                 <GroupContext.Provider value={groupContext}>
-                    <div>
-                        <button onClick={() => setShow(!show)}>
-                            {!show ? "Mount" : "Unmount"}
-                        </button>
-                        <label>
-                            Last name
-                            {show ? (
-                                <TextField
-                                    name="lastName"
-                                    initialValue="Smith"
-                                />
-                            ) : null}
-                        </label>
-                        <label>
-                            First name
-                            <TextField name="firstName" initialValue="John" />
-                        </label>
-                    </div>
+                    <Test1 />
                 </GroupContext.Provider>
             </div>
             <div className="store">
@@ -69,7 +51,7 @@ const Test = () => {
                 </pre>
             </div>
             <div className="store-result">
-                {JSON.stringify(store.toObject())}
+                {JSON.stringify(store.toObject(), null, 4)}
             </div>
         </>
     );

src/components/group-field.tsx

@@ -2,6 +2,7 @@ import React, { useContext, useEffect, useState } from "react";
 import { FieldContext } from "../contexts/field-context";
 import { GroupContext } from "../contexts/group-context";
 import { useForceUpdate } from "../force-update";
+import { GroupStore } from "../stores/group-store";
 
 export interface FieldValues {
     defaultValue?: string;
@@ -13,55 +14,31 @@ export interface TextFieldProps extends FieldValues {
     name: string;
 }
 
-export const SEPARATOR = ".";
-
-function useFieldId(props: Pick<TextFieldProps, "name">): string {
-    const { groupId } = useContext(GroupContext);
-    if (groupId == null) {
-        return props.name;
-    }
-    return `${groupId}${SEPARATOR}${props.name}`;
+interface FieldResult {
+    store: GroupStore;
+    fieldId: string;
+    fieldProps: JSX.IntrinsicElements["input"];
 }
 
-function useRegisterField(
-    fieldId: string,
-    props: TextFieldProps,
-    updateHandler: () => void
-): void {
-    useEffect(() => {
-        const { store } = useContext(GroupContext);
+function useField(props: TextFieldProps): FieldResult {
+    const [currentValue, setCurrentValue] = useState("");
 
-        let { defaultValue, initialValue } = props;
-        if (defaultValue == null) {
-            defaultValue = "";
-        }
+    const { store, groupId } = useContext(GroupContext);
 
-        if (initialValue == null) {
-            initialValue = defaultValue;
-        }
+    if (groupId == null) {
+        // TODO: Error message.
+        throw new Error("groupId is not defined.");
+    }
 
-        store.registerField(fieldId, props.name, defaultValue, initialValue);
+    let { defaultValue, initialValue } = props;
 
-        store.addListener(updateHandler);
+    const fieldId = store.generateFieldId(props.name, groupId);
 
-        return () => {
-            // First, remove listener to not get any more updates.
-            store.removeListener(updateHandler);
-            // Then, unregister field.
-            store.unregisterField(fieldId);
-        };
-    }, []);
-}
-
-export const TextField = (props: TextFieldProps) => {
-    const { store } = useContext(GroupContext);
-    const [currentValue, setCurrentValue] = useState("");
-
-    const fieldId = useFieldId(props);
+    const onChange: React.ChangeEventHandler<HTMLInputElement> = event => {
+        store.updateValue(fieldId, event.target.value);
+    };
 
     useEffect(() => {
-        let { defaultValue, initialValue } = props;
-
         if (defaultValue == null) {
             defaultValue = "";
         }
@@ -70,40 +47,38 @@ export const TextField = (props: TextFieldProps) => {
             initialValue = defaultValue;
         }
 
-        store.registerField(fieldId, props.name, defaultValue, initialValue);
+        store.registerField(props.name, groupId, defaultValue, initialValue);
 
-        const updateValue = () => {
+        const storeUpdated = () => {
             const field = store.getField(fieldId);
             if (field == null) {
                 return;
             }
             setCurrentValue(field.currentValue);
         };
-        updateValue();
+        storeUpdated();
 
-        store.addListener(updateValue);
+        store.addListener(storeUpdated);
 
         return () => {
-            store.removeListener(updateValue);
+            // First, remove listener to not get any more updates.
+            store.removeListener(storeUpdated);
+            // Then, unregister field.
             store.unregisterField(fieldId);
         };
     }, []);
-
-    const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        const value = event.target.value;
-        store.updateValue(fieldId, value);
+    return {
+        fieldId: fieldId,
+        store: store,
+        fieldProps: {
+            value: currentValue,
+            onChange: onChange
+        }
     };
+}
 
-    const onFocus = (event: React.FocusEvent<HTMLInputElement>) => {
-        console.debug(event.target);
-    };
+export const TextField = (props: TextFieldProps) => {
+    const { fieldId, store, fieldProps } = useField(props);
 
-    return (
-        <input
-            type="text"
-            value={currentValue}
-            onChange={onChange}
-            onFocus={onFocus}
-        />
-    );
+    return <input type="text" {...fieldProps} />;
 };

src/components/text-field.tsx

@@ -1,6 +1,7 @@
 import { TinyEmitter, Callback } from "../helpers/emitter";
 import produce from "immer";
-import { runInThisContext } from "vm";
+
+export const SEPARATOR = ".";
 
 interface Field {
     id: string;
@@ -25,12 +26,18 @@ export class GroupStoreMutable extends TinyEmitter<Callback> {
         return this.fields[fieldId];
     }
 
+    public generateFieldId(name: string, groupId: string): string {
+        return `${groupId}${SEPARATOR}${name}`;
+    }
+
     public registerField(
-        id: string,
         name: string,
+        groupId: string,
         defaultValue: string,
         initialValue: string
     ): void {
+        const id = this.generateFieldId(name, groupId);
+
         if (this.fields[id] != null) {
             throw new Error(`Field with an id '${id}' is already registered.`);
         }
@@ -47,6 +54,7 @@ export class GroupStoreMutable extends TinyEmitter<Callback> {
             fields[id] = newField;
         });
         this.emit();
+        return id;
     }
 
     public unregisterField(id: string): void {

src/stores/group-store.ts

@@ -0,0 +1,25 @@
+import React, { useState } from "react";
+import { TextField } from "../components/text-field";
+
+export const Test1 = () => {
+    const [show, setShow] = useState(true);
+    return (
+        <>
+            <div>
+                <button onClick={() => setShow(!show)}>
+                    {!show ? "Mount" : "Unmount"}
+                </button>
+                <label>
+                    First name
+                    <TextField name="firstName" initialValue="John" />
+                </label>
+                <label>
+                    Last name
+                    {show ? (
+                        <TextField name="lastName" initialValue="Smith" />
+                    ) : null}
+                </label>
+            </div>
+        </>
+    );
+};