Replaced redux with zustand. Fixed login issue, closes #980.

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();
     }
   }

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);

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();
     }

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);
   }
 

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);
     }
   }
 

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(() => {

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 };
+}

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]);