refactor-projects-reducers-actions-rtk

client/constants.js

@@ -24,15 +24,13 @@ export const API_KEY_CREATED = 'API_KEY_CREATED';
 export const API_KEY_REMOVED = 'API_KEY_REMOVED';
 
 export const SET_PROJECT_NAME = 'SET_PROJECT_NAME';
-export const RENAME_PROJECT = 'RENAME_PROJECT';
 
 export const PROJECT_SAVE_SUCCESS = 'PROJECT_SAVE_SUCCESS';
 export const PROJECT_SAVE_FAIL = 'PROJECT_SAVE_FAIL';
 export const NEW_PROJECT = 'NEW_PROJECT';
 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';
@@ -42,8 +40,6 @@ 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';
-
 export const SET_SELECTED_FILE = 'SET_SELECTED_FILE';
 export const SHOW_MODAL = 'SHOW_MODAL';
 export const HIDE_MODAL = 'HIDE_MODAL';

client/modules/IDE/actions/projects.js

@@ -2,6 +2,8 @@ import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 import { startLoader, stopLoader } from '../reducers/loading';
 
+import { setProjects } from '../reducers/projects';
+
 // eslint-disable-next-line
 export function getProjects(username) {
   return (dispatch) => {
@@ -15,10 +17,7 @@ export function getProjects(username) {
     return apiClient
       .get(url)
       .then((response) => {
-        dispatch({
-          type: ActionTypes.SET_PROJECTS,
-          projects: response.data
-        });
+        dispatch(setProjects(response.data));
         dispatch(stopLoader());
       })
       .catch((error) => {

client/modules/IDE/reducers/projects.js

@@ -1,22 +1,28 @@
-import * as ActionTypes from '../../../constants';
+import { createSlice } from '@reduxjs/toolkit';
 
-const sketches = (state = [], action) => {
-  switch (action.type) {
-    case ActionTypes.SET_PROJECTS:
-      return action.projects;
-    case ActionTypes.DELETE_PROJECT:
-      return state.filter((sketch) => sketch.id !== action.id);
-    case ActionTypes.RENAME_PROJECT: {
-      return state.map((sketch) => {
-        if (sketch.id === action.payload.id) {
-          return { ...sketch, name: action.payload.name };
-        }
-        return { ...sketch };
-      });
+const sketchesSlice = createSlice({
+  name: 'sketches',
+  initialState: [],
+  reducers: {
+    setProjects(state, action) {
+      return action.payload;
+    },
+    deleteProject(state, action) {
+      return state.filter((sketch) => sketch.id !== action.payload.id);
+    },
+    renameProject(state, action) {
+      const { id, name } = action.payload;
+      return state.map((sketch) =>
+        sketch.id === id ? { ...sketch, name } : { ...sketch }
+      );
     }
-    default:
-      return state;
   }
-};
+});
 
-export default sketches;
+export const {
+  setProjects,
+  deleteProject,
+  renameProject
+} = sketchesSlice.actions;
+
+export default sketchesSlice.reducer;