From 2c887c547af25d043f997a882cd3ecba4b0c047d Mon Sep 17 00:00:00 2001 From: Piyush Date: Thu, 16 May 2024 20:46:05 +0530 Subject: [PATCH 1/3] refactor collections reducers and actions using redux toolkit --- client/constants.js | 6 --- client/modules/IDE/actions/collections.js | 32 +++++--------- client/modules/IDE/reducers/collections.js | 49 +++++++++++----------- 3 files changed, 35 insertions(+), 52 deletions(-) diff --git a/client/constants.js b/client/constants.js index 608a31a0f9..c5678b161d 100644 --- a/client/constants.js +++ b/client/constants.js @@ -34,13 +34,7 @@ export const RESET_PROJECT = 'RESET_PROJECT'; export const SET_PROJECT = 'SET_PROJECT'; export const SET_PROJECTS = 'SET_PROJECTS'; -export const SET_COLLECTIONS = 'SET_COLLECTIONS'; export const CREATE_COLLECTION = 'CREATED_COLLECTION'; -export const DELETE_COLLECTION = 'DELETE_COLLECTION'; - -export const ADD_TO_COLLECTION = 'ADD_TO_COLLECTION'; -export const REMOVE_FROM_COLLECTION = 'REMOVE_FROM_COLLECTION'; -export const EDIT_COLLECTION = 'EDIT_COLLECTION'; export const DELETE_PROJECT = 'DELETE_PROJECT'; diff --git a/client/modules/IDE/actions/collections.js b/client/modules/IDE/actions/collections.js index 32790e681e..5c0b01d41a 100644 --- a/client/modules/IDE/actions/collections.js +++ b/client/modules/IDE/actions/collections.js @@ -4,6 +4,12 @@ import * as ActionTypes from '../../../constants'; import { startLoader, stopLoader } from '../reducers/loading'; import { setToastText, showToast } from './toast'; +import { + setCollections, + delCollection, + updateCollection +} from '../reducers/collections'; + const TOAST_DISPLAY_TIME_MS = 1500; export function getCollections(username) { @@ -18,10 +24,7 @@ export function getCollections(username) { return apiClient .get(url) .then((response) => { - dispatch({ - type: ActionTypes.SET_COLLECTIONS, - collections: response.data - }); + dispatch(setCollections(response.data)); dispatch(stopLoader()); }) .catch((error) => { @@ -72,10 +75,7 @@ export function addToCollection(collectionId, projectId) { return apiClient .post(url) .then((response) => { - dispatch({ - type: ActionTypes.ADD_TO_COLLECTION, - payload: response.data - }); + dispatch(updateCollection(response.data)); dispatch(stopLoader()); const collectionName = response.data.name; @@ -102,10 +102,7 @@ export function removeFromCollection(collectionId, projectId) { return apiClient .delete(url) .then((response) => { - dispatch({ - type: ActionTypes.REMOVE_FROM_COLLECTION, - payload: response.data - }); + dispatch(updateCollection(response.data)); dispatch(stopLoader()); const collectionName = response.data.name; @@ -131,10 +128,7 @@ export function editCollection(collectionId, { name, description }) { return apiClient .patch(url, { name, description }) .then((response) => { - dispatch({ - type: ActionTypes.EDIT_COLLECTION, - payload: response.data - }); + dispatch(updateCollection(response.data)); return response.data; }) .catch((error) => { @@ -152,11 +146,7 @@ export function deleteCollection(collectionId) { return apiClient .delete(url) .then((response) => { - dispatch({ - type: ActionTypes.DELETE_COLLECTION, - payload: response.data, - collectionId - }); + dispatch(deleteCollection(response.data, collectionId)); return response.data; }) .catch((error) => { diff --git a/client/modules/IDE/reducers/collections.js b/client/modules/IDE/reducers/collections.js index c7017c29a7..b909635e61 100644 --- a/client/modules/IDE/reducers/collections.js +++ b/client/modules/IDE/reducers/collections.js @@ -1,28 +1,27 @@ -import * as ActionTypes from '../../../constants'; +import { createSlice } from '@reduxjs/toolkit'; -const sketches = (state = [], action) => { - switch (action.type) { - case ActionTypes.SET_COLLECTIONS: - return action.collections; - - case ActionTypes.DELETE_COLLECTION: - return state.filter(({ id }) => action.collectionId !== id); - - // The API returns the complete new edited collection - // with any items added or removed - case ActionTypes.EDIT_COLLECTION: - case ActionTypes.ADD_TO_COLLECTION: - case ActionTypes.REMOVE_FROM_COLLECTION: - return state.map((collection) => { - if (collection.id === action.payload.id) { - return action.payload; - } - - return collection; - }); - default: - return state; +const sketchesSlice = createSlice({ + name: 'sketches', + initialState: [], + reducers: { + setCollections: (state, action) => action.payload, + delCollection: (state, action) => { + const { collectionId } = action.payload; + return state.filter((collection) => collection.id !== collectionId); + }, + updateCollection: (state, action) => { + const updatedCollection = action.payload; + return state.map((collection) => + collection.id === updatedCollection.id ? updatedCollection : collection + ); + } } -}; +}); + +export const { + setCollections, + delCollection, + updateCollection +} = sketchesSlice.actions; -export default sketches; +export default sketchesSlice.reducer; From d11ed164a4490b86cc5fdd48e2f85d3448a0607d Mon Sep 17 00:00:00 2001 From: Piyush Date: Fri, 14 Jun 2024 01:05:01 +0530 Subject: [PATCH 2/3] dispatch delCollection instead of deleteCollection --- client/modules/IDE/actions/collections.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/modules/IDE/actions/collections.js b/client/modules/IDE/actions/collections.js index 5c0b01d41a..785b84e150 100644 --- a/client/modules/IDE/actions/collections.js +++ b/client/modules/IDE/actions/collections.js @@ -146,7 +146,7 @@ export function deleteCollection(collectionId) { return apiClient .delete(url) .then((response) => { - dispatch(deleteCollection(response.data, collectionId)); + dispatch(delCollection(response.data, collectionId)); return response.data; }) .catch((error) => { From 79bf41f17f0016a9cfca9e76b4ca4e0604243e32 Mon Sep 17 00:00:00 2001 From: Piyush Date: Sun, 16 Jun 2024 23:25:57 +0530 Subject: [PATCH 3/3] removed the second argument --- client/modules/IDE/actions/collections.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/modules/IDE/actions/collections.js b/client/modules/IDE/actions/collections.js index 785b84e150..d2f66c9d7d 100644 --- a/client/modules/IDE/actions/collections.js +++ b/client/modules/IDE/actions/collections.js @@ -146,7 +146,7 @@ export function deleteCollection(collectionId) { return apiClient .delete(url) .then((response) => { - dispatch(delCollection(response.data, collectionId)); + dispatch(delCollection(collectionId)); return response.data; }) .catch((error) => {