diff --git a/client/constants.js b/client/constants.js index 608a31a0f9..48721497e0 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'; @@ -141,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 e0473bd995..d480a5e30c 100644 --- a/client/modules/IDE/actions/preferences.js +++ b/client/modules/IDE/actions/preferences.js @@ -2,6 +2,21 @@ import i18next from 'i18next'; import apiClient from '../../../utils/apiClient'; import * as ActionTypes from '../../../constants'; +import { + setFontSizeActions, + setAutoSaveActions, + setLineWrapActions, + setLintWarningActions, + setTextOutputActions, + setGridOutputActions, + setThemeActions, + setAutoRefreshActions, + setLineNumbersActions, + setAutocloseBracketsQuotesActions, + setAutocompleteHinterActions, + setLanguageActions +} from '../reducers/preferences'; + function updatePreferences(formParams, dispatch) { apiClient .put('/preferences', formParams) @@ -17,10 +32,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 +47,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 +62,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 +77,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 +92,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 +107,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 +122,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 +137,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 +152,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 +171,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 = { @@ -200,15 +185,8 @@ export function setTheme(value) { } export function setAutorefresh(value) { - // return { - // type: ActionTypes.SET_AUTOREFRESH, - // value - // }; return (dispatch, getState) => { - dispatch({ - type: ActionTypes.SET_AUTOREFRESH, - value - }); + dispatch(setAutoRefreshActions(value)); const state = getState(); if (state.user.authenticated) { const formParams = { @@ -231,10 +209,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..75b273b084 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,66 @@ 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 { + setFontSizeActions, + setAutoSaveActions, + setLineWrapActions, + setLintWarningActions, + setTextOutputActions, + setGridOutputActions, + setPreferencesActions, + setThemeActions, + setAutoRefreshActions, + setLineNumbersActions, + setAutocloseBracketsQuotesActions, + setAutocompleteHinterActions, + setLanguageActions +} = preferencesSlice.actions; -export default preferences; +export default preferencesSlice.reducer;