renames client to admin, sets up component library

src/admin/hooks/useDebounce.js

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+
+// Our hook
+export default function useDebounce(value, delay) {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(
+    () => {
+      const handler = setTimeout(() => {
+        setDebouncedValue(value);
+      }, delay);
+
+      return () => {
+        clearTimeout(handler);
+      };
+    },
+
+    [value, delay],
+  );
+
+  return debouncedValue;
+}

src/admin/hooks/useIntersect.js

@@ -0,0 +1,29 @@
+/* eslint-disable no-shadow */
+import { useEffect, useRef, useState } from 'react';
+
+export default ({ root = null, rootMargin, threshold = 0 } = {}) => {
+  const [entry, updateEntry] = useState({});
+  const [node, setNode] = useState(null);
+
+  const observer = useRef(
+    new window.IntersectionObserver(([entry]) => updateEntry(entry), {
+      root,
+      rootMargin,
+      threshold,
+    }),
+  );
+
+  useEffect(
+    () => {
+      const { current: currentObserver } = observer;
+      currentObserver.disconnect();
+
+      if (node) currentObserver.observe(node);
+
+      return () => currentObserver.disconnect();
+    },
+    [node],
+  );
+
+  return [setNode, entry];
+};

src/admin/hooks/useMountEffect.js

@@ -0,0 +1,5 @@
+import { useEffect } from 'react';
+
+const useMountEffect = func => useEffect(func, []);
+
+export default useMountEffect;

src/admin/hooks/usePayloadAPI.js

@@ -0,0 +1,56 @@
+import { useState, useEffect } from 'react';
+import queryString from 'qs';
+import { useLocale } from '../components/utilities/Locale';
+import { requests } from '../api';
+
+const usePayloadAPI = (url, options = {}) => {
+  const {
+    initialParams = {},
+    initialData = {},
+    onLoad,
+  } = options;
+
+  const [data, setData] = useState(initialData);
+  const [params, setParams] = useState(initialParams);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isError, setIsError] = useState(false);
+  const locale = useLocale();
+
+  const search = queryString.stringify({
+    locale,
+    ...params,
+  }, { depth: 10 });
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setIsError(false);
+      setIsLoading(true);
+
+      try {
+        const response = await requests.get(`${url}?${search}`);
+
+        if (response.status > 201) {
+          setIsError(true);
+        }
+
+        const json = await response.json();
+        setData(json);
+        setIsLoading(false);
+      } catch (error) {
+        setIsError(true);
+        setIsLoading(false);
+      }
+    };
+
+    if (url) {
+      fetchData();
+    } else {
+      setIsError(false);
+      setIsLoading(false);
+    }
+  }, [url, locale, search, onLoad]);
+
+  return [{ data, isLoading, isError }, { setParams }];
+};
+
+export default usePayloadAPI;

src/admin/hooks/useThrottledEffect.js

@@ -0,0 +1,24 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useRef } from 'react';
+
+const useThrottledEffect = (callback, delay, deps = []) => {
+  const lastRan = useRef(Date.now());
+
+  useEffect(
+    () => {
+      const handler = setTimeout(() => {
+        if (Date.now() - lastRan.current >= delay) {
+          callback();
+          lastRan.current = Date.now();
+        }
+      }, delay - (Date.now() - lastRan.current));
+
+      return () => {
+        clearTimeout(handler);
+      };
+    },
+    [delay, ...deps],
+  );
+};
+
+export default useThrottledEffect;

src/admin/hooks/useTitle.js

@@ -0,0 +1,9 @@
+import { useFormFields } from '../components/forms/Form/context';
+
+const useTitle = (useAsTitle) => {
+  const { getField } = useFormFields();
+  const titleField = getField(useAsTitle);
+  return titleField?.value;
+};
+
+export default useTitle;

src/admin/hooks/useUnmountEffect.js

@@ -0,0 +1,6 @@
+import { useEffect } from 'react';
+
+// eslint-disable-next-line react-hooks/exhaustive-deps
+const useUnmountEffect = (callback) => useEffect(() => callback, []);
+
+export default useUnmountEffect;