From 9937caa5694428c72ace4212e56878e0750182f1 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Tue, 22 Feb 2022 22:47:59 -0800
Subject: [PATCH] Replaced redux with zustand. Fixed login issue, closes #980.

---
 components/common/RefreshButton.js      | 12 ++--
 components/forms/LoginForm.js           |  9 ++-
 components/layout/Header.js             |  4 +-
 components/pages/Settings.js            | 12 ++--
 components/pages/TestConsole.js         |  4 +-
 components/settings/DateRangeSetting.js | 10 ++-
 components/settings/ProfileSettings.js  | 13 ++--
 components/settings/UserButton.js       |  4 +-
 components/settings/WebsiteSettings.js  |  4 +-
 hooks/useDateRange.js                   | 17 +++--
 hooks/useFetch.js                       |  6 +-
 hooks/useLocale.js                      | 10 +--
 hooks/useRequireLogin.js                | 12 ++--
 hooks/useShareToken.js                  | 10 +--
 hooks/useTheme.js                       | 12 ++--
 hooks/useUser.js                        |  9 +++
 hooks/useVersion.js                     |  8 +--
 lib/web.js                              | 10 ++-
 package.json                            |  5 +-
 pages/_app.js                           | 11 +---
 pages/api/auth/login.js                 |  5 +-
 pages/logout.js                         | 14 ++--
 redux/actions/app.js                    | 87 -------------------------
 redux/actions/queries.js                | 17 -----
 redux/actions/user.js                   | 16 -----
 redux/actions/websites.js               | 29 ---------
 redux/reducers.js                       |  7 --
 redux/store.js                          | 40 ------------
 store/app.js                            | 30 +++++++++
 store/queries.js                        |  9 +++
 store/version.js                        | 54 +++++++++++++++
 store/websites.js                       | 20 ++++++
 yarn.lock                               | 10 +++
 33 files changed, 234 insertions(+), 286 deletions(-)
 create mode 100644 hooks/useUser.js
 delete mode 100644 redux/actions/app.js
 delete mode 100644 redux/actions/queries.js
 delete mode 100644 redux/actions/user.js
 delete mode 100644 redux/actions/websites.js
 delete mode 100644 redux/reducers.js
 delete mode 100644 redux/store.js
 create mode 100644 store/app.js
 create mode 100644 store/queries.js
 create mode 100644 store/version.js
 create mode 100644 store/websites.js

