✨ 2 new hooks

Author: Plopix

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@crystallize/reactjs-hooks",
     "license": "MIT",
-    "version": "0.6.0",
+    "version": "0.7.0",
     "author": "Crystallize <hello@crystallize.com> (https://crystallize.com)",
     "contributors": [
         "Sébastien Morel <sebastien@crystallize.com>"

src/core/hooks/useFetch.ts

@@ -0,0 +1,61 @@
+const fetchResult = async (url: RequestInfo, init?: RequestInit): Promise<any> => {
+    const response = await fetch(url, {
+        credentials: 'include',
+        headers: {
+            'Content-type': 'application/json; charset=UTF-8',
+            Accept: 'application/json',
+        },
+        ...init,
+    });
+
+    if (!response.ok) {
+        throw new Error(`Could not fetch ${url}. Response NOT OK.`);
+    }
+    const json = await response.json();
+    if (json.errors) {
+        throw new Error(`Could not fetch ${url}. Response contains errors.`);
+    }
+    return json;
+};
+
+const jsonRequest = async <T>(input: RequestInfo, method: string, init?: RequestInit): Promise<T> => {
+    return fetchResult(input, {
+        method: method,
+        ...init,
+    });
+};
+
+export const getJson = async <T>(input: RequestInfo, init?: RequestInit): Promise<T> => jsonRequest(input, 'GET', init);
+
+export const postJson = async <T>(input: RequestInfo, body: any, init?: RequestInit): Promise<T> =>
+    jsonRequest(input, 'POST', {
+        body: JSON.stringify(body),
+        ...init,
+    });
+
+export const useFetchResult = () => {
+    const abortController = new AbortController();
+    const abort = () => {
+        abortController.abort();
+    };
+
+    const signalInit = {
+        signal: abortController.signal,
+    };
+
+    const get = async <T>(url: string, init?: RequestInit): Promise<T> => {
+        return await getJson(url, {
+            ...signalInit,
+            ...init,
+        });
+    };
+
+    const post = async <T>(url: string, body: any, init?: RequestInit): Promise<T> => {
+        return await postJson(url, body, {
+            ...signalInit,
+            ...init,
+        });
+    };
+
+    return { get, post, abort };
+};

src/core/hooks/useHydrated.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState, ReactElement } from 'react';
+let hydrating = true;
+export function useHydrated() {
+    let [hydrated, setHydrated] = useState(() => !hydrating);
+
+    useEffect(() => {
+        hydrating = false;
+        setHydrated(true);
+    }, []);
+
+    return hydrated;
+}
+export const ClientOnly: React.FC<{ children: ReactElement<any, any>; fallback?: ReactElement<any, any> }> = ({
+    children,
+    fallback = null,
+}) => {
+    const hydrated = useHydrated();
+    if (hydrated) {
+        return children;
+    }
+    return fallback;
+};

src/index.ts

@@ -1,2 +1,4 @@
 export * from './core/MainProvider/MainProvider';
 export * from './core/MainProvider/Reducer';
+export * from './core/hooks/useFetch';
+export * from './core/hooks/useHydrated';