add is logging out state for logout

5 files changed, 20 insertions, 26 deletions

diff --git a/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js b/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js
index f05203e2..01450f10 100644
--- a/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js
+++ b/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js
@@ -1,5 +1,4 @@
-import { useEffect } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { Link as RouterLink } from 'react-router-dom'
 
 import {
@@ -16,7 +15,6 @@ import {
 import { deepPurple } from '@material-ui/core/colors'
 import { makeStyles } from '@material-ui/core/styles'
 
-import { fetchSchematics } from '../../redux/dashboardSlice'
 import { getUppercaseInitial } from '../../utils/GalleryUtils'
 
 const useStyles = makeStyles((theme) => ({
@@ -54,13 +52,6 @@ export default function DashSidebar (_props) {
   const user = useSelector(state => state.auth.user)
   const schematics = useSelector(state => state.dashboard.schematics)
 
-  const dispatch = useDispatch()
-
-  // For Fetching Saved Schematics
-  useEffect(() => {
-    dispatch(fetchSchematics())
-  }, [dispatch])
-
   const button = 'My ' + process.env.REACT_APP_DIAGRAMS_NAME
   const placeholder = 'Find your ' + process.env.REACT_APP_SMALL_DIAGRAM_NAME + '...'
   return (
diff --git a/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js b/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js
index 908b4054..548727c1 100644
--- a/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js
+++ b/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js
@@ -54,19 +54,21 @@ function a11yProps (index) {
 export default function ProgressPanel () {
   const classes = useStyles()
   const [value, setValue] = useState(0)
+  const isLoggingOut = useSelector(state => state.auth.isLoggingOut)
+  const schematics = useSelector(state => state.dashboard.schematics)
+
+  const dispatch = useDispatch()
 
   const handleChange = (event, newValue) => {
     setValue(newValue)
   }
 
-  const schematics = useSelector(state => state.dashboard.schematics)
-
-  const dispatch = useDispatch()
-
   // For Fetching Saved Schematics
   useEffect(() => {
+    if (isLoggingOut) return
+
     dispatch(fetchSchematics())
-  }, [dispatch])
+  }, [dispatch, isLoggingOut])
 
   const tab = 'Recent ' + process.env.REACT_APP_DIAGRAMS_NAME
   const typography = 'You have not created any ' + process.env.REACT_APP_SMALL_DIAGRAM_NAME
diff --git a/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js b/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js
index 91c19dc9..55c4504b 100644
--- a/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js
+++ b/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js
@@ -1,12 +1,9 @@
-import { useEffect } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import { useSelector } from 'react-redux'
 import { Link as RouterLink } from 'react-router-dom'
 
 import { Button, Card, CardActions, CardContent, Grid, Typography } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 
-import { fetchSchematics } from '../../redux/dashboardSlice'
-
 import SchematicCard from './SchematicCard'
 
 const useStyles = makeStyles({
@@ -60,13 +57,6 @@ export default function SchematicsList () {
   const user = useSelector(state => state.auth.user)
   const schematics = useSelector(state => state.dashboard.schematics)
 
-  const dispatch = useDispatch()
-
-  // For Fetching Saved Schematics
-  useEffect(() => {
-    dispatch(fetchSchematics())
-  }, [dispatch])
-
   const typography1 = 'You don\'t have any saved ' + process.env.REACT_APP_SMALL_DIAGRAMS_NAME + '...'
   return (
     <>
diff --git a/blocks/eda-frontend/src/redux/authSlice.js b/blocks/eda-frontend/src/redux/authSlice.js
index 9632b86c..5d59363e 100644
--- a/blocks/eda-frontend/src/redux/authSlice.js
+++ b/blocks/eda-frontend/src/redux/authSlice.js
@@ -7,6 +7,7 @@ const tokenKey = process.env.REACT_APP_NAME + '_token'
 const initialState = {
   token: localStorage.getItem(tokenKey),
   isAuthenticated: false,
+  isLoggingOut: false,
   isRegistered: false,
   isLoading: false,
   user: null,
@@ -282,8 +283,13 @@ const authSlice = createSlice({
         state.isRegistered = false
         state.regErrors = action.payload
       })
+      .addCase(logout.pending, (state) => {
+        state.isLoading = true
+        state.isLoggingOut = true
+      })
       .addCase(logout.fulfilled, (state) => {
         state.isLoading = false
+        state.isLoggingOut = false
         state.token = null
         state.user = null
         state.isAuthenticated = false
diff --git a/blocks/eda-frontend/src/redux/dashboardSlice.js b/blocks/eda-frontend/src/redux/dashboardSlice.js
index 753b5287..2c32875a 100644
--- a/blocks/eda-frontend/src/redux/dashboardSlice.js
+++ b/blocks/eda-frontend/src/redux/dashboardSlice.js
@@ -2,6 +2,8 @@ import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
 
 import api from '../utils/Api'
 
+import { logout } from './authSlice'
+
 const initialState = {
   isLoading: false,
   schematics: [],
@@ -106,6 +108,9 @@ const dashboardSlice = createSlice({
         state.isLoading = false
         state.gallery = []
       })
+      .addCase(logout.fulfilled, (state) => {
+        state.schematics = []
+      })
   }
 })