diff options
author | Sunil Shetye | 2025-04-03 20:52:52 +0530 |
---|---|---|
committer | Sunil Shetye | 2025-04-07 15:38:16 +0530 |
commit | 2ffd1bc5bc6a38348fd495490facbd5bc0a6f09e (patch) | |
tree | 953fb9f57e2bb135b0f0727355e91fd507a6ebfe | |
parent | ee5f5939ec755901b056bb39a3afa481861c8906 (diff) | |
download | Common-Interface-Project-2ffd1bc5bc6a38348fd495490facbd5bc0a6f09e.tar.gz Common-Interface-Project-2ffd1bc5bc6a38348fd495490facbd5bc0a6f09e.tar.bz2 Common-Interface-Project-2ffd1bc5bc6a38348fd495490facbd5bc0a6f09e.zip |
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() |