From 339cd21596ff281690dc2da9dea2d3bcd26950a6 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Mon, 9 Nov 2020 21:01:53 -0800
Subject: [PATCH] Fix issues with basePath.

---
 components/common/WorldMap.js          |  4 +++-
 components/forms/AccountEditForm.js    |  7 +++----
 components/forms/ChangePasswordForm.js |  7 +++----
 components/forms/DeleteForm.js         |  7 +++----
 components/forms/LoginForm.js          | 11 +++++++----
 components/forms/LoginForm.module.css  |  8 ++++++++
 components/forms/WebsiteEditForm.js    |  7 +++----
 components/pages/WebsiteDetails.js     |  9 +--------
 hooks/useDelete.js                     | 11 +++++++++++
 hooks/useFetch.js                      | 12 +++++-------
 hooks/usePageQuery.js                  |  6 ++++--
 hooks/usePost.js                       | 11 +++++++++++
 hooks/useRequireLogin.js               | 12 +-----------
 package.json                           |  2 +-
 pages/logout.js                        |  3 ++-
 15 files changed, 66 insertions(+), 51 deletions(-)
 create mode 100644 hooks/useDelete.js
 create mode 100644 hooks/usePost.js

diff --git a/components/common/WorldMap.js b/components/common/WorldMap.js
index a24f7400..7a4a0fda 100644
--- a/components/common/WorldMap.js
+++ b/components/common/WorldMap.js
@@ -8,10 +8,12 @@ import { THEME_COLORS } from 'lib/constants';
 import styles from './WorldMap.module.css';
 import useCountryNames from 'hooks/useCountryNames';
 import useLocale from 'hooks/useLocale';
