authSlice updated but has errors

Author: t3jasKharat

blocks/eda-frontend/src/components/SchematicEditor/Header.js

@@ -103,7 +103,7 @@ SimpleSnackbar.propTypes = {
 function Header () {
   const history = useHistory()
   const classes = useStyles()
-  const auth = store.getState().authReducer
+  const auth = useSelector(state => state.auth)
   const schSave = useSelector(state => state.saveSchematic)
   const [anchorEl, setAnchorEl] = useState(null)
 

blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js

@@ -311,7 +311,7 @@ export default function LoadGrid (container, sidebar, outline) {
 
     store.subscribe(() => {
       const id = store.getState().componentProperties.id
-      const parameterValues = store.getState().componentProperties.parameter_values
+      const parameterValues = store.getState().componentProperties.parameterValues
       const displayProperties = store.getState().componentProperties.displayProperties
       const cellList = graph.getModel().cells
       const c = cellList[id]

blocks/eda-frontend/src/components/SchematicEditor/Helper/ToolbarTools.js

@@ -1,6 +1,6 @@
 /* eslint new-cap: ["error", {"newIsCapExceptionPattern": "^mx"}] */
 import 'mxgraph/javascript/src/css/common.css'
-
+import { useSelector } from 'react-redux'
 import mxGraphFactory from 'mxgraph'
 import { portSize, getParameter } from './SvgParser'
 import store from '../../../redux/store'
@@ -143,7 +143,7 @@ export function PrintPreview () {
     header.style.lineHeight = (this.marginTop - 10) + 'px'
 
     const footer = header.cloneNode(true)
-    const title = store.getState().saveSchematicReducer.title
+    const title = useSelector(state => state.saveSchematic.title)
     mxUtils.write(header, title + ' - ' + process.env.REACT_APP_NAME + ' on Cloud')
     header.style.borderBottom = '1px solid blue'
     header.style.top = '0px'

blocks/eda-frontend/src/components/Shared/Navbar.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-
+import { useSelector } 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'
@@ -42,7 +42,7 @@ export function Header () {
   const history = useHistory()
   const classes = useStyles()
   const [anchorEl, setAnchorEl] = useState(null)
-  const auth = store.getState().authReducer
+  const auth = useSelector(state => state.auth)
 
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget)

blocks/eda-frontend/src/pages/Login.js

@@ -22,7 +22,7 @@ import Visibility from '@material-ui/icons/Visibility'
 import VisibilityOff from '@material-ui/icons/VisibilityOff'
 import { Link as RouterLink } from 'react-router-dom'
 import { useSelector, useDispatch } from 'react-redux'
-import { login, authDefault, googleLogin } from '../redux/slices/authSlice'
+import { login, authDefault, googleLogin, githubLogin } from '../redux/slices/authSlice'
 import google from '../static/google.png'
 import github from '../static/github-mark.png'
 
@@ -68,15 +68,15 @@ export default function SignIn (props) {
     }
   }, [dispatch, props.location.search])
 
-  const [username, setUsername] = useState('')
+  const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [showPassword, setShowPassword] = useState(false)
   const handleClickShowPassword = () => setShowPassword(!showPassword)
   const handleMouseDownPassword = () => setShowPassword(!showPassword)
 
   // Function call for normal user login.
   const handleLogin = () => {
-    dispatch(login(username, password, url))
+    dispatch(login({ email, password, url }))
   }
 
   // Function call for google oAuth login.
@@ -105,7 +105,7 @@ export default function SignIn (props) {
 
         {/* Display's error messages while logging in */}
         <Typography variant='body1' align='center' style={{ marginTop: '10px' }} color='error'>
-          {auth.errors}
+          {auth.errors?.detail}
         </Typography>
 
         <form className={classes.form} noValidate>
@@ -118,8 +118,8 @@ export default function SignIn (props) {
             label='Email'
             name='email'
             autoComplete='email'
-            value={username}
-            onChange={e => setUsername(e.target.value)}
+            value={email}
+            onChange={e => setEmail(e.target.value)}
             autoFocus
           />
           <TextField

blocks/eda-frontend/src/pages/signUp.js

@@ -18,9 +18,9 @@ import { makeStyles } from '@material-ui/core/styles'
 import LockOutlinedIcon from '@material-ui/icons/LockOutlined'
 import Visibility from '@material-ui/icons/Visibility'
 import VisibilityOff from '@material-ui/icons/VisibilityOff'
-import { Link as RouterLink, useHistory } from 'react-router-dom'
+import { Link as RouterLink } from 'react-router-dom'
 import { useSelector, useDispatch } from 'react-redux'
-import { signUp, authDefault, googleLogin } from '../redux/slices/authSlice'
+import { signUp, authDefault, googleLogin, githubLogin } from '../redux/slices/authSlice'
 import google from '../static/google.png'
 import github from '../static/github-mark.png'
 
@@ -48,7 +48,8 @@ const useStyles = makeStyles((theme) => ({
 export default function SignUp () {
   const classes = useStyles()
 
-  const auth = useSelector(state => state.auth)
+  const isRegistered = useSelector(state => state.auth.isRegistered)
+  const regErrors = useSelector(state => state.auth.regErrors)
 
   const dispatch = useDispatch()
   const homeURL = `${window.location.protocol}\\\\${window.location.host}/`
@@ -58,8 +59,6 @@ export default function SignUp () {
     document.title = 'Sign Up - ' + process.env.REACT_APP_NAME
   }, [dispatch])
 
-  const history = useHistory()
-
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [reenterPassword, setReenterPassword] = useState('')
@@ -80,7 +79,7 @@ export default function SignUp () {
   // Function call for github sign up.
   const handleGithubLogin = () => {
     const host = window.location.origin
-    const toUrl = '' // Add any redirect URL logic if needed
+    const toUrl = ''
     dispatch(githubLogin(host, toUrl))
   }
 
@@ -96,8 +95,8 @@ export default function SignUp () {
         </Typography>
 
         {/* Display's error messages while signing in */}
-        <Typography variant='body1' align='center' style={{ marginTop: '10px' }} color={auth.isRegistered ? 'secondary' : 'error'}>
-          {auth.regErrors}
+        <Typography variant='body1' align='center' style={{ marginTop: '10px' }} color={isRegistered ? 'secondary' : 'error'}>
+          {regErrors}
         </Typography>
 
         <form className={classes.form} noValidate>
@@ -177,7 +176,7 @@ export default function SignUp () {
             fullWidth
             variant='contained'
             color='primary'
-            onClick={() => dispatch(signUp(email, password, reenterPassword, history))}
+            onClick={() => dispatch(signUp({ email, password, reenterPassword }))}
             className={classes.submit}
             disabled={!accept}
           >