Support basePath in all queries.

components/forms/AccountEditForm.js

@@ -1,6 +1,7 @@
 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, {
@@ -29,10 +30,11 @@ const validate = ({ user_id, username, password }) => {
 };
 
 export default function AccountEditForm({ values, onSave, onClose }) {
+  const { basePath } = useRouter();
   const [message, setMessage] = useState();
 
   const handleSubmit = async values => {
-    const { ok, data } = await post(`/api/account`, values);
+    const { ok, data } = await post(`${basePath}/api/account`, values);
 
     if (ok) {
       onSave();

components/forms/ChangePasswordForm.js

@@ -1,5 +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';
@@ -37,10 +38,11 @@ const validate = ({ current_password, new_password, confirm_password }) => {
 };
 
 export default function ChangePasswordForm({ values, onSave, onClose }) {
+  const { basePath } = useRouter();
   const [message, setMessage] = useState();
 
   const handleSubmit = async values => {
-    const { ok, data } = await post(`/api/account/password`, values);
+    const { ok, data } = await post(`${basePath}/api/account/password`, values);
 
     if (ok) {
       onSave();

components/forms/DeleteForm.js

@@ -1,4 +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';
@@ -8,7 +10,6 @@ import FormLayout, {
   FormMessage,
   FormRow,
 } from 'components/layout/FormLayout';
-import { FormattedMessage } from 'react-intl';
 
 const CONFIRMATION_WORD = 'DELETE';
 
@@ -27,15 +28,18 @@ const validate = ({ confirmation }) => {
 };
 
 export default function DeleteForm({ values, onSave, onClose }) {
+  const { basePath } = useRouter();
   const [message, setMessage] = useState();
 
   const handleSubmit = async ({ type, id }) => {
-    const response = await del(`/api/${type}/${id}`);
+    const { ok, data } = await del(`${basePath}/api/${type}/${id}`);
 
-    if (typeof response !== 'string') {
+    if (ok) {
       onSave();
     } else {
-      setMessage(<FormattedMessage id="message.failure" defaultMessage="Something went wrong." />);
+      setMessage(
+        data || <FormattedMessage id="message.failure" defaultMessage="Something went wrong." />,
+      );
     }
   };
 

components/forms/LoginForm.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Formik, Form, Field } from 'formik';
-import Router from 'next/router';
+import { useRouter } from 'next/router';
 import { post } from 'lib/web';
 import Button from 'components/common/Button';
 import FormLayout, {
@@ -28,13 +28,17 @@ const validate = ({ username, password }) => {
 };
 
 export default function LoginForm() {
+  const router = useRouter();
   const [message, setMessage] = useState();
 
   const handleSubmit = async ({ username, password }) => {
-    const { ok, status, data } = await post('/api/auth/login', { username, password });
+    const { ok, status, data } = await post(`${router.basePath}/api/auth/login`, {
+      username,
+      password,
+    });
 
     if (ok) {
-      await Router.push('/');
+      return router.push('/');
     } else {
       setMessage(
         status === 401 ? (

components/forms/WebsiteEditForm.js

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

hooks/useCountryNames.js

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
 import { get } from 'lib/web';
 import enUS from 'public/country/en-US.json';
 
@@ -8,9 +9,10 @@ const countryNames = {
 
 export default function useCountryNames(locale) {
   const [list, setList] = useState(countryNames[locale] || enUS);
+  const { basePath } = useRouter();
 
   async function loadData(locale) {
-    const { ok, data } = await get(`/country/${locale}.json`);
+    const { ok, data } = await get(`${basePath}/country/${locale}.json`);
 
     if (ok) {
       countryNames[locale] = data;

hooks/useFetch.js

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { get } from 'lib/web';
 import { updateQuery } from 'redux/actions/queries';
+import { useRouter } from 'next/router';
 
 export default function useFetch(url, params = {}, options = {}) {
   const dispatch = useDispatch();
@@ -9,6 +10,7 @@ export default function useFetch(url, params = {}, options = {}) {
   const [status, setStatus] = useState();
   const [error, setError] = useState();
   const [loading, setLoadiing] = useState(false);
+  const { basePath } = useRouter();
   const keys = Object.keys(params)
     .sort()
     .map(key => params[key]);
@@ -19,7 +21,7 @@ export default function useFetch(url, params = {}, options = {}) {
       setLoadiing(true);
       setError(null);
       const time = performance.now();
-      const { data, status } = await get(url, params);
+      const { data, status } = await get(`${basePath}${url}`, params);
 
       dispatch(updateQuery({ url, time: performance.now() - time, completed: Date.now() }));
 

hooks/useRequireLogin.js

@@ -1,6 +1,8 @@
 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');
@@ -13,29 +15,33 @@ export async function fetchUser() {
 }
 
 export default function useRequireLogin() {
+  const router = useRouter();
   const dispatch = useDispatch();
   const storeUser = useSelector(state => state.user);
   const [loading, setLoading] = useState(!storeUser);
   const [user, setUser] = useState(storeUser);
 
+  async function loadUser() {
+    setLoading(true);
+
+    const { ok, data } = await get(`${router.basePath}/api/auth/verify`);
+
+    if (!ok) {
+      return router.push('/login');
+    }
+
+    await dispatch(updateUser(data));
+
+    setUser(user);
+    setLoading(false);
+  }
+
   useEffect(() => {
     if (!loading && user) {
       return;
     }
 
-    setLoading(true);
-
-    fetchUser().then(async user => {
-      if (!user) {
-        window.location.href = '/login';
-        return;
-      }
-
-      await dispatch(updateUser(user));
-
-      setUser(user);
-      setLoading(false);
-    });
+    loadUser();
   }, []);
 
   return { user, loading };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "umami",
-  "version": "0.65.0",
+  "version": "0.66.0",
   "description": "A simple, fast, website analytics alternative to Google Analytics. ",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",

pages/api/auth/logout.js

@@ -1,6 +1,6 @@
 import { serialize } from 'cookie';
 import { AUTH_COOKIE_NAME } from 'lib/constants';
-import { redirect } from 'lib/response';
+import { ok } from 'lib/response';
 
 export default async (req, res) => {
   const cookie = serialize(AUTH_COOKIE_NAME, '', {
@@ -11,5 +11,5 @@ export default async (req, res) => {
 
   res.setHeader('Set-Cookie', [cookie]);
 
-  return redirect(res, '/login');
+  return ok(res);
 };

pages/logout.js

@@ -1,8 +1,12 @@
 import { useEffect } from 'react';
+import { useRouter } from 'next/router';
 
 export default function LogoutPage() {
+  const router = useRouter();
+  const { basePath } = router;
+
   useEffect(() => {
-    fetch('/api/auth/logout').then(() => (window.location.href = '/login'));
+    fetch(`${basePath}/api/auth/logout`).then(() => router.push('/login'));
   }, []);
 
   return null;