convert schematicEditor action/reducer to slice

9 files changed, 178 insertions, 166 deletions

diff --git a/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js b/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js
index c6b42863..f028a649 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/ComponentSidebar.js
@@ -12,7 +12,7 @@ import CloseIcon from '@material-ui/icons/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/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)
@@ -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()
 
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js b/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
index c2386016..8dcbf739 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/SchematicToolbar.js
@@ -33,9 +33,9 @@ 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 } from '../../redux/actions/index'
 import { closeCompProperties } from '../../redux/componentPropertiesSlice'
 import { setSchXmlData, saveSchematic, openLocalSch, setLoadingDiagram } from '../../redux/saveSchematicSlice'
+import { toggleSimulate } from '../../redux/schematicEditorSlice'
 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 c40b1b6d..44ca1340 100644
--- a/blocks/eda-frontend/src/redux/actions/actions.js
+++ b/blocks/eda-frontend/src/redux/actions/actions.js
@@ -1,10 +1,3 @@
-// Actions for schematic editor
-export const COMPONENT_IMAGES = 'COMPONENT_IMAGES'
-export const FETCH_LIBRARIES = 'FETCH_LIBRARIES'
-export const TOGGLE_COLLAPSE = 'TOGGLE_COLLAPSE'
-export const FETCH_COMPONENTS = 'FETCH_COMPONENTS'
-export const TOGGLE_SIMULATE = 'TOGGLE_SIMULATE'
-
 // 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/index.js b/blocks/eda-frontend/src/redux/actions/index.js
index 65375ec5..10284a93 100644
--- a/blocks/eda-frontend/src/redux/actions/index.js
+++ b/blocks/eda-frontend/src/redux/actions/index.js
@@ -1,3 +1,2 @@
 // Actions dispatch to change state variables inside store
-export * from './schematicEditorActions'
 export * from './netlistActions'
diff --git a/blocks/eda-frontend/src/redux/actions/schematicEditorActions.js b/blocks/eda-frontend/src/redux/actions/schematicEditorActions.js
deleted file mode 100644
index 00fc1e1e..00000000
--- a/blocks/eda-frontend/src/redux/actions/schematicEditorActions.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import api from '../../utils/Api'
-import * as actions from './actions'
-
-// Api call for fetching component library list
-export const fetchLibraries = () => (dispatch) => {
-// SAMPLE Response from API
-// [
-  //  {
-  //   "id": 1
-  //   "name": "Commonly Used Blocks",
-  //   "sort_order": 1
-  // },
-// ] -- Multiple dicts in array
-  api.get('categories/')
-    .then(
-      (res) => {
-        dispatch({
-          type: actions.FETCH_LIBRARIES,
-          payload: res.data
-        })
-      }
-    )
-    .catch((err) => { console.error(err) })
-}
-
-// Api call for fetching components under specified library id
-export const fetchComponents = (libraryId) => (dispatch) => {
-// SAMPLE Response from API
-//   [
-  // {
-  //   "id": 1,
-  //   "blocktype": 1,
-  //   "name": "LOGICAL_OP",
-  //   "categories": [ 1 ],
-  //   "initial_explicit_input_ports": 2,
-  //   "initial_implicit_input_ports": 0,
-  //   "initial_explicit_output_ports": 1,
-  //   "initial_implicit_output_ports": 0,
-  //   "initial_display_parameter": "AND",
-  //   "p000_value_initial": "AND",
-  //   "p001_value_initial": "AND",
-  //   "p002_value_initial": "AND",
-  //   "p003_value_initial": "AND",
-  //   "p004_value_initial": null,
-  //   ...
-  //   "p039_value_initial": null,
-  // },
-// ] -- Multiple dicts in array
-  const url = 'newblocks/?categories=' + parseInt(libraryId)
-  api.get(url)
-    .then(
-      (res) => {
-        dispatch({
-          type: actions.FETCH_COMPONENTS,
-          payload: { components: res.data, id: libraryId }
-        })
-      }
-    )
-    .catch((err) => { console.error(err) })
-}
-
-// Api call for fetching component image names
-export const fetchComponentImages = () => (dispatch) => {
-// SAMPLE Response from API
-//   [
-  //   "palettes/LOGICAL_OP.png",
-  //   ...
-  //   "palettes/SUPER_f.png"
-// ] -- Multiple strings in array
-  const url = 'block_images'
-  api.get(url)
-    .then(
-      (res) => {
-        dispatch({
-          type: actions.COMPONENT_IMAGES,
-          payload: { component_images: res.data }
-        })
-      }
-    )
-    .catch((err) => { console.error(err) })
-}
-
-// Action to keep only one component list dropdown open at a time
-export const toggleCollapse = (id) => (dispatch) => {
-  dispatch({
-    type: actions.TOGGLE_COLLAPSE,
-    payload: { id }
-  })
-}
-
-// Action to hide components list to display simulation parameters
-export const toggleSimulate = () => (dispatch) => {
-  dispatch({
-    type: actions.TOGGLE_SIMULATE
-  })
-}
diff --git a/blocks/eda-frontend/src/redux/reducers/index.js b/blocks/eda-frontend/src/redux/reducers/index.js
index f0c87843..4217a528 100644
--- a/blocks/eda-frontend/src/redux/reducers/index.js
+++ b/blocks/eda-frontend/src/redux/reducers/index.js
@@ -1,7 +1,5 @@
 import { combineReducers } from 'redux'
