convert componentProperties action/reducer to slice

11 files changed, 139 insertions, 185 deletions

diff --git a/blocks/eda-frontend/src/components/SchematicEditor/ComponentProperties.js b/blocks/eda-frontend/src/components/SchematicEditor/ComponentProperties.js
index a8d24ff0..d598f51f 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/ComponentProperties.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/ComponentProperties.js
@@ -5,7 +5,7 @@ import mxGraphFactory from 'mxgraph'
 import { ListItem, ListItemText, Button, TextField } from '@material-ui/core'
 import { TailSpin } from 'react-loader-spinner'
 
-import { setCompProperties } from '../../redux/actions/index'
+import { setCompProperties } from '../../redux/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(setCompProperties({ block, parameterValues: val, errorFields }))
   }
 
   const link1 = name + ' Parameters'
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js
index 81f2f7fe..dd3d513b 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/Helper/ComponentDrag.js
@@ -5,10 +5,10 @@ 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 { getCompProperties, closeCompProperties } from '../../../redux/componentPropertiesSlice'
 
 import { styleToObject } from '../../../utils/GalleryUtils'
-import toolbarTools from './ToolbarTools'
+import toolbarTools, { editorZoomAct } from './ToolbarTools'
 import keyboardShortcuts from './KeyboardShortcuts'
 import { sideBar } from './SideBar'
 
@@ -137,6 +137,7 @@ export default function LoadGrid (container, sidebar, outline) {
         store.dispatch(getCompProperties(cell))
       } else {
         store.dispatch(closeCompProperties())
+        editorZoomAct()
       }
       evt.consume()
     })
