Rewrite page reducer in RTK

Author: shepmaster

ui/frontend/.eslintrc.js

@@ -87,6 +87,7 @@ module.exports = {
         'reducers/output/mir.ts',
         'reducers/output/miri.ts',
         'reducers/output/wasm.ts',
+        'reducers/page.ts',
         'reducers/versions.ts',
         'reducers/websocket.ts',
         'websocketActions.ts',

ui/frontend/.prettierignore

@@ -38,6 +38,7 @@ node_modules
 !reducers/output/mir.ts
 !reducers/output/miri.ts
 !reducers/output/wasm.ts
+!reducers/page.ts
 !reducers/versions.ts
 !reducers/websocket.ts
 !websocketActions.ts

ui/frontend/Header.tsx

@@ -20,6 +20,7 @@ import ToolsMenu from './ToolsMenu';
 import * as actions from './actions';
 import { useAppDispatch } from './configureStore';
 import { performGistSave } from './reducers/output/gist';
+import { navigateToHelp } from './reducers/page';
 import * as selectors from './selectors';
 
 import styles from './Header.module.css';
@@ -195,7 +196,7 @@ const ConfigMenuButton: React.FC<PortalProps> = ({ menuContainer }) => {
 };
 
 const HelpButton: React.FC = () => (
-  <IconLink title="View help" action={actions.navigateToHelp}>
+  <IconLink title="View help" action={navigateToHelp}>
     <HelpIcon />
   </IconLink>
 );

ui/frontend/Help.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import * as actions from './actions';
 import Example from './HelpExample';
 import Link from './uss-router/Link';
 
 import styles from './Help.module.css';
 
 import integer32Logo from './assets/integer32-logo.svg';
+import { navigateToIndex } from './reducers/page';
 
 const ACE_URL = 'https://github.com/ajaxorg/ace';
 const CLIPPY_URL = 'https://github.com/rust-lang/rust-clippy';
@@ -79,7 +79,7 @@ const Help: React.FC = () => {
   return (
     <section className={styles.container}>
       <h1>The Rust Playground</h1>
-      <Link action={actions.navigateToIndex}>Return to the playground</Link>
+      <Link action={navigateToIndex}>Return to the playground</Link>
 
       <LinkableSection id="about" header="About" level="h2">
         <p>

ui/frontend/actions.ts

@@ -16,7 +16,6 @@ import {
   Mode,
   Notification,
   Orientation,
-  Page,
   PairCharacters,
   PrimaryAction,
   PrimaryActionAuto,
@@ -33,6 +32,7 @@ import { performCompileToHirOnly } from './reducers/output/hir';
 import { performCompileToLlvmIrOnly } from './reducers/output/llvmIr';
 import { performCompileToMirOnly } from './reducers/output/mir';
 import { performCompileToWasmOnly } from './reducers/output/wasm';
+import { navigateToHelp, navigateToIndex } from './reducers/page';
 
 export type ThunkAction<T = void> = ReduxThunkAction<T, State, {}, Action>;
 export type SimpleThunkAction<T = void> = ReduxThunkAction<T, State, {}, AnyAction>;
@@ -43,7 +43,6 @@ const createAction = <T extends string, P extends {}>(type: T, props?: P) => (
 
 export enum ActionType {
   InitializeApplication = 'INITIALIZE_APPLICATION',
-  SetPage = 'SET_PAGE',
   ChangeEditor = 'CHANGE_EDITOR',
   ChangeKeybinding = 'CHANGE_KEYBINDING',
   ChangeAceTheme = 'CHANGE_ACE_THEME',
@@ -71,12 +70,6 @@ export enum ActionType {
 
 export const initializeApplication = () => createAction(ActionType.InitializeApplication);
 
-const setPage = (page: Page) =>
-  createAction(ActionType.SetPage, { page });
-
-export const navigateToIndex = () => setPage('index');
-export const navigateToHelp = () => setPage('help');
-
 export const changeEditor = (editor: Editor) =>
   createAction(ActionType.ChangeEditor, { editor });
 
@@ -310,9 +303,7 @@ export function indexPageLoad({
   };
 }
 
-export function helpPageLoad() {
-  return navigateToHelp();
-}
+export const helpPageLoad = navigateToHelp;
 
 export function showExample(code: string): ThunkAction {
   return function(dispatch) {
@@ -323,7 +314,6 @@ export function showExample(code: string): ThunkAction {
 
 export type Action =
   | ReturnType<typeof initializeApplication>
-  | ReturnType<typeof setPage>
   | ReturnType<typeof changePairCharacters>
   | ReturnType<typeof changeAssemblyFlavor>
   | ReturnType<typeof changeBacktrace>
@@ -347,5 +337,6 @@ export type Action =
   | ReturnType<typeof selectText>
   | ReturnType<typeof notificationSeen>
   | ReturnType<typeof browserWidthChanged>
+  | ReturnType<typeof navigateToIndex>
   | ReturnType<typeof wsExecuteRequest>
   ;

ui/frontend/reducers/page.ts

@@ -1,13 +1,22 @@
-import { Action, ActionType } from '../actions';
+import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+
 import { Page } from '../types';
 
-export type State = Page;
+const initialState = 'index' as Page;
+
+const slice = createSlice({
+  name: 'page',
+  initialState,
+  reducers: {
+    setPage: (_state, action: PayloadAction<Page>) => {
+      return action.payload;
+    },
+  },
+});
+
+export const { setPage } = slice.actions;
+
+export const navigateToIndex = () => setPage('index');
+export const navigateToHelp = () => setPage('help');
 
-export default function page(state: State = 'index', action: Action) {
-  switch (action.type) {
-    case ActionType.SetPage:
-      return action.page;
-    default:
-      return state;
-  }
-}
+export default slice.reducer;