Refactored fetching to use react-query.

components/pages/Dashboard.js

@@ -3,9 +3,9 @@ import { defineMessages, useIntl } from 'react-intl';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import WebsiteList from 'components/pages/WebsiteList';
-import { Button } from 'react-basics';
+import { Button, Loading } from 'react-basics';
 import DashboardSettingsButton from 'components/settings/DashboardSettingsButton';
-import useFetch from 'hooks/useFetch';
+import useApi from 'hooks/useApi';
 import useDashboard from 'store/dashboard';
 import DashboardEdit from './DashboardEdit';
 import styles from './WebsiteList.module.css';
@@ -19,13 +19,18 @@ export default function Dashboard({ userId }) {
   const dashboard = useDashboard();
   const { showCharts, limit, editing } = dashboard;
   const [max, setMax] = useState(limit);
-  const { data } = useFetch('/websites', { params: { user_id: userId } });
+  const { get, useQuery } = useApi();
+  const { data, isLoading } = useQuery(['websites'], () => get('/websites', { userId }));
   const { formatMessage } = useIntl();
 
   function handleMore() {
     setMax(max + limit);
   }
 
+  if (isLoading) {
+    return <Loading />;
+  }
+
   if (!data) {
     return null;
   }

components/pages/RealtimeDashboard.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { useState, useEffect, useMemo, useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { subMinutes, startOfMinute } from 'date-fns';
 import firstBy from 'thenby';
@@ -10,7 +10,7 @@ import RealtimeHeader from 'components/metrics/RealtimeHeader';
 import WorldMap from 'components/common/WorldMap';
 import DataTable from 'components/metrics/DataTable';
 import RealtimeViews from 'components/metrics/RealtimeViews';
-import useFetch from 'hooks/useFetch';
+import useApi from 'hooks/useApi';
 import useLocale from 'hooks/useLocale';
 import useCountryNames from 'hooks/useCountryNames';
 import { percentFilter } from 'lib/filters';
@@ -33,13 +33,17 @@ export default function RealtimeDashboard() {
   const countryNames = useCountryNames(locale);
   const [data, setData] = useState();
   const [websiteId, setWebsiteId] = useState(null);
-  const { data: init, loading } = useFetch('/realtime/init');
-  const { data: updates } = useFetch('/realtime/update', {
-    params: { startAt: data?.timestamp },
-    disabled: !init?.websites?.length || !data,
-    interval: REALTIME_INTERVAL,
-    headers: { [SHARE_TOKEN_HEADER]: init?.token },
-  });
+  const { get, useQuery } = useApi();
+  const { data: init, isLoading } = useQuery(['realtime:init'], () => get('/realtime/init'));
+  const { data: updates } = useQuery(
+    ['realtime:updates'],
+    () =>
+      get('/realtime/update', { startAt: data?.timestamp }, { [SHARE_TOKEN_HEADER]: init?.token }),
+    {
+      disabled: !init?.websites?.length || !data,
+      retryInterval: REALTIME_INTERVAL,
+    },
+  );
 
   const renderCountryName = useCallback(
     ({ x }) => <span className={locale}>{countryNames[x]}</span>,
@@ -108,7 +112,7 @@ export default function RealtimeDashboard() {
     }
   }, [updates]);
 
-  if (!init || !data || loading) {
+  if (!init || !data || isLoading) {
     return null;
   }
 

components/pages/Settings.js

@@ -1,12 +1,12 @@
 import Layout from 'components/layout/Layout';
 import Menu from 'components/nav/Nav';
-import useRequireLogin from 'hooks/useRequireLogin';
+import useUser from 'hooks/useUser';
 import styles from './Settings.module.css';
 
 export default function Settings({ children }) {
-  const { user: loggedIn } = useRequireLogin();
+  const user = useUser();
 
-  if (!loggedIn) {
+  if (!user) {
     return null;
   }
 

components/pages/TeamDetails.js

@@ -6,13 +6,12 @@ import Link from 'next/link';
 import Page from 'components/layout/Page';
 import TeamEditForm from 'components/forms/TeamEditForm';
 import PageHeader from 'components/layout/PageHeader';
-import { getClientAuthToken } from 'lib/client';
 import TeamMembersTable from '../tables/TeamMembersTable';
 
 export default function TeamDetails({ teamId }) {
   const [values, setValues] = useState(null);
   const [tab, setTab] = useState('general');
-  const { get } = useApi(getClientAuthToken());
+  const { get } = useApi();
   const { toast, showToast } = useToast();
   const { data, isLoading } = useQuery(
     ['team', teamId],

components/pages/TeamsList.js

@@ -6,13 +6,12 @@ import TeamAddForm from 'components/forms/TeamAddForm';
 import PageHeader from 'components/layout/PageHeader';
 import TeamsTable from 'components/tables/TeamsTable';
 import Page from 'components/layout/Page';
-import { getClientAuthToken } from 'lib/client';
 import { useQuery } from '@tanstack/react-query';
 
 export default function TeamsList() {
   const [edit, setEdit] = useState(false);
   const [update, setUpdate] = useState(0);
-  const { get } = useApi(getClientAuthToken());
+  const { get } = useApi();
   const { data, isLoading, error } = useQuery(['teams', update], () => get(`/teams`));
   const hasData = data && data.length !== 0;
   const { toast, showToast } = useToast();

components/pages/TestConsole.js

@@ -1,17 +1,20 @@
+import { Button, Column, Loading, Row } from 'react-basics';
+import Head from 'next/head';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
 import DropDown from 'components/common/DropDown';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import EventsChart from 'components/metrics/EventsChart';
 import WebsiteChart from 'components/metrics/WebsiteChart';
-import useFetch from 'hooks/useFetch';
-import Head from 'next/head';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { Button, Column, Row } from 'react-basics';
+import useApi from 'hooks/useApi';
 import styles from './TestConsole.module.css';
 
 export default function TestConsole() {
-  const { data } = useFetch('/websites?include_all=true');
+  const { get, useQuery } = useApi();
+  const { data, isLoading } = useQuery(['websites:test-console'], () =>
+    get('/websites?include_all=true'),
+  );
   const router = useRouter();
   const {
     basePath,
@@ -19,6 +22,10 @@ export default function TestConsole() {
   } = router;
   const websiteId = id?.[0];
 
+  if (isLoading) {
+    return <Loading />;
+  }
+
   if (!data) {
     return null;
   }

components/pages/UserSettings.js

@@ -4,7 +4,6 @@ import UserEditForm from 'components/forms/UserEditForm';
 import UserPasswordForm from 'components/forms/UserPasswordForm';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
-import { getClientAuthToken } from 'lib/client';
 import useApi from 'hooks/useApi';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -14,7 +13,7 @@ import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
 export default function UserSettings({ userId }) {
   const [values, setValues] = useState(null);
   const [tab, setTab] = useState('general');
-  const { get } = useApi(getClientAuthToken());
+  const { get } = useApi();
   const { toast, showToast } = useToast();
   const router = useRouter();
   const { data, isLoading } = useQuery(

components/pages/UsersList.js

@@ -3,7 +3,6 @@ import PageHeader from 'components/layout/PageHeader';
 import UsersTable from 'components/tables/UsersTable';
 import { useState } from 'react';
 import { Button, Icon, useToast } from 'react-basics';
-import { getClientAuthToken } from 'lib/client';
 import { useMutation } from '@tanstack/react-query';
 import useApi from 'hooks/useApi';
 
@@ -11,7 +10,7 @@ export default function UsersList() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState();
   const { toast, showToast } = useToast();
-  const { post } = useApi(getClientAuthToken());
+  const { post } = useApi();
   const { mutate, isLoading } = useMutation(data => post('/api-key', data));
 
   const handleSave = () => {

components/pages/WebsiteDetails.js

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Column } from 'react-basics';
+import { Column, Loading } from 'react-basics';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import classNames from 'classnames';
 import WebsiteChart from 'components/metrics/WebsiteChart';
@@ -8,7 +8,6 @@ import Page from 'components/layout/Page';
 import GridRow from 'components/layout/GridRow';
 import MenuLayout from 'components/layout/MenuLayout';
 import Link from 'components/common/Link';
-import Loading from 'components/common/Loading';
 import PagesTable from 'components/metrics/PagesTable';
 import ReferrersTable from 'components/metrics/ReferrersTable';
 import BrowsersTable from 'components/metrics/BrowsersTable';
@@ -18,8 +17,8 @@ import CountriesTable from 'components/metrics/CountriesTable';
 import LanguagesTable from 'components/metrics/LanguagesTable';
 import ScreenTable from 'components/metrics/ScreenTable';
 import QueryParametersTable from 'components/metrics/QueryParametersTable';
-import useFetch from 'hooks/useFetch';
 import usePageQuery from 'hooks/usePageQuery';
+import useApi from 'hooks/useApi';
 import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
 import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteDetails.module.css';
@@ -49,7 +48,10 @@ const views = {
 };
 
 export default function WebsiteDetails({ websiteId }) {
-  const { data } = useFetch(`/websites/${websiteId}`);
+  const { get, useQuery } = useApi();
+  const { data, isLoading } = useQuery(['websites', websiteId], () =>
+    get(`/websites/${websiteId}`),
+  );
   const [chartLoaded, setChartLoaded] = useState(false);
   const [countryData, setCountryData] = useState();
   const {
@@ -122,6 +124,10 @@ export default function WebsiteDetails({ websiteId }) {
     }
   }
 
+  if (isLoading) {
+    return <Loading />;
+  }
+
   if (!data) {
     return null;
   }
@@ -136,7 +142,7 @@ export default function WebsiteDetails({ websiteId }) {
         showLink={false}
         stickyHeader
       />
-      {!chartLoaded && <Loading />}
+      {!chartLoaded && <Loading variant="dots" />}
       {chartLoaded && !view && (
         <>
           <GridRow>

components/pages/WebsiteSettings.js

@@ -9,13 +9,12 @@ import WebsiteReset from 'components/forms/WebsiteReset';
 import PageHeader from 'components/layout/PageHeader';
 import TrackingCodeForm from 'components/forms/TrackingCodeForm';
 import ShareUrlForm from 'components/forms/ShareUrlForm';
-import { getClientAuthToken } from 'lib/client';
 import ExternalLink from 'assets/external-link.svg';
 
 export default function Websites({ websiteId }) {
   const [values, setValues] = useState(null);
   const [tab, setTab] = useState('general');
-  const { get } = useApi(getClientAuthToken());
+  const { get } = useApi();
   const { toast, showToast } = useToast();
   const { data, isLoading } = useQuery(
     ['website', websiteId],

components/pages/WebsitesList.js

@@ -7,14 +7,13 @@ import WebsiteAddForm from 'components/forms/WebsiteAddForm';
 import PageHeader from 'components/layout/PageHeader';
 import WebsitesTable from 'components/tables/WebsitesTable';
 import Page from 'components/layout/Page';
-import { getClientAuthToken } from 'lib/client';
 import useUser from 'hooks/useUser';
 
 export default function WebsitesList() {
   const [edit, setEdit] = useState(false);
   const [update, setUpdate] = useState(0);
-  const { get } = useApi(getClientAuthToken());
-  const { user } = useUser();
+  const { get } = useApi();
+  const user = useUser();
   const { data, isLoading, error } = useQuery(['websites', update], () =>
     get(`/users/${user.id}/websites`),
   );