Rewrite gist 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/gist.ts',
         'websocketMiddleware.ts',
       ],
       extends: ['prettier'],

ui/frontend/.prettierignore

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

ui/frontend/Header.tsx

@@ -15,6 +15,7 @@ import ToolsMenu from './ToolsMenu';
 import * as actions from './actions';
 import * as selectors from './selectors';
 import { useAppDispatch } from './configureStore';
+import { performGistSave } from './reducers/output/gist';
 
 import styles from './Header.module.css';
 
@@ -132,7 +133,7 @@ const AdvancedOptionsMenuButton: React.FC = () => {
 
 const ShareButton: React.FC = () => {
   const dispatch = useAppDispatch();
-  const gistSave = useCallback(() => dispatch(actions.performGistSave()), [dispatch]);
+  const gistSave = useCallback(() => dispatch(performGistSave()), [dispatch]);
 
   return (
     <SegmentedButton title="Create shareable links to this code" onClick={gistSave}>

ui/frontend/actions.ts

@@ -9,7 +9,6 @@ import {
   getCrateType,
   runAsTest,
   useWebsocketSelector,
-  baseUrlSelector,
 } from './selectors';
 import State from './state';
 import {
@@ -35,7 +34,9 @@ import {
   Crate,
 } from './types';
 
-const routes = {
+import { performGistLoad } from './reducers/output/gist';
+
+export const routes = {
   compile: '/compile',
   execute: '/execute',
   format: '/format',
@@ -118,12 +119,6 @@ export enum ActionType {
   RequestMacroExpansion = 'REQUEST_MACRO_EXPANSION',
   MacroExpansionSucceeded = 'MACRO_EXPANSION_SUCCEEDED',
   MacroExpansionFailed = 'MACRO_EXPANSION_FAILED',
-  RequestGistLoad = 'REQUEST_GIST_LOAD',
-  GistLoadSucceeded = 'GIST_LOAD_SUCCEEDED',
-  GistLoadFailed = 'GIST_LOAD_FAILED',
-  RequestGistSave = 'REQUEST_GIST_SAVE',
-  GistSaveSucceeded = 'GIST_SAVE_SUCCEEDED',
-  GistSaveFailed = 'GIST_SAVE_FAILED',
   RequestCratesLoad = 'REQUEST_CRATES_LOAD',
   CratesLoadSucceeded = 'CRATES_LOAD_SUCCEEDED',
   RequestVersionsLoad = 'REQUEST_VERSIONS_LOAD',
@@ -235,13 +230,13 @@ const receiveExecuteFailure = ({ error }: { error?: string }) =>
 
 type FetchArg = Parameters<typeof fetch>[0];
 
-function jsonGet(url: FetchArg) {
+export function jsonGet(url: FetchArg) {
   return fetchJson(url, {
     method: 'get',
   });
 }
 
-function jsonPost<T>(url: FetchArg, body: Record<string, any>): Promise<T> {
+export function jsonPost<T>(url: FetchArg, body: Record<string, any>): Promise<T> {
   return fetchJson(url, {
     method: 'post',
     body: JSON.stringify(body),
@@ -733,83 +728,6 @@ export function performMacroExpansion(): ThunkAction {
   };
 }
 
-interface GistSuccessProps {
-  id: string;
-  url: string;
-  code: string;
-  stdout: string;
-  stderr: string;
-  channel: Channel;
-  mode: Mode;
-  edition: Edition;
-}
-
-const requestGistLoad = () =>
-  createAction(ActionType.RequestGistLoad);
-
-const receiveGistLoadSuccess = (props: GistSuccessProps) =>
-  createAction(ActionType.GistLoadSucceeded, props);
-
-const receiveGistLoadFailure = () => // eslint-disable-line no-unused-vars
-  createAction(ActionType.GistLoadFailed);
-
-type PerformGistLoadProps =
-  Pick<GistSuccessProps, Exclude<keyof GistSuccessProps, 'url' | 'code' | 'stdout' | 'stderr'>>;
-
-export function performGistLoad({ id, channel, mode, edition }: PerformGistLoadProps): ThunkAction {
-  return function(dispatch, getState) {
-    dispatch(requestGistLoad());
-
-    const state = getState();
-    const baseUrl = baseUrlSelector(state);
-    const gistUrl = new URL(routes.meta.gistLoad, baseUrl);
-    const u = new URL(id, gistUrl);
-
-    jsonGet(u)
-      .then(gist => dispatch(receiveGistLoadSuccess({ channel, mode, edition, ...gist })));
-    // TODO: Failure case
-  };
-}
-
-const requestGistSave = () =>
-  createAction(ActionType.RequestGistSave);
-
-const receiveGistSaveSuccess = (props: GistSuccessProps) =>
-  createAction(ActionType.GistSaveSucceeded, props);
-
-const receiveGistSaveFailure = ({ error }: CompileFailure) => // eslint-disable-line no-unused-vars
-  createAction(ActionType.GistSaveFailed, { error });
-
-interface GistResponseBody {
-  id: string;
-  url: string;
-  code: string;
-}
-
-export function performGistSave(): ThunkAction {
-  return function(dispatch, getState) {
-    dispatch(requestGistSave());
-
-    const state = getState();
-    const code = codeSelector(state);
-    const {
-      configuration: {
-        channel, mode, edition,
-      },
-      output: {
-        execute: {
-          stdout = '',
-          stderr = '',
-        },
-      },
-    } = state;
-
-    return jsonPost<GistResponseBody>(routes.meta.gistSave, { code })
-      .then(json => dispatch(receiveGistSaveSuccess({ ...json, code, stdout, stderr, channel, mode, edition })));
-    // TODO: Failure case
-  };
-}
-
 const requestCratesLoad = () =>
   createAction(ActionType.RequestCratesLoad);
 
@@ -1018,12 +936,6 @@ export type Action =
   | ReturnType<typeof requestMacroExpansion>
   | ReturnType<typeof receiveMacroExpansionSuccess>
   | ReturnType<typeof receiveMacroExpansionFailure>
-  | ReturnType<typeof requestGistLoad>
-  | ReturnType<typeof receiveGistLoadSuccess>
-  | ReturnType<typeof receiveGistLoadFailure>
-  | ReturnType<typeof requestGistSave>
-  | ReturnType<typeof receiveGistSaveSuccess>
-  | ReturnType<typeof receiveGistSaveFailure>
   | ReturnType<typeof requestCratesLoad>
   | ReturnType<typeof receiveCratesLoadSuccess>
   | ReturnType<typeof requestVersionsLoad>

ui/frontend/reducers/code.ts

@@ -1,4 +1,5 @@
 import { Action, ActionType } from '../actions';
+import { performGistLoad } from './output/gist'
 
 const DEFAULT: State = `fn main() {
     println!("Hello, world!");
@@ -8,11 +9,6 @@ export type State = string;
 
 export default function code(state = DEFAULT, action: Action): State {
   switch (action.type) {
-    case ActionType.RequestGistLoad:
-      return '';
-    case ActionType.GistLoadSucceeded:
-      return action.code;
-
     case ActionType.EditCode:
       return action.code;
 
@@ -28,7 +24,14 @@ export default function code(state = DEFAULT, action: Action): State {
     case ActionType.FormatSucceeded:
       return action.code;
 
-    default:
-      return state;
+    default: {
+      if (performGistLoad.pending.match(action)) {
+        return '';
+      } else if (performGistLoad.fulfilled.match(action)) {
+        return action.payload.code;
+      } else {
+        return state;
+      }
+    }
   }
 }

ui/frontend/reducers/output/gist.ts

@@ -1,8 +1,14 @@
-import { Action, ActionType } from '../../actions';
+import { Draft, PayloadAction, createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+
+import { jsonGet, jsonPost, routes } from '../../actions';
+import { baseUrlSelector, codeSelector } from '../../selectors';
+import RootState from '../../state';
 import { Channel, Edition, Mode } from '../../types';
-import { finish, RequestsInProgress, start } from './sharedStateManagement';
+import { RequestsInProgress } from './sharedStateManagement';
+
+const sliceName = 'output/gist';
 
-const DEFAULT: State = {
+const initialState: State = {
   requestsInProgress: 0,
 };
 
@@ -15,26 +21,81 @@ interface State extends RequestsInProgress {
   channel?: Channel;
   mode?: Mode;
   edition?: Edition;
-  error?: string;
 }
 
-export default function gist(state = DEFAULT, action: Action): State {
-  switch (action.type) {
-    case ActionType.RequestGistLoad:
-    case ActionType.RequestGistSave:
-      return start(DEFAULT, state);
-
-    case ActionType.GistLoadSucceeded:
-    case ActionType.GistSaveSucceeded: {
-      const { id, url, code, stdout, stderr, channel, mode, edition } = action;
-      return finish(state, { id, url, code, stdout, stderr, channel, mode, edition });
-    }
-
-    case ActionType.GistLoadFailed:
-    case ActionType.GistSaveFailed:
-      return finish(state, { error: 'Some kind of error' });
-
-    default:
-      return state;
-  }
+interface SuccessProps {
+  id: string;
+  url: string;
+  code: string;
+  stdout: string;
+  stderr: string;
+  channel: Channel;
+  mode: Mode;
+  edition: Edition;
+}
+
+type PerformGistLoadProps = Pick<
+  SuccessProps,
+  Exclude<keyof SuccessProps, 'url' | 'code' | 'stdout' | 'stderr'>
+>;
+
+interface GistResponseBody {
+  id: string;
+  url: string;
+  code: string;
 }
+
+export const performGistLoad = createAsyncThunk<
+  SuccessProps,
+  PerformGistLoadProps,
+  { state: RootState }
+>(`${sliceName}/load`, async ({ id, channel, mode, edition }, { getState }) => {
+  const state = getState();
+  const baseUrl = baseUrlSelector(state);
+  const gistUrl = new URL(routes.meta.gistLoad, baseUrl);
+  const u = new URL(id, gistUrl);
+
+  const gist = await jsonGet(u);
+  return { channel, mode, edition, ...gist };
+});
+
+export const performGistSave = createAsyncThunk<SuccessProps, void, { state: RootState }>(
+  `${sliceName}/save`,
+  async (_arg, { getState }) => {
+    const state = getState();
+    const code = codeSelector(state);
+    const {
+      configuration: { channel, mode, edition },
+      output: {
+        execute: { stdout = '', stderr = '' },
+      },
+    } = state;
+
+    const json = await jsonPost<GistResponseBody>(routes.meta.gistSave, { code });
+    return { ...json, code, stdout, stderr, channel, mode, edition };
+  },
+);
+
+const pending = (state: Draft<State>) => {
+  state.requestsInProgress += 1;
+};
+
+const fulfilled = (state: Draft<State>, action: PayloadAction<SuccessProps>) => {
+  state.requestsInProgress -= 1;
+  Object.assign(state, action.payload);
+};
+
+const slice = createSlice({
+  name: sliceName,
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(performGistLoad.pending, pending)
+      .addCase(performGistLoad.fulfilled, fulfilled)
+      .addCase(performGistSave.pending, pending)
+      .addCase(performGistSave.fulfilled, fulfilled);
+  },
+});
+
+export default slice.reducer;

ui/frontend/reducers/output/meta.ts

@@ -1,5 +1,6 @@
 import { Action, ActionType } from '../../actions';
 import { Focus } from '../../types';
+import { performGistLoad, performGistSave } from './gist';
 
 const DEFAULT: State = {
 };
@@ -46,11 +47,12 @@ export default function meta(state = DEFAULT, action: Action) {
     case ActionType.FormatSucceeded:
       return { ...state, focus: undefined };
 
-    case ActionType.RequestGistLoad:
-    case ActionType.RequestGistSave:
-      return { ...state, focus: Focus.Gist };
-
-    default:
-      return state;
+    default: {
+      if (performGistLoad.pending.match(action) || performGistSave.pending.match(action)) {
+        return { ...state, focus: Focus.Gist };
+      } else {
+        return state;
+      }
+    }
   }
 }