-import schematicEditorReducer from './schematicEditorReducer'
 import netlistReducer from './netlistReducer'
 export default combineReducers({
-  schematicEditorReducer,
   netlistReducer
 })
diff --git a/blocks/eda-frontend/src/redux/reducers/schematicEditorReducer.js b/blocks/eda-frontend/src/redux/reducers/schematicEditorReducer.js
deleted file mode 100644
index 2bb7ec76..00000000
--- a/blocks/eda-frontend/src/redux/reducers/schematicEditorReducer.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as actions from '../actions/actions'
-
-const InitialState = {
-  isSimulate: false,
-  libraries: [],
-  collapse: {},
-  components: {}
-}
-
-export default function schematicEditorReducer (state = InitialState, action) {
-  switch (action.type) {
-    case actions.FETCH_LIBRARIES: {
-    // Add 'open' parameter to track open/close state of collapse
-      const collapse = {}
-      const components = {}
-      action.payload.forEach(element => {
-        collapse[element.id] = false
-        components[element.id] = []
-      })
-      return { ...state, libraries: action.payload, collapse, components }
-    }
-
-    case actions.TOGGLE_COLLAPSE: {
-      const existingState = state.collapse[action.payload.id]
-      const newCollapse = Object.keys(state.collapse).reduce(function (accObj, parseObj) {
-        accObj[parseObj] = false
-        return accObj
-      }, {})
-      newCollapse[action.payload.id] = !existingState
-      Object.assign(state.collapse, newCollapse)
-      return { ...state, collapse: { ...state.collapse, newCollapse } }
-    }
-
-    case actions.FETCH_COMPONENTS: {
-      const newComponents = state.components
-      newComponents[action.payload.id] = action.payload.components
-      Object.assign(state.components, newComponents)
-      return { ...state, components: { ...state.components, newComponents } }
-    }
-
-    case actions.COMPONENT_IMAGES: {
-      const componentImages = action.payload.component_images
-      return { ...state, component_images: componentImages }
-    }
-
-    case actions.TOGGLE_SIMULATE: {
-      return { ...state, isSimulate: !state.isSimulate }
-    }
-
-    default:
-      return state
-  }
-}
diff --git a/blocks/eda-frontend/src/redux/schematicEditorSlice.js b/blocks/eda-frontend/src/redux/schematicEditorSlice.js
new file mode 100644
index 00000000..1e4380ed
--- /dev/null
+++ b/blocks/eda-frontend/src/redux/schematicEditorSlice.js
@@ -0,0 +1,169 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
+
+import api from '../utils/Api'
+
+const initialState = {
+  isLoading: false,
+  isSimulate: false,
+  libraries: [],
+  collapse: {},
+  components: {},
+  component_images: []
+}
+
+// Api call for fetching component library list
+export const fetchLibraries = createAsyncThunk(
+  'schematicEditor/fetchLibraries',
+  async (_, { rejectWithValue }) => {
+    // SAMPLE Response from API
+    // [
+    //  {
+    //   "id": 1
+    //   "name": "Commonly Used Blocks",
+    //   "sort_order": 1
+    // },
+    // ] -- Multiple dicts in array
+    try {
+      const res = await api.get('categories/')
+      if (res.status === 200) {
+        return res.data
+      }
+      return rejectWithValue(res.data || 'Failed to load libraries')
+    } catch (err) {
+      console.error(err)
+      const res = err.response
+      return rejectWithValue(res.data || 'Failed to load libraries')
+    }
+  })
+
+// Api call for fetching components under specified library id
+export const fetchComponents = createAsyncThunk(
+  'schematicEditor/fetchComponents',
+  async (libraryId, { rejectWithValue }) => {
+    // SAMPLE Response from API
+    //   [
+    // {
+    //   "id": 1,
+    //   "blocktype": 1,
+    //   "name": "LOGICAL_OP",
+    //   "categories": [ 1 ],
+    //   "initial_explicit_input_ports": 2,
+    //   "initial_implicit_input_ports": 0,
+    //   "initial_explicit_output_ports": 1,
+    //   "initial_implicit_output_ports": 0,
+    //   "initial_display_parameter": "AND",
+    //   "p000_value_initial": "AND",
+    //   "p001_value_initial": "AND",
+    //   "p002_value_initial": "AND",
+    //   "p003_value_initial": "AND",
+    //   "p004_value_initial": null,
+    //   ...
+    //   "p039_value_initial": null,
+    // },
+    // ] -- Multiple dicts in array
+    const url = 'newblocks/?categories=' + parseInt(libraryId)
+    try {
+      const res = await api.get(url)
+      if (res.status === 200) {
+        return { components: res.data, id: libraryId }
+      }
+      return rejectWithValue(res.data || 'Failed to load blocks')
+    } catch (err) {
+      console.error(err)
+      const res = err.response
+      return rejectWithValue(res.data || 'Failed to load blocks')
+    }
+  })
+
+// Api call for fetching component image names
+export const fetchComponentImages = createAsyncThunk(
+  'schematicEditor/fetchComponentImages',
+  async (_, { rejectWithValue }) => {
+    // SAMPLE Response from API
+    //   [
+    //   "palettes/LOGICAL_OP.png",
+    //   ...
+    //   "palettes/SUPER_f.png"
+    // ] -- Multiple strings in array
+    const url = 'block_images'
+    try {
+      const res = await api.get(url)
+      if (res.status === 200) {
+        return res.data
+      }
+      return rejectWithValue(res.data || 'Failed to load block images')
+    } catch (err) {
+      console.error(err)
+      const res = err.response
+      return rejectWithValue(res.data || 'Failed to load block images')
+    }
+  })
+
+const schematicEditorSlice = createSlice({
+  name: 'schematicEditor',
+  initialState,
+  reducers: {
+    toggleCollapse: (state, action) => {
+      const existingState = state.collapse[action.payload.id]
+      Object.keys(state.collapse).forEach((key) => {
+        state.collapse[key] = false
+      })
+      state.collapse[action.payload.id] = !existingState
+    },
+    toggleSimulate: (state) => {
+      state.isSimulate = !state.isSimulate
+    }
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchLibraries.pending, (state) => {
+        state.isLoading = true
+      })
+      .addCase(fetchLibraries.fulfilled, (state, action) => {
+        // Add 'open' parameter to track open/close state of collapse
+        state.isLoading = false
+        const collapse = {}
+        const components = {}
+        action.payload.forEach(element => {
+          collapse[element.id] = false
+          components[element.id] = []
+        })
+        state.libraries = action.payload
+        state.collapse = collapse
+        state.components = components
+      })
+      .addCase(fetchLibraries.rejected, (state) => {
+        state.isLoading = false
+        state.libraries = {}
+        state.collapse = {}
+        state.components = {}
+      })
+      .addCase(fetchComponents.pending, (state) => {
+        state.isLoading = true
+      })
+      .addCase(fetchComponents.fulfilled, (state, action) => {
+        state.isLoading = false
+        state.components[action.payload.id] = action.payload.components
+      })
+      .addCase(fetchComponents.rejected, (state) => {
+        state.isLoading = false
+      })
+      .addCase(fetchComponentImages.pending, (state) => {
+        state.isLoading = true
+      })
+      .addCase(fetchComponentImages.fulfilled, (state, action) => {
+        state.isLoading = false
+        state.component_images = action.payload
+      })
+      .addCase(fetchComponentImages.rejected, (state) => {
+        state.isLoading = false
+      })
+  }
+})
+
+export const {
+  toggleCollapse,
+  toggleSimulate
+} = schematicEditorSlice.actions
+
+export default schematicEditorSlice.reducer
diff --git a/blocks/eda-frontend/src/redux/store.js b/blocks/eda-frontend/src/redux/store.js
index c13ac5a6..b5975920 100644
--- a/blocks/eda-frontend/src/redux/store.js
+++ b/blocks/eda-frontend/src/redux/store.js
@@ -3,6 +3,7 @@ import authReducer from './authSlice'
 import componentPropertiesReducer from './componentPropertiesSlice'
 import dashboardReducer from './dashboardSlice'
 import saveSchematicReducer from './saveSchematicSlice'
+import schematicEditorReducer from './schematicEditorSlice'
 import simulationReducer from './simulationSlice'
 
 const store = configureStore({
@@ -11,6 +12,7 @@ const store = configureStore({
     componentProperties: componentPropertiesReducer,
     dashboard: dashboardReducer,
     saveSchematic: saveSchematicReducer,
+    schematicEditor: schematicEditorReducer,
     simulation: simulationReducer
   },
   middleware: (getDefaultMiddleware) => getDefaultMiddleware()