diff --git a/components/common/RefreshButton.js b/components/common/RefreshButton.js
index 1e3dd9e7..7f000a20 100644
--- a/components/common/RefreshButton.js
+++ b/components/common/RefreshButton.js
@@ -1,23 +1,23 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { useDispatch, useSelector } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
-import { setDateRange } from 'redux/actions/websites';
+import useStore from 'store/queries';
+import { setDateRange } from 'store/websites';
 import Button from './Button';
 import Refresh from 'assets/redo.svg';
 import Dots from 'assets/ellipsis-h.svg';
 import useDateRange from 'hooks/useDateRange';
 
 function RefreshButton({ websiteId }) {
-  const dispatch = useDispatch();
   const [dateRange] = useDateRange(websiteId);
   const [loading, setLoading] = useState(false);
-  const completed = useSelector(state => state.queries[`/api/website/${websiteId}/stats`]);
+  const selector = useCallback(state => state[`/api/website/${websiteId}/stats`], [websiteId]);
+  const completed = useStore(selector);
 
   function handleClick() {
     if (dateRange) {
       setLoading(true);
-      dispatch(setDateRange(websiteId, dateRange));
+      setDateRange(websiteId, dateRange);
     }
   }
 
diff --git a/components/forms/LoginForm.js b/components/forms/LoginForm.js
index 68c2775c..276a7a4e 100644
--- a/components/forms/LoginForm.js
+++ b/components/forms/LoginForm.js
@@ -10,11 +10,12 @@ import FormLayout, {
   FormRow,
 } from 'components/layout/FormLayout';
 import Icon from 'components/common/Icon';
-import Logo from 'assets/logo.svg';
-import styles from './LoginForm.module.css';
 import usePost from 'hooks/usePost';
 import { setItem } from 'lib/web';
-import { AUTH_TOKEN } from '../../lib/constants';
+import { AUTH_TOKEN } from 'lib/constants';
+import { setUser } from 'store/app';
+import Logo from 'assets/logo.svg';
+import styles from './LoginForm.module.css';
 
 const validate = ({ username, password }) => {
   const errors = {};
@@ -43,6 +44,8 @@ export default function LoginForm() {
     if (ok) {
       setItem(AUTH_TOKEN, data.token);
 
+      setUser(data.user);
+
       return router.push('/');
     } else {
       setMessage(
diff --git a/components/layout/Header.js b/components/layout/Header.js
index 65abc47a..0baaaed7 100644
--- a/components/layout/Header.js
+++ b/components/layout/Header.js
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useSelector } from 'react-redux';
 import classNames from 'classnames';
 import Link from 'components/common/Link';
 import Icon from 'components/common/Icon';
@@ -14,9 +13,10 @@ import styles from './Header.module.css';
 import useLocale from 'hooks/useLocale';
 import XMark from 'assets/xmark.svg';
 import Bars from 'assets/bars.svg';
+import useUser from 'hooks/useUser';
 
 export default function Header() {
-  const user = useSelector(state => state.user);
+  const { user } = useUser();
   const [active, setActive] = useState(false);
   const { dir } = useLocale();
 
diff --git a/components/pages/Settings.js b/components/pages/Settings.js
index 35d039df..d38be07d 100644
--- a/components/pages/Settings.js
+++ b/components/pages/Settings.js
@@ -1,19 +1,19 @@
 import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { useRouter } from 'next/router';
 import Page from 'components/layout/Page';
 import MenuLayout from 'components/layout/MenuLayout';
-import WebsiteSettings from '../settings/WebsiteSettings';
-import AccountSettings from '../settings/AccountSettings';
-import ProfileSettings from '../settings/ProfileSettings';
-import { useSelector } from 'react-redux';
-import { FormattedMessage } from 'react-intl';
+import WebsiteSettings from 'components/settings/WebsiteSettings';
+import AccountSettings from 'components/settings/AccountSettings';
+import ProfileSettings from 'components/settings/ProfileSettings';
+import useUser from 'hooks/useUser';
 
 const WEBSITES = '/settings';
 const ACCOUNTS = '/settings/accounts';
 const PROFILE = '/settings/profile';
 
 export default function Settings() {
-  const user = useSelector(state => state.user);
+  const { user } = useUser();
   const [option, setOption] = useState(WEBSITES);
   const router = useRouter();
   const { pathname } = router;
diff --git a/components/pages/TestConsole.js b/components/pages/TestConsole.js
index 8c0d29b9..fff60516 100644
--- a/components/pages/TestConsole.js
+++ b/components/pages/TestConsole.js
@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
 import classNames from 'classnames';
 import Head from 'next/head';
 import Link from 'next/link';
@@ -13,11 +12,12 @@ import Button from 'components/common/Button';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
 import Icon from 'components/common/Icon';
 import useFetch from 'hooks/useFetch';
+import useUser from 'hooks/useUser';
 import ChevronDown from 'assets/chevron-down.svg';
 import styles from './TestConsole.module.css';
 
 export default function TestConsole() {
-  const user = useSelector(state => state.user);
+  const { user } = useUser();
   const [website, setWebsite] = useState();
   const [show, setShow] = useState(true);
   const { basePath } = useRouter();
diff --git a/components/settings/DateRangeSetting.js b/components/settings/DateRangeSetting.js
index 53dfe983..092e2427 100644
--- a/components/settings/DateRangeSetting.js
+++ b/components/settings/DateRangeSetting.js
@@ -14,6 +14,14 @@ export default function DateRangeSetting() {
   const { startDate, endDate, value } = dateRange;
   const options = filterOptions.filter(e => e.value !== 'all');
 
+  function handleChange(value) {
+    if (typeof value === 'string') {
+      setDateRange(getDateRange(value, locale));
+    } else {
+      setDateRange(value);
+    }
+  }
+
   function handleReset() {
     setDateRange(getDateRange(DEFAULT_DATE_RANGE, locale));
   }
@@ -25,7 +33,7 @@ export default function DateRangeSetting() {
         value={value}
         startDate={startDate}
         endDate={endDate}
-        onChange={setDateRange}
+        onChange={handleChange}
       />
       <Button className={styles.button} size="small" onClick={handleReset}>
         <FormattedMessage id="label.reset" defaultMessage="Reset" />
diff --git a/components/settings/ProfileSettings.js b/components/settings/ProfileSettings.js
index ecd9252d..798ef4bf 100644
--- a/components/settings/ProfileSettings.js
+++ b/components/settings/ProfileSettings.js
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useSelector } from 'react-redux';
 import PageHeader from 'components/layout/PageHeader';
 import Button from 'components/common/Button';
 import Modal from 'components/common/Modal';
@@ -11,12 +10,12 @@ import Dots from 'assets/ellipsis-h.svg';
 import styles from './ProfileSettings.module.css';
 import DateRangeSetting from './DateRangeSetting';
 import useEscapeKey from 'hooks/useEscapeKey';
+import useUser from 'hooks/useUser';
 
 export default function ProfileSettings() {
-  const user = useSelector(state => state.user);
+  const { user } = useUser();
   const [changePassword, setChangePassword] = useState(false);
   const [message, setMessage] = useState();
-  const { user_id } = user;
 
   function handleSave() {
     setChangePassword(false);
@@ -27,6 +26,12 @@ export default function ProfileSettings() {
     setChangePassword(false);
   });
 
+  if (!user) {
+    return null;
+  }
+
+  const { user_id, username } = user;
+
   return (
     <>
       <PageHeader>
@@ -41,7 +46,7 @@ export default function ProfileSettings() {
         <dt>
           <FormattedMessage id="label.username" defaultMessage="Username" />
         </dt>
-        <dd>{user.username}</dd>
+        <dd>{username}</dd>
         <dt>
           <FormattedMessage id="label.timezone" defaultMessage="Timezone" />
         </dt>
diff --git a/components/settings/UserButton.js b/components/settings/UserButton.js
index 566c819c..cba96234 100644
--- a/components/settings/UserButton.js
+++ b/components/settings/UserButton.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useSelector } from 'react-redux';
 import { useRouter } from 'next/router';
 import MenuButton from 'components/common/MenuButton';
 import Icon from 'components/common/Icon';
@@ -9,9 +8,10 @@ import Chevron from 'assets/chevron-down.svg';
 import styles from './UserButton.module.css';
 import { removeItem } from 'lib/web';
 import { AUTH_TOKEN } from 'lib/constants';
+import useUser from 'hooks/useUser';
 
 export default function UserButton() {
-  const user = useSelector(state => state.user);
+  const { user } = useUser();
   const router = useRouter();
 
   const menuOptions = [
diff --git a/components/settings/WebsiteSettings.js b/components/settings/WebsiteSettings.js
index 998df40e..1666e219 100644
--- a/components/settings/WebsiteSettings.js
+++ b/components/settings/WebsiteSettings.js
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { useSelector } from 'react-redux';
 import classNames from 'classnames';
 import Link from 'components/common/Link';
 import Table from 'components/common/Table';
@@ -23,10 +22,11 @@ import Plus from 'assets/plus.svg';
 import Code from 'assets/code.svg';
 import LinkIcon from 'assets/link.svg';
 import useFetch from 'hooks/useFetch';
+import useUser from 'hooks/useUser';
 import styles from './WebsiteSettings.module.css';
 
 export default function WebsiteSettings() {
-  const user = useSelector(state => state.user);
+  const { user } = useUser();
   const [editWebsite, setEditWebsite] = useState();
   const [resetWebsite, setResetWebsite] = useState();
   const [deleteWebsite, setDeleteWebsite] = useState();
diff --git a/hooks/useDateRange.js b/hooks/useDateRange.js
index a4ff159c..4de311b4 100644
--- a/hooks/useDateRange.js
+++ b/hooks/useDateRange.js
@@ -1,16 +1,16 @@
-import { useDispatch, useSelector } from 'react-redux';
+import { useCallback } from 'react';
 import { parseISO } from 'date-fns';
 import { getDateRange } from 'lib/date';
 import { getItem, setItem } from 'lib/web';
-import { setDateRange } from '../redux/actions/websites';
 import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE } from 'lib/constants';
 import useForceUpdate from './useForceUpdate';
 import useLocale from './useLocale';
+import useStore, { setDateRange } from 'store/websites';
 
 export default function useDateRange(websiteId, defaultDateRange = DEFAULT_DATE_RANGE) {
-  const dispatch = useDispatch();
   const { locale } = useLocale();
-  const dateRange = useSelector(state => state.websites[websiteId]?.dateRange);
+  const selector = useCallback(state => state?.[websiteId]?.dateRange, [websiteId]);
+  const dateRange = useStore(selector);
   const forceUpdate = useForceUpdate();
 
   const globalDefault = getItem(DATE_RANGE_CONFIG);
@@ -28,13 +28,12 @@ export default function useDateRange(websiteId, defaultDateRange = DEFAULT_DATE_
     }
   }
 
-  function saveDateRange(values) {
-    const { value } = values;
-
+  function saveDateRange(dateRange) {
     if (websiteId) {
-      dispatch(setDateRange(websiteId, values));
+      setDateRange(websiteId, dateRange);
     } else {
-      setItem(DATE_RANGE_CONFIG, value === 'custom' ? values : value);
+      const { value } = dateRange;
+      setItem(DATE_RANGE_CONFIG, value === 'custom' ? dateRange : value);
       forceUpdate();
     }
   }
diff --git a/hooks/useFetch.js b/hooks/useFetch.js
index a8c6db35..d5e23c3d 100644
--- a/hooks/useFetch.js
+++ b/hooks/useFetch.js
@@ -1,11 +1,9 @@
 import { useState, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
 import { useRouter } from 'next/router';
 import { get } from 'lib/web';
-import { updateQuery } from 'redux/actions/queries';
+import { saveQuery } from 'store/queries';
 
 export default function useFetch(url, options = {}, update = []) {
-  const dispatch = useDispatch();
   const [response, setResponse] = useState();
   const [error, setError] = useState();
   const [loading, setLoadiing] = useState(false);
@@ -21,7 +19,7 @@ export default function useFetch(url, options = {}, update = []) {
 
       const { data, status, ok } = await get(`${basePath}${url}`, params, headers);
 
-      dispatch(updateQuery({ url, time: performance.now() - time, completed: Date.now() }));
+      await saveQuery(url, { time: performance.now() - time, completed: Date.now() });
 
       if (status >= 400) {
         setError(data);
diff --git a/hooks/useLocale.js b/hooks/useLocale.js
index eccd8b79..2a878d89 100644
--- a/hooks/useLocale.js
+++ b/hooks/useLocale.js
@@ -1,10 +1,9 @@
 import { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { setLocale } from 'redux/actions/app';
 import { useRouter } from 'next/router';
 import { get, setItem } from 'lib/web';
 import { LOCALE_CONFIG } from 'lib/constants';
 import { getDateLocale, getTextDirection } from 'lib/lang';
+import useStore, { setLocale } from 'store/app';
 import useForceUpdate from 'hooks/useForceUpdate';
 import enUS from 'public/messages/en-US.json';
 
@@ -12,9 +11,10 @@ const messages = {
   'en-US': enUS,
 };
 
+const selector = state => state.locale;
+
 export default function useLocale() {
-  const locale = useSelector(state => state.app.locale);
-  const dispatch = useDispatch();
+  const locale = useStore(selector);
   const { basePath } = useRouter();
   const forceUpdate = useForceUpdate();
   const dir = getTextDirection(locale);
@@ -36,7 +36,7 @@ export default function useLocale() {
     setItem(LOCALE_CONFIG, value);
 
     if (locale !== value) {
-      dispatch(setLocale(value));
+      setLocale(value);
     } else {
       forceUpdate();
     }
diff --git a/hooks/useRequireLogin.js b/hooks/useRequireLogin.js
index 898f58b5..79b699e5 100644
--- a/hooks/useRequireLogin.js
+++ b/hooks/useRequireLogin.js
@@ -1,15 +1,12 @@
 import { useState, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { updateUser } from 'redux/actions/user';
 import { useRouter } from 'next/router';
+import useUser from 'hooks/useUser';
 import { get } from 'lib/web';
 
 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);
+  const { user, setUser } = useUser();
+  const [loading, setLoading] = useState(false);
 
   async function loadUser() {
     setLoading(true);
@@ -20,9 +17,8 @@ export default function useRequireLogin() {
       return router.push('/login');
     }
 
-    await dispatch(updateUser(data));
+    setUser(data);
 
-    setUser(user);
     setLoading(false);
   }
 
diff --git a/hooks/useShareToken.js b/hooks/useShareToken.js
index 29e7f37d..49f67f7e 100644
--- a/hooks/useShareToken.js
+++ b/hooks/useShareToken.js
@@ -1,19 +1,19 @@
 import { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
 import { useRouter } from 'next/router';
 import { get } from 'lib/web';
-import { setShareToken } from 'redux/actions/app';
+import useStore, { setShareToken } from 'store/app';
+
+const selector = state => state.shareToken;
 
 export default function useShareToken(shareId) {
   const { basePath } = useRouter();
-  const dispatch = useDispatch();
-  const shareToken = useSelector(state => state.app.shareToken);
+  const shareToken = useStore(selector);
 
   async function loadToken(id) {
     const { data } = await get(`${basePath}/api/share/${id}`);
 
     if (data) {
-      dispatch(setShareToken(data));
+      setShareToken(data);
     }
   }
 
diff --git a/hooks/useTheme.js b/hooks/useTheme.js
index 3b13de3d..cc02631e 100644
--- a/hooks/useTheme.js
+++ b/hooks/useTheme.js
@@ -1,8 +1,9 @@
-import { useDispatch, useSelector } from 'react-redux';
-import { setTheme } from 'redux/actions/app';
+import { useEffect } from 'react';
+import useStore, { setTheme } from 'store/app';
 import { getItem, setItem } from 'lib/web';
 import { THEME_CONFIG } from 'lib/constants';
-import { useEffect } from 'react';
+
+const selector = state => state.theme;
 
 export default function useTheme() {
   const defaultTheme =
@@ -11,12 +12,11 @@ export default function useTheme() {
         ? 'dark'
         : 'light'
       : 'light';
-  const theme = useSelector(state => state.app.theme || getItem(THEME_CONFIG) || defaultTheme);
-  const dispatch = useDispatch();
+  const theme = useStore(selector) || getItem(THEME_CONFIG) || defaultTheme;
 
   function saveTheme(value) {
     setItem(THEME_CONFIG, value);
-    dispatch(setTheme(value));
+    setTheme(value);
   }
 
   useEffect(() => {
diff --git a/hooks/useUser.js b/hooks/useUser.js
new file mode 100644
index 00000000..6b73c113
--- /dev/null
+++ b/hooks/useUser.js
@@ -0,0 +1,9 @@
+import useStore, { setUser } from 'store/app';
+
+const selector = state => state.user;
+
+export default function useUser() {
+  const user = useStore(selector);
+
+  return { user, setUser };
+}
diff --git a/hooks/useVersion.js b/hooks/useVersion.js
index 79b97a34..bf59652e 100644
--- a/hooks/useVersion.js
+++ b/hooks/useVersion.js
@@ -1,12 +1,10 @@
 import { useEffect, useCallback } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { checkVersion } from 'redux/actions/app';
+import useStore, { checkVersion } from 'store/version';
 import { VERSION_CHECK } from 'lib/constants';
 import { getItem, setItem } from 'lib/web';
 
 export default function useVersion(check) {
-  const dispatch = useDispatch();
-  const versions = useSelector(state => state.app.versions);
+  const versions = useStore();
   const checked = versions.latest === getItem(VERSION_CHECK)?.version;
 
   const updateCheck = useCallback(() => {
@@ -15,7 +13,7 @@ export default function useVersion(check) {
 
   useEffect(() => {
     if (check && !versions.latest) {
-      dispatch(checkVersion());
+      checkVersion();
     }
   }, [versions, check]);
 
diff --git a/lib/web.js b/lib/web.js
index 000a870e..f4899a2e 100644
--- a/lib/web.js
+++ b/lib/web.js
@@ -65,9 +65,17 @@ export const setItem = (key, data, session) => {
   }
 };
 
+function tryParse(value) {
+  try {
+    return JSON.parse(value);
+  } catch {
+    return undefined;
+  }
+}
+
 export const getItem = (key, session) =>
   typeof window !== 'undefined'
-    ? JSON.parse((session ? sessionStorage : localStorage).getItem(key))
+    ? tryParse((session ? sessionStorage : localStorage).getItem(key))
     : null;
 
 export const removeItem = (key, session) => {
diff --git a/package.json b/package.json
index 8a05870d..8ba074d1 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "detect-browser": "^5.2.0",
     "dotenv": "^10.0.0",
     "formik": "^2.2.9",
-    "immer": "^9.0.6",
+    "immer": "^9.0.12",
     "ipaddr.js": "^2.0.1",
     "is-localhost-ip": "^1.4.0",
     "isbot": "^3.2.2",
@@ -92,7 +92,8 @@
     "semver": "^7.3.5",
     "thenby": "^1.3.4",
     "timezone-support": "^2.0.2",
-    "uuid": "^8.3.2"
+    "uuid": "^8.3.2",
+    "zustand": "^3.7.0"
   },
   "devDependencies": {
     "@formatjs/cli": "^4.2.29",
diff --git a/pages/_app.js b/pages/_app.js
index 72364786..3eeb87c6 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -2,8 +2,6 @@ import React from 'react';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { IntlProvider } from 'react-intl';
-import { Provider } from 'react-redux';
-import { useStore } from 'redux/store';
 import useLocale from 'hooks/useLocale';
 import 'styles/variables.css';
 import 'styles/bootstrap-grid.css';
@@ -24,11 +22,10 @@ const Intl = ({ children }) => {
 };
 
 export default function App({ Component, pageProps }) {
-  const store = useStore();
   const { basePath } = useRouter();
 
   return (
-    <Provider store={store}>
+    <Intl>
       <Head>
         <link rel="icon" href={`${basePath}/favicon.ico`} />
         <link rel="apple-touch-icon" sizes="180x180" href={`${basePath}/apple-touch-icon.png`} />
@@ -41,9 +38,7 @@ export default function App({ Component, pageProps }) {
         <meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
-      <Intl>
-        <Component {...pageProps} />
-      </Intl>
-    </Provider>
+      <Component {...pageProps} />
+    </Intl>
   );
 }
diff --git a/pages/api/auth/login.js b/pages/api/auth/login.js
index fb50fe6a..11d81ba6 100644
--- a/pages/api/auth/login.js
+++ b/pages/api/auth/login.js
@@ -13,9 +13,10 @@ export default async (req, res) => {
 
   if (account && (await checkPassword(password, account.password))) {
     const { user_id, username, is_admin } = account;
-    const token = await createSecureToken({ user_id, username, is_admin });
+    const user = { user_id, username, is_admin };
+    const token = await createSecureToken(user);
 
-    return ok(res, { token });
+    return ok(res, { token, user });
   }
 
   return unauthorized(res);
diff --git a/pages/logout.js b/pages/logout.js
index 104eeabf..7692fb03 100644
--- a/pages/logout.js
+++ b/pages/logout.js
@@ -1,17 +1,17 @@
 import { useEffect } from 'react';
-import { useDispatch } from 'react-redux';
 import { useRouter } from 'next/router';
-import { get } from 'lib/web';
-import { updateUser } from 'redux/actions/user';
+import { removeItem } from 'lib/web';
+import { AUTH_TOKEN } from 'lib/constants';
+import { setUser } from 'store/app';
 
 export default function LogoutPage() {
-  const dispatch = useDispatch();
   const router = useRouter();
-  const { basePath } = router;
 
   useEffect(() => {
-    dispatch(updateUser(null));
-    get(`${basePath}/api/auth/logout`).then(() => router.push('/login'));
+    removeItem(AUTH_TOKEN);
+    router.push('/login');
+
+    return () => setUser(null);
   }, []);
 
   return null;
diff --git a/redux/actions/app.js b/redux/actions/app.js
deleted file mode 100644
index f10d162a..00000000
--- a/redux/actions/app.js
+++ /dev/null
@@ -1,87 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit';
-import { getItem } from 'lib/web';
-import {
-  DEFAULT_LOCALE,
-  DEFAULT_THEME,
-  LOCALE_CONFIG,
-  THEME_CONFIG,
-  VERSION_CHECK,
-} from 'lib/constants';
-import semver from 'semver';
-
-const app = createSlice({
-  name: 'app',
-  initialState: {
-    locale: getItem(LOCALE_CONFIG) || DEFAULT_LOCALE,
-    theme: getItem(THEME_CONFIG) || DEFAULT_THEME,
-    versions: {
-      current: process.env.VERSION,
-      latest: null,
-      hasUpdate: false,
-    },
-    shareToken: null,
-  },
-  reducers: {
-    setLocale(state, action) {
-      state.locale = action.payload;
-      return state;
-    },
-    setTheme(state, action) {
-      state.theme = action.payload;
-      return state;
-    },
-    setVersions(state, action) {
-      state.versions = action.payload;
-      return state;
-    },
-    setShareToken(state, action) {
-      state.shareToken = action.payload;
-      return state;
-    },
-  },
-});
-
-export const { setLocale, setTheme, setVersions, setShareToken } = app.actions;
-
-export default app.reducer;
-
-export function checkVersion() {
-  return async (dispatch, getState) => {
-    const {
-      app: {
-        versions: { current },
-      },
-    } = getState();
-
-    const data = await fetch('https://api.github.com/repos/mikecao/umami/releases/latest', {
-      method: 'get',
-      headers: {
-        Accept: 'application/vnd.github.v3+json',
-      },
-    }).then(res => {
-      if (res.ok) {
-        return res.json();
-      }
-
-      return null;
-    });
-
-    if (!data) {
-      return;
-    }
-
-    const { tag_name } = data;
-
-    const latest = tag_name.startsWith('v') ? tag_name.slice(1) : tag_name;
-    const lastCheck = getItem(VERSION_CHECK);
-    const hasUpdate = latest && semver.gt(latest, current) && lastCheck?.version !== latest;
-
-    return dispatch(
-      setVersions({
-        current,
-        latest,
-        hasUpdate,
-      }),
-    );
-  };
-}
diff --git a/redux/actions/queries.js b/redux/actions/queries.js
deleted file mode 100644
index 0e74de9d..00000000
--- a/redux/actions/queries.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit';
-
-const queries = createSlice({
-  name: 'queries',
-  initialState: {},
-  reducers: {
-    updateQuery(state, action) {
-      const { url, ...data } = action.payload;
-      state[url] = data;
-      return state;
-    },
-  },
-});
-
-export const { updateQuery } = queries.actions;
-
-export default queries.reducer;
diff --git a/redux/actions/user.js b/redux/actions/user.js
deleted file mode 100644
index 0d0fb4bb..00000000
--- a/redux/actions/user.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit';
-
-const user = createSlice({
-  name: 'user',
-  initialState: null,
-  reducers: {
-    updateUser(state, action) {
-      state = action.payload;
-      return state;
-    },
-  },
-});
-
-export const { updateUser } = user.actions;
-
-export default user.reducer;
diff --git a/redux/actions/websites.js b/redux/actions/websites.js
deleted file mode 100644
index ef6bd872..00000000
--- a/redux/actions/websites.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { createSlice } from '@reduxjs/toolkit';
-
-const websites = createSlice({
-  name: 'websites',
-  initialState: {},
-  reducers: {
-    updateWebsites(state, action) {
-      state = action.payload;
-      return state;
-    },
-    updateWebsite(state, action) {
-      const { websiteId, ...data } = action.payload;
-      state[websiteId] = data;
-      return state;
-    },
-  },
-});
-
-export const { updateWebsites, updateWebsite } = websites.actions;
-
-export default websites.reducer;
-
-export function setDateRange(websiteId, dateRange) {
-  return dispatch => {
-    return dispatch(
-      updateWebsite({ websiteId, dateRange: { ...dateRange, modified: Date.now() } }),
-    );
-  };
-}
diff --git a/redux/reducers.js b/redux/reducers.js
deleted file mode 100644
index 161bf134..00000000
--- a/redux/reducers.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { combineReducers } from 'redux';
-import app from './actions/app';
-import user from './actions/user';
-import websites from './actions/websites';
-import queries from './actions/queries';
-
-export default combineReducers({ app, user, websites, queries });
diff --git a/redux/store.js b/redux/store.js
deleted file mode 100644
index b0abba4c..00000000
--- a/redux/store.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useMemo } from 'react';
-import { configureStore } from '@reduxjs/toolkit';
-import thunk from 'redux-thunk';
-import rootReducer from './reducers';
-
-let store;
-
-export function getStore(preloadedState) {
-  return configureStore({
-    reducer: rootReducer,
-    middleware: [thunk],
-    preloadedState,
-  });
-}
-
-export const initializeStore = preloadedState => {
-  let _store = store ?? getStore(preloadedState);
-
-  // After navigating to a page with an initial Redux state, merge that state
-  // with the current state in the store, and create a new store
-  if (preloadedState && store) {
-    _store = getStore({
-      ...store.getState(),
-      ...preloadedState,
-    });
-    // Reset the current store
-    store = undefined;
-  }
-
-  // For SSG and SSR always create a new store
-  if (typeof window === 'undefined') return _store;
-  // Create the store once in the client
-  if (!store) store = _store;
-
-  return _store;
-};
-
-export function useStore(initialState) {
-  return useMemo(() => initializeStore(initialState), [initialState]);
-}
diff --git a/store/app.js b/store/app.js
new file mode 100644
index 00000000..0fe8ac02
--- /dev/null
+++ b/store/app.js
@@ -0,0 +1,30 @@
+import create from 'zustand';
+import { DEFAULT_LOCALE, DEFAULT_THEME, LOCALE_CONFIG, THEME_CONFIG } from 'lib/constants';
+import { getItem } from 'lib/web';
+
+const initialState = {
+  locale: getItem(LOCALE_CONFIG) || DEFAULT_LOCALE,
+  theme: getItem(THEME_CONFIG) || DEFAULT_THEME,
+  shareToken: null,
+  user: null,
+};
+
+const store = create(() => ({ ...initialState }));
+
+export function setTheme(theme) {
+  store.setState({ theme });
+}
+
+export function setLocale(locale) {
+  store.setState({ locale });
+}
+
+export function setShareToken(shareToken) {
+  store.setState({ shareToken });
+}
+
+export function setUser(user) {
+  store.setState({ user });
+}
+
+export default store;
diff --git a/store/queries.js b/store/queries.js
new file mode 100644
index 00000000..fe6e80c2
--- /dev/null
+++ b/store/queries.js
@@ -0,0 +1,9 @@
+import create from 'zustand';
+
+const store = create(() => ({}));
+
+export function saveQuery(url, data) {
+  store.setState({ [url]: data });
+}
+
+export default store;
diff --git a/store/version.js b/store/version.js
new file mode 100644
index 00000000..330d0213
--- /dev/null
+++ b/store/version.js
@@ -0,0 +1,54 @@
+import create from 'zustand';
+import produce from 'immer';
+import semver from 'semver';
+import { VERSION_CHECK } from 'lib/constants';
+import { getItem } from 'lib/web';
+
+const REPO_URL = 'https://api.github.com/repos/mikecao/umami/releases/latest';
+
+const initialState = {
+  current: process.env.VERSION,
+  latest: null,
+  hasUpdate: false,
+};
+
+const store = create(() => ({ ...initialState }));
+
+export async function checkVersion() {
+  const { current } = store.getState();
+
+  const data = await fetch(REPO_URL, {
+    method: 'get',
+    headers: {
+      Accept: 'application/vnd.github.v3+json',
+    },
+  }).then(res => {
+    if (res.ok) {
+      return res.json();
+    }
+
+    return null;
+  });
+
+  if (!data) {
+    return;
+  }
+
+  store.setState(
+    produce(state => {
+      const { tag_name } = data;
+
+      const latest = tag_name.startsWith('v') ? tag_name.slice(1) : tag_name;
+      const lastCheck = getItem(VERSION_CHECK);
+      const hasUpdate = latest && semver.gt(latest, current) && lastCheck?.version !== latest;
+
+      state.current = current;
+      state.latest = latest;
+      state.hasUpdate = hasUpdate;
+
+      return state;
+    }),
+  );
+}
+
+export default store;
diff --git a/store/websites.js b/store/websites.js
new file mode 100644
index 00000000..d3fb37df
--- /dev/null
+++ b/store/websites.js
@@ -0,0 +1,20 @@
+import create from 'zustand';
+import produce from 'immer';
+
+const store = create(() => ({}));
+
+export function setDateRange(websiteId, dateRange) {
+  store.setState(
+    produce(state => {
+      if (!state[websiteId]) {
+        state[websiteId] = {};
+      }
+
+      state[websiteId].dateRange = { ...dateRange, modified: Date.now() };
+
+      return state;
+    }),
+  );
+}
+
+export default store;
diff --git a/yarn.lock b/yarn.lock
index 720bdd8e..49cb4d86 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4066,6 +4066,11 @@ ignore@^5.1.4, ignore@^5.1.8:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
   integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
 
+immer@^9.0.12:
+  version "9.0.12"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.12.tgz#2d33ddf3ee1d247deab9d707ca472c8c942a0f20"
+  integrity sha512-lk7UNmSbAukB5B6dh9fnh5D0bJTOFKxVg2cyJWTYrWRfhLrLMBquONcUs3aFq507hNoIZEDDh8lb8UtOizSMhA==
+
 immer@^9.0.6:
   version "9.0.6"
   resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.6.tgz#7a96bf2674d06c8143e327cbf73539388ddf1a73"
@@ -7351,6 +7356,11 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
+zustand@^3.7.0:
+  version "3.7.0"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.7.0.tgz#a5c68fb06bdee9c63ad829de2432635be6d0ce69"
+  integrity sha512-USzVzLGrvZ8VK1/sEsOAmeqa8N7D3OBdZskVaL7DL89Q4QLTYD053iIlZ5KDidyZ+Od80Dttin/f8ZulOLFFDQ==
+
 zwitch@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"