replace store methods with useSelector and useDispatch

2 files changed, 9 insertions, 8 deletions

diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Header.js b/blocks/eda-frontend/src/components/SchematicEditor/Header.js
index 6b927d6e..1f998c46 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Header.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Header.js
@@ -31,7 +31,6 @@ import { deepPurple } from '@material-ui/core/colors'
 
 import logo from '../../static/favicon.ico'
 import { setTitle, logout, setSchTitle, setSchShared } from '../../redux/actions/index'
-import store from '../../redux/store'
 import { getDateTime as getDate } from '../../utils/GalleryUtils'
 
 const useStyles = makeStyles((theme) => ({
@@ -102,8 +101,8 @@ SimpleSnackbar.propTypes = {
 function Header () {
   const history = useHistory()
   const classes = useStyles()
-  const isAuthenticated = store.getState().authReducer.isAuthenticated
-  const user = store.getState().authReducer.user
+  const isAuthenticated = useSelector(state => state.authReducer.isAuthenticated)
+  const user = useSelector(state => state.authReducer.user)
   const details = useSelector(state => state.saveSchematicReducer.details)
   const isSaved = useSelector(state => state.saveSchematicReducer.isSaved)
   const isShared = useSelector(state => state.saveSchematicReducer.isShared)
@@ -333,7 +332,7 @@ function Header () {
                 {typography2}
               </MenuItem>
               <MenuItem onClick={() => {
-                store.dispatch(logout(history))
+                dispatch(logout(history))
               }}
               >
                 Logout
diff --git a/blocks/eda-frontend/src/components/Shared/Navbar.js b/blocks/eda-frontend/src/components/Shared/Navbar.js
index 77ec687f..b42cb4c2 100644
--- a/blocks/eda-frontend/src/components/Shared/Navbar.js
+++ b/blocks/eda-frontend/src/components/Shared/Navbar.js
@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
 
 import { AppBar, Avatar, Button, Fade, IconButton, Link, ListItemText, Menu, MenuItem, Toolbar, Typography } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 import { deepPurple } from '@material-ui/core/colors'
 import { Link as RouterLink, useHistory } from 'react-router-dom'
 import logo from '../../static/favicon.ico'
-import store from '../../redux/store'
 import { logout } from '../../redux/actions/index'
 
 const useStyles = makeStyles((theme) => ({
@@ -42,8 +42,10 @@ export function Header () {
   const history = useHistory()
   const classes = useStyles()
   const [anchorEl, setAnchorEl] = useState(null)
-  const isAuthenticated = store.getState().authReducer.isAuthenticated
-  const user = store.getState().authReducer.user
+  const isAuthenticated = useSelector(state => state.authReducer.isAuthenticated)
+  const user = useSelector(state => state.authReducer.user)
+
+  const dispatch = useDispatch()
 
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget)
@@ -193,7 +195,7 @@ export function Header () {
                 {typography}
               </MenuItem>
               <MenuItem onClick={() => {
-                store.dispatch(logout(history))
+                dispatch(logout(history))
               }}
               >
                 Logout