Rewrite clippy reducer with RTK

Author: shepmaster

ui/frontend/.eslintrc.js

@@ -74,6 +74,7 @@ module.exports = {
         'reducers/featureFlags.ts',
         'reducers/globalConfiguration.ts',
         'reducers/output/assembly.ts',
+        'reducers/output/clippy.ts',
         'reducers/output/execute.ts',
         'reducers/output/format.ts',
         'reducers/output/gist.ts',

ui/frontend/.prettierignore

@@ -25,6 +25,7 @@ node_modules
 !reducers/featureFlags.ts
 !reducers/globalConfiguration.ts
 !reducers/output/assembly.ts
+!reducers/output/clippy.ts
 !reducers/output/execute.ts
 !reducers/output/format.ts
 !reducers/output/gist.ts

ui/frontend/ToolsMenu.tsx

@@ -9,6 +9,7 @@ import * as selectors from './selectors';
 import * as actions from './actions';
 import { useAppDispatch } from './configureStore';
 import { performFormat } from './reducers/output/format';
+import { performClippy } from './reducers/output/clippy';
 
 interface ToolsMenuProps {
   close: () => void;
@@ -26,7 +27,7 @@ const ToolsMenu: React.FC<ToolsMenuProps> = props => {
 
   const dispatch = useAppDispatch();
   const clippy = useCallback(() => {
-    dispatch(actions.performClippy());
+    dispatch(performClippy());
     props.close();
   }, [dispatch, props]);
   const miri = useCallback(() => {

ui/frontend/actions.ts

@@ -3,7 +3,6 @@ import { ThunkAction as ReduxThunkAction, AnyAction } from '@reduxjs/toolkit';
 
 import {
   codeSelector,
-  clippyRequestSelector,
   getCrateType,
   runAsTest,
   wasmLikelyToWork,
@@ -84,9 +83,6 @@ export enum ActionType {
   EnableFeatureGate = 'ENABLE_FEATURE_GATE',
   GotoPosition = 'GOTO_POSITION',
   SelectText = 'SELECT_TEXT',
-  RequestClippy = 'REQUEST_CLIPPY',
-  ClippySucceeded = 'CLIPPY_SUCCEEDED',
-  ClippyFailed = 'CLIPPY_FAILED',
   RequestMiri = 'REQUEST_MIRI',
   MiriSucceeded = 'MIRI_SUCCEEDED',
   MiriFailed = 'MIRI_FAILED',
@@ -346,42 +342,6 @@ interface GeneralSuccess {
   stderr: string;
 }
 
-const requestClippy = () =>
-  createAction(ActionType.RequestClippy);
-
-interface ClippyRequestBody {
-  code: string;
-  edition: string;
-  crateType: string;
-}
-
-interface ClippyResponseBody {
-  success: boolean;
-  stdout: string;
-  stderr: string;
-}
-
-type ClippySuccess = GeneralSuccess;
-
-const receiveClippySuccess = ({ stdout, stderr }: ClippySuccess) =>
-  createAction(ActionType.ClippySucceeded, { stdout, stderr });
-
-const receiveClippyFailure = ({ error }: GenericApiFailure) =>
-  createAction(ActionType.ClippyFailed, { error });
-
-export function performClippy(): ThunkAction {
-  // TODO: Check a cache
-  return function(dispatch, getState) {
-    dispatch(requestClippy());
-
-    const body: ClippyRequestBody = clippyRequestSelector(getState());
-
-    return jsonPost<ClippyResponseBody>(routes.clippy, body)
-      .then(json => dispatch(receiveClippySuccess(json)))
-      .catch(json => dispatch(receiveClippyFailure(json)));
-  };
-}
-
 const requestMiri = () =>
   createAction(ActionType.RequestMiri);
 
@@ -597,9 +557,6 @@ export type Action =
   | ReturnType<typeof enableFeatureGate>
   | ReturnType<typeof gotoPosition>
   | ReturnType<typeof selectText>
-  | ReturnType<typeof requestClippy>
-  | ReturnType<typeof receiveClippySuccess>
-  | ReturnType<typeof receiveClippyFailure>
   | ReturnType<typeof requestMiri>
   | ReturnType<typeof receiveMiriSuccess>
   | ReturnType<typeof receiveMiriFailure>

ui/frontend/reducers/output/clippy.ts

@@ -1,7 +1,13 @@
-import { Action, ActionType } from '../../actions';
-import { finish, start } from './sharedStateManagement';
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import * as z from 'zod';
 
-const DEFAULT: State = {
+import { adaptFetchError, jsonPost, routes } from '../../actions';
+import { clippyRequestSelector } from '../../selectors';
+import RootState from '../../state';
+
+const sliceName = 'output/clippy';
+
+const initialState: State = {
   requestsInProgress: 0,
 };
 
@@ -12,17 +18,47 @@ interface State {
   error?: string;
 }
 
-export default function clippy(state = DEFAULT, action: Action) {
-  switch (action.type) {
-    case ActionType.RequestClippy:
-      return start(DEFAULT, state);
-    case ActionType.ClippySucceeded: {
-      const { stdout = '', stderr = '' } = action;
-      return finish(state, { stdout, stderr });
-    }
-    case ActionType.ClippyFailed:
-      return finish(state, { error: action.error });
-    default:
-      return state;
-  }
+interface ClippyRequestBody {
+  code: string;
+  edition: string;
+  crateType: string;
 }
+
+const ClippyResponseBody = z.object({
+  success: z.boolean(),
+  stdout: z.string(),
+  stderr: z.string(),
+});
+
+type ClippyResponseBody = z.infer<typeof ClippyResponseBody>;
+
+export const performClippy = createAsyncThunk<ClippyResponseBody, void, { state: RootState }>(
+  sliceName,
+  async (_arg: void, { getState }) => {
+    const body: ClippyRequestBody = clippyRequestSelector(getState());
+
+    const d = await adaptFetchError(() => jsonPost(routes.clippy, body));
+    return ClippyResponseBody.parseAsync(d);
+  },
+);
+
+const slice = createSlice({
+  name: sliceName,
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(performClippy.pending, (state) => {
+        state.requestsInProgress += 1;
+      })
+      .addCase(performClippy.fulfilled, (state, action) => {
+        state.requestsInProgress -= 1;
+        Object.assign(state, action.payload);
+      })
+      .addCase(performClippy.rejected, (state) => {
+        state.requestsInProgress -= 1;
+      });
+  },
+});
+
+export default slice.reducer;

ui/frontend/reducers/output/meta.ts

@@ -4,6 +4,7 @@ import { Draft } from 'immer';
 import { ActionType } from '../../actions';
 import { Focus } from '../../types';
 import { performCompileAssembly } from './assembly';
+import { performClippy } from './clippy';
 import { performExecute, wsExecuteRequest } from './execute';
 import { performFormat } from './format';
 import { performGistLoad, performGistSave } from './gist';
@@ -35,7 +36,7 @@ const slice = createSlice({
   },
   extraReducers: (builder) => {
     builder
-      .addCase(ActionType.RequestClippy, (state) => {
+      .addCase(performClippy.pending, (state) => {
         state.focus = Focus.Clippy;
       })