Added useApi hook.

components/pages/RealtimeDashboard.js

@@ -33,8 +33,8 @@ export default function RealtimeDashboard() {
   const countryNames = useCountryNames(locale);
   const [data, setData] = useState();
   const [websiteId, setWebsiteId] = useState(0);
-  const { data: init, loading } = useFetch('/api/realtime/init');
-  const { data: updates } = useFetch('/api/realtime/update', {
+  const { data: init, loading } = useFetch('/realtime/init');
+  const { data: updates } = useFetch('/realtime/update', {
     params: { start_at: data?.timestamp },
     disabled: !init?.websites?.length || !data,
     interval: REALTIME_INTERVAL,

components/pages/TestConsole.js

@@ -21,7 +21,7 @@ export default function TestConsole() {
   const [website, setWebsite] = useState();
   const [show, setShow] = useState(true);
   const { basePath } = useRouter();
-  const { data } = useFetch('/api/websites');
+  const { data } = useFetch('/websites');
 
   if (!data || !user?.is_admin) {
     return null;

components/pages/WebsiteDetails.js

@@ -37,7 +37,7 @@ const views = {
 
 export default function WebsiteDetails({ websiteId }) {
   const shareToken = useShareToken();
-  const { data } = useFetch(`/api/website/${websiteId}`, {
+  const { data } = useFetch(`/website/${websiteId}`, {
     headers: { [TOKEN_HEADER]: shareToken?.token },
   });
   const [chartLoaded, setChartLoaded] = useState(false);

components/pages/WebsiteList.js

@@ -11,7 +11,7 @@ import Chart from 'assets/chart-bar.svg';
 import styles from './WebsiteList.module.css';
 
 export default function WebsiteList({ userId }) {
-  const { data } = useFetch('/api/websites', { params: { user_id: userId } });
+  const { data } = useFetch('/websites', { params: { user_id: userId } });
   const [showCharts, setShowCharts] = useState(true);
 
   if (!data) {