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

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

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(

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

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;

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

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" />

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>

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 = [

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