Merge pull request #12 from Cshayan/development

Added Landing page for statistics | API calling improvements | Enhanc…
Cshayan · Dec 26, 2020 · 400246b · 400246b
2 parents 66db38f + dfeca57
commit 400246b
Show file tree

Hide file tree

Showing 24 changed files with 380 additions and 97 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "axios": "^0.21.0",
     "classnames": "^2.2.6",
     "highcharts-react-official": "^3.0.0",
+    "lodash": "^4.17.20",
     "node-sass": "^4.14.1",
     "pure-react-carousel": "^1.27.3",
     "query-string": "^6.13.7",

diff --git a/src/App.js b/src/App.js
@@ -1,6 +1,9 @@
 import React, { memo } from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import { MuiThemeProvider } from '@material-ui/core/styles';
+import SnackBar from 'components/utilityComponents/UniversalSnackbar';
+import ThemeDialog from 'components/utilityComponents/ThemeDialog';
+import LogoutDialog from 'components/utilityComponents/LogoutDialog';
 import { useDarkMode } from './custom-hooks/darkModeHook';
 import theme, { darkTheme } from './utils/theme';
 import 'react-image-lightbox/style.css';
@@ -11,8 +14,8 @@ import {
   Dashboard,
   AnimeDetailsView,
   AnimeWatchlistStatsView,
+  PageNotFoundView,
 } from './views';
