feat(auth): use routing for the AccountModal

src/components/Layout/Layout.tsx

@@ -1,6 +1,7 @@
 import React, { FC, ReactNode, useContext, useEffect, useRef, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router';
 
 import useSearchQueryUpdater from '../../hooks/useSearchQueryUpdater';
 import { UIStore } from '../../stores/UIStore';
@@ -11,7 +12,7 @@ import Sidebar from '../Sidebar/Sidebar';
 import DynamicBlur from '../DynamicBlur/DynamicBlur';
 import { ConfigContext } from '../../providers/ConfigProvider';
 import MenuButton from '../../components/MenuButton/MenuButton';
-import { AccountModalView, AccountStore } from '../../stores/AccountStore';
+import { addQueryParam } from '../../utils/history';
 
 import styles from './Layout.module.scss';
 
@@ -20,6 +21,7 @@ type LayoutProps = {
 };
 
 const Layout: FC<LayoutProps> = ({ children }) => {
+  const history = useHistory();
   const { t } = useTranslation('common');
   const { menu, assets, options, siteName, description, footerText, searchPlaylist } = useContext(ConfigContext);
   const blurImage = UIStore.useState((s) => s.blurImage);
@@ -54,10 +56,7 @@ const Layout: FC<LayoutProps> = ({ children }) => {
   };
 
   const loginButtonClickHandler = () => {
-    AccountStore.update(s => {
-      s.modal.open = true;
-      s.modal.view = AccountModalView.LOGIN;
-    })
+    addQueryParam(history, 'u', 'login');
   };
 
   return (

src/containers/AccountModal/AccountModal.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+
+import { render } from '../../testUtils';
 
 import AccountModal from './AccountModal';
 

src/containers/AccountModal/AccountModal.tsx

@@ -1,25 +1,29 @@
 import React, { useContext } from 'react';
+import { useHistory } from 'react-router';
 
-import { AccountStore } from '../../stores/AccountStore';
 import Button from '../../components/Button/Button';
 import { ConfigContext } from '../../providers/ConfigProvider';
 import Dialog from '../../components/Dialog/Dialog';
+import useQueryParam from '../../hooks/useQueryParam';
+import { removeQueryParam } from '../../utils/history';
 
 import styles from './AccountModal.module.scss';
 
 const AccountModal = () => {
+  const history = useHistory();
+  const view = useQueryParam('u');
+
   const {
     assets: { banner },
   } = useContext(ConfigContext);
-  const { open } = AccountStore.useState((s) => s.modal);
-  const closeHandler = () =>
-    AccountStore.update((s) => {
-      s.modal.open = false;
-    });
+
+  const closeHandler = () => {
+    removeQueryParam(history, 'u');
+  }
 
   return (
-    <Dialog open={open} onClose={closeHandler}>
-      <div className={styles.banner}>{banner ? <img src={banner} onLoad={() => undefined} alt="" /> : null}</div>
+    <Dialog open={!!view} onClose={closeHandler}>
+      <div className={styles.banner}>{banner ? <img src={banner} alt="" /> : null}</div>
       <h2 className={styles.title}>Login!</h2>
       <form>form</form>
       <Button label="Sign in" variant="contained" color="primary" fullWidth />

src/hooks/useQueryParam.ts

@@ -0,0 +1,17 @@
+import { useLocation } from 'react-router';
+import { useEffect, useState } from 'react';
+
+function useQueryParam(key: string): string | null {
+  const [param, setParam] = useState<string | null>(null);
+  const location = useLocation();
+
+  useEffect(() => {
+    const urlSearchParams = new URLSearchParams(location.search);
+
+    setParam(urlSearchParams.get(key));
+  }, [location]);
+
+  return param;
+}
+
+export default useQueryParam;

src/stores/AccountStore.ts

@@ -6,24 +6,12 @@ import type { AuthData, Customer, JwtDetails } from '../../types/account';
 
 import { ConfigStore } from './ConfigStore';
 
-export enum AccountModalView {
-  LOGIN,
-}
-
 type AccountStore = {
-  modal: {
-    open: boolean;
-    view: AccountModalView
-  },
   auth: AuthData | null,
   user: Customer | null,
 };
 
 export const AccountStore = new Store<AccountStore>({
-  modal: {
-    open: false,
-    view: AccountModalView.LOGIN,
-  },
   auth: null,
   user: null,
 });

src/utils/history.ts

@@ -0,0 +1,17 @@
+import type { History } from 'history';
+
+export function addQueryParam(history: History, key: string, value: string, method: 'replace' | 'push' = 'push') {
+  const urlSearchParams = new URLSearchParams(history.location.search);
+
+  urlSearchParams.set(key, value);
+
+  history[method]({ pathname: history.location.pathname, search: urlSearchParams.toString() });
+}
+
+export function removeQueryParam(history: History, key: string, method: 'replace' | 'push' = 'push') {
+  const urlSearchParams = new URLSearchParams(history.location.search);
+
+  urlSearchParams.delete(key);
+
+  history[method]({ pathname: history.location.pathname, search: urlSearchParams.toString() });
+}