@@ -411,9 +412,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) {
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/PropertiesSidebar.js b/blocks/eda-frontend/src/components/SchematicEditor/PropertiesSidebar.js
index 2752d38a..86d528a5 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/PropertiesSidebar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/PropertiesSidebar.js
@@ -118,7 +118,7 @@ GridProperties.propTypes = {
 export default function PropertiesSidebar ({ gridRef, outlineRef }) {
   const classes = useStyles()
 
-  const isOpen = useSelector(state => state.componentPropertiesReducer.isPropertiesWindowOpen)
+  const isOpen = useSelector(state => state.componentProperties.isPropertiesWindowOpen)
   const description1 = useSelector(state => state.saveSchematic.description)
 
   const [description, setDescription] = useState(description1)
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js b/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
index fabd47c3..c2386016 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
@@ -33,7 +33,8 @@ import mxGraphFactory from 'mxgraph'
 import { NetlistModal, HelpScreen, ImageExportDialog, OpenSchDialog, ScriptScreen } from './ToolbarExtension'
 import { editorZoomIn, editorZoomOut, editorZoomAct, deleteComp, PrintPreview, Rotate, editorUndo, editorRedo, saveXml, ClearGrid, renderGalleryXML } from './Helper/ToolbarTools'
 import { useSelector, useDispatch } from 'react-redux'
-import { toggleSimulate, closeCompProperties } from '../../redux/actions/index'
+import { toggleSimulate } from '../../redux/actions/index'
+import { closeCompProperties } from '../../redux/componentPropertiesSlice'
 import { setSchXmlData, saveSchematic, openLocalSch, setLoadingDiagram } from '../../redux/saveSchematicSlice'
 import api from '../../utils/Api'
 import { transformXcos, saveToFile } from '../../utils/GalleryUtils'
diff --git a/blocks/eda-frontend/src/redux/actions/actions.js b/blocks/eda-frontend/src/redux/actions/actions.js
index 56d69b00..c40b1b6d 100644
--- a/blocks/eda-frontend/src/redux/actions/actions.js
+++ b/blocks/eda-frontend/src/redux/actions/actions.js
@@ -5,13 +5,6 @@ export const TOGGLE_COLLAPSE = 'TOGGLE_COLLAPSE'
 export const FETCH_COMPONENTS = 'FETCH_COMPONENTS'
 export const TOGGLE_SIMULATE = 'TOGGLE_SIMULATE'
 
-// Actions for handling compProperties
-export const LOADING_GET_COMP_PROPERTIES = 'LOADING_GET_COMP_PROPERTIES'
-export const GET_COMP_PROPERTIES = 'GET_COMP_PROPERTIES'
-export const LOADING_SET_COMP_PROPERTIES = 'LOADING_SET_COMP_PROPERTIES'
-export const SET_COMP_PROPERTIES = 'SET_COMP_PROPERTIES'
-export const CLOSE_COMP_PROPERTIES = 'CLOSE_COMP_PROPERTIES'
-
 // Actions for handling and generating netlist
 export const SET_NETLIST = 'SET_NETLIST'
 export const SET_TITLE = 'SET_TITLE'
diff --git a/blocks/eda-frontend/src/redux/actions/componentPropertiesActions.js b/blocks/eda-frontend/src/redux/actions/componentPropertiesActions.js
deleted file mode 100644
index 2ddedb63..00000000
--- a/blocks/eda-frontend/src/redux/actions/componentPropertiesActions.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import api from '../../utils/Api'
-import { styleToObject } from '../../utils/GalleryUtils'
-import * as actions from './actions'
-
-// Actions for setting isLoading
-const loadingGetCompProperties = (style, isLoading) => (dispatch) => {
-  dispatch({
-    type: actions.LOADING_GET_COMP_PROPERTIES,
-    payload: {
-      name: style,
-      isLoading
-    }
-  })
-}
-
-const loadingSetCompProperties = (isLoading) => (dispatch) => {
-  dispatch({
-    type: actions.LOADING_SET_COMP_PROPERTIES,
-    payload: {
-      isLoading
-    }
-  })
-}
-
-// Actions for listing stored component properites on double click on component
-export const getCompProperties = (block) => (dispatch) => {
-  const style = styleToObject(block.style).default
-  dispatch(loadingGetCompProperties(style, true))
-  const url = 'newblockparameters/?block__name=' + style
-  api.get(url)
-    .then(
-      (res) => {
-        dispatch({
-          type: actions.GET_COMP_PROPERTIES,
-          payload: {
-            block,
-            name: style,
-            parameter_values: block.parameter_values,
-            errorFields: block.errorFields,
-            displayProperties: block.displayProperties,
-            compProperties: res.data
-          }
-        })
-      }
-    )
-    .catch((err) => {
-      console.error(err)
-      dispatch(loadingGetCompProperties(style, false))
-    })
-}
-
-// Actions for updating entered component properites on clicking set parameters
-export const setCompProperties = (block, parameterValues, errorFields) => (dispatch) => {
-  const style = styleToObject(block.style).default
-  dispatch(loadingSetCompProperties(true))
-  const url = 'setblockparameter'
-  const parameters = Object.values(parameterValues)
-  const data = { block: style, parameters }
-  api.post(url, data)
-    .then(
-      (res) => {
-        block.parameter_values = parameterValues
-        block.errorFields = errorFields
-        dispatch({
-          type: actions.SET_COMP_PROPERTIES,
-          payload: {
-            block,
-            parameter_values: parameterValues,
-            errorFields,
-            displayProperties: res.data
-          }
-        })
-      }
-    )
-    .catch((err) => {
-      console.error(err)
-      dispatch(loadingSetCompProperties(false))
-    })
-}
-
-// Handling hiding of compProperties sidebar
-export const closeCompProperties = () => (dispatch) => {
-  dispatch({
-    type: actions.CLOSE_COMP_PROPERTIES
-  })
-}
diff --git a/blocks/eda-frontend/src/redux/actions/index.js b/blocks/eda-frontend/src/redux/actions/index.js
index dcfac0f0..65375ec5 100644
--- a/blocks/eda-frontend/src/redux/actions/index.js
+++ b/blocks/eda-frontend/src/redux/actions/index.js
@@ -1,4 +1,3 @@
 // Actions dispatch to change state variables inside store
 export * from './schematicEditorActions'
-export * from './componentPropertiesActions'
 export * from './netlistActions'
diff --git a/blocks/eda-frontend/src/redux/componentPropertiesSlice.js b/blocks/eda-frontend/src/redux/componentPropertiesSlice.js
new file mode 100644
index 00000000..3f74674f
--- /dev/null
+++ b/blocks/eda-frontend/src/redux/componentPropertiesSlice.js
@@ -0,0 +1,118 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
+
+import api from '../utils/Api'
+import { styleToObject } from '../utils/GalleryUtils'
+
+const initialState = {
+  block: null,
+  name: '',
+  parameter_values: {},
+  errorFields: {},
+  isPropertiesWindowOpen: false,
+  compProperties: [],
+  displayProperties: {},
+  isLoading: false
+}
+
+// Actions for listing stored component properites on double click on component
+export const getCompProperties = createAsyncThunk(
+  'componentProperties/getCompProperties',
+  async (block, { rejectWithValue }) => {
+    const style = styleToObject(block.style).default
+    const url = 'newblockparameters/?block__name=' + style
+    try {
+      const res = await api.get(url)
+      if (res.status === 200) {
+        return res.data
+      }
+      return rejectWithValue(res.data || 'Failed to get component properties')
+    } catch (err) {
+      console.error(err)
+      const res = err.response
+      return rejectWithValue(res.data || 'Failed to get component properties')
+    }
+  })
+
+// Actions for updating entered component properites on clicking set parameters
+export const setCompProperties = createAsyncThunk(
+  'componentProperties/setCompProperties',
+  async ({ block, parameterValues, errorFields }, { rejectWithValue }) => {
+    const style = styleToObject(block.style).default
+    const url = 'setblockparameter'
+    const parameters = Object.values(parameterValues)
+    const data = { block: style, parameters }
+    try {
+      const res = await api.post(url, data)
+      if (res.status === 200) {
+        block.parameter_values = parameterValues
+        block.errorFields = errorFields
+        return {
+          block,
+          parameter_values: parameterValues,
+          errorFields,
+          displayProperties: res.data
+        }
+      }
+      return rejectWithValue(res.data || 'Failed to set component properties')
+    } catch (err) {
+      console.error(err)
+      const res = err.response
+      return rejectWithValue(res.data || 'Failed to set component properties')
+    }
+  })
+
+const componentPropertiesSlice = createSlice({
+  name: 'componentProperties',
+  initialState,
+  reducers: {
+    closeCompProperties: (state) => {
+      state.isPropertiesWindowOpen = false
+    }
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(getCompProperties.pending, (state, action) => {
+        state.isLoading = true
+        state.isPropertiesWindowOpen = true
+        state.compProperties = undefined
+        const block = action.meta.arg
+        state.name = styleToObject(block.style).default
+      })
+      .addCase(getCompProperties.fulfilled, (state, action) => {
+        state.isLoading = false
+        state.isPropertiesWindowOpen = true
+        state.name = action.payload.name
+        state.block = action.payload.block
+        state.parameter_values = action.payload.parameter_values
+        state.errorFields = action.payload.errorFields
+        state.displayProperties = action.payload.displayProperties
+        state.compProperties = action.payload.compProperties
+      })
+      .addCase(getCompProperties.rejected, (state) => {
+        state.isLoading = false
+        state.isPropertiesWindowOpen = false
+      })
+      .addCase(setCompProperties.pending, (state) => {
+        state.isLoading = true
+        state.isPropertiesWindowOpen = true
+      })
+      .addCase(setCompProperties.fulfilled, (state, action) => {
+        state.isLoading = false
+        state.isPropertiesWindowOpen = false
+        state.block = action.payload.block
+        state.parameter_values = action.payload.parameter_values
+        state.errorFields = action.payload.errorFields
+        state.displayProperties = action.payload.displayProperties
+      })
+      .addCase(setCompProperties.rejected, (state) => {
+        state.isLoading = false
+        state.isPropertiesWindowOpen = true
+      })
+  }
+})
+
+export const {
+  closeCompProperties
+} = componentPropertiesSlice.actions
+
+export default componentPropertiesSlice.reducer
diff --git a/blocks/eda-frontend/src/redux/reducers/componentPropertiesReducer.js b/blocks/eda-frontend/src/redux/reducers/componentPropertiesReducer.js
deleted file mode 100644
index 5b3815d0..00000000
--- a/blocks/eda-frontend/src/redux/reducers/componentPropertiesReducer.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import * as actions from '../actions/actions'
-import { editorZoomAct } from '../../components/SchematicEditor/Helper/ToolbarTools'
-
-const InitialState = {
-  block: null,
-  name: '',
-  parameter_values: {},
-  errorFields: {},
-  isPropertiesWindowOpen: false,
-  compProperties: [],
-  displayProperties: {},
-  isLoading: false
-}
-
-export default function componentPropertiesReducer (state = InitialState, action) {
-  switch (action.type) {
-    case actions.LOADING_GET_COMP_PROPERTIES: {
-      return {
-        ...state,
-        name: action.payload.name,
-        isPropertiesWindowOpen: true,
-        compProperties: undefined,
-        isLoading: action.payload.isLoading
-      }
-    }
-
-    case actions.GET_COMP_PROPERTIES: {
-      return {
-        ...state,
-        block: action.payload.block,
-        name: action.payload.name,
-        parameter_values: action.payload.parameter_values,
-        errorFields: action.payload.errorFields,
-        isPropertiesWindowOpen: true,
-        displayProperties: action.payload.displayProperties,
-        compProperties: action.payload.compProperties,
-        isLoading: false
-      }
-    }
-
-    case actions.LOADING_SET_COMP_PROPERTIES: {
-      return {
-        ...state,
-        isPropertiesWindowOpen: true,
-        isLoading: action.payload.isLoading
-      }
-    }
-
-    case actions.SET_COMP_PROPERTIES: {
-      return {
-        ...state,
-        block: action.payload.block,
-        parameter_values: action.payload.parameter_values,
-        errorFields: action.payload.errorFields,
-        isPropertiesWindowOpen: false,
-        displayProperties: action.payload.displayProperties,
-        isLoading: false
-      }
-    }
-
-    case actions.CLOSE_COMP_PROPERTIES: {
-      editorZoomAct()
-      return {
-        ...state,
-        isPropertiesWindowOpen: false
-      }
-    }
-
-    default:
-      return state
-  }
-}
diff --git a/blocks/eda-frontend/src/redux/reducers/index.js b/blocks/eda-frontend/src/redux/reducers/index.js
index bb3fc882..f0c87843 100644
--- a/blocks/eda-frontend/src/redux/reducers/index.js
+++ b/blocks/eda-frontend/src/redux/reducers/index.js
@@ -1,9 +1,7 @@
 import { combineReducers } from 'redux'
 import schematicEditorReducer from './schematicEditorReducer'
-import componentPropertiesReducer from './componentPropertiesReducer'
 import netlistReducer from './netlistReducer'
 export default combineReducers({
   schematicEditorReducer,
-  componentPropertiesReducer,
   netlistReducer
 })
diff --git a/blocks/eda-frontend/src/redux/store.js b/blocks/eda-frontend/src/redux/store.js
index c504f79d..c13ac5a6 100644
--- a/blocks/eda-frontend/src/redux/store.js
+++ b/blocks/eda-frontend/src/redux/store.js
@@ -1,5 +1,6 @@
 import { configureStore } from '@reduxjs/toolkit'
 import authReducer from './authSlice'
+import componentPropertiesReducer from './componentPropertiesSlice'
 import dashboardReducer from './dashboardSlice'
 import saveSchematicReducer from './saveSchematicSlice'
 import simulationReducer from './simulationSlice'
@@ -7,6 +8,7 @@ import simulationReducer from './simulationSlice'
 const store = configureStore({
   reducer: {
     auth: authReducer,
+    componentProperties: componentPropertiesReducer,
     dashboard: dashboardReducer,
     saveSchematic: saveSchematicReducer,
     simulation: simulationReducer