atoms-state

git clone https://pyrossh.dev/repos/atoms-state.git

Simple State management for react

316fb6e7 — Peter John

add watchOn capability

Files changed (3) hide show

index.d.ts +10 -1
index.js +58 -25
package.json +1 -1

index.d.ts CHANGED Viewed

@@ -18,16 +18,25 @@ export declare const useAsyncAtom: <P, S>(a: AsyncAtom<P, S>, params: P) => S;
 declare type PromiseFunc<S, P> = (p: P) => Promise<S>;
 export declare const usePromise: <S, P>(fn: PromiseFunc<S, P>, params: P) => [S, (v: S) => void];
+export type Field<T> = {
+  get: () => T;
+  set: (v: T) => void;
+  clear: () => void;
+  watch?: () => void;
+};
 export function useField<T>(name: string): {
   name: string;
   error: string;
   setError: (v: string | undefined) => void;
+  getField: () => Field<T>;
-  registerField: (f: { get: () => T; set: (v: T) => void; clear: () => void }) => void;
+  registerField: (f: Field<T>) => void;
 };
 export function useForm<T>(
   initial: T,
   submit: (d: T) => Promise<void>,
+  watchOn?: Array<string>,
 ): {
   error: string;
   setError: (v?: string) => void;

index.js CHANGED Viewed

@@ -183,12 +183,13 @@ export const useAsyncStorage = (key, initialValue) => {
     Storage.getItem(key)
       .then((v) => {
         if (v) {
-          setData(v);
+          setData({ ...v, loading: false });
         } else {
-          setStoredValue({ ...initialValue, loading: false });
+          setData({ ...initialValue, loading: false });
         }
       })
-      .catch(() => setStoredValue({ ...storedValue, loading: false }));
+      .catch((err) => setStoredValue({ ...initialValue, loading: false, err }));
     return Storage.subscribe(key, (v) => {
       setStoredValue(v);
     });
@@ -196,7 +197,21 @@ export const useAsyncStorage = (key, initialValue) => {
   return [storedValue, setData];
 };
-export const fields = {};
+export const Fields = {
+  data: {},
+  keys() {
+    return Object.keys(this.data);
+  },
+  get(k) {
+    return this.data[k];
+  },
+  set(k, v) {
+    this.data[k] = v;
+  },
+  remove(k) {
+    delete this.data[k];
+  },
+};
 export const useField = (name) => {
   const [error, setError] = useState('');
@@ -212,79 +227,97 @@ export const useField = (name) => {
     name,
     error,
     setError: setErrorMessage,
+    getField: () => Fields.get(name),
     registerField: (f) => {
+      const oldField = Fields.get(name) || {};
-      fields[name] = {
+      Fields.set(name, {
+        ...oldField,
         ...f,
         getError: () => errorRef.current,
         setError: setErrorMessage,
-      };
+      });
       return () => {
+        // TODO: this remove happens after refresh so that state persists for 1 render
+        // could cause wrong calcuations later on
-        delete fields[name];
+        Fields.remove(name);
       };
     },
   };
 };
-export const useForm = (initial, submit) => {
+export const useForm = (initial, submit, watchOn = []) => {
   const [error, setError] = useState('');
+  const [, rerender] = useState(false);
+  const refresh = () => rerender((v) => !v);
   const getData = () => {
     const obj = {};
-    for (const name of Object.keys(fields)) {
+    for (const name of Fields.keys()) {
-      obj[name] = fields[name].get();
+      obj[name] = Fields.get(name).get();
     }
     return dot.object(obj);
   };
   const setData = useCallback((data) => {
     const dotData = dot.dot(data);
-    for (const name of Object.keys(fields)) {
+    for (const name of Fields.keys()) {
-      fields[name].set(dotData[name]);
+      Fields.get(name).set(dotData[name]);
     }
   }, []);
   useEffect(() => {
     if (initial) {
       setData(initial);
     }
-  }, [initial, setData]);
+  }, [JSON.stringify(initial), setData]);
+  useEffect(() => {
+    for (const name of watchOn) {
+      const field = Fields.get(name);
+      if (field) {
+        Fields.set(name, {
+          ...field,
+          watch: refresh,
+        });
+      }
+    }
+  }, [Fields.keys().length]);
   return {
     error,
     setError,
     getData,
     setData,
     clear: () => {
-      for (const name of Object.keys(fields)) {
+      for (const name of Fields.keys()) {
-        fields[name].clear();
+        Fields.get(name).clear();
       }
     },
     reset: () => {
       setData(initial);
     },
     getFieldValue: (name) => {
-      const field = fields[name];
+      const field = Fields.get(name);
       if (field) {
         return field.get();
       }
     },
     setFieldValue: (name, value) => {
-      const field = fields[name];
+      const field = Fields.get(name);
       if (field) {
         field.set(value);
       }
     },
     clearFieldValue: (name) => {
-      const field = fields[name];
+      const field = Fields.get(name);
       if (field) {
         field.clear();
       }
     },
     getFieldError: (name) => {
-      const field = fields[name];
+      const field = Fields.get(name);
       if (field) {
         return field.getError();
       }
       return '';
     },
     setFieldError: (name, value) => {
-      const field = fields[name];
+      const field = Fields.get(name);
       if (field) {
         field.setError(value);
       }
@@ -293,11 +326,11 @@ export const useForm = (initial, submit) => {
       try {
         const data = getData();
         setError('');
-        for (const name of Object.keys(fields)) {
+        for (const name of Fields.keys()) {
-          fields[name].setError('');
+          Fields.get(name).setError('');
         }
-        const allValid = Object.keys(fields)
+        const allValid = Fields.keys()
-          .map((key) => fields[key])
+          .map((key) => Fields.get(key))
           .reduce((acc, field) => acc && field.getError() === '', true);
         if (allValid) {
           await submit(data);
@@ -306,7 +339,7 @@ export const useForm = (initial, submit) => {
         // this is for validation errors
         if (err.error && typeof err.error !== 'string') {
           Object.keys(err.error).forEach((k) => {
-            const field = fields[k];
+            const field = Fields.get(k);
             if (field) {
               field.setError(err.error[k]);
             }

package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "@pyros2097/atoms-state",
   "author": "pyros.sh",
   "description": "State management and common hooks",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "license": "MIT",
   "type": "module",
   "main": "index.js",

~repos /atoms-state

git clone https://pyrossh.dev/repos/atoms-state.git

Simple State management for react