From 203122f07777a502fe10108b0ea1bec19c2c2b49 Mon Sep 17 00:00:00 2001 From: Piyush Date: Thu, 16 May 2024 00:49:25 +0530 Subject: [PATCH 1/2] refactor project reducers and actions using redux toolkit --- client/constants.js | 9 --- client/modules/IDE/actions/project.js | 48 +++++---------- client/modules/IDE/reducers/project.js | 84 +++++++++++++++----------- 3 files changed, 64 insertions(+), 77 deletions(-) diff --git a/client/constants.js b/client/constants.js index 608a31a0f9..8f2e8c5d69 100644 --- a/client/constants.js +++ b/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'; diff --git a/client/modules/IDE/actions/project.js b/client/modules/IDE/actions/project.js index 1d8943336b..f970a4ed8b 100644 --- a/client/modules/IDE/actions/project.js +++ b/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(); diff --git a/client/modules/IDE/reducers/project.js b/client/modules/IDE/reducers/project.js index 89a03529e6..a2d1cd4e4c 100644 --- a/client/modules/IDE/reducers/project.js +++ b/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; From 82e12cbe54d2d27577c7455410fbc53f9a462986 Mon Sep 17 00:00:00 2001 From: Piyush Date: Fri, 14 Jun 2024 02:56:19 +0530 Subject: [PATCH 2/2] updated initialState as a function --- client/modules/IDE/reducers/project.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/modules/IDE/reducers/project.js b/client/modules/IDE/reducers/project.js index a2d1cd4e4c..7eaa6a4064 100644 --- a/client/modules/IDE/reducers/project.js +++ b/client/modules/IDE/reducers/project.js @@ -1,7 +1,7 @@ import { createSlice } from '@reduxjs/toolkit'; import { generateProjectName } from '../../../utils/generateRandomName'; -const initialState = () => { +const generateInitialState = () => { const generatedString = generateProjectName(); const generatedName = generatedString.charAt(0).toUpperCase() + generatedString.slice(1); @@ -12,6 +12,8 @@ const initialState = () => { }; }; +const initialState = generateInitialState(); + const projectSlice = createSlice({ name: 'project', initialState,