~repos /atoms-state

import { useState, useEffect, useRef, useCallback } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import dot from 'dot-object';

export const atom = (initial) => {
  let value;
  const isDerived = typeof initial === 'function';
  const subs = new Set();
  const get = (a) => {
    a.subscribe(compute);
    return a.getValue();
  };
  const compute = () => {
    value = initial(get);
    subs.forEach((sub) => {
      sub(value);
    });
  };
  if (isDerived) {
    compute();
  } else {
    value = initial;
  }
  return {
    getValue() {
      return value;
    },
    subscribe(fn) {
      subs.add(fn);
      return () => subs.delete(fn);
    },
    update(fn) {
      value = fn(value);
      subs.forEach((sub) => {
        sub(value);
      });
    },
  };
};

export const useAtom = (atom) => {
  const [data, setData] = useState(atom.getValue());
  useEffect(() => {
    return atom.subscribe((value) => {
      setData(value);
    });
  }, []);
  return data;
};

export const asyncAtom = (fn) => {
  let value;
  let params;
  const subs = new Set();
  return {
    compute(p) {
      if (JSON.stringify(p) !== JSON.stringify(params)) {
        params = p;
        value = fn(p);
        value
          .then((res) => {
            value = res;
          })
          .catch((err) => {
            value = err;
          });
      }
      return value;
    },
    fetch(p) {
      return fn(p);
    },
    subscribe(fn) {
      subs.add(fn);
      return () => subs.delete(fn);
    },
    update(updater) {
      value = updater(value);
      subs.forEach((sub) => {
        sub(value);
      });
    },
  };
};

export const useAsyncAtom = (a, params) => {
  const [, toggle] = useState(false);
  useEffect(() => {
    return a.subscribe(() => toggle((v) => !v));
  }, []);
  const v = a.compute(params);
  if (v instanceof Error) {
    throw v;
  } else if (v instanceof Promise) {
    throw v;
  } else {
    return v;
  }
};

const usePromiseCache = new Map();
export const usePromise = (fn, params) => {
  const [data, setData] = useState(false);
  const fnCache = usePromiseCache.get(fn) || new Map();
  if (!usePromiseCache.get(fn)) {
    usePromiseCache.set(fn, fnCache);
  }
  const key = typeof params === 'string' ? params : JSON.stringify(params);
  const value = fnCache.get(key);
  if (value) {
    if (value instanceof Promise) {
      throw value;
    } else if (value instanceof Error || (value === null || value === void 0 ? void 0 : value.errors)) {
      throw value;
    }
    return [
      value,
      (v) => {
        fnCache.set(key, v);
        setData(!data);
      },
    ];
  }
  fnCache.set(
    key,
    fn(params)
      .then((res) => {
        fnCache.set(key, res);
      })
      .catch((err) => fnCache.set(key, err)),
  );
  throw fnCache.get(key);
};

export const Storage = {
  listeners: {},
  async getItem(key) {
    const item = await AsyncStorage.getItem(key);
    return item ? JSON.parse(item) : null;
  },
  async setItem(key, value) {
    await AsyncStorage.setItem(key, JSON.stringify(value));
    if (this.listeners[key]) {
      for (const cb of this.listeners[key]) {
        cb(value);
      }
    }
  },
  async removeItem(key) {
    await AsyncStorage.removeItem(key);
    if (this.listeners[key]) {
      for (const cb of this.listeners[key]) {
        cb(null);
      }
    }
  },
  async clear() {
    await AsyncStorage.clear();
  },
  subscribe(key, cb) {
    if (!this.listeners[key]) {
      this.listeners[key] = new Set();
    }
    this.listeners[key].add(cb);
    return () => {
      this.listeners[key].delete(cb);
    };
  },
  unsubscribe(key, cb) {
    this.listeners[key].delete(cb);
  },
};

export const useAsyncStorage = (key, initialValue) => {
  const [storedValue, setStoredValue] = useState({
    ...initialValue,
    loading: true,
  });
  const setData = async (v) => {
    await Storage.setItem(key, v);
  };
  useEffect(() => {
    Storage.getItem(key)
      .then((v) => {
        if (v) {
          setData({ ...v, loading: false });
        } else {
          setData({ ...initialValue, loading: false });
        }
      })
      .catch((err) => setStoredValue({ ...initialValue, loading: false, err }));

    return Storage.subscribe(key, (v) => {
      setStoredValue(v);
    });
  }, [key, JSON.stringify(initialValue)]);
  return [storedValue, setData];
};

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('');
  const errorRef = useRef('');
  if (!name) {
    throw new Error('You need to provide the "name" prop.');
  }
  const setErrorMessage = (message) => {
    errorRef.current = message;
    setError(message);
  };
  return {
    name,
    error,
    setError: setErrorMessage,
    getField: () => Fields.get(name),
    registerField: (f) => {
      const oldField = Fields.get(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
        Fields.remove(name);
      };
    },
  };
};

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 Fields.keys()) {
      obj[name] = Fields.get(name).get();
    }
    return dot.object(obj);
  };
  const setData = useCallback((data) => {
    const dotData = dot.dot(data);
    for (const name of Fields.keys()) {
      Fields.get(name).set(dotData[name]);
    }
  }, []);
  useEffect(() => {
    if (initial) {
      setData(initial);
    }
  }, [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 Fields.keys()) {
        Fields.get(name).clear();
      }
    },
    reset: () => {
      setData(initial);
    },
    getFieldValue: (name) => {
      const field = Fields.get(name);
      if (field) {
        return field.get();
      }
    },
    setFieldValue: (name, value) => {
      const field = Fields.get(name);
      if (field) {
        field.set(value);
      }
    },
    clearFieldValue: (name) => {
      const field = Fields.get(name);
      if (field) {
        field.clear();
      }
    },
    getFieldError: (name) => {
      const field = Fields.get(name);
      if (field) {
        return field.getError();
      }
      return '';
    },
    setFieldError: (name, value) => {
      const field = Fields.get(name);
      if (field) {
        field.setError(value);
      }
    },
    onSubmit: async () => {
      try {
        const data = getData();
        setError('');
        for (const name of Fields.keys()) {
          Fields.get(name).setError('');
        }
        const allValid = Fields.keys()
          .map((key) => Fields.get(key))
          .reduce((acc, field) => acc && field.getError() === '', true);
        if (allValid) {
          await submit(data);
        }
      } catch (err) {
        // this is for validation errors
        if (err.error && typeof err.error !== 'string') {
          Object.keys(err.error).forEach((k) => {
            const field = Fields.get(k);
            if (field) {
              field.setError(err.error[k]);
            }
          });
          setError('Validation failed. Please correct the necessary fields.');
        } else {
          setError(err.message || err.error);
        }
      }
    },
  };
};