Refactored fetching to use react-query.

hooks/useApi.js

@@ -1,13 +1,12 @@
 import { useApi as nextUseApi } from 'next-basics';
 import { getClientAuthToken } from 'lib/client';
 import { useRouter } from 'next/router';
+import * as reactQuery from '@tanstack/react-query';
 
-export function useApi() {
+export default function useApi() {
   const { basePath } = useRouter();
 
   const { get, post, put, del } = nextUseApi(getClientAuthToken(), basePath);
 
-  return { get, post, put, del };
+  return { get, post, put, del, ...reactQuery };
 }
-
-export default useApi;

hooks/useFetch.js

@@ -1,62 +0,0 @@
-import { useState, useEffect } from 'react';
-import { saveQuery } from 'store/queries';
-import useApi from './useApi';
-
-export default function useFetch(url, options = {}, update = []) {
-  const [response, setResponse] = useState();
-  const [error, setError] = useState();
-  const [loading, setLoading] = useState(false);
-  const [count, setCount] = useState(0);
-  const { get } = useApi();
-  const { params = {}, headers = {}, disabled = false, delay = 0, interval, onDataLoad } = options;
-
-  async function loadData(params) {
-    try {
-      setLoading(true);
-      setError(null);
-      const time = performance.now();
-
-      const { data, status, ok } = await get(url, params, headers);
-
-      await saveQuery(url, { time: performance.now() - time, completed: Date.now() });
-
-      if (status >= 400) {
-        setError(data);
-        setResponse({ data: null, status, ok });
-      } else {
-        setResponse({ data, status, ok });
-      }
-
-      onDataLoad?.(data);
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error(e);
-
-      setError(e);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    if (url && !disabled) {
-      const id = setTimeout(() => loadData(params), delay);
-
-      return () => {
-        clearTimeout(id);
-      };
-    }
-  }, [url, disabled, count, ...update]);
-
-  useEffect(() => {
-    if (interval && !disabled) {
-      const id = setInterval(() => setCount(state => state + 1), interval);
-
-      return () => {
-        clearInterval(id);
-      };
-    }
-  }, [interval, disabled]);
-
-  return { ...response, error, loading };
-}

hooks/useRequireLogin.js

@@ -1,36 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useRouter } from 'next/router';
-import useUser from 'hooks/useUser';
-import useApi from 'hooks/useApi';
-
-export default function useRequireLogin() {
-  const router = useRouter();
-  const { get } = useApi();
-  const { user, setUser } = useUser();
-  const [loading, setLoading] = useState(false);
-
-  async function loadUser() {
-    setLoading(true);
-
-    const { ok, data } = await get('/auth/verify');
-
-    if (!ok) {
-      await router.push('/login');
-      return null;
-    }
-
-    setUser(data.user);
-
-    setLoading(false);
-  }
-
-  useEffect(() => {
-    if (loading || user) {
-      return;
-    }
-
-    loadUser();
-  }, [user, loading]);
-
-  return { user, loading };
-}

hooks/useUser.js

@@ -1,9 +1,33 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
 import useStore, { setUser } from 'store/app';
+import useApi from 'hooks/useApi';
 
 const selector = state => state.user;
+let loading = false;
 
 export default function useUser() {
   const user = useStore(selector);
+  const { get } = useApi();
+  const router = useRouter();
 
-  return { user, setUser };
+  useEffect(() => {
+    async function loadUser() {
+      const { user } = await get('/auth/verify');
+      loading = false;
+
+      if (!user) {
+        await router.push('/login');
+      } else {
+        setUser(user);
+      }
+    }
+
+    if (!user && !loading) {
+      loading = true;
+      loadUser();
+    }
+  }, [user, get, router]);
+
+  return user;
 }