Merge pull request #3120 from PiyushChandra17/piyush/refactor-editorAccessibility-reduxToolkit

refactor editorAccessibility reducers and actions using redux toolkit

Author: raclim

client/constants.js

@@ -55,8 +55,6 @@ export const COLLAPSE_SIDEBAR = 'COLLAPSE_SIDEBAR';
 export const EXPAND_CONSOLE = 'EXPAND_CONSOLE';
 export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE';
 
-export const UPDATE_LINT_MESSAGE = 'UPDATE_LINT_MESSAGE';
-export const CLEAR_LINT_MESSAGE = 'CLEAR_LINT_MESSAGE';
 export const TOGGLE_FORCE_DESKTOP = 'TOGGLE_FORCE_DESKTOP';
 
 export const UPDATE_FILE_NAME = 'UPDATE_FILE_NAME';

client/modules/IDE/actions/editorAccessibility.js

@@ -1,22 +1,5 @@
-import * as ActionTypes from '../../../constants';
-
-export function updateLintMessage(severity, line, message) {
-  return {
-    type: ActionTypes.UPDATE_LINT_MESSAGE,
-    severity,
-    line,
-    message
-  };
-}
-
-export function clearLintMessage() {
-  return {
-    type: ActionTypes.CLEAR_LINT_MESSAGE
-  };
-}
-
-export function toggleForceDesktop() {
-  return {
-    type: ActionTypes.TOGGLE_FORCE_DESKTOP
-  };
-}
+export {
+  updateLintMessage,
+  clearLintMessage,
+  toggleForceDesktop
+} from '../reducers/editorAccessibility';

client/modules/IDE/reducers/editorAccessibility.js

@@ -1,30 +1,38 @@
-import * as ActionTypes from '../../../constants';
+import { createSlice } from '@reduxjs/toolkit';
 
 const initialState = {
   lintMessages: [],
   forceDesktop: false
 };
+
 let messageId = 0;
 
-const editorAccessibility = (state = initialState, action) => {
-  switch (action.type) {
-    case ActionTypes.UPDATE_LINT_MESSAGE:
+const editorAccessibilitySlice = createSlice({
+  name: 'editorAccessibility',
+  initialState,
+  reducers: {
+    updateLintMessage: (state, action) => {
       messageId += 1;
-      return Object.assign({}, state, {
-        lintMessages: state.lintMessages.concat({
-          severity: action.severity,
-          line: action.line,
-          message: action.message,
-          id: messageId
-        })
+      state.lintMessages.push({
+        severity: action.payload.severity,
+        line: action.payload.line,
+        message: action.payload.message,
+        id: messageId
       });
-    case ActionTypes.CLEAR_LINT_MESSAGE:
-      return Object.assign({}, state, { lintMessages: [] });
-    case ActionTypes.TOGGLE_FORCE_DESKTOP:
-      return Object.assign({}, state, { forceDesktop: !state.forceDesktop });
-    default:
-      return state;
+    },
+    clearLintMessage: (state) => {
+      state.lintMessages = [];
+    },
+    toggleForceDesktop: (state) => {
+      state.forceDesktop = !state.forceDesktop;
+    }
   }
-};
+});
+
+export const {
+  updateLintMessage,
+  clearLintMessage,
+  toggleForceDesktop
+} = editorAccessibilitySlice.actions;
 
-export default editorAccessibility;
+export default editorAccessibilitySlice.reducer;