+import { useRouter } from 'next/router';
 
 const geoUrl = '/world-110m.json';
 
 export default function WorldMap({ data, className }) {
+  const { basePath } = useRouter();
   const [tooltip, setTooltip] = useState();
   const [theme] = useTheme();
   const colors = useMemo(
@@ -57,7 +59,7 @@ export default function WorldMap({ data, className }) {
     >
       <ComposableMap projection="geoMercator">
         <ZoomableGroup zoom={0.8} minZoom={0.7} center={[0, 40]}>
-          <Geographies geography={geoUrl}>
+          <Geographies geography={`${basePath}${geoUrl}`}>
             {({ geographies }) => {
               return geographies.map(geo => {
                 const code = geo.properties.ISO_A2;
diff --git a/components/forms/AccountEditForm.js b/components/forms/AccountEditForm.js
index cc000cf7..4b185f1a 100644
--- a/components/forms/AccountEditForm.js
+++ b/components/forms/AccountEditForm.js
@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Formik, Form, Field } from 'formik';
-import { useRouter } from 'next/router';
-import { post } from 'lib/web';
 import Button from 'components/common/Button';
 import FormLayout, {
   FormButtons,
@@ -10,6 +8,7 @@ import FormLayout, {
   FormMessage,
   FormRow,
 } from 'components/layout/FormLayout';
+import usePost from 'hooks/usePost';
 
 const initialValues = {
   username: '',
@@ -30,11 +29,11 @@ const validate = ({ user_id, username, password }) => {
 };
 
 export default function AccountEditForm({ values, onSave, onClose }) {
-  const { basePath } = useRouter();
+  const post = usePost();
   const [message, setMessage] = useState();
 
   const handleSubmit = async values => {
-    const { ok, data } = await post(`${basePath}/api/account`, values);
+    const { ok, data } = await post('/api/account', values);
 
     if (ok) {
       onSave();
diff --git a/components/forms/ChangePasswordForm.js b/components/forms/ChangePasswordForm.js
index 9c41bd55..d62b5539 100644
--- a/components/forms/ChangePasswordForm.js
+++ b/components/forms/ChangePasswordForm.js
@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useRouter } from 'next/router';
 import { Formik, Form, Field } from 'formik';
-import { post } from 'lib/web';
 import Button from 'components/common/Button';
 import FormLayout, {
   FormButtons,
@@ -10,6 +8,7 @@ import FormLayout, {
   FormMessage,
   FormRow,
 } from 'components/layout/FormLayout';
+import usePost from 'hooks/usePost';
 
 const initialValues = {
   current_password: '',
@@ -38,11 +37,11 @@ const validate = ({ current_password, new_password, confirm_password }) => {
 };
 
 export default function ChangePasswordForm({ values, onSave, onClose }) {
-  const { basePath } = useRouter();
+  const post = usePost();
   const [message, setMessage] = useState();
 
   const handleSubmit = async values => {
-    const { ok, data } = await post(`${basePath}/api/account/password`, values);
+    const { ok, data } = await post('/api/account/password', values);
 
     if (ok) {
       onSave();
diff --git a/components/forms/DeleteForm.js b/components/forms/DeleteForm.js
index 145a342a..78600305 100644
--- a/components/forms/DeleteForm.js
+++ b/components/forms/DeleteForm.js
@@ -1,8 +1,6 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useRouter } from 'next/router';
 import { Formik, Form, Field } from 'formik';
-import { del } from 'lib/web';
 import Button from 'components/common/Button';
 import FormLayout, {
   FormButtons,
@@ -10,6 +8,7 @@ import FormLayout, {
   FormMessage,
   FormRow,
 } from 'components/layout/FormLayout';
+import useDelete from 'hooks/useDelete';
 
 const CONFIRMATION_WORD = 'DELETE';
 
@@ -28,11 +27,11 @@ const validate = ({ confirmation }) => {
 };
 
 export default function DeleteForm({ values, onSave, onClose }) {
-  const { basePath } = useRouter();
+  const del = useDelete();
   const [message, setMessage] = useState();
 
   const handleSubmit = async ({ type, id }) => {
-    const { ok, data } = await del(`${basePath}/api/${type}/${id}`);
+    const { ok, data } = await del(`/api/${type}/${id}`);
 
     if (ok) {
       onSave();
diff --git a/components/forms/LoginForm.js b/components/forms/LoginForm.js
index 38b85125..8ac3a556 100644
--- a/components/forms/LoginForm.js
+++ b/components/forms/LoginForm.js
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Formik, Form, Field } from 'formik';
 import { useRouter } from 'next/router';
-import { post } from 'lib/web';
 import Button from 'components/common/Button';
 import FormLayout, {
   FormButtons,
@@ -13,6 +12,7 @@ import FormLayout, {
 import Icon from 'components/common/Icon';
 import Logo from 'assets/logo.svg';
 import styles from './LoginForm.module.css';
+import usePost from 'hooks/usePost';
 
 const validate = ({ username, password }) => {
   const errors = {};
@@ -28,11 +28,12 @@ const validate = ({ username, password }) => {
 };
 
 export default function LoginForm() {
+  const post = usePost();
   const router = useRouter();
   const [message, setMessage] = useState();
 
   const handleSubmit = async ({ username, password }) => {
-    const { ok, status, data } = await post(`${router.basePath}/api/auth/login`, {
+    const { ok, status, data } = await post('/api/auth/login', {
       username,
       password,
     });
@@ -65,8 +66,10 @@ export default function LoginForm() {
       >
         {() => (
           <Form>
-            <Icon icon={<Logo />} size="xlarge" className={styles.icon} />
-            <h1 className="center">umami</h1>
+            <div className={styles.header}>
+              <Icon icon={<Logo />} size="xlarge" className={styles.icon} />
+              <h1 className="center">umami</h1>
+            </div>
             <FormRow>
               <label htmlFor="username">
                 <FormattedMessage id="label.username" defaultMessage="Username" />
diff --git a/components/forms/LoginForm.module.css b/components/forms/LoginForm.module.css
index 9771cd8a..dfd5456a 100644
--- a/components/forms/LoginForm.module.css
+++ b/components/forms/LoginForm.module.css
@@ -13,3 +13,11 @@
   justify-content: center;
   margin: 0 auto;
 }
+
+.header {
+  margin-bottom: 30px;
+}
+
+.header h1 {
+  margin: 12px 0;
+}
diff --git a/components/forms/WebsiteEditForm.js b/components/forms/WebsiteEditForm.js
index 7be89f79..b79cfb35 100644
--- a/components/forms/WebsiteEditForm.js
+++ b/components/forms/WebsiteEditForm.js
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Formik, Form, Field } from 'formik';
-import { post } from 'lib/web';
 import Button from 'components/common/Button';
 import FormLayout, {
   FormButtons,
@@ -11,7 +10,7 @@ import FormLayout, {
 } from 'components/layout/FormLayout';
 import Checkbox from 'components/common/Checkbox';
 import { DOMAIN_REGEX } from 'lib/constants';
-import { useRouter } from 'next/router';
+import usePost from 'hooks/usePost';
 
 const initialValues = {
   name: '',
@@ -35,11 +34,11 @@ const validate = ({ name, domain }) => {
 };
 
 export default function WebsiteEditForm({ values, onSave, onClose }) {
-  const { basePath } = useRouter();
+  const post = usePost();
   const [message, setMessage] = useState();
 
   const handleSubmit = async values => {
-    const { ok, data } = await post(`${basePath}/api/website`, values);
+    const { ok, data } = await post('/api/website', values);
 
     if (ok) {
       onSave();
diff --git a/components/pages/WebsiteDetails.js b/components/pages/WebsiteDetails.js
index 81cde3ad..0ddc89e2 100644
--- a/components/pages/WebsiteDetails.js
+++ b/components/pages/WebsiteDetails.js
@@ -43,19 +43,12 @@ export default function WebsiteDetails({ websiteId }) {
   const [eventsData, setEventsData] = useState();
   const {
     resolve,
-    router,
     query: { view },
   } = usePageQuery();
 
   const BackButton = () => (
     <div key="back-button" className={styles.backButton}>
-      <Link
-        key="back-button"
-        href={router.pathname}
-        as={resolve({ view: undefined })}
-        icon={<Arrow />}
-        size="small"
-      >
+      <Link key="back-button" href={resolve({ view: undefined })} icon={<Arrow />} size="small">
         <FormattedMessage id="label.back" defaultMessage="Back" />
       </Link>
     </div>
diff --git a/hooks/useDelete.js b/hooks/useDelete.js
new file mode 100644
index 00000000..253ae1da
--- /dev/null
+++ b/hooks/useDelete.js
@@ -0,0 +1,11 @@
+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);
+  }, []);
+}
diff --git a/hooks/useFetch.js b/hooks/useFetch.js
index 7f97d0fb..173dd3fa 100644
--- a/hooks/useFetch.js
+++ b/hooks/useFetch.js
@@ -6,8 +6,7 @@ import { useRouter } from 'next/router';
 
 export default function useFetch(url, options = {}, update = []) {
   const dispatch = useDispatch();
-  const [data, setData] = useState();
-  const [status, setStatus] = useState();
+  const [response, setResponse] = useState();
   const [error, setError] = useState();
   const [loading, setLoadiing] = useState(false);
   const [count, setCount] = useState(0);
@@ -19,18 +18,17 @@ export default function useFetch(url, options = {}, update = []) {
       setLoadiing(true);
       setError(null);
       const time = performance.now();
-      const { data, status } = await get(`${basePath}${url}`, params, headers);
+      const { data, status, ok } = await get(`${basePath}${url}`, params, headers);
 
       dispatch(updateQuery({ url, time: performance.now() - time, completed: Date.now() }));
 
       if (status >= 400) {
         setError(data);
-        setData(null);
+        setResponse({ data: null, status, ok });
       } else {
-        setData(data);
+        setResponse({ data, status, ok });
       }
 
-      setStatus(status);
       onDataLoad?.(data);
     } catch (e) {
       console.error(e);
@@ -60,5 +58,5 @@ export default function useFetch(url, options = {}, update = []) {
     }
   }, [interval, !!disabled]);
 
-  return { data, status, error, loading };
+  return { ...response, error, loading };
 }
diff --git a/hooks/usePageQuery.js b/hooks/usePageQuery.js
index ced19702..7cce756d 100644
--- a/hooks/usePageQuery.js
+++ b/hooks/usePageQuery.js
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { useRouter } from 'next/router';
-import { getQueryString } from '../lib/url';
+import { getQueryString } from 'lib/url';
 
 export default function usePageQuery() {
   const router = useRouter();
@@ -25,7 +25,9 @@ export default function usePageQuery() {
   function resolve(params) {
     const search = getQueryString({ ...query, ...params });
 
-    return `${pathname}${search}`;
+    const { asPath } = router;
+
+    return `${asPath.split('?')[0]}${search}`;
   }
 
   return { pathname, query, resolve, router };
diff --git a/hooks/usePost.js b/hooks/usePost.js
new file mode 100644
index 00000000..3114ede7
--- /dev/null
+++ b/hooks/usePost.js
@@ -0,0 +1,11 @@
+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);
+  }, []);
+}
diff --git a/hooks/useRequireLogin.js b/hooks/useRequireLogin.js
index 5fb93e76..898f58b5 100644
--- a/hooks/useRequireLogin.js
+++ b/hooks/useRequireLogin.js
@@ -2,17 +2,7 @@ import { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { updateUser } from 'redux/actions/user';
 import { useRouter } from 'next/router';
-import { get } from '../lib/web';
-
-export async function fetchUser() {
-  const res = await fetch('/api/auth/verify');
-
-  if (!res.ok) {
-    return null;
-  }
-
-  return await res.json();
-}
+import { get } from 'lib/web';
 
 export default function useRequireLogin() {
   const router = useRouter();
diff --git a/package.json b/package.json
index 904a2d7c..e8c531ea 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "A simple, fast, website analytics alternative to Google Analytics. ",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",
diff --git a/pages/logout.js b/pages/logout.js
index 6f5af610..7944e9fc 100644
--- a/pages/logout.js
+++ b/pages/logout.js
@@ -1,12 +1,13 @@
 import { useEffect } from 'react';
 import { useRouter } from 'next/router';
+import { get } from 'lib/web';
 
 export default function LogoutPage() {
   const router = useRouter();
   const { basePath } = router;
 
   useEffect(() => {
-    fetch(`${basePath}/api/auth/logout`).then(() => router.push('/login'));
+    get(`${basePath}/api/auth/logout`).then(() => router.push('/login'));
   }, []);
 
   return null;