React18

blocks/eda-frontend/package.json

@@ -4,9 +4,18 @@
   "description": "Xcos Blocks Frontend",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.9.11",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.52",
+    "@material-ui/styles": "^4.11.5",
+    "@mui/core": "^5.0.0-alpha.54",
+    "@mui/icons-material": "^5.15.15",
+    "@mui/lab": "^5.0.0-alpha.170",
+    "@mui/material": "^5.15.15",
+    "@mui/styles": "^5.15.15",
+    "@reduxjs/toolkit": "^2.2.3",
     "axios": "^1.6.7",
     "canvg": "^4.0.1",
     "file-saver": "^2.0.2",
@@ -15,10 +24,10 @@
     "mxgraph": "^4.2.2",
     "prop-types": "^15.8.1",
     "query-string": "^9.0.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-loader-spinner": "^6.1.6",
-    "react-redux": "^7.2.0",
+    "react-redux": "^7.2.9",
     "react-router-dom": "^5.1.2",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",

blocks/eda-frontend/src/App.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { HashRouter, Switch, Route, Redirect } from 'react-router-dom'
-import CircularProgress from '@material-ui/core/CircularProgress'
+import CircularProgress from '@mui/material/CircularProgress'
 
 import Navbar from './components/Shared/Navbar'
 import Home from './pages/Home'
@@ -14,7 +14,7 @@ import Dashboard from './pages/Dashboard'
 import SignUp from './pages/signUp'
 
 import { useSelector, useDispatch } from 'react-redux'
-import { loadUser } from './redux/actions/index'
+import { loadUser } from './redux/slices/authSlice'
 
 // Controls Private routes, this are accessible for authenticated users.  [ e.g : dashboard ]
 // and restricted routes disabled for authenticated users. [ e.g : login , signup ]
