Refactored fetching to use react-query.

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;
   }