Rewrite browser reducer in RTK

Author: shepmaster

ui/frontend/.eslintrc.js

@@ -71,6 +71,7 @@ module.exports = {
         'compileActions.ts',
         'editor/AceEditor.tsx',
         'editor/SimpleEditor.tsx',
+        'reducers/browser.ts',
         'reducers/client.ts',
         'reducers/code.ts',
         'reducers/crates.ts',

ui/frontend/.prettierignore

@@ -22,6 +22,7 @@ node_modules
 !compileActions.ts
 !editor/AceEditor.tsx
 !editor/SimpleEditor.tsx
+!reducers/browser.ts
 !reducers/client.ts
 !reducers/code.ts
 !reducers/crates.ts

ui/frontend/actions.ts

@@ -59,7 +59,6 @@ export enum ActionType {
   ChangeBacktrace = 'CHANGE_BACKTRACE',
   SelectText = 'SELECT_TEXT',
   NotificationSeen = 'NOTIFICATION_SEEN',
-  BrowserWidthChanged = 'BROWSER_WIDTH_CHANGED',
 }
 
 export const initializeApplication = () => createAction(ActionType.InitializeApplication);
@@ -200,9 +199,6 @@ const notificationSeen = (notification: Notification) =>
 
 export const seenRustSurvey2022 = () => notificationSeen(Notification.RustSurvey2022);
 
-export const browserWidthChanged = (isSmall: boolean) =>
-  createAction(ActionType.BrowserWidthChanged, { isSmall });
-
 function parseChannel(s?: string): Channel | null {
   switch (s) {
     case 'stable':
@@ -306,7 +302,6 @@ export type Action =
   | ReturnType<typeof changeMonacoTheme>
   | ReturnType<typeof selectText>
   | ReturnType<typeof notificationSeen>
-  | ReturnType<typeof browserWidthChanged>
   | ReturnType<typeof editCode>
   | ReturnType<typeof addCrateType>
   | ReturnType<typeof navigateToIndex>

ui/frontend/index.tsx

@@ -11,7 +11,6 @@ import { v4 } from 'uuid';
 import {
   selectText,
   reExecuteWithBacktrace,
-  browserWidthChanged,
 } from './actions';
 import { configureRustErrors } from './highlighting';
 import PageSwitcher from './PageSwitcher';
@@ -25,6 +24,7 @@ import { performVersionsLoad } from './reducers/versions';
 import { performCratesLoad } from './reducers/crates';
 import { gotoPosition } from './reducers/position';
 import { addImport, editCode, enableFeatureGate } from './reducers/code';
+import { browserWidthChanged } from './reducers/browser';
 
 const store = configureStore(window);
 

ui/frontend/reducers/browser.ts

@@ -1,19 +1,23 @@
-import { Action, ActionType } from '../actions';
+import { PayloadAction, createSlice } from '@reduxjs/toolkit';
 
-const DEFAULT: State = {
+const initialState: State = {
   isSmall: true,
 };
 
 export type State = {
   isSmall: boolean;
 };
 
-export default function code(state = DEFAULT, action: Action): State {
-  switch (action.type) {
-    case ActionType.BrowserWidthChanged:
-      return { ...state, isSmall: action.isSmall };
+const slice = createSlice({
+  name: 'browser',
+  initialState,
+  reducers: {
+    browserWidthChanged: (state, action: PayloadAction<boolean>) => {
+      state.isSmall = action.payload;
+    },
+  },
+});
 
-    default:
-      return state;
-  }
-}
+export const { browserWidthChanged } = slice.actions;
+
+export default slice.reducer;