refactor project reducers and actions using redux toolkit

Author: PiyushChandra17

client/constants.js

@@ -23,15 +23,10 @@ export const SETTINGS_UPDATED = 'SETTINGS_UPDATED';
 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';
@@ -119,7 +114,6 @@ export const ERROR = 'ERROR';
 export const JUST_OPENED_PROJECT = 'JUST_OPENED_PROJECT';
 export const RESET_JUST_OPENED_PROJECT = 'RESET_JUST_OPENED_PROJECT';
 
-export const SET_PROJECT_SAVED_TIME = 'SET_PROJECT_SAVED_TIME';
 export const RESET_PROJECT_SAVED_TIME = 'RESET_PROJECT_SAVED_TIME';
 export const SET_PREVIOUS_PATH = 'SET_PREVIOUS_PATH';
 export const SHOW_ERROR_MODAL = 'SHOW_ERROR_MODAL';
@@ -137,7 +131,4 @@ export const SET_SORT_PARAMS = 'SET_SORT_PARAMS';
 export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
 export const CLOSE_SKETCHLIST_MODAL = 'CLOSE_SKETCHLIST_MODAL';
 
-export const START_SAVING_PROJECT = 'START_SAVING_PROJECT';
-export const END_SAVING_PROJECT = 'END_SAVING_PROJECT';
-
 export const SET_COOKIE_CONSENT = 'SET_COOKIE_CONSENT';

client/modules/IDE/actions/project.js

@@ -15,6 +15,22 @@ import {
 } from './ide';
 import { clearState, saveState } from '../../../persistState';
 
+import {
+  setProjectName,
+  startSavingProject,
+  endSavingProject,
+  resetProject,
+  setProjectSavedTime
+} from '../reducers/project';
+
+export {
+  setProjectName,
+  startSavingProject,
+  endSavingProject,
+  resetProject,
+  setProjectSavedTime
+} from '../reducers/project';
+
 const ROOT_URL = getConfig('API_URL');
 const S3_BUCKET_URL_BASE = getConfig('S3_BUCKET_URL_BASE');
 const S3_BUCKET = getConfig('S3_BUCKET');
@@ -28,13 +44,6 @@ export function setProject(project) {
   };
 }
 
-export function setProjectName(name) {
-  return {
-    type: ActionTypes.SET_PROJECT_NAME,
-    name
-  };
-}
-
 export function projectSaveFail(error) {
   return {
     type: ActionTypes.PROJECT_SAVE_FAIL,
@@ -88,18 +97,6 @@ export function clearPersistedState() {
   };
 }
 
-export function startSavingProject() {
-  return {
-    type: ActionTypes.START_SAVING_PROJECT
-  };
-}
-
-export function endSavingProject() {
-  return {
-    type: ActionTypes.END_SAVING_PROJECT
-  };
-}
-
 export function projectSaveSuccess() {
   return {
     type: ActionTypes.PROJECT_SAVE_SUCCESS
@@ -262,12 +259,6 @@ export function exportProjectAsZip(projectId) {
   win.focus();
 }
 
-export function resetProject() {
-  return {
-    type: ActionTypes.RESET_PROJECT
-  };
-}
-
 export function newProject() {
   browserHistory.push('/', { confirmed: true });
   return resetProject();
@@ -347,13 +338,6 @@ export function cloneProject(project) {
   };
 }
 
-export function setProjectSavedTime(updatedAt) {
-  return {
-    type: ActionTypes.SET_PROJECT_SAVED_TIME,
-    value: updatedAt
-  };
-}
-
 export function changeProjectName(id, newName) {
   return (dispatch, getState) => {
     const state = getState();

client/modules/IDE/reducers/project.js

@@ -1,4 +1,4 @@
-import * as ActionTypes from '../../../constants';
+import { createSlice } from '@reduxjs/toolkit';
 import { generateProjectName } from '../../../utils/generateRandomName';
 
 const initialState = () => {
@@ -12,40 +12,52 @@ const initialState = () => {
   };
 };
 
-const project = (state, action) => {
-  if (state === undefined) {
-    state = initialState(); // eslint-disable-line
+const projectSlice = createSlice({
+  name: 'project',
+  initialState,
+  reducers: {
+    setProjectName(state, action) {
+      state.name = action.payload;
+    },
+    newProject(state, action) {
+      const { id, name, updatedAt, owner } = action.payload;
+      state.id = id;
+      state.name = name;
+      state.updatedAt = updatedAt;
+      state.owner = owner;
+      state.isSaving = false;
+    },
+    setProject(state, action) {
+      const { id, name, updatedAt, owner } = action.payload;
+      state.id = id;
+      state.name = name;
+      state.updatedAt = updatedAt;
+      state.owner = owner;
+      state.isSaving = false;
+    },
+    resetProject(state) {
+      Object.assign(state, initialState);
+    },
+    setProjectSavedTime(state, action) {
+      state.updatedAt = action.payload;
+    },
+    startSavingProject(state) {
+      state.isSaving = true;
+    },
+    endSavingProject(state) {
+      state.isSaving = false;
+    }
   }
-  switch (action.type) {
-    case ActionTypes.SET_PROJECT_NAME:
-      return Object.assign({}, { ...state }, { name: action.name });
-    case ActionTypes.NEW_PROJECT:
-      return {
-        id: action.project.id,
-        name: action.project.name,
-        updatedAt: action.project.updatedAt,
-        owner: action.owner,
-        isSaving: false
-      };
-    case ActionTypes.SET_PROJECT:
-      return {
-        id: action.project.id,
-        name: action.project.name,
-        updatedAt: action.project.updatedAt,
-        owner: action.owner,
-        isSaving: false
-      };
-    case ActionTypes.RESET_PROJECT:
-      return initialState();
-    case ActionTypes.SET_PROJECT_SAVED_TIME:
-      return Object.assign({}, state, { updatedAt: action.value });
-    case ActionTypes.START_SAVING_PROJECT:
-      return Object.assign({}, state, { isSaving: true });
-    case ActionTypes.END_SAVING_PROJECT:
-      return Object.assign({}, state, { isSaving: false });
-    default:
-      return state;
-  }
-};
+});
+
+export const {
+  setProjectName,
+  newProject,
+  setProject,
+  resetProject,
+  setProjectSavedTime,
+  startSavingProject,
+  endSavingProject
+} = projectSlice.actions;
 
-export default project;
+export default projectSlice.reducer;