Rewrite format reducer with RTK

Author: shepmaster

ui/frontend/.eslintrc.js

@@ -65,6 +65,7 @@ module.exports = {
         'PopButton.tsx',
         'editor/AceEditor.tsx',
         'editor/SimpleEditor.tsx',
+        'reducers/output/format.ts',
         'reducers/output/gist.ts',
         'websocketMiddleware.ts',
       ],

ui/frontend/.prettierignore

@@ -14,5 +14,6 @@ node_modules
 !PopButton.tsx
 !editor/AceEditor.tsx
 !editor/SimpleEditor.tsx
+!reducers/output/format.ts
 !reducers/output/gist.ts
 !websocketMiddleware.ts

ui/frontend/ToolsMenu.tsx

@@ -8,6 +8,7 @@ import MenuAside from './MenuAside';
 import * as selectors from './selectors';
 import * as actions from './actions';
 import { useAppDispatch } from './configureStore';
+import { performFormat } from './reducers/output/format';
 
 interface ToolsMenuProps {
   close: () => void;
@@ -33,7 +34,7 @@ const ToolsMenu: React.FC<ToolsMenuProps> = props => {
     props.close();
   }, [dispatch, props]);
   const format = useCallback(() => {
-    dispatch(actions.performFormat());
+    dispatch(performFormat());
     props.close();
   }, [dispatch, props]);
   const expandMacros = useCallback(() => {

ui/frontend/actions.ts

@@ -5,7 +5,6 @@ import { z } from 'zod';
 import {
   codeSelector,
   clippyRequestSelector,
-  formatRequestSelector,
   getCrateType,
   runAsTest,
   useWebsocketSelector,
@@ -107,9 +106,6 @@ export enum ActionType {
   EnableFeatureGate = 'ENABLE_FEATURE_GATE',
   GotoPosition = 'GOTO_POSITION',
   SelectText = 'SELECT_TEXT',
-  RequestFormat = 'REQUEST_FORMAT',
-  FormatSucceeded = 'FORMAT_SUCCEEDED',
-  FormatFailed = 'FORMAT_FAILED',
   RequestClippy = 'REQUEST_CLIPPY',
   ClippySucceeded = 'CLIPPY_SUCCEEDED',
   ClippyFailed = 'CLIPPY_FAILED',
@@ -287,6 +283,21 @@ async function fetchJson(url: FetchArg, args: RequestInit) {
   }
 }
 
+// We made some strange decisions with how the `fetchJson` function
+// communicates errors, so we untwist those here to fit better with
+// redux-toolkit's ideas.
+export const adaptFetchError = async <R>(cb: () => Promise<R>): Promise<R> => {
+  try {
+    return await cb();
+  } catch (e) {
+    if (e && typeof e === 'object' && 'error' in e && typeof e.error === 'string') {
+      throw new Error(e.error);
+    } else {
+      throw new Error('An unknown error occurred');
+    }
+  }
+}
+
 interface ExecuteRequestBody {
   channel: string;
   mode: string;
@@ -567,46 +578,6 @@ export const gotoPosition = (line: string | number, column: string | number) =>
 export const selectText = (start: Position, end: Position) =>
   createAction(ActionType.SelectText, { start, end });
 
-const requestFormat = () =>
-  createAction(ActionType.RequestFormat);
-
-interface FormatRequestBody {
-  code: string;
-  edition: string;
-}
-
-interface FormatResponseBody {
-  success: boolean;
-  code: string;
-  stdout: string;
-  stderr: string;
-}
-
-const receiveFormatSuccess = (body: FormatResponseBody) =>
-  createAction(ActionType.FormatSucceeded, body);
-
-const receiveFormatFailure = (body: FormatResponseBody) =>
-  createAction(ActionType.FormatFailed, body);
-
-export function performFormat(): ThunkAction {
-  // TODO: Check a cache
-  return function(dispatch, getState) {
-    dispatch(requestFormat());
-
-    const body: FormatRequestBody = formatRequestSelector(getState());
-
-    return jsonPost<FormatResponseBody>(routes.format, body)
-      .then(json => {
-        if (json.success) {
-          dispatch(receiveFormatSuccess(json));
-        } else {
-          dispatch(receiveFormatFailure(json));
-        }
-      })
-      .catch(json => dispatch(receiveFormatFailure(json)));
-  };
-}
-
 interface GeneralSuccess {
   stdout: string;
   stderr: string;
@@ -924,9 +895,6 @@ export type Action =
   | ReturnType<typeof enableFeatureGate>
   | ReturnType<typeof gotoPosition>
   | ReturnType<typeof selectText>
-  | ReturnType<typeof requestFormat>
-  | ReturnType<typeof receiveFormatSuccess>
-  | ReturnType<typeof receiveFormatFailure>
   | ReturnType<typeof requestClippy>
   | ReturnType<typeof receiveClippySuccess>
   | ReturnType<typeof receiveClippyFailure>

ui/frontend/reducers/code.ts

@@ -1,5 +1,6 @@
 import { Action, ActionType } from '../actions';
 import { performGistLoad } from './output/gist'
+import { performFormat } from './output/format'
 
 const DEFAULT: State = `fn main() {
     println!("Hello, world!");
@@ -21,14 +22,13 @@ export default function code(state = DEFAULT, action: Action): State {
     case ActionType.EnableFeatureGate:
       return `#![feature(${action.featureGate})]\n${state}`;
 
-    case ActionType.FormatSucceeded:
-      return action.code;
-
     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;
       }

ui/frontend/reducers/output/format.ts

@@ -1,7 +1,12 @@
-import { Action, ActionType } from '../../actions';
-import { finish, start } from './sharedStateManagement';
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 
-const DEFAULT: State = {
+import { adaptFetchError, jsonPost, routes } from '../../actions';
+import { formatRequestSelector } from '../../selectors';
+import RootState from '../../state';
+
+const sliceName = 'output/format';
+
+const initialState: State = {
   requestsInProgress: 0,
 };
 
@@ -11,17 +16,44 @@ interface State {
   stderr?: string;
 }
 
-export default function format(state = DEFAULT, action: Action): State {
-  switch (action.type) {
-    case ActionType.RequestFormat:
-      return start(DEFAULT, state);
-    case ActionType.FormatSucceeded:
-      return finish(state);
-    case ActionType.FormatFailed: {
-      const { stdout = '', stderr = '' } = action;
-      return finish(state, { stdout, stderr });
-    }
-    default:
-      return state;
-  }
+interface FormatRequestBody {
+  code: string;
+  edition: string;
+}
+
+interface FormatResponseBody {
+  success: boolean;
+  code: string;
+  stdout: string;
+  stderr: string;
 }
+
+export const performFormat = createAsyncThunk<FormatResponseBody, void, { state: RootState }>(
+  sliceName,
+  async (_arg: void, { getState }) => {
+    const body: FormatRequestBody = formatRequestSelector(getState());
+
+    return adaptFetchError(() => jsonPost<FormatResponseBody>(routes.format, body));
+  },
+);
+
+const slice = createSlice({
+  name: sliceName,
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(performFormat.pending, (state) => {
+        state.requestsInProgress += 1;
+      })
+      .addCase(performFormat.fulfilled, (state, action) => {
+        state.requestsInProgress -= 1;
+        Object.assign(state, action.payload);
+      })
+      .addCase(performFormat.rejected, (state) => {
+        state.requestsInProgress -= 1;
+      });
+  },
+});
+
+export default slice.reducer;

ui/frontend/reducers/output/meta.ts

@@ -1,6 +1,7 @@
 import { Action, ActionType } from '../../actions';
 import { Focus } from '../../types';
 import { performGistLoad, performGistSave } from './gist';
+import { performFormat } from './format';
 
 const DEFAULT: State = {
 };
@@ -42,14 +43,13 @@ export default function meta(state = DEFAULT, action: Action) {
     case ActionType.WSExecuteRequest:
       return { ...state, focus: Focus.Execute };
 
-    case ActionType.RequestFormat:
-      return { ...state, focus: Focus.Format };
-    case ActionType.FormatSucceeded:
-      return { ...state, focus: undefined };
-
     default: {
       if (performGistLoad.pending.match(action) || performGistSave.pending.match(action)) {
         return { ...state, focus: Focus.Gist };
+      } else if (performFormat.pending.match(action)) {
+        return { ...state, focus: Focus.Format };
+      } else if (performFormat.fulfilled.match(action)) {
+        return { ...state, focus: undefined };
       } else {
         return state;
       }