Initial commit

client/src/hooks/index.js

@@ -0,0 +1,23 @@
+import useDeepCompareEffect from './use-deep-compare-effect';
+import useDeepCompareCallback from './use-deep-compare-callback';
+import usePrevious from './use-previous';
+import useField from './use-field';
+import useForm from './use-form';
+import useSteps from './use-steps';
+import useToggle from './use-toggle';
+import useForceUpdate from './use-force-update';
+import useClosableForm from './use-closable-form';
+import useDidUpdate from './use-did-update';
+
+export {
+  useDeepCompareEffect,
+  useDeepCompareCallback,
+  usePrevious,
+  useField,
+  useForm,
+  useSteps,
+  useToggle,
+  useForceUpdate,
+  useClosableForm,
+  useDidUpdate,
+};

client/src/hooks/use-closable-form.js

@@ -0,0 +1,29 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+export default (isOpened, close) => {
+  const isClosable = useRef(null);
+
+  const handleFieldBlur = useCallback(() => {
+    if (isClosable.current) {
+      close();
+    }
+  }, [close]);
+
+  const handleControlMouseOver = useCallback(() => {
+    isClosable.current = false;
+  }, []);
+
+  const handleControlMouseOut = useCallback(() => {
+    isClosable.current = true;
+  }, []);
+
+  useEffect(() => {
+    if (isOpened) {
+      isClosable.current = true;
+    } else {
+      isClosable.current = null;
+    }
+  }, [isOpened]);
+
+  return [handleFieldBlur, handleControlMouseOver, handleControlMouseOut];
+};

client/src/hooks/use-deep-compare-callback.js

@@ -0,0 +1,6 @@
+import { useCallback } from 'react';
+
+import useDeepCompareMemoize from './use-deep-compare-memoize';
+
+// eslint-disable-next-line max-len
+export default (callback, dependencies) => useCallback(callback, useDeepCompareMemoize(dependencies));

client/src/hooks/use-deep-compare-effect.js

@@ -0,0 +1,7 @@
+import { useEffect } from 'react';
+
+import useDeepCompareMemoize from './use-deep-compare-memoize';
+
+export default (effect, dependencies) => {
+  useEffect(effect, useDeepCompareMemoize(dependencies));
+};

client/src/hooks/use-deep-compare-memoize.js

@@ -0,0 +1,12 @@
+import dequal from 'dequal';
+import { useRef } from 'react';
+
+export default (value) => {
+  const currentValue = useRef();
+
+  if (!dequal(value, currentValue.current)) {
+    currentValue.current = value;
+  }
+
+  return currentValue.current;
+};

client/src/hooks/use-did-update.js

@@ -0,0 +1,13 @@
+import { useEffect, useRef } from 'react';
+
+export default (callback, dependencies) => {
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    if (isMounted.current) {
+      callback();
+    } else {
+      isMounted.current = true;
+    }
+  }, dependencies); // eslint-disable-line react-hooks/exhaustive-deps
+};

client/src/hooks/use-field.js

@@ -0,0 +1,11 @@
+import { useCallback, useState } from 'react';
+
+export default (initialValue) => {
+  const [value, setValue] = useState(initialValue);
+
+  const handleChange = useCallback(({ target: { value: nextValue } }) => {
+    setValue(nextValue);
+  }, []);
+
+  return [value, handleChange, setValue];
+};

client/src/hooks/use-force-update.js

@@ -0,0 +1,3 @@
+import useToggle from './use-toggle';
+
+export default () => useToggle()[1];

client/src/hooks/use-form.js

@@ -0,0 +1,14 @@
+import { useCallback, useState } from 'react';
+
+export default (initialData) => {
+  const [data, setData] = useState(initialData);
+
+  const handleFieldChange = useCallback(({ target: { name: fieldName } }, { value }) => {
+    setData((prevData) => ({
+      ...prevData,
+      [fieldName]: value,
+    }));
+  }, []);
+
+  return [data, handleFieldChange, setData];
+};

client/src/hooks/use-previous.js

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export default (value) => {
+  const prevValue = useRef();
+
+  useEffect(() => {
+    prevValue.current = value;
+  }, [value]);
+
+  return prevValue.current;
+};

client/src/hooks/use-steps.js

@@ -0,0 +1,26 @@
+import { useCallback, useState } from 'react';
+
+const createStep = (type, params = {}) => {
+  if (!type) {
+    return null;
+  }
+
+  return {
+    type,
+    params,
+  };
+};
+
+export default (initialType, initialParams) => {
+  const [step, setStep] = useState(() => createStep(initialType, initialParams));
+
+  const openStep = useCallback((type, params) => {
+    setStep(createStep(type, params));
+  }, []);
+
+  const handleBack = useCallback(() => {
+    setStep(null);
+  }, []);
+
+  return [step, openStep, handleBack];
+};

client/src/hooks/use-toggle.js

@@ -0,0 +1,11 @@
+import { useCallback, useState } from 'react';
+
+export default (defaultState = false) => {
+  const [state, setState] = useState(defaultState);
+
+  const toggle = useCallback(() => {
+    setState((prevState) => !prevState);
+  }, []);
+
+  return [state, toggle];
+};