refactor collections reducers and actions using redux toolkit

Author: PiyushChandra17

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';
 

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) => {

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;