removed use single field option

Author: craig-waite

fast-context-generic-extended/src/App.tsx

@@ -3,7 +3,6 @@ import MainPage from "./pages/MainPage";
 
 export const { 
   FastContextProvider:AppFastContextProvider,
-  useFastContextField:useAppFastContextField,
   useFastContextFields:useAppFastContextFields
 } = createFastContext({
   first: "" as string,

fast-context-generic-extended/src/app/createFastContext.tsx

@@ -64,29 +64,20 @@ export default function createFastContext<FastContext>(initialState: FastContext
     return [state, fastContext.set];
   }
 
-  function useFastContextField<SelectorOutput>(
-    field: string
-  ): [SelectorOutput, (value: SelectorOutput) => void] {
-    const [fieldValue, setter] = useFastContext((fc) => (fc as Record<string, SelectorOutput>)[field]);
-    const setField = (value: any) => setter({ [field]: value } as Partial<FastContext>);
-    return [fieldValue, setField as (value: SelectorOutput) => void];
-  }
-
   function useFastContextFields<SelectorOutput>(
     fieldNames: string[]
   ): { [key: string]: { get: SelectorOutput, set: (value: any) => void } } {
-    const valuesAndSetters: { [key: string]: { get: SelectorOutput, set: (value: any) => void } } = {};
+    const gettersAndSetters: { [key: string]: { get: SelectorOutput, set: (value: any) => void } } = {};
     for (const fieldName of fieldNames) {
-      const [fieldValue, setter] = useFastContextField(fieldName);
-      valuesAndSetters[fieldName] = { get: fieldValue as SelectorOutput, set: setter };
+      const [getter, setter] = useFastContext((fc) => (fc as Record<string, SelectorOutput>)[fieldName]);
+      gettersAndSetters[fieldName] = { get: getter, set: (value: any) => setter({ [fieldName]: value } as Partial<FastContext>) };
     }
-    return valuesAndSetters;
-
+    
+    return gettersAndSetters;
   }
 
   return {
     FastContextProvider,
-    useFastContextField,
     useFastContextFields,
   };
 }

fast-context-generic-extended/src/components/Display.tsx

@@ -1,4 +1,4 @@
-import { useAppFastContextField } from "../App";
+import { useAppFastContextFields } from "../App";
 
 type Props = {
   fieldName?: string;
@@ -15,13 +15,13 @@ export function PropDrivenDisplay({label, value}: Readonly<Props>) {
   );
 };
 
-export function SelfDrivenDisplay({ fieldName, label }: Readonly<Props>) {
+export function SelfDrivenDisplay({ fieldName = "", label }: Readonly<Props>) {
   console.log(`Self Driven ${label} display rendering`)
-  const [value] = useAppFastContextField(fieldName as string);
+  const value = useAppFastContextFields([fieldName]);
   return (
     <div className="value">
       {label ? <label>{label} : </label> : null}
-      <input value={value as string} readOnly style={{backgroundColor: "#eee", cursor: 'auto', border: 0}}/>
+      <input value={value[fieldName].get as string} readOnly style={{backgroundColor: "#eee", cursor: 'auto', border: 0}}/>
     </div>
   );
 };

fast-context-generic-extended/src/components/FormContainer.tsx

@@ -4,6 +4,7 @@ import { FormDrivenTextInput, SelfDrivenTextInput } from "./TextInput";
 export function PropDrivenFormContainer() {
   console.log(`Prop Driven Form Rendering`)
   const fields = useAppFastContextFields(['first', 'last']);
+  console.log(`fields:`, fields)
   return (
     <div className="container">
       <h4>'Prop Driven' Input Form (Form AND children re-render on field changes)</h4>

fast-context-generic-extended/src/components/TextInput.tsx

@@ -1,4 +1,4 @@
-import { useAppFastContextField } from "../App";
+import { useAppFastContextFields } from "../App";
 
 type Props = {
   fieldName?: string;
@@ -20,15 +20,15 @@ export function FormDrivenTextInput( { label = '', value, onChange = (v) => {}}:
 };
 
 
-export function SelfDrivenTextInput( { fieldName, label }: Readonly<Props> ) {
+export function SelfDrivenTextInput( { fieldName = "", label }: Readonly<Props> ) {
   console.log(`Self Driven ${label} input rendering`)
-  const [value, setValue] = useAppFastContextField(fieldName as string);
+  const field = useAppFastContextFields([fieldName]);
   return (
     <div className="field">
       {label ? <label>{label} : </label> : null}
       <input
-        value={value as string}
-        onChange={(e) => setValue(e.target.value)}
+        value={field[fieldName].get as string}
+        onChange={(e) => field[fieldName].set(e.target.value)}
       />
     </div>
   );