Rewrite code reducer in RTK

Author: shepmaster

ui/frontend/.eslintrc.js

@@ -72,6 +72,7 @@ module.exports = {
         'editor/AceEditor.tsx',
         'editor/SimpleEditor.tsx',
         'reducers/client.ts',
+        'reducers/code.ts',
         'reducers/crates.ts',
         'reducers/featureFlags.ts',
         'reducers/globalConfiguration.ts',

ui/frontend/.prettierignore

@@ -23,6 +23,7 @@ node_modules
 !editor/AceEditor.tsx
 !editor/SimpleEditor.tsx
 !reducers/client.ts
+!reducers/code.ts
 !reducers/crates.ts
 !reducers/featureFlags.ts
 !reducers/globalConfiguration.ts

ui/frontend/Output/Execute.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
-import * as actions from '../actions';
 import * as selectors from '../selectors';
 import { State } from '../reducers';
+import * as code from '../reducers/code';
 
 import Section from './Section';
 import SimplePane from './SimplePane';
@@ -15,7 +15,7 @@ const Execute: React.FC = () => {
   const isAutoBuild = useSelector(selectors.isAutoBuildSelector);
 
   const dispatch = useDispatch();
-  const addMainFunction = useCallback(() => dispatch(actions.addMainFunction()), [dispatch]);
+  const addMainFunction = useCallback(() => dispatch(code.addMainFunction()), [dispatch]);
 
   return (
     <SimplePane {...details} kind="execute">

ui/frontend/actions.ts

@@ -32,6 +32,7 @@ import { performCompileToLlvmIrOnly } from './reducers/output/llvmIr';
 import { performCompileToMirOnly } from './reducers/output/mir';
 import { performCompileToWasmOnly } from './reducers/output/wasm';
 import { navigateToHelp, navigateToIndex } from './reducers/page';
+import { addCrateType, editCode } from './reducers/code';
 
 export type ThunkAction<T = void> = ReduxThunkAction<T, State, {}, Action>;
 export type SimpleThunkAction<T = void> = ReduxThunkAction<T, State, {}, AnyAction>;
@@ -56,11 +57,6 @@ export enum ActionType {
   ChangeMode = 'CHANGE_MODE',
   ChangeEdition = 'CHANGE_EDITION',
   ChangeBacktrace = 'CHANGE_BACKTRACE',
-  EditCode = 'EDIT_CODE',
-  AddMainFunction = 'ADD_MAIN_FUNCTION',
-  AddImport = 'ADD_IMPORT',
-  AddCrateType = 'ADD_CRATE_TYPE',
-  EnableFeatureGate = 'ENABLE_FEATURE_GATE',
   SelectText = 'SELECT_TEXT',
   NotificationSeen = 'NOTIFICATION_SEEN',
   BrowserWidthChanged = 'BROWSER_WIDTH_CHANGED',
@@ -196,21 +192,6 @@ export const performCompileToNightlyHir =
 export const performCompileToWasm =
   performAndSwitchPrimaryAction(performCompileToCdylibWasmOnly, PrimaryActionCore.Wasm);
 
-export const editCode = (code: string) =>
-  createAction(ActionType.EditCode, { code });
-
-export const addMainFunction = () =>
-  createAction(ActionType.AddMainFunction);
-
-export const addImport = (code: string) =>
-  createAction(ActionType.AddImport, { code });
-
-export const addCrateType = (crateType: string) =>
-  createAction(ActionType.AddCrateType, { crateType });
-
-export const enableFeatureGate = (featureGate: string) =>
-  createAction(ActionType.EnableFeatureGate, { featureGate });
-
 export const selectText = (start: Position, end: Position) =>
   createAction(ActionType.SelectText, { start, end });
 
@@ -323,14 +304,11 @@ export type Action =
   | ReturnType<typeof changeProcessAssembly>
   | ReturnType<typeof changeAceTheme>
   | ReturnType<typeof changeMonacoTheme>
-  | ReturnType<typeof editCode>
-  | ReturnType<typeof addMainFunction>
-  | ReturnType<typeof addImport>
-  | ReturnType<typeof addCrateType>
-  | ReturnType<typeof enableFeatureGate>
   | ReturnType<typeof selectText>
   | ReturnType<typeof notificationSeen>
   | ReturnType<typeof browserWidthChanged>
+  | ReturnType<typeof editCode>
+  | ReturnType<typeof addCrateType>
   | ReturnType<typeof navigateToIndex>
   | ReturnType<typeof wsExecuteRequest>
   ;

ui/frontend/editor/Editor.tsx

@@ -10,6 +10,7 @@ import MonacoEditor from './MonacoEditor';
 import { Editor as EditorType } from '../types';
 import { codeSelector, positionSelector, selectionSelector } from '../selectors';
 import { State } from '../reducers';
+import { editCode } from '../reducers/code';
 
 import styles from './Editor.module.css';
 
@@ -28,7 +29,7 @@ const Editor: React.FC = () => {
 
   const dispatch = useAppDispatch();
   const execute = useCallback(() => dispatch(actions.performPrimaryAction()), [dispatch]);
-  const onEditCode = useCallback((c: string) => dispatch(actions.editCode(c)), [dispatch]);
+  const onEditCode = useCallback((c: string) => dispatch(editCode(c)), [dispatch]);
 
   const SelectedEditor = editorMap[editor];
 

ui/frontend/index.tsx

@@ -9,10 +9,7 @@ import { Provider } from 'react-redux';
 import { v4 } from 'uuid';
 
 import {
-  editCode,
-  enableFeatureGate,
   selectText,
-  addImport,
   reExecuteWithBacktrace,
   browserWidthChanged,
 } from './actions';
@@ -27,6 +24,7 @@ import configureStore from './configureStore';
 import { performVersionsLoad } from './reducers/versions';
 import { performCratesLoad } from './reducers/crates';
 import { gotoPosition } from './reducers/position';
+import { addImport, editCode, enableFeatureGate } from './reducers/code';
 
 const store = configureStore(window);
 

ui/frontend/reducers/code.ts

@@ -1,40 +1,37 @@
-import { Action, ActionType } from '../actions';
-import { performGistLoad } from './output/gist'
-import { performFormat } from './output/format'
+import { PayloadAction, createSlice } from '@reduxjs/toolkit';
 
-const DEFAULT: State = `fn main() {
+import { performFormat } from './output/format';
+import { performGistLoad } from './output/gist';
+
+const initialState: string = `fn main() {
     println!("Hello, world!");
 }`;
 
-export type State = string;
-
-export default function code(state = DEFAULT, action: Action): State {
-  switch (action.type) {
-    case ActionType.EditCode:
-      return action.code;
-
-    case ActionType.AddMainFunction:
-      return `${state}\n\n${DEFAULT}`;
-
-    case ActionType.AddImport:
-      return action.code + state;
-
-    case ActionType.AddCrateType:
-      return `#![crate_type = "${action.crateType}"]\n${state}`;
-
-    case ActionType.EnableFeatureGate:
-      return `#![feature(${action.featureGate})]\n${state}`;
-
-    default: {
-      if (performGistLoad.pending.match(action)) {
-        return '';
-      } else if (performGistLoad.fulfilled.match(action)) {
-        return action.payload.code;
-      } else if (performFormat.fulfilled.match(action)) {
-        return action.payload.code;
-      } else {
-        return state;
-      }
-    }
-  }
-}
+const slice = createSlice({
+  name: 'code',
+  initialState,
+  reducers: {
+    editCode: (_state, action: PayloadAction<string>) => action.payload,
+
+    addMainFunction: (state) => `${state}\n\n${initialState}`,
+
+    addImport: (state, action: PayloadAction<string>) => action.payload + state,
+
+    addCrateType: (state, action: PayloadAction<string>) =>
+      `#![crate_type = "${action.payload}"]\n${state}`,
+
+    enableFeatureGate: (state, action: PayloadAction<string>) =>
+      `#![feature(${action.payload})]\n${state}`,
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(performGistLoad.pending, () => '')
+      .addCase(performGistLoad.fulfilled, (_state, action) => action.payload.code)
+      .addCase(performFormat.fulfilled, (_state, action) => action.payload.code);
+  },
+});
+
+export const { editCode, addMainFunction, addImport, addCrateType, enableFeatureGate } =
+  slice.actions;
+
+export default slice.reducer;

ui/frontend/selectors/index.spec.ts

@@ -1,5 +1,5 @@
-import { editCode } from '../actions';
 import reducer from '../reducers';
+import { editCode } from '../reducers/code';
 
 import { hasMainFunctionSelector } from './index';