@@ -27,7 +27,7 @@ function PrivateRoute ({ component: Component, ...rest }) {
   return (
     <Route
       {...rest} render={props => {
-        if (auth.isLoading) {
+        if (auth?.isLoading) {
           return <CircularProgress style={{ margin: '50vh 50vw' }} />
         } else if (!auth.isAuthenticated) {
           return <Redirect to='/login' />
@@ -53,9 +53,9 @@ function PublicRoute ({ component: Component, restricted, nav, ...rest }) {
   return (
     <Route
       {...rest} render={props => {
-        if (auth.isLoading) {
+        if (auth?.isLoading) {
           return <CircularProgress style={{ margin: '50vh 50vw' }} />
-        } else if (auth.isAuthenticated && restricted) {
+        } else if (auth?.isAuthenticated && restricted) {
           return <Redirect to='/dashboard' />
         } else if (nav) {
           return (<><Navbar /><Component {...props} /></>)

blocks/eda-frontend/src/components/Dashboard/DashboardHome.js

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Button, Card, CardActions, CardContent, Grid, Typography } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { Button, Card, CardActions, CardContent, Grid, Typography } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import { Link as RouterLink } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 

blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js

@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react'
-import { Avatar, Divider, Hidden, InputBase, List, ListItem, ListItemAvatar, ListItemText, Typography } from '@material-ui/core'
+import { Avatar, Divider, Hidden, InputBase, List, ListItem, ListItemAvatar, ListItemText, Typography } from '@mui/material'
 import { Link as RouterLink } from 'react-router-dom'
-import { makeStyles } from '@material-ui/core/styles'
-import { deepPurple } from '@material-ui/core/colors'
+import { makeStyles } from '@mui/styles'
+import { deepPurple } from '@mui/material/colors'
 import { useDispatch, useSelector } from 'react-redux'
-import { fetchSchematics } from '../../redux/actions/index'
+import { fetchSchematics } from '../../redux/slices/dashboardSlice'
 
 const useStyles = makeStyles((theme) => ({
   toolbar: {

blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react'
-import { Tab, Box, Tabs, AppBar, Typography, Grid } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { Tab, Box, Tabs, AppBar, Typography, Grid } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import PropTypes from 'prop-types'
 
 import SchematicCard from './SchematicCard'
 import { useDispatch, useSelector } from 'react-redux'
-import { fetchSchematics } from '../../redux/actions/index'
+import { fetchSchematics } from '../../redux/slices/dashboardSlice'
 
 const useStyles = makeStyles((theme) => ({
   root: {

blocks/eda-frontend/src/components/Dashboard/SchematicCard.js

@@ -1,13 +1,13 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import { Button, Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Snackbar, Tooltip, Typography } from '@material-ui/core'
-import ShareIcon from '@material-ui/icons/Share'
-import { makeStyles } from '@material-ui/core/styles'
+import { Button, Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Snackbar, Tooltip, Typography } from '@mui/material'
+import ShareIcon from '@mui/icons-material/Share'
+import { makeStyles } from '@mui/styles'
 import { Link as RouterLink } from 'react-router-dom'
-import DeleteIcon from '@material-ui/icons/Delete'
+import DeleteIcon from '@mui/icons-material/Delete'
 import { useDispatch } from 'react-redux'
-import { deleteSchematic } from '../../redux/actions/index'
-import MuiAlert from '@material-ui/lab/Alert'
+import { deleteSchematic } from '../../redux/slices/dashboardSlice'
+import MuiAlert from '@mui/lab/Alert'
 
 const useStyles = makeStyles((theme) => ({
   media: {

blocks/eda-frontend/src/components/Dashboard/SchematicsList.js

@@ -1,11 +1,11 @@
 import React, { useEffect } from 'react'
-import { Button, Card, CardActions, CardContent, Grid, Typography } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { Button, Card, CardActions, CardContent, Grid, Typography } from '@mui/material'
+import { makeStyles } from '@mui/styles'
 import { Link as RouterLink } from 'react-router-dom'
 
 import SchematicCard from './SchematicCard'
 import { useDispatch, useSelector } from 'react-redux'
-import { fetchSchematics } from '../../redux/actions/index'
+import { fetchSchematics } from '../../redux/slices/dashboardSlice'
 
 const useStyles = makeStyles({
   mainHead: {
@@ -57,7 +57,6 @@ export default function SchematicsList () {
   const classes = useStyles()
   const auth = useSelector(state => state.authReducer)
   const schematics = useSelector(state => state.dashboardReducer.schematics)
-
   const dispatch = useDispatch()
 
   // For Fetching Saved Schematics

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

@@ -2,10 +2,10 @@
 import React, { useEffect, useState } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import mxGraphFactory from 'mxgraph'
-import { ListItem, ListItemText, Button, TextField } from '@material-ui/core'
+import { ListItem, ListItemText, Button, TextField } from '@mui/material'
 import { TailSpin } from 'react-loader-spinner'
 
-import { setCompProperties } from '../../redux/actions/index'
+import { setCompPropertiesAsync } from '../../redux/slices/componentPropertiesSlice'
 import { graph } from './Helper/ComponentDrag'
 import { portSize } from './Helper/SvgParser'
 
@@ -146,16 +146,16 @@ const getErrorText = (compType) => {
 export default function ComponentProperties () {
   // compProperties that are displayed on the right side bar when user clicks on a component on the grid.
 
-  const compProperties = useSelector(state => state.componentPropertiesReducer.compProperties)
-  const isOpen = useSelector(state => state.componentPropertiesReducer.isPropertiesWindowOpen)
-  const block = useSelector(state => state.componentPropertiesReducer.block)
-  const name = useSelector(state => state.componentPropertiesReducer.name)
-  const parameterValues = useSelector(state => state.componentPropertiesReducer.parameter_values)
+  const compProperties = useSelector(state => state.componentProperties?.compProperties)
+  const isOpen = useSelector(state => state.componentProperties?.isPropertiesWindowOpen)
+  const block = useSelector(state => state.componentProperties?.block)
+  const name = useSelector(state => state.componentProperties?.name)
+  const parameterValues = useSelector(state => state.componentProperties?.parameter_values) || {}
   const [val, setVal] = useState(parameterValues)
-  const displayProperties = useSelector(state => state.componentPropertiesReducer.displayProperties)
-  const isLoading = useSelector(state => state.componentPropertiesReducer.isLoading)
+  const displayProperties = useSelector(state => state.componentProperties?.displayProperties)
+  const isLoading = useSelector(state => state.componentProperties?.isLoading)
   const dispatch = useDispatch()
-  const errorFields1 = useSelector(state => state.componentPropertiesReducer.errorFields)
+  const errorFields1 = useSelector(state => state.componentProperties?.errorFields)
   const [errorFields, setErrorFields] = useState(errorFields1)
 
   useEffect(() => {
@@ -260,7 +260,7 @@ export default function ComponentProperties () {
   }
 
   const setProps = () => {
-    dispatch(setCompProperties(block, val, errorFields))
+    dispatch(setCompPropertiesAsync(block, val, errorFields))
   }
 
   const link1 = name + ' Parameters'
@@ -278,11 +278,11 @@ export default function ComponentProperties () {
       />
 
       <ListItem>
-        {compProperties !== undefined ? <ListItemText primary={link1} /> : isLoading ? <ListItemText primary={link4} /> : <ListItemText primary={link3} />}
+        {compProperties ? (<ListItemText primary={link1} />) : (isLoading ? (<ListItemText primary={link4} />) : (<ListItemText primary={link3} />))}
       </ListItem>
 
       {
-        Object.keys(val).map((keyName, i) => {
+        Object.keys(val || {}).map((keyName, i) => {
           if (keyName.match(/^p[0-9]*_value$/)) {
             const rootKeyName = keyName.substr(0, 4)
             const typeId = rootKeyName + '_type'

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

@@ -1,18 +1,18 @@
 import React, { useEffect, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import api from '../../utils/Api'
-import { Collapse, Hidden, IconButton, InputAdornment, List, ListItem, ListItemIcon, TextField, Tooltip } from '@material-ui/core'
+import { Collapse, Hidden, IconButton, InputAdornment, List, ListItem, ListItemIcon, TextField, Tooltip } from '@mui/material'
 import { TailSpin } from 'react-loader-spinner'
-import SearchIcon from '@material-ui/icons/Search'
+import SearchIcon from '@mui/icons-material/Search'
 
-import { makeStyles } from '@material-ui/core/styles'
-import ExpandLess from '@material-ui/icons/ExpandLess'
-import ExpandMore from '@material-ui/icons/ExpandMore'
-import CloseIcon from '@material-ui/icons/Close'
+import { makeStyles } from '@mui/styles'
+import ExpandLess from '@mui/icons-material/ExpandLess'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+import CloseIcon from '@mui/icons-material/Close'
 
 import './Helper/SchematicEditor.css'
 import { useDispatch, useSelector } from 'react-redux'
-import { fetchLibraries, toggleCollapse, fetchComponents, fetchComponentImages, toggleSimulate } from '../../redux/actions/index'
+import { fetchLibraries, toggleCollapse, fetchComponents, fetchComponentImages, toggleSimulate } from '../../redux/slices/schematicEditorSlice'
 import SideComp from './SideComp'
 import SimulationProperties from './SimulationProperties'
 const COMPONENTS_PER_ROW = 3
@@ -36,10 +36,10 @@ const searchOptions = {
 
 export default function ComponentSidebar ({ compRef }) {
   const classes = useStyles()
-  const libraries = useSelector(state => state.schematicEditorReducer.libraries)
-  const collapse = useSelector(state => state.schematicEditorReducer.collapse)
-  const components = useSelector(state => state.schematicEditorReducer.components)
-  const isSimulate = useSelector(state => state.schematicEditorReducer.isSimulate)
+  const libraries = useSelector(state => state.schematicEditor.libraries)
+  const collapse = useSelector(state => state.schematicEditor.collapse)
+  const components = useSelector(state => state.schematicEditor.components)
+  const isSimulate = useSelector(state => state.schematicEditor.isSimulate)
 
   const dispatch = useDispatch()
   const [isSearchedResultsEmpty, setIssearchedResultsEmpty] = useState(false)
@@ -180,7 +180,7 @@ export default function ComponentSidebar ({ compRef }) {
 
             {/* Collapsing List Mapped by Libraries fetched by the API */}
             {searchText.length === 0 &&
-              libraries.map(
+              libraries?.map(
                 (library) => {
                   return (
                     <div key={library.id}>
@@ -239,7 +239,7 @@ export default function ComponentSidebar ({ compRef }) {
 }
 
 export function ComponentImages () {
-  const componentImages = useSelector(state => state.schematicEditorReducer.component_images)
+  const componentImages = useSelector(state => state.schematicEditor.component_images)
 
   const dispatch = useDispatch()
 

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

@@ -22,15 +22,17 @@ import {
   Switch,
   Toolbar,
   Typography
-} from '@material-ui/core'
+} from '@mui/material'
 import { useSelector, useDispatch } from 'react-redux'
-import ShareIcon from '@material-ui/icons/Share'
-import CloseIcon from '@material-ui/icons/Close'
-import { makeStyles } from '@material-ui/core/styles'
-import { deepPurple } from '@material-ui/core/colors'
+import ShareIcon from '@mui/icons-material/Share'
+import CloseIcon from '@mui/icons-material/Close'
+import { makeStyles } from '@mui/styles'
+import { deepPurple } from '@mui/material/colors'
 
 import logo from '../../static/favicon.ico'
-import { setTitle, logout, setSchTitle, setSchShared } from '../../redux/actions/index'
+import { logout } from '../../redux/slices/authSlice'
+import { setSchTitle, setSchShared } from '../../redux/slices/saveSchematicSlice'
+import { setTitle } from '../../redux/slices/netlistSlice'
 import store from '../../redux/store'
 
 const useStyles = makeStyles((theme) => ({
@@ -147,11 +149,11 @@ function Header () {
   }
 
   // change saved schematic share status
-  const [shared, setShared] = useState(schSave.isShared)
+  const [shared, setShared] = useState(schSave?.isShared)
 
   useEffect(() => {
-    setShared(schSave.isShared)
-  }, [schSave.isShared])
+    setShared(schSave?.isShared)
+  }, [schSave?.isShared])
 
   const handleShareChange = (event) => {
     setShared(event.target.checked)
@@ -218,14 +220,14 @@ function Header () {
         <Input
           className={classes.input}
           color='secondary'
-          value={schSave.title === 'Untitled' ? 'Untitled' : schSave.title}
+          value={schSave?.title === 'Untitled' ? 'Untitled' : schSave?.title}
           onChange={titleHandler}
           inputProps={{ 'aria-label': 'SchematicTitle' }}
         />
       </Hidden>
 
       {/* Display last saved and shared option for saved schematics */}
-      {auth.isAuthenticated === true
+      {auth?.isAuthenticated === true
         ? <>
           {(schSave.isSaved === true && schSave.details.save_time !== undefined)
             ? <Typography
@@ -288,7 +290,7 @@ function Header () {
 
       {/* Display login option or user menu as per authenticated status */}
       {
-        (!auth.isAuthenticated
+        (!auth?.isAuthenticated
           ? <Button
             size='small'
             component={RouterLink}

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

@@ -5,7 +5,7 @@ import mxGraphFactory from 'mxgraph'
 import store from '../../../redux/store'
 import dot from '../../../static/dot.gif'
 import blockstyle from '../../../static/style.json'
-import { getCompProperties, closeCompProperties } from '../../../redux/actions/index'
+import { getCompPropertiesAsync, closeCompProperties } from '../../../redux/slices/componentPropertiesSlice'
 
 import toolbarTools from './ToolbarTools'
 import keyboardShortcuts from './KeyboardShortcuts'
@@ -123,7 +123,7 @@ export default function LoadGrid (container, sidebar, outline) {
     graph.addListener(mxEvent.DOUBLE_CLICK, function (sender, evt) {
       const cell = evt.getProperty('cell')
       if (cell !== undefined && cell.CellType === 'Component') {
-        store.dispatch(getCompProperties(cell))
+        store.dispatch(getCompPropertiesAsync(cell))
       } else {
         store.dispatch(closeCompProperties())
       }
@@ -236,7 +236,7 @@ export default function LoadGrid (container, sidebar, outline) {
 
       const stylesheet = graph.getStylesheet()
       const style = stylesheet.styles[attribute]
-      let displayedLabel = style.displayedLabel
+      let displayedLabel = style?.displayedLabel
       if (displayedLabel == null) {
         return cell.getAttribute('label', '')
       }
@@ -310,9 +310,9 @@ export default function LoadGrid (container, sidebar, outline) {
     toolbarTools(graph)
 
     store.subscribe(() => {
-      const id = store.getState().componentPropertiesReducer.id
-      const parameterValues = store.getState().componentPropertiesReducer.parameter_values
-      const displayProperties = store.getState().componentPropertiesReducer.displayProperties
+      const id = store.getState().componentProperties.id
+      const parameterValues = store.getState().componentProperties.parameter_values
+      const displayProperties = store.getState().componentProperties.displayProperties
       const cellList = graph.getModel().cells
       const c = cellList[id]
       if (c !== undefined) {

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

@@ -4,7 +4,7 @@ import 'mxgraph/javascript/src/css/common.css'
 import mxGraphFactory from 'mxgraph'
 import { portSize, getParameter } from './SvgParser'
 import store from '../../../redux/store'
-import { setModel, setNetlist } from '../../../redux/actions/index'
+import { setModel, setNetlist } from '../../../redux/slices/netlistSlice'
 
 let graph
 let undoManager