diff --git a/ui/frontend/.eslintrc.js b/ui/frontend/.eslintrc.js index 35307cfcc..dc315f458 100644 --- a/ui/frontend/.eslintrc.js +++ b/ui/frontend/.eslintrc.js @@ -79,6 +79,7 @@ module.exports = { 'reducers/output/gist.ts', 'reducers/output/hir.ts', 'reducers/output/llvmIr.ts', + 'reducers/output/meta.ts', 'reducers/output/mir.ts', 'reducers/output/wasm.ts', 'reducers/websocket.ts', diff --git a/ui/frontend/.prettierignore b/ui/frontend/.prettierignore index f7c8a5196..8fc4d87ca 100644 --- a/ui/frontend/.prettierignore +++ b/ui/frontend/.prettierignore @@ -30,6 +30,7 @@ node_modules !reducers/output/gist.ts !reducers/output/hir.ts !reducers/output/llvmIr.ts +!reducers/output/meta.ts !reducers/output/mir.ts !reducers/output/wasm.ts !reducers/websocket.ts diff --git a/ui/frontend/Output.tsx b/ui/frontend/Output.tsx index aeabc8610..16b26bbb3 100644 --- a/ui/frontend/Output.tsx +++ b/ui/frontend/Output.tsx @@ -1,7 +1,7 @@ import React, { useCallback } from 'react'; import { useSelector, useDispatch } from 'react-redux'; -import * as actions from './actions'; +import { changeFocus } from './reducers/output/meta'; import { State } from './reducers'; import { Focus } from './types'; @@ -52,18 +52,18 @@ const Output: React.FC = () => { useSelector((state: State) => state.output); const dispatch = useDispatch(); - const focusClose = useCallback(() => dispatch(actions.changeFocus()), [dispatch]); - const focusExecute = useCallback(() => dispatch(actions.changeFocus(Focus.Execute)), [dispatch]); - const focusFormat = useCallback(() => dispatch(actions.changeFocus(Focus.Format)), [dispatch]); - const focusClippy = useCallback(() => dispatch(actions.changeFocus(Focus.Clippy)), [dispatch]); - const focusMiri = useCallback(() => dispatch(actions.changeFocus(Focus.Miri)), [dispatch]); - const focusMacroExpansion = useCallback(() => dispatch(actions.changeFocus(Focus.MacroExpansion)), [dispatch]); - const focusAssembly = useCallback(() => dispatch(actions.changeFocus(Focus.Asm)), [dispatch]); - const focusLlvmIr = useCallback(() => dispatch(actions.changeFocus(Focus.LlvmIr)), [dispatch]); - const focusMir = useCallback(() => dispatch(actions.changeFocus(Focus.Mir)), [dispatch]); - const focusHir = useCallback(() => dispatch(actions.changeFocus(Focus.Hir)), [dispatch]); - const focusWasm = useCallback(() => dispatch(actions.changeFocus(Focus.Wasm)), [dispatch]); - const focusGist = useCallback(() => dispatch(actions.changeFocus(Focus.Gist)), [dispatch]); + const focusClose = useCallback(() => dispatch(changeFocus()), [dispatch]); + const focusExecute = useCallback(() => dispatch(changeFocus(Focus.Execute)), [dispatch]); + const focusFormat = useCallback(() => dispatch(changeFocus(Focus.Format)), [dispatch]); + const focusClippy = useCallback(() => dispatch(changeFocus(Focus.Clippy)), [dispatch]); + const focusMiri = useCallback(() => dispatch(changeFocus(Focus.Miri)), [dispatch]); + const focusMacroExpansion = useCallback(() => dispatch(changeFocus(Focus.MacroExpansion)), [dispatch]); + const focusAssembly = useCallback(() => dispatch(changeFocus(Focus.Asm)), [dispatch]); + const focusLlvmIr = useCallback(() => dispatch(changeFocus(Focus.LlvmIr)), [dispatch]); + const focusMir = useCallback(() => dispatch(changeFocus(Focus.Mir)), [dispatch]); + const focusHir = useCallback(() => dispatch(changeFocus(Focus.Hir)), [dispatch]); + const focusWasm = useCallback(() => dispatch(changeFocus(Focus.Wasm)), [dispatch]); + const focusGist = useCallback(() => dispatch(changeFocus(Focus.Gist)), [dispatch]); const showStdin = useSelector(selectors.showStdinSelector); diff --git a/ui/frontend/actions.ts b/ui/frontend/actions.ts index d1ae534f3..be97f7c3e 100644 --- a/ui/frontend/actions.ts +++ b/ui/frontend/actions.ts @@ -16,7 +16,6 @@ import { DemangleAssembly, Edition, Editor, - Focus, Mode, Notification, Orientation, @@ -86,7 +85,6 @@ export enum ActionType { ChangeMode = 'CHANGE_MODE', ChangeEdition = 'CHANGE_EDITION', ChangeBacktrace = 'CHANGE_BACKTRACE', - ChangeFocus = 'CHANGE_FOCUS', EditCode = 'EDIT_CODE', AddMainFunction = 'ADD_MAIN_FUNCTION', AddImport = 'ADD_IMPORT', @@ -174,9 +172,6 @@ export const reExecuteWithBacktrace = (): ThunkAction => dispatch => { dispatch(performExecuteOnly()); }; -export const changeFocus = (focus?: Focus) => - createAction(ActionType.ChangeFocus, { focus }); - type FetchArg = Parameters[0]; export function jsonGet(url: FetchArg) { @@ -634,7 +629,6 @@ export type Action = | ReturnType | ReturnType | ReturnType - | ReturnType | ReturnType | ReturnType | ReturnType diff --git a/ui/frontend/reducers/output/meta.ts b/ui/frontend/reducers/output/meta.ts index 619d8c62a..0ec3208d6 100644 --- a/ui/frontend/reducers/output/meta.ts +++ b/ui/frontend/reducers/output/meta.ts @@ -1,64 +1,90 @@ -import { Action, ActionType } from '../../actions'; +import { PayloadAction, createSlice } from '@reduxjs/toolkit'; +import { Draft } from 'immer'; + +import { ActionType } from '../../actions'; import { Focus } from '../../types'; -import { performGistLoad, performGistSave } from './gist'; -import { performFormat } from './format'; -import { performExecute, wsExecuteRequest } from './execute'; import { performCompileAssembly } from './assembly'; +import { performExecute, wsExecuteRequest } from './execute'; +import { performFormat } from './format'; +import { performGistLoad, performGistSave } from './gist'; import { performCompileHir } from './hir'; import { performCompileLlvmIr } from './llvmIr'; import { performCompileMir } from './mir'; import { performCompileWasm } from './wasm'; -const DEFAULT: State = { -}; +const initialState: State = {}; interface State { focus?: Focus; } -export default function meta(state = DEFAULT, action: Action) { - switch (action.type) { - case ActionType.ChangeFocus: - return { ...state, focus: action.focus }; +function setExecute(state: Draft) { + state.focus = Focus.Execute; +} +function setGist(state: Draft) { + state.focus = Focus.Gist; +} - case ActionType.RequestClippy: - return { ...state, focus: Focus.Clippy }; +const slice = createSlice({ + name: 'output/meta', + initialState, + reducers: { + changeFocus: (state, action: PayloadAction) => { + state.focus = action.payload; + }, + }, + extraReducers: (builder) => { + builder + .addCase(ActionType.RequestClippy, (state) => { + state.focus = Focus.Clippy; + }) - case ActionType.RequestMiri: - return { ...state, focus: Focus.Miri }; + .addCase(ActionType.RequestMiri, (state) => { + state.focus = Focus.Miri; + }) - case ActionType.RequestMacroExpansion: - return { ...state, focus: Focus.MacroExpansion }; + .addCase(ActionType.RequestMacroExpansion, (state) => { + state.focus = Focus.MacroExpansion; + }) - case performExecute.pending.type: - case wsExecuteRequest.type: - return { ...state, focus: Focus.Execute }; + .addCase(performExecute.pending, setExecute) + .addCase(wsExecuteRequest, setExecute) - case performCompileAssembly.pending.type: - return { ...state, focus: Focus.Asm }; + .addCase(performCompileAssembly.pending, (state) => { + state.focus = Focus.Asm; + }) - case performCompileHir.pending.type: - return { ...state, focus: Focus.Hir }; + .addCase(performCompileHir.pending, (state) => { + state.focus = Focus.Hir; + }) - case performCompileLlvmIr.pending.type: - return { ...state, focus: Focus.LlvmIr }; + .addCase(performCompileLlvmIr.pending, (state) => { + state.focus = Focus.LlvmIr; + }) - case performCompileMir.pending.type: - return { ...state, focus: Focus.Mir }; + .addCase(performCompileMir.pending, (state) => { + state.focus = Focus.Mir; + }) - case performCompileWasm.pending.type: - return { ...state, focus: Focus.Wasm }; + .addCase(performCompileWasm.pending, (state) => { + state.focus = Focus.Wasm; + }) - 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; - } - } - } -} + .addCase(performFormat.pending, (state) => { + state.focus = Focus.Format; + }) + + .addCase(performFormat.fulfilled, (state, action) => { + if (action.payload.success) { + state.focus = undefined; + } + }) + + .addCase(performGistLoad.pending, setGist) + .addCase(performGistSave.pending, setGist); + }, +}); + +export const { changeFocus } = slice.actions; + +export default slice.reducer;