-import SnackBar from './components/utilityComponents/UniversalSnackbar';
 import './App.css';
 
 const App = () => {
@@ -21,18 +24,17 @@ const App = () => {
   return (
     <MuiThemeProvider theme={isDarkModeEnabled ? darkTheme : theme}>
       <SnackBar />
+      <ThemeDialog />
+      <LogoutDialog />
       <Router>
         <Switch>
           <Route exact path="/" component={HomeView} />
           <Route exact path="/auth" component={AuthView} />
           <Route exact path="/verify-account" component={VerifyAccountView} />
           <Route exact path="/dashboard" component={Dashboard} />
           <Route exact path="/anime/:mal_id" component={AnimeDetailsView} />
-          <Route
-            exact
-            path="/watchlist-stats"
-            component={AnimeWatchlistStatsView}
-          />
+          <Route exact path="/statistics" component={AnimeWatchlistStatsView} />
+          <Route component={PageNotFoundView} />
         </Switch>
       </Router>
     </MuiThemeProvider>

diff --git a/src/actions/drawerAction.js b/src/actions/drawerAction.js
@@ -1,5 +1,10 @@
-import { DRAWER_OPEN, DRAWER_CLOSE } from "../constants/drawerConstant";
+import { DRAWER_OPEN, DRAWER_CLOSE } from '../constants/drawerConstant';
 
 export const drawerOpen = () => ({ type: DRAWER_OPEN });
 
 export const drawerClose = () => ({ type: DRAWER_CLOSE });
+
+export const setScreenNameAction = (payload) => ({
+  type: 'SET_SCREEN_NAME',
+  payload,
+});
diff --git a/src/assets/animation/default-loader.json b/src/assets/animation/default-loader.json
@@ -0,0 +1 @@
+{"v":"4.12.0","fr":15,"ip":0,"op":90,"w":200,"h":200,"nm":"loading","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"loading Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[100,103.5,0],"ix":2},"a":{"a":0,"k":[100,100,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[5.246,0],[0,-5.247],[-5.247,0],[0,5.247]],"o":[[-5.247,0],[0,5.247],[5.246,0],[0,-5.247]],"v":[[0,-9.5],[-9.5,0],[0,9.5],[9.5,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-4.687,0],[0,-4.687],[4.687,0],[0,4.687]],"o":[[4.687,0],[0,4.687],[-4.687,0],[0,-4.687]],"v":[[0,-8.5],[8.5,0],[0,8.5],[-8.5,0]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":64,"s":[0],"e":[100]},{"t":79}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":4,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"fl","c":{"a":0,"k":[0.270999983245,0.497999991623,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[165.792,93.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":61,"s":[0,0],"e":[150,150]},{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":76,"s":[150,150],"e":[100,100]},{"t":81}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"6","np":5,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[5.247,0],[0,-5.247],[-5.247,0],[0,5.247]],"o":[[-5.247,0],[0,5.247],[5.247,0],[0,-5.247]],"v":[[0,-9.5],[-9.5,0],[0,9.5],[9.5,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-4.687,0],[0,-4.687],[4.687,0],[0,4.687]],"o":[[4.687,0],[0,4.687],[-4.687,0],[0,-4.687]],"v":[[0,-8.5],[8.5,0],[0,8.5],[-8.5,0]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":49,"s":[0],"e":[100]},{"t":64}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":4,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"fl","c":{"a":0,"k":[0.270999983245,0.497999991623,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[138.875,93.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":46,"s":[0,0],"e":[150,150]},{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":61,"s":[150,150],"e":[100,100]},{"t":67}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"5","np":5,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[5.247,0],[0,-5.247],[-5.246,0],[0,5.247]],"o":[[-5.246,0],[0,5.247],[5.247,0],[0,-5.247]],"v":[[0,-9.5],[-9.5,0],[0,9.5],[9.5,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-4.687,0],[0,-4.687],[4.687,0],[0,4.687]],"o":[[4.687,0],[0,4.687],[-4.687,0],[0,-4.687]],"v":[[0,-8.5],[8.5,0],[0,8.5],[-8.5,0]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":34,"s":[0],"e":[100]},{"t":49}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":4,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"fl","c":{"a":0,"k":[0.270999983245,0.497999991623,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[111.958,93.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":31,"s":[0,0],"e":[150,150]},{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":45,"s":[150,150],"e":[100,100]},{"t":51}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"4","np":5,"cix":2,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[5.247,0],[0,-5.247],[-5.247,0],[0,5.247]],"o":[[-5.247,0],[0,5.247],[5.247,0],[0,-5.247]],"v":[[0,-9.5],[-9.5,0],[0,9.5],[9.5,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-4.687,0],[0,-4.687],[4.687,0],[0,4.687]],"o":[[4.687,0],[0,4.687],[-4.687,0],[0,-4.687]],"v":[[0,-8.5],[8.5,0],[0,8.5],[-8.5,0]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":21,"s":[0],"e":[100]},{"t":36}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":4,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"fl","c":{"a":0,"k":[0.270999983245,0.497999991623,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[85.041,93.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":19,"s":[100,100],"e":[150,150]},{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":34,"s":[150,150],"e":[100,100]},{"t":39}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"3","np":5,"cix":2,"ix":4,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[5.247,0],[0,-5.247],[-5.247,0],[0,5.247]],"o":[[-5.247,0],[0,5.247],[5.247,0],[0,-5.247]],"v":[[0,-9.5],[-9.5,0],[0,9.5],[9.5,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-4.687,0],[0,-4.687],[4.687,0],[0,4.687]],"o":[[4.687,0],[0,4.687],[-4.687,0],[0,-4.687]],"v":[[0,-8.5],[8.5,0],[0,8.5],[-8.5,0]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":12,"s":[0],"e":[100]},{"t":27}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":4,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"fl","c":{"a":0,"k":[0.270999983245,0.497999991623,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[58.125,93.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":10,"s":[0,0],"e":[150,150]},{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":25,"s":[150,150],"e":[100,100]},{"t":30}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"2","np":5,"cix":2,"ix":5,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[5.247,0],[0,-5.247],[-5.247,0],[0,5.247]],"o":[[-5.247,0],[0,5.247],[5.247,0],[0,-5.247]],"v":[[0,-9.5],[-9.5,0],[0,9.5],[9.5,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-4.687,0],[0,-4.687],[4.687,0],[0,4.687]],"o":[[4.687,0],[0,4.687],[-4.687,0],[0,-4.687]],"v":[[0,-8.5],[8.5,0],[0,8.5],[-8.5,0]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":3,"s":[0],"e":[100]},{"t":18}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":4,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"fl","c":{"a":0,"k":[0.270999983245,0.497999991623,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[31.208,93.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":0,"s":[0,0],"e":[150,150]},{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":15,"s":[150,150],"e":[100,100]},{"t":20}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"1","np":5,"cix":2,"ix":6,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":90,"st":0,"bm":0}]}
diff --git a/src/assets/animation/not-found-404.json b/src/assets/animation/not-found-404.json
diff --git a/src/assets/login-image.jpg b/src/assets/login-image.jpg
diff --git a/src/components/CustomDrawer/CustomDrawer.js b/src/components/CustomDrawer/CustomDrawer.js
@@ -9,28 +9,20 @@ import {
   Divider,
 } from '@material-ui/core';
 import { useResizeScreen } from 'custom-hooks/useResizeHook';
+import { screenNames } from 'custom-hooks/drawerHook';
 import cls from 'classnames';
-import { ReactComponent as DashboardIcon } from 'assets/dashboard.svg';
-import { ReactComponent as User } from '../../assets/userHam.svg';
-import { ReactComponent as Bell } from '../../assets/bell.svg';
-import { ReactComponent as Pie } from '../../assets/pie.svg';
-import { ReactComponent as Logout } from '../../assets/logout.svg';
-import { ReactComponent as DarkModeIcon } from '../../assets/nightMode.svg';
+import DashboardIcon from 'assets/dashboard.svg';
+import UserIcon from 'assets/userHam.svg';
+import PieIcon from 'assets/pie.svg';
+import { ReactComponent as Logout } from 'assets/logout.svg';
+import DarkModeIcon from 'assets/nightMode.svg';
 
 const useStyles = makeStyles((theme) => ({
-  userIcon: {
-    width: 30,
-    height: 30,
-  },
-  bellIcon: {
-    width: 30,
-    height: 30,
-  },
-  pieIcon: {
+  logoutIcon: {
     width: 30,
     height: 30,
   },
-  logoutIcon: {
+  iconStyle: {
     width: 30,
     height: 30,
   },
@@ -55,10 +47,39 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
+const drawerItems = [
+  {
+    icon: DashboardIcon,
+    toolTipText: 'Dashboard',
+    id: 1,
+    name: screenNames.Dashboard,
+  },
+  {
+    icon: UserIcon,
+    toolTipText: 'View your profile',
+    id: 2,
+    name: screenNames.Profile,
+  },
+  {
+    icon: PieIcon,
+    toolTipText: 'See statistics',
+    id: 3,
+    name: screenNames.Statistics,
+  },
+  { icon: DarkModeIcon, toolTipText: 'Change your theme', id: 4 },
+];
+
 const CustomDrawer = (props) => {
   const classes = useStyles();
   const { isMobile } = useResizeScreen();
-  const { open, onLogOutClick, onClose, handleDarkModeClick } = props;
+  const {
+    open,
+    onLogOutClick,
+    onClose,
+    handleDarkModeClick,
+    onIconClick,
+    screenName,
+  } = props;
 
   return (
     <Drawer
@@ -68,39 +89,30 @@ const CustomDrawer = (props) => {
       classes={{ paper: classes.drawer }}
     >
       <List className={classes.list}>
-        <Tooltip title="Dashboard">
-          <ListItem
-            button
-            className={cls(classes.listButton, classes.activeIcon)}
-          >
-            <DashboardIcon className={classes.userIcon} />
-          </ListItem>
-        </Tooltip>
-        <Tooltip title="View Profile">
-          <ListItem button className={classes.listButton}>
-            <User className={classes.userIcon} />
-          </ListItem>
-        </Tooltip>
-        <Tooltip title="View Stats">
-          <ListItem button className={classes.listButton}>
-            <Pie className={classes.pieIcon} />
-          </ListItem>
-        </Tooltip>
-        <Tooltip title="Notifications">
-          <ListItem button className={classes.listButton}>
-            <Bell className={classes.bellIcon} />
-          </ListItem>
-        </Tooltip>
-        <Divider />
-        <Tooltip title="Change theme">
-          <ListItem
-            button
-            className={classes.listButton}
-            onClick={handleDarkModeClick}
-          >
-            <DarkModeIcon className={classes.bellIcon} />
-          </ListItem>
-        </Tooltip>
+        {drawerItems.map((item) => (
+          <>
+            {item.id === 4 && <Divider />}
+            <Tooltip key={item.id} title={item.toolTipText}>
+              <ListItem
+                button
+                className={cls(classes.listButton, {
+                  [classes.activeIcon]: screenName === item.name,
+                })}
+                onClick={
+                  item.id === 4
+                    ? handleDarkModeClick
+                    : () => onIconClick(item.id)
+                }
+              >
+                <img
+                  src={item.icon}
+                  className={classes.iconStyle}
+                  alt="drawer-icon"
+                />
+              </ListItem>
+            </Tooltip>
+          </>
+        ))}
         <Tooltip title="Logout">
           <ListItem
             button
@@ -120,6 +132,12 @@ CustomDrawer.propTypes = {
   onLogOutClick: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
   handleDarkModeClick: PropTypes.func.isRequired,
+  onIconClick: PropTypes.func,
+  screenName: PropTypes.string.isRequired,
+};
+
+CustomDrawer.defaultProps = {
+  onIconClick: () => {},
 };
 
 export default CustomDrawer;
diff --git a/src/components/Dashboard/DashboardComponent.js b/src/components/Dashboard/DashboardComponent.js
@@ -5,8 +5,6 @@ import { useResizeScreen } from 'custom-hooks/useResizeHook';
 import Header from '../Header/Header';
 import DashboardContent from './DashboardContent';
 import DrawerContainer from '../../containers/CustomDrawerContainer/DrawerContainer';
-import ThemeDialog from '../utilityComponents/ThemeDialog';
-import LogoutDialog from '../utilityComponents/LogoutDialog';
 import AnimeDeleteDialog from '../utilityComponents/DeleteAnimeDialog';
 
 const useStyles = makeStyles(() => ({
@@ -32,8 +30,6 @@ const DashboardComponent = () => {
         >
           <Header isSearchBarRequired isAvatarPopUpRequired />
           <DashboardContent />
-          <ThemeDialog />
-          <LogoutDialog />
           <AnimeDeleteDialog />
           <AnimeDetailDialogContainer />
         </Grid>

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
@@ -17,11 +17,12 @@ const Header = (props) => {
     isBackButtonRequired,
     isSearchBarRequired,
     isAvatarPopUpRequired,
+    iconText,
   } = props;
   return (
     <Grid container className={classes.headerContainer} alignItems="center">
       <Grid item xs={2}>
-        {isBackButtonRequired && <GoBack toolTipTitle="Go Back to home" />}
+        {isBackButtonRequired && <GoBack iconText={iconText} />}
       </Grid>
       <Grid item xs={8}>
         {isSearchBarRequired && <AnimeSearchBar />}
@@ -37,12 +38,14 @@ Header.propTypes = {
   isBackButtonRequired: PropTypes.bool,
   isSearchBarRequired: PropTypes.bool,
   isAvatarPopUpRequired: PropTypes.bool,
+  iconText: PropTypes.string,
 };
 
 Header.defaultProps = {
   isBackButtonRequired: false,
   isSearchBarRequired: false,
   isAvatarPopUpRequired: false,
+  iconText: '',
 };
 
 export default Header;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"v":"4.12.0","fr":15,"ip":0,"op":90,"w":200,"h":200,"nm":"loading","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"loading Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[100,103.5,0],"ix":2},"a":{"a":0,"k":[100,100,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[5.246,0],[0,-5.247],[-5.247,0],[0,5.247]],"o":[[-5.247,0],[0,5.247],[5.246,0],[0,-5.247]],"v":[[0,-9.5],[-9.5,0],[0,9.5],[9.5,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-4.687,0],[0,-4.687],[4.687,0],[0,4.687]],"o":[[4.687,0],[0,4.687],[-4.687,0],[0,-4.687]],"v":[[0,-8.5],[8.5,0],[0,8.5],[-8.5,0]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":64,"s":[0],"e":[100]},{"t":79}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":4,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"fl","c":{"a":0,"k":[0.270999983245,0.497999991623,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[165.792,93.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":61,"s":[0,0],"e":[150,150]},{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":76,"s":[150,150],"e":[100,100]},{"t":81}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"6","np":5,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[5.247,0],[0,-5.247],[-5.247,0],[0,5.247]],"o":[[-5.247,0],[0,5.247],[5.247,0],[0,-5.247]],"v":[[0,-9.5],[-9.5,0],[0,9.5],[9.5,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-4.687,0],[0,-4.687],[4.687,0],[0,4.687]],"o":[[4.687,0],[0,4.687],[-4.687,0],[0,-4.687]],"v":[[0,-8.5],[8.5,0],[0,8.5],[-8.5,0]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":49,"s":[0],"e":[100]},{"t":64}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":4,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"fl","c":{"a":0,"k":[0.270999983245,0.497999991623,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[138.875,93.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":46,"s":[0,0],"e":[150,150]},{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":61,"s":[150,150],"e":[100,100]},{"t":67}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"5","np":5,"cix":2,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[5.247,0],[0,-5.247],[-5.246,0],[0,5.247]],"o":[[-5.246,0],[0,5.247],[5.247,0],[0,-5.247]],"v":[[0,-9.5],[-9.5,0],[0,9.5],[9.5,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-4.687,0],[0,-4.687],[4.687,0],[0,4.687]],"o":[[4.687,0],[0,4.687],[-4.687,0],[0,-4.687]],"v":[[0,-8.5],[8.5,0],[0,8.5],[-8.5,0]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":34,"s":[0],"e":[100]},{"t":49}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":4,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"fl","c":{"a":0,"k":[0.270999983245,0.497999991623,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[111.958,93.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":31,"s":[0,0],"e":[150,150]},{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":45,"s":[150,150],"e":[100,100]},{"t":51}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"4","np":5,"cix":2,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[5.247,0],[0,-5.247],[-5.247,0],[0,5.247]],"o":[[-5.247,0],[0,5.247],[5.247,0],[0,-5.247]],"v":[[0,-9.5],[-9.5,0],[0,9.5],[9.5,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-4.687,0],[0,-4.687],[4.687,0],[0,4.687]],"o":[[4.687,0],[0,4.687],[-4.687,0],[0,-4.687]],"v":[[0,-8.5],[8.5,0],[0,8.5],[-8.5,0]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":21,"s":[0],"e":[100]},{"t":36}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":4,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"fl","c":{"a":0,"k":[0.270999983245,0.497999991623,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[85.041,93.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":19,"s":[100,100],"e":[150,150]},{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":34,"s":[150,150],"e":[100,100]},{"t":39}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"3","np":5,"cix":2,"ix":4,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[5.247,0],[0,-5.247],[-5.247,0],[0,5.247]],"o":[[-5.247,0],[0,5.247],[5.247,0],[0,-5.247]],"v":[[0,-9.5],[-9.5,0],[0,9.5],[9.5,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-4.687,0],[0,-4.687],[4.687,0],[0,4.687]],"o":[[4.687,0],[0,4.687],[-4.687,0],[0,-4.687]],"v":[[0,-8.5],[8.5,0],[0,8.5],[-8.5,0]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":12,"s":[0],"e":[100]},{"t":27}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":4,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"fl","c":{"a":0,"k":[0.270999983245,0.497999991623,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[58.125,93.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":10,"s":[0,0],"e":[150,150]},{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":25,"s":[150,150],"e":[100,100]},{"t":30}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"2","np":5,"cix":2,"ix":5,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[5.247,0],[0,-5.247],[-5.247,0],[0,5.247]],"o":[[-5.247,0],[0,5.247],[5.247,0],[0,-5.247]],"v":[[0,-9.5],[-9.5,0],[0,9.5],[9.5,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-4.687,0],[0,-4.687],[4.687,0],[0,4.687]],"o":[[4.687,0],[0,4.687],[-4.687,0],[0,-4.687]],"v":[[0,-8.5],[8.5,0],[0,8.5],[-8.5,0]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":3,"s":[0],"e":[100]},{"t":18}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":4,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"fl","c":{"a":0,"k":[0.270999983245,0.497999991623,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[31.208,93.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":0,"s":[0,0],"e":[150,150]},{"i":{"x":[0.833,0.833],"y":[0.833,0.833]},"o":{"x":[0.167,0.167],"y":[0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":15,"s":[150,150],"e":[100,100]},{"t":20}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"1","np":5,"cix":2,"ix":6,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":90,"st":0,"bm":0}]}