feat(project): implement logout

src/screens/User/User.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Redirect, Route, Switch, useHistory } from 'react-router-dom';
+import { Redirect, Route, Switch, useHistory, useLocation } from 'react-router-dom';
 import type { PlaylistItem } from 'types/playlist';
 import { useTranslation } from 'react-i18next';
 
@@ -19,13 +19,14 @@ import Favorite from '../../icons/Favorite';
 import BalanceWallet from '../../icons/BalanceWallet';
 import Exit from '../../icons/Exit';
 import { useFavorites } from '../../stores/FavoritesStore';
-import { AccountStore } from '../../stores/AccountStore';
+import { AccountStore, logout } from '../../stores/AccountStore';
 import { addQueryParam } from '../../utils/history';
 
 import styles from './User.module.scss';
 
 const User = (): JSX.Element => {
   const history = useHistory();
+  const location = useLocation();
   const { t } = useTranslation('user');
   const breakpoint = useBreakpoint();
   const isLargeScreen = breakpoint >= Breakpoint.md;
@@ -51,6 +52,13 @@ const User = (): JSX.Element => {
 
   useEffect(() => updateBlurImage(''), [updateBlurImage]);
 
+  useEffect(() => {
+    if (location.pathname === '/u/logout') {
+      logout();
+      history.push('/');
+    }
+  }, [location, history]);
+
   if (!customer) {
     return <div className={styles.user}>Please login first</div>;
   }