From d1151e71be906054c63cc993157de8a8ee46c1eb Mon Sep 17 00:00:00 2001 From: Piyush Date: Wed, 15 May 2024 20:06:23 +0530 Subject: [PATCH 1/2] refactor preferences reducers and actions using redux toolkit --- client/constants.js | 13 ---- client/modules/IDE/actions/preferences.js | 77 ++++++++------------ client/modules/IDE/reducers/preferences.js | 85 ++++++++++++---------- 3 files changed, 77 insertions(+), 98 deletions(-) diff --git a/client/constants.js b/client/constants.js index 608a31a0f9..e7af744c30 100644 --- a/client/constants.js +++ b/client/constants.js @@ -11,8 +11,6 @@ export const STOP_ACCESSIBLE_OUTPUT = 'STOP_ACCESSIBLE_OUTPUT'; export const OPEN_PREFERENCES = 'OPEN_PREFERENCES'; export const CLOSE_PREFERENCES = 'CLOSE_PREFERENCES'; -export const SET_FONT_SIZE = 'SET_FONT_SIZE'; -export const SET_LINE_NUMBERS = 'SET_LINE_NUMBERS'; export const AUTH_USER = 'AUTH_USER'; export const UNAUTH_USER = 'UNAUTH_USER'; @@ -65,15 +63,7 @@ export const TOGGLE_FORCE_DESKTOP = 'TOGGLE_FORCE_DESKTOP'; export const UPDATE_FILE_NAME = 'UPDATE_FILE_NAME'; export const DELETE_FILE = 'DELETE_FILE'; -export const SET_AUTOSAVE = 'SET_AUTOSAVE'; -export const SET_LINEWRAP = 'SET_LINEWRAP'; -export const SET_LINT_WARNING = 'SET_LINT_WARNING'; -export const SET_PREFERENCES = 'SET_PREFERENCES'; -export const SET_TEXT_OUTPUT = 'SET_TEXT_OUTPUT'; -export const SET_GRID_OUTPUT = 'SET_GRID_OUTPUT'; export const SET_SOUND_OUTPUT = 'SET_SOUND_OUTPUT'; -export const SET_AUTOCLOSE_BRACKETS_QUOTES = 'SET_AUTOCLOSE_BRACKETS_QUOTES'; -export const SET_AUTOCOMPLETE_HINTER = 'SET_AUTOCOMPLETE_HINTER'; export const OPEN_PROJECT_OPTIONS = 'OPEN_PROJECT_OPTIONS'; export const CLOSE_PROJECT_OPTIONS = 'CLOSE_PROJECT_OPTIONS'; @@ -93,11 +83,8 @@ export const CLOSE_KEYBOARD_SHORTCUT_MODAL = 'CLOSE_KEYBOARD_SHORTCUT_MODAL'; export const SHOW_TOAST = 'SHOW_TOAST'; export const HIDE_TOAST = 'HIDE_TOAST'; export const SET_TOAST_TEXT = 'SET_TOAST_TEXT'; -export const SET_THEME = 'SET_THEME'; -export const SET_LANGUAGE = 'SET_LANGUAGE'; export const SET_UNSAVED_CHANGES = 'SET_UNSAVED_CHANGES'; -export const SET_AUTOREFRESH = 'SET_AUTOREFRESH'; export const START_SKETCH_REFRESH = 'START_SKETCH_REFRESH'; export const END_SKETCH_REFRESH = 'END_SKETCH_REFRESH'; diff --git a/client/modules/IDE/actions/preferences.js b/client/modules/IDE/actions/preferences.js index e0473bd995..f7637dd208 100644 --- a/client/modules/IDE/actions/preferences.js +++ b/client/modules/IDE/actions/preferences.js @@ -1,6 +1,23 @@ import i18next from 'i18next'; import apiClient from '../../../utils/apiClient'; import * as ActionTypes from '../../../constants'; +import { preferencesActions } from '../reducers/preferences'; + +const { + setFontSizeActions, + setAutosaveActions, + setLinewrapActions, + setLintWarningActions, + setTextOutputActions, + setGridOutputActions, + setPreferencesActions, + setThemeActions, + setAutorefreshActions, + setLineNumbersActions, + setAutocloseBracketsQuotesActions, + setAutocompleteHinterActions, + setLanguageActions +} = preferencesActions; function updatePreferences(formParams, dispatch) { apiClient @@ -17,10 +34,7 @@ function updatePreferences(formParams, dispatch) { export function setFontSize(value) { return (dispatch, getState) => { // eslint-disable-line - dispatch({ - type: ActionTypes.SET_FONT_SIZE, - value - }); + dispatch(setFontSizeActions(value)); const state = getState(); if (state.user.authenticated) { const formParams = { @@ -35,10 +49,7 @@ export function setFontSize(value) { export function setLineNumbers(value) { return (dispatch, getState) => { - dispatch({ - type: ActionTypes.SET_LINE_NUMBERS, - value - }); + dispatch(setLineNumbersActions(value)); const state = getState(); if (state.user.authenticated) { const formParams = { @@ -53,10 +64,7 @@ export function setLineNumbers(value) { export function setAutocloseBracketsQuotes(value) { return (dispatch, getState) => { - dispatch({ - type: ActionTypes.SET_AUTOCLOSE_BRACKETS_QUOTES, - value - }); + dispatch(setAutocloseBracketsQuotesActions(value)); const state = getState(); if (state.user.authenticated) { const formParams = { @@ -71,10 +79,7 @@ export function setAutocloseBracketsQuotes(value) { export function setAutocompleteHinter(value) { return (dispatch, getState) => { - dispatch({ - type: ActionTypes.SET_AUTOCOMPLETE_HINTER, - value - }); + dispatch(setAutocompleteHinterActions(value)); const state = getState(); if (state.user.authenticated) { const formParams = { @@ -89,10 +94,7 @@ export function setAutocompleteHinter(value) { export function setAutosave(value) { return (dispatch, getState) => { - dispatch({ - type: ActionTypes.SET_AUTOSAVE, - value - }); + dispatch(setAutosaveActions(value)); const state = getState(); if (state.user.authenticated) { const formParams = { @@ -107,10 +109,7 @@ export function setAutosave(value) { export function setLinewrap(value) { return (dispatch, getState) => { - dispatch({ - type: ActionTypes.SET_LINEWRAP, - value - }); + dispatch(setLinewrapActions(value)); const state = getState(); if (state.user.authenticated) { const formParams = { @@ -125,10 +124,7 @@ export function setLinewrap(value) { export function setLintWarning(value) { return (dispatch, getState) => { - dispatch({ - type: ActionTypes.SET_LINT_WARNING, - value - }); + dispatch(setLintWarningActions(value)); const state = getState(); if (state.user.authenticated) { const formParams = { @@ -143,10 +139,7 @@ export function setLintWarning(value) { export function setTextOutput(value) { return (dispatch, getState) => { - dispatch({ - type: ActionTypes.SET_TEXT_OUTPUT, - value - }); + dispatch(setTextOutputActions(value)); const state = getState(); if (state.user.authenticated) { const formParams = { @@ -161,10 +154,7 @@ export function setTextOutput(value) { export function setGridOutput(value) { return (dispatch, getState) => { - dispatch({ - type: ActionTypes.SET_GRID_OUTPUT, - value - }); + dispatch(setGridOutputActions(value)); const state = getState(); if (state.user.authenticated) { const formParams = { @@ -183,10 +173,7 @@ export function setTheme(value) { // value // }; return (dispatch, getState) => { - dispatch({ - type: ActionTypes.SET_THEME, - value - }); + dispatch(setThemeActions(value)); const state = getState(); if (state.user.authenticated) { const formParams = { @@ -205,10 +192,7 @@ export function setAutorefresh(value) { // value // }; return (dispatch, getState) => { - dispatch({ - type: ActionTypes.SET_AUTOREFRESH, - value - }); + dispatch(setAutorefreshActions(value)); const state = getState(); if (state.user.authenticated) { const formParams = { @@ -231,10 +215,7 @@ export function setAllAccessibleOutput(value) { export function setLanguage(value, { persistPreference = true } = {}) { return (dispatch, getState) => { i18next.changeLanguage(value); - dispatch({ - type: ActionTypes.SET_LANGUAGE, - language: value - }); + dispatch(setLanguageActions(value)); const state = getState(); if (persistPreference && state.user.authenticated) { const formParams = { diff --git a/client/modules/IDE/reducers/preferences.js b/client/modules/IDE/reducers/preferences.js index 087d927aed..1c9a1a337a 100644 --- a/client/modules/IDE/reducers/preferences.js +++ b/client/modules/IDE/reducers/preferences.js @@ -1,4 +1,4 @@ -import * as ActionTypes from '../../../constants'; +import { createSlice } from '@reduxjs/toolkit'; export const initialState = { fontSize: 18, @@ -15,41 +15,52 @@ export const initialState = { autocompleteHinter: false }; -const preferences = (state = initialState, action) => { - switch (action.type) { - case ActionTypes.SET_FONT_SIZE: - return Object.assign({}, state, { fontSize: action.value }); - case ActionTypes.SET_AUTOSAVE: - return Object.assign({}, state, { autosave: action.value }); - case ActionTypes.SET_LINEWRAP: - return Object.assign({}, state, { linewrap: action.value }); - case ActionTypes.SET_LINT_WARNING: - return Object.assign({}, state, { lintWarning: action.value }); - case ActionTypes.SET_TEXT_OUTPUT: - return Object.assign({}, state, { textOutput: action.value }); - case ActionTypes.SET_GRID_OUTPUT: - return Object.assign({}, state, { gridOutput: action.value }); - case ActionTypes.SET_PREFERENCES: - return action.preferences; - case ActionTypes.SET_THEME: - return Object.assign({}, state, { theme: action.value }); - case ActionTypes.SET_AUTOREFRESH: - return Object.assign({}, state, { autorefresh: action.value }); - case ActionTypes.SET_LINE_NUMBERS: - return Object.assign({}, state, { lineNumbers: action.value }); - case ActionTypes.SET_LANGUAGE: - return Object.assign({}, state, { language: action.language }); - case ActionTypes.SET_AUTOCLOSE_BRACKETS_QUOTES: - return Object.assign({}, state, { - autocloseBracketsQuotes: action.value - }); - case ActionTypes.SET_AUTOCOMPLETE_HINTER: - return Object.assign({}, state, { - autocompleteHinter: action.value - }); - default: - return state; +const preferencesSlice = createSlice({ + name: 'preferences', + initialState, + reducers: { + setFontSizeActions: (state, action) => { + state.fontSize = action.payload; + }, + setAutoSaveActions: (state, action) => { + state.autosave = action.payload; + }, + setLineWrapActions: (state, action) => { + state.linewrap = action.payload; + }, + setLintWarningActions: (state, action) => { + state.lintWarning = action.payload; + }, + setTextOutputActions: (state, action) => { + state.textOutput = action.payload; + }, + setGridOutputActions: (state, action) => { + state.gridOutput = action.payload; + }, + setPreferencesActions(state, action) { + return action.payload; + }, + setThemeActions: (state, action) => { + state.theme = action.payload; + }, + setAutoRefreshActions: (state, action) => { + state.autorefresh = action.payload; + }, + setLineNumbersActions: (state, action) => { + state.lineNumbers = action.payload; + }, + setAutocloseBracketsQuotesActions: (state, action) => { + state.autocloseBracketsQuotes = action.payload; + }, + setAutocompleteHinterActions: (state, action) => { + state.autocompleteHinter = action.payload; + }, + setLanguageActions: (state, action) => { + state.language = action.payload; + } } -}; +}); + +export const preferencesActions = preferencesSlice.actions; -export default preferences; +export default preferencesSlice.reducer; From d0f4d66b850f0462db3a403a5c009b28cc1c337c Mon Sep 17 00:00:00 2001 From: Piyush Date: Fri, 14 Jun 2024 12:10:24 +0530 Subject: [PATCH 2/2] fix few errors --- client/constants.js | 2 ++ client/modules/IDE/actions/preferences.js | 22 ++++++++-------------- client/modules/IDE/reducers/preferences.js | 16 +++++++++++++++- 3 files changed, 25 insertions(+), 15 deletions(-) diff --git a/client/constants.js b/client/constants.js index e7af744c30..48721497e0 100644 --- a/client/constants.js +++ b/client/constants.js @@ -128,3 +128,5 @@ export const START_SAVING_PROJECT = 'START_SAVING_PROJECT'; export const END_SAVING_PROJECT = 'END_SAVING_PROJECT'; export const SET_COOKIE_CONSENT = 'SET_COOKIE_CONSENT'; + +export const SET_PREFERENCES = 'SET_PREFERENCES'; diff --git a/client/modules/IDE/actions/preferences.js b/client/modules/IDE/actions/preferences.js index f7637dd208..d480a5e30c 100644 --- a/client/modules/IDE/actions/preferences.js +++ b/client/modules/IDE/actions/preferences.js @@ -1,23 +1,21 @@ import i18next from 'i18next'; import apiClient from '../../../utils/apiClient'; import * as ActionTypes from '../../../constants'; -import { preferencesActions } from '../reducers/preferences'; -const { +import { setFontSizeActions, - setAutosaveActions, - setLinewrapActions, + setAutoSaveActions, + setLineWrapActions, setLintWarningActions, setTextOutputActions, setGridOutputActions, - setPreferencesActions, setThemeActions, - setAutorefreshActions, + setAutoRefreshActions, setLineNumbersActions, setAutocloseBracketsQuotesActions, setAutocompleteHinterActions, setLanguageActions -} = preferencesActions; +} from '../reducers/preferences'; function updatePreferences(formParams, dispatch) { apiClient @@ -94,7 +92,7 @@ export function setAutocompleteHinter(value) { export function setAutosave(value) { return (dispatch, getState) => { - dispatch(setAutosaveActions(value)); + dispatch(setAutoSaveActions(value)); const state = getState(); if (state.user.authenticated) { const formParams = { @@ -109,7 +107,7 @@ export function setAutosave(value) { export function setLinewrap(value) { return (dispatch, getState) => { - dispatch(setLinewrapActions(value)); + dispatch(setLineWrapActions(value)); const state = getState(); if (state.user.authenticated) { const formParams = { @@ -187,12 +185,8 @@ export function setTheme(value) { } export function setAutorefresh(value) { - // return { - // type: ActionTypes.SET_AUTOREFRESH, - // value - // }; return (dispatch, getState) => { - dispatch(setAutorefreshActions(value)); + dispatch(setAutoRefreshActions(value)); const state = getState(); if (state.user.authenticated) { const formParams = { diff --git a/client/modules/IDE/reducers/preferences.js b/client/modules/IDE/reducers/preferences.js index 1c9a1a337a..75b273b084 100644 --- a/client/modules/IDE/reducers/preferences.js +++ b/client/modules/IDE/reducers/preferences.js @@ -61,6 +61,20 @@ const preferencesSlice = createSlice({ } }); -export const preferencesActions = preferencesSlice.actions; +export const { + setFontSizeActions, + setAutoSaveActions, + setLineWrapActions, + setLintWarningActions, + setTextOutputActions, + setGridOutputActions, + setPreferencesActions, + setThemeActions, + setAutoRefreshActions, + setLineNumbersActions, + setAutocloseBracketsQuotesActions, + setAutocompleteHinterActions, + setLanguageActions +} = preferencesSlice.actions; export default preferencesSlice.reducer;