Rewrite crates reducer with RTK

Author: shepmaster

ui/frontend/.eslintrc.js

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

ui/frontend/.prettierignore

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

ui/frontend/actions.ts

@@ -26,7 +26,6 @@ import {
   ProcessAssembly,
   Position,
   makePosition,
-  Crate,
 } from './types';
 
 import { performCommonExecute, wsExecuteRequest } from './reducers/output/execute';
@@ -86,8 +85,6 @@ export enum ActionType {
   RequestMacroExpansion = 'REQUEST_MACRO_EXPANSION',
   MacroExpansionSucceeded = 'MACRO_EXPANSION_SUCCEEDED',
   MacroExpansionFailed = 'MACRO_EXPANSION_FAILED',
-  RequestCratesLoad = 'REQUEST_CRATES_LOAD',
-  CratesLoadSucceeded = 'CRATES_LOAD_SUCCEEDED',
   NotificationSeen = 'NOTIFICATION_SEEN',
   BrowserWidthChanged = 'BROWSER_WIDTH_CHANGED',
 }
@@ -379,22 +376,6 @@ export function performMacroExpansion(): ThunkAction {
   };
 }
 
-const requestCratesLoad = () =>
-  createAction(ActionType.RequestCratesLoad);
-
-const receiveCratesLoadSuccess = ({ crates }: { crates: Crate[] }) =>
-  createAction(ActionType.CratesLoadSucceeded, { crates });
-
-export function performCratesLoad(): ThunkAction {
-  return function(dispatch) {
-    dispatch(requestCratesLoad());
-
-    return jsonGet(routes.meta.crates)
-      .then(json => dispatch(receiveCratesLoadSuccess(json)));
-    // TODO: Failure case
-  };
-}
-
 const notificationSeen = (notification: Notification) =>
   createAction(ActionType.NotificationSeen, { notification });
 
@@ -517,8 +498,6 @@ export type Action =
   | ReturnType<typeof requestMacroExpansion>
   | ReturnType<typeof receiveMacroExpansionSuccess>
   | ReturnType<typeof receiveMacroExpansionFailure>
-  | ReturnType<typeof requestCratesLoad>
-  | ReturnType<typeof receiveCratesLoadSuccess>
   | ReturnType<typeof notificationSeen>
   | ReturnType<typeof browserWidthChanged>
   | ReturnType<typeof wsExecuteRequest>

ui/frontend/index.tsx

@@ -14,7 +14,6 @@ import {
   gotoPosition,
   selectText,
   addImport,
-  performCratesLoad,
   reExecuteWithBacktrace,
   browserWidthChanged,
 } from './actions';
@@ -27,6 +26,7 @@ import { disableSyncChangesToStorage } from './reducers/globalConfiguration';
 import Router from './Router';
 import configureStore from './configureStore';
 import { performVersionsLoad } from './reducers/versions';
+import { performCratesLoad } from './reducers/crates';
 
 const store = configureStore(window);
 

ui/frontend/reducers/crates.ts

@@ -1,17 +1,36 @@
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import { sortBy } from 'lodash-es';
+import * as z from 'zod';
 
-import { Action, ActionType } from '../actions';
+import { adaptFetchError, jsonGet, routes } from '../actions';
 import { Crate } from '../types';
 
-const DEFAULT: State = [];
+const sliceName = 'crates';
+
+const initialState: State = [];
 
 export type State = Crate[];
 
-export default function crates(state = DEFAULT, action: Action) {
-  switch (action.type) {
-    case ActionType.CratesLoadSucceeded:
-      return sortBy(action.crates, c => c.name);
-    default:
-      return state;
-  }
-}
+const CratesResponse = z.object({
+  crates: Crate.array(),
+});
+type CratesResponse = z.infer<typeof CratesResponse>;
+
+export const performCratesLoad = createAsyncThunk(sliceName, async () => {
+  const d = await adaptFetchError(() => jsonGet(routes.meta.crates));
+  const crates = await CratesResponse.parseAsync(d);
+  return sortBy(crates.crates, (c) => c.name);
+});
+
+const slice = createSlice({
+  name: sliceName,
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(performCratesLoad.fulfilled, (_state, action) => {
+      return action.payload;
+    });
+  },
+});
+
+export default slice.reducer;

ui/frontend/types.ts

@@ -15,11 +15,13 @@ export interface Selection {
   end?: Position;
 }
 
-export interface Crate {
-  id: string;
-  name: string;
-  version: string;
-}
+export const Crate = z.object({
+  id: z.string(),
+  name: z.string(),
+  version: z.string(),
+});
+
+export type Crate = z.infer<typeof Crate>;
 
 export const Version = z.object({
   version: z.string(),