Added useApi hook.

components/forms/AccountEditForm.js

@@ -8,7 +8,7 @@ import FormLayout, {
   FormMessage,
   FormRow,
 } from 'components/layout/FormLayout';
-import usePost from 'hooks/usePost';
+import useApi from 'hooks/useApi';
 
 const initialValues = {
   username: '',
@@ -29,11 +29,11 @@ const validate = ({ user_id, username, password }) => {
 };
 
 export default function AccountEditForm({ values, onSave, onClose }) {
-  const post = usePost();
+  const { post } = useApi();
   const [message, setMessage] = useState();
 
   const handleSubmit = async values => {
-    const { ok, data } = await post('/api/account', values);
+    const { ok, data } = await post('/account', values);
 
     if (ok) {
       onSave();

components/forms/ChangePasswordForm.js

@@ -8,7 +8,7 @@ import FormLayout, {
   FormMessage,
   FormRow,
 } from 'components/layout/FormLayout';
-import usePost from 'hooks/usePost';
+import useApi from 'hooks/useApi';
 
 const initialValues = {
   current_password: '',
@@ -37,11 +37,11 @@ const validate = ({ current_password, new_password, confirm_password }) => {
 };
 
 export default function ChangePasswordForm({ values, onSave, onClose }) {
-  const post = usePost();
+  const { post } = useApi();
   const [message, setMessage] = useState();
 
   const handleSubmit = async values => {
-    const { ok, data } = await post('/api/account/password', values);
+    const { ok, data } = await post('/account/password', values);
 
     if (ok) {
       onSave();

components/forms/DeleteForm.js

@@ -8,7 +8,7 @@ import FormLayout, {
   FormMessage,
   FormRow,
 } from 'components/layout/FormLayout';
-import useDelete from 'hooks/useDelete';
+import useApi from 'hooks/useApi';
 
 const CONFIRMATION_WORD = 'DELETE';
 
@@ -27,11 +27,11 @@ const validate = ({ confirmation }) => {
 };
 
 export default function DeleteForm({ values, onSave, onClose }) {
-  const del = useDelete();
+  const { del } = useApi();
   const [message, setMessage] = useState();
 
   const handleSubmit = async ({ type, id }) => {
-    const { ok, data } = await del(`/api/${type}/${id}`);
+    const { ok, data } = await del(`/${type}/${id}`);
 
     if (ok) {
       onSave();

components/forms/LoginForm.js

@@ -10,7 +10,7 @@ import FormLayout, {
   FormRow,
 } from 'components/layout/FormLayout';
 import Icon from 'components/common/Icon';
-import usePost from 'hooks/usePost';
+import useApi from 'hooks/useApi';
 import { setItem } from 'lib/web';
 import { AUTH_TOKEN } from 'lib/constants';
 import { setUser } from 'store/app';
@@ -31,12 +31,12 @@ const validate = ({ username, password }) => {
 };
 
 export default function LoginForm() {
-  const post = usePost();
+  const { post } = useApi();
   const router = useRouter();
   const [message, setMessage] = useState();
 
   const handleSubmit = async ({ username, password }) => {
-    const { ok, status, data } = await post('/api/auth/login', {
+    const { ok, status, data } = await post('/auth/login', {
       username,
       password,
     });

components/forms/ResetForm.js

@@ -8,7 +8,7 @@ import FormLayout, {
   FormMessage,
   FormRow,
 } from 'components/layout/FormLayout';
-import usePost from 'hooks/usePost';
+import useApi from 'hooks/useApi';
 
 const CONFIRMATION_WORD = 'RESET';
 
@@ -27,11 +27,11 @@ const validate = ({ confirmation }) => {
 };
 
 export default function ResetForm({ values, onSave, onClose }) {
-  const post = usePost();
+  const { post } = useApi();
   const [message, setMessage] = useState();
 
   const handleSubmit = async ({ type, id }) => {
-    const { ok, data } = await post(`/api/${type}/${id}/reset`);
+    const { ok, data } = await post(`/${type}/${id}/reset`);
 
     if (ok) {
       onSave();

components/forms/WebsiteEditForm.js

@@ -10,7 +10,7 @@ import FormLayout, {
 } from 'components/layout/FormLayout';
 import Checkbox from 'components/common/Checkbox';
 import { DOMAIN_REGEX } from 'lib/constants';
-import usePost from 'hooks/usePost';
+import useApi from 'hooks/useApi';
 
 const initialValues = {
   name: '',
@@ -34,11 +34,11 @@ const validate = ({ name, domain }) => {
 };
 
 export default function WebsiteEditForm({ values, onSave, onClose }) {
-  const post = usePost();
+  const { post } = useApi();
   const [message, setMessage] = useState();
 
   const handleSubmit = async values => {
-    const { ok, data } = await post('/api/website', values);
+    const { ok, data } = await post('/website', values);
 
     if (ok) {
       onSave();

components/metrics/ActiveUsers.js

@@ -9,7 +9,7 @@ import styles from './ActiveUsers.module.css';
 
 export default function ActiveUsers({ websiteId, className, value, interval = 60000 }) {
   const shareToken = useShareToken();
-  const { data } = useFetch(!value && `/api/website/${websiteId}/active`, {
+  const { data } = useFetch(!value && `/website/${websiteId}/active`, {
     interval,
     headers: { [TOKEN_HEADER]: shareToken?.token },
   });

components/metrics/EventsChart.js

@@ -17,7 +17,7 @@ export default function EventsChart({ websiteId, className, token }) {
   const shareToken = useShareToken();
 
   const { data, loading } = useFetch(
-    `/api/website/${websiteId}/events`,
+    `/website/${websiteId}/events`,
     {
       params: {
         start_at: +startDate,

components/metrics/MetricsBar.js

@@ -22,7 +22,7 @@ export default function MetricsBar({ websiteId, className }) {
   } = usePageQuery();
 
   const { data, error, loading } = useFetch(
-    `/api/website/${websiteId}/stats`,
+    `/website/${websiteId}/stats`,
     {
       params: {
         start_at: +startDate,

components/metrics/MetricsTable.js

@@ -35,7 +35,7 @@ export default function MetricsTable({
   } = usePageQuery();
 
   const { data, loading, error } = useFetch(
-    `/api/website/${websiteId}/metrics`,
+    `/website/${websiteId}/metrics`,
     {
       params: {
         type,

components/metrics/WebsiteChart.js

@@ -41,7 +41,7 @@ export default function WebsiteChart({
   } = usePageQuery();
 
   const { data, loading, error } = useFetch(
-    `/api/website/${websiteId}/pageviews`,
+    `/website/${websiteId}/pageviews`,
     {
       params: {
         start_at: +startDate,

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: init, loading } = useFetch('/realtime/init');
-  const { data: updates } = useFetch('/api/realtime/update', {
+  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) {

components/settings/AccountSettings.js

@@ -25,7 +25,7 @@ export default function AccountSettings() {
   const [deleteAccount, setDeleteAccount] = useState();
   const [saved, setSaved] = useState(0);
   const [message, setMessage] = useState();
-  const { data } = useFetch(`/api/accounts`, {}, [saved]);
+  const { data } = useFetch(`/accounts`, {}, [saved]);
 
   const Checkmark = ({ is_admin }) => (is_admin ? <Icon icon={<Check />} size="medium" /> : null);
 

components/settings/WebsiteSettings.js

@@ -36,9 +36,7 @@ export default function WebsiteSettings() {
   const [showUrl, setShowUrl] = useState();
   const [saved, setSaved] = useState(0);
   const [message, setMessage] = useState();
-  const { data } = useFetch(`/api/websites` + (user.is_admin ? '?include_all=true' : ''), {}, [
+  const { data } = useFetch(`/websites` + (user?.is_admin ? '?include_all=true' : ''), {}, [saved]);
-    saved,
-  ]);
 
   const Buttons = row => (
     <ButtonLayout align="right">

hooks/useApi.js

@@ -0,0 +1,25 @@
+import { useCallback } from 'react';
+import { useRouter } from 'next/router';
+import { get, post, put, del } from 'lib/web';
+
+export default function useApi() {
+  const { basePath } = useRouter();
+
+  return {
+    get: useCallback(async (url, params, headers) => {
+      return get(`${basePath}/api/${url}`, params, headers);
+    }, []),
+
+    post: useCallback(async (url, params, headers) => {
+      return post(`${basePath}/api/${url}`, params, headers);
+    }, []),
+
+    put: useCallback(async (url, params, headers) => {
+      return put(`${basePath}/api/${url}`, params, headers);
+    }, []),
+
+    del: useCallback(async (url, params, headers) => {
+      return del(`${basePath}/api/${url}`, params, headers);
+    }, []),
+  };
+}

hooks/useDelete.js

@@ -1,11 +0,0 @@
-import { useCallback } from 'react';
-import { useRouter } from 'next/router';
-import { del } from 'lib/web';
-
-export default function useDelete() {
-  const { basePath } = useRouter();
-
-  return useCallback(async (url, params, headers) => {
-    return del(`${basePath}${url}`, params, headers);
-  }, []);
-}

hooks/useFetch.js

@@ -1,14 +1,13 @@
 import { useState, useEffect } from 'react';
-import { useRouter } from 'next/router';
-import { get } from 'lib/web';
 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, setLoadiing] = useState(false);
   const [count, setCount] = useState(0);
-  const { basePath } = useRouter();
+  const { get } = useApi();
   const { params = {}, headers = {}, disabled, delay = 0, interval, onDataLoad } = options;
 
   async function loadData(params) {
@@ -17,7 +16,7 @@ export default function useFetch(url, options = {}, update = []) {
       setError(null);
       const time = performance.now();
 
-      const { data, status, ok } = await get(`${basePath}${url}`, params, headers);
+      const { data, status, ok } = await get(url, params, headers);
 
       await saveQuery(url, { time: performance.now() - time, completed: Date.now() });
 

hooks/usePost.js

@@ -1,11 +0,0 @@
-import { useCallback } from 'react';
-import { useRouter } from 'next/router';
-import { post } from 'lib/web';
-
-export default function usePost() {
-  const { basePath } = useRouter();
-
-  return useCallback(async (url, params, headers) => {
-    return post(`${basePath}${url}`, params, headers);
-  }, []);
-}

public/messages/de-DE.json

@@ -568,7 +568,7 @@
   "message.reset-warning": [
     {
       "type": 0,
-      "value": "Alle Daten für diese Website werden gelöscht, jedoch bleibt der tracking code bestehen."
+      "value": "Alle Daten für diese Webseite werden gelöscht, jedoch bleibt der Tracking Code bestehen."
     }
   ],
   "message.save-success": [