convert dashboard action/reducer to slice

14 files changed, 135 insertions, 111 deletions

diff --git a/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js b/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js
index a0bc92e9..5940ac68 100644
--- a/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js
+++ b/blocks/eda-frontend/src/components/Dashboard/DashboardSidebar.js
@@ -4,7 +4,7 @@ import { Link as RouterLink } from 'react-router-dom'
 import { makeStyles } from '@material-ui/core/styles'
 import { deepPurple } from '@material-ui/core/colors'
 import { useDispatch, useSelector } from 'react-redux'
-import { fetchSchematics } from '../../redux/actions/index'
+import { fetchSchematics } from '../../redux/dashboardSlice'
 import { getUppercaseInitial } from '../../utils/GalleryUtils'
 
 const useStyles = makeStyles((theme) => ({
@@ -40,7 +40,7 @@ const useStyles = makeStyles((theme) => ({
 export default function DashSidebar (props) {
   const classes = useStyles()
   const user = useSelector(state => state.auth.user)
-  const schematics = useSelector(state => state.dashboardReducer.schematics)
+  const schematics = useSelector(state => state.dashboard.schematics)
 
   const dispatch = useDispatch()
 
diff --git a/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js b/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js
index 7b1fd019..06b06b4c 100644
--- a/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js
+++ b/blocks/eda-frontend/src/components/Dashboard/ProgressPanel.js
@@ -5,7 +5,7 @@ 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/dashboardSlice'
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -56,7 +56,7 @@ export default function ProgressPanel () {
     setValue(newValue)
   }
 
-  const schematics = useSelector(state => state.dashboardReducer.schematics)
+  const schematics = useSelector(state => state.dashboard.schematics)
 
   const dispatch = useDispatch()
 
diff --git a/blocks/eda-frontend/src/components/Dashboard/SchematicCard.js b/blocks/eda-frontend/src/components/Dashboard/SchematicCard.js
index b3c2f085..c3700903 100644
--- a/blocks/eda-frontend/src/components/Dashboard/SchematicCard.js
+++ b/blocks/eda-frontend/src/components/Dashboard/SchematicCard.js
@@ -6,7 +6,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import { Link as RouterLink } from 'react-router-dom'
 import DeleteIcon from '@material-ui/icons/Delete'
 import { useDispatch } from 'react-redux'
-import { deleteSchematic } from '../../redux/actions/index'
+import { deleteSchematic } from '../../redux/dashboardSlice'
 import MuiAlert from '@material-ui/lab/Alert'
 import { getDate } from '../../utils/GalleryUtils'
 
diff --git a/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js b/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js
index 75562afb..f68b8c4c 100644
--- a/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js
+++ b/blocks/eda-frontend/src/components/Dashboard/SchematicsList.js
@@ -5,7 +5,7 @@ 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/dashboardSlice'
 
 const useStyles = makeStyles({
   mainHead: {
@@ -56,7 +56,7 @@ function MainCard () {
 export default function SchematicsList () {
   const classes = useStyles()
   const user = useSelector(state => state.auth.user)
-  const schematics = useSelector(state => state.dashboardReducer.schematics)
+  const schematics = useSelector(state => state.dashboard.schematics)
 
   const dispatch = useDispatch()
 
diff --git a/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js b/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js
index bcf7b567..b2fdb5ef 100644
--- a/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js
+++ b/blocks/eda-frontend/src/components/SchematicEditor/ToolbarExtension.js
@@ -36,7 +36,8 @@ import {
 import { makeStyles } from '@material-ui/core/styles'
 import CloseIcon from '@material-ui/icons/Close'
 import { useSelector, useDispatch } from 'react-redux'
-import { fetchSchematics, fetchSchematic, fetchDiagram, fetchGallery, setSchScriptDump } from '../../redux/actions/index'
+import { fetchSchematic, fetchDiagram, setSchScriptDump } from '../../redux/actions/index'
+import { fetchSchematics, fetchGallery } from '../../redux/dashboardSlice'
 import { setScriptTaskId } from '../../redux/simulationSlice'
 import { blue } from '@material-ui/core/colors'
 import { getDateTime as getDate, getUppercaseInitial, saveToFile } from '../../utils/GalleryUtils'
@@ -524,8 +525,8 @@ export function OpenSchDialog (props) {
   const details = useSelector(state => state.saveSchematicReducer.details)
   const isAuthenticated = useSelector(state => state.auth.isAuthenticated)
   const user = useSelector(state => state.auth.user)
-  const schematics = useSelector(state => state.dashboardReducer.schematics)
-  const GallerySchSample = useSelector(state => state.dashboardReducer.gallery)
+  const schematics = useSelector(state => state.dashboard.schematics)
+  const GallerySchSample = useSelector(state => state.dashboard.gallery)
 
   const dispatch = useDispatch()
 
diff --git a/blocks/eda-frontend/src/pages/Gallery.js b/blocks/eda-frontend/src/pages/Gallery.js
index f8be9fb0..a37eb907 100644
--- a/blocks/eda-frontend/src/pages/Gallery.js
+++ b/blocks/eda-frontend/src/pages/Gallery.js
@@ -6,7 +6,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import { Link as RouterLink } from 'react-router-dom'
 import { useDispatch, useSelector } from 'react-redux'
 import api from '../utils/Api'
-import { fetchGallery } from '../redux/actions/index'
+import { fetchGallery } from '../redux/dashboardSlice'
 
 const useStyles = makeStyles((theme) => ({
   mainHead: {
@@ -196,7 +196,7 @@ SearchComponent.propTypes = {
 
 const Gallery = () => {
   const classes = useStyles()
-  const GallerySchSample = useSelector(state => state.dashboardReducer.gallery)
+  const GallerySchSample = useSelector(state => state.dashboard.gallery)
 
   // State to store the selected book ID
   const [selectedBook, setSelectedBook] = useState('')
diff --git a/blocks/eda-frontend/src/redux/actions/actions.js b/blocks/eda-frontend/src/redux/actions/actions.js
index 85bc061e..87267226 100644
--- a/blocks/eda-frontend/src/redux/actions/actions.js
+++ b/blocks/eda-frontend/src/redux/actions/actions.js
@@ -30,6 +30,4 @@ export const LOAD_GALLERY = 'LOAD_GALLERY'
 export const SET_SCH_SCRIPT_DUMP = 'SET_SCH_SCRIPT_DUMP'
 
 // Action for fetching on-cloud saved schematics for authenticated user to display in dashboard
-export const FETCH_SCHEMATICS = 'FETCH_SCHEMATICS'
-export const FETCH_GALLERY = 'FETCH_GALLERY'
 export const FETCH_DIAGRAM = 'FETCH_DIAGRAM'
diff --git a/blocks/eda-frontend/src/redux/actions/dashboardActions.js b/blocks/eda-frontend/src/redux/actions/dashboardActions.js
deleted file mode 100644
index 9d47b289..00000000
--- a/blocks/eda-frontend/src/redux/actions/dashboardActions.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import api from '../../utils/Api'
-import * as actions from './actions'
-
-// Api call for listing saved schematic to display on dashboard
-export const fetchSchematics = () => (dispatch, getState) => {
-  const token = getState().auth.token
-
-  const config = {
-    headers: {
-      'Content-Type': 'application/json'
-    }
-  }
-
-  if (token) {
-    config.headers.Authorization = `Token ${token}`
-  }
-
-  api.get('save/list', config)
-    .then(
-      (res) => {
-        dispatch({
-          type: actions.FETCH_SCHEMATICS,
-          payload: res.data
-        })
-      }
-    )
-    .catch((err) => { console.error(err) })
-}
-
-export const fetchGallery = () => (dispatch) => {
-  api.get('save/gallery')
-    .then(
-      (res) => {
-        dispatch({
-          type: actions.FETCH_GALLERY,
-          payload: res.data
-        })
-      }
-    )
-    .catch((err) => { console.error(err) })
-}
-
-// Api call for deleting saved schematic
-export const deleteSchematic = (saveId) => (dispatch, getState) => {
-  const token = getState().auth.token
-
-  const config = {
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded'
-    }
-  }
-
-  if (token) {
-    config.headers.Authorization = `Token ${token}`
-  }
-
-  api.delete('save/diagram/' + saveId, config)
-    .then(
-      (res) => {
-        if (res.status === 200) {
-          dispatch(fetchSchematics())
-        }
-      }
-    )
-    .catch((err) => { console.error(err) })
-}
diff --git a/blocks/eda-frontend/src/redux/actions/index.js b/blocks/eda-frontend/src/redux/actions/index.js
index 7fbee38a..bd55df33 100644
--- a/blocks/eda-frontend/src/redux/actions/index.js
+++ b/blocks/eda-frontend/src/redux/actions/index.js
@@ -3,4 +3,3 @@ export * from './schematicEditorActions'
 export * from './componentPropertiesActions'
 export * from './netlistActions'
 export * from './saveSchematicActions'
-export * from './dashboardActions'
diff --git a/blocks/eda-frontend/src/redux/dashboardSlice.js b/blocks/eda-frontend/src/redux/dashboardSlice.js
new file mode 100644
index 00000000..c1b49046
--- /dev/null
+++ b/blocks/eda-frontend/src/redux/dashboardSlice.js
@@ -0,0 +1,112 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
+
+import api from '../utils/Api'
+
+const initialState = {
+  isLoading: false,
+  schematics: [],
+  gallery: []
+}
+
+// Api call for listing saved schematic to display on dashboard
+export const fetchSchematics = createAsyncThunk(
+  'dashboard/fetchSchematics',
+  async (_, { getState, rejectWithValue }) => {
+    const token = getState().auth.token
+    if (!token) return rejectWithValue('No token found')
+
+    const config = {
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Token ${token}`
+      }
+    }
+
+    try {
+      const res = await api.get('save/list', config)
+      if (res.status === 200) {
+        return res.data
+      }
+
+      return rejectWithValue('No data found')
+    } catch (err) {
+      console.error(err)
+      return rejectWithValue('No data found')
+    }
+  })
+
+export const fetchGallery = createAsyncThunk(
+  'dashboard/fetchGallery',
+  async (_, { rejectWithValue }) => {
+    try {
+      const res = await api.get('save/gallery')
+      if (res.status === 200) {
+        return res.data
+      }
+
+      return rejectWithValue('No data found')
+    } catch (err) {
+      console.error(err)
+      return rejectWithValue('No data found')
+    }
+  })
+
+// Api call for deleting saved schematic
+export const deleteSchematic = createAsyncThunk(
+  'dashboard/deleteSchematic',
+  async (saveId, { getState, rejectWithValue, dispatch }) => {
+    const token = getState().auth.token
+    if (!token) return rejectWithValue('No token found')
+
+    const config = {
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Token ${token}`
+      }
+    }
+
+    try {
+      const res = await api.delete('save/diagram/' + saveId, config)
+      if (res.status === 200) {
+        await dispatch(fetchSchematics())
+        return saveId
+      }
+
+      return rejectWithValue('No data found')
+    } catch (err) {
+      console.error(err)
+      return rejectWithValue('No data found')
+    }
+  })
+
+const dashboardSlice = createSlice({
+  name: 'dashboard',
+  initialState,
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchSchematics.pending, (state) => {
+        state.isLoading = true
+      })
+      .addCase(fetchSchematics.fulfilled, (state, action) => {
+        state.isLoading = false
+        state.schematics = action.payload
+      })
+      .addCase(fetchSchematics.rejected, (state) => {
+        state.isLoading = false
+        state.schematics = []
+      })
+      .addCase(fetchGallery.pending, (state) => {
+        state.isLoading = true
+      })
+      .addCase(fetchGallery.fulfilled, (state, action) => {
+        state.isLoading = false
+        state.gallery = action.payload
+      })
+      .addCase(fetchGallery.rejected, (state) => {
+        state.isLoading = false
+        state.gallery = []
+      })
+  }
+})
+
+export default dashboardSlice.reducer
diff --git a/blocks/eda-frontend/src/redux/reducers/dashboardReducer.js b/blocks/eda-frontend/src/redux/reducers/dashboardReducer.js
deleted file mode 100644
index b347f8da..00000000
--- a/blocks/eda-frontend/src/redux/reducers/dashboardReducer.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as actions from '../actions/actions'
-
-const InitialState = {
-  schematics: [],
-  gallery: []
-}
-
-export default function dashboardReducer (state = InitialState, action) {
-  switch (action.type) {
-    case actions.FETCH_SCHEMATICS: {
-      return {
-        ...state,
-        schematics: action.payload
-      }
-    }
-
-    case actions.FETCH_GALLERY: {
-      return {
-        ...state,
-        gallery: action.payload
-      }
-    }
-
-    default:
-      return state
-  }
-}
diff --git a/blocks/eda-frontend/src/redux/reducers/index.js b/blocks/eda-frontend/src/redux/reducers/index.js
index 660caf78..e8474bb2 100644
--- a/blocks/eda-frontend/src/redux/reducers/index.js
+++ b/blocks/eda-frontend/src/redux/reducers/index.js
@@ -3,11 +3,9 @@ import schematicEditorReducer from './schematicEditorReducer'
 import componentPropertiesReducer from './componentPropertiesReducer'
 import netlistReducer from './netlistReducer'
 import saveSchematicReducer from './saveSchematicReducer'
-import dashboardReducer from './dashboardReducer'
 export default combineReducers({
   schematicEditorReducer,
   componentPropertiesReducer,
   netlistReducer,
-  saveSchematicReducer,
-  dashboardReducer
+  saveSchematicReducer
 })
diff --git a/blocks/eda-frontend/src/redux/store.js b/blocks/eda-frontend/src/redux/store.js
index d2c2c9c8..4e16a2a1 100644
--- a/blocks/eda-frontend/src/redux/store.js
+++ b/blocks/eda-frontend/src/redux/store.js
@@ -1,10 +1,12 @@
 import { configureStore } from '@reduxjs/toolkit'
 import authReducer from './authSlice'
+import dashboardReducer from './dashboardSlice'
 import simulationReducer from './simulationSlice'
 
 const store = configureStore({
   reducer: {
     auth: authReducer,
+    dashboard: dashboardReducer,
     simulation: simulationReducer
   },
   middleware: (getDefaultMiddleware) => getDefaultMiddleware()
diff --git a/blocks/eda-frontend/src/utils/GalleryUtils.js b/blocks/eda-frontend/src/utils/GalleryUtils.js
index def4c512..d7fe871c 100644
--- a/blocks/eda-frontend/src/utils/GalleryUtils.js
+++ b/blocks/eda-frontend/src/utils/GalleryUtils.js
@@ -192,3 +192,10 @@ export const getUppercaseInitial = (str) => {
   const char = match ? match[0] : str.charAt(0)
   return char.toUpperCase()
 }
+
+export const removeBySaveIdInPlace = (schematics, saveId) => {
+  const index = schematics.findIndex(item => item.save_id === saveId)
+  if (index !== -1) {
+    schematics.splice(index, 1)
+  }
+}