diff --git a/web/src/js/__tests__/ducks/ui/flowSpec.tsx b/web/src/js/__tests__/ducks/ui/flowSpec.tsx index e93217791..521f89efb 100644 --- a/web/src/js/__tests__/ducks/ui/flowSpec.tsx +++ b/web/src/js/__tests__/ducks/ui/flowSpec.tsx @@ -1,22 +1,26 @@ -import reduceFlow, * as FlowActions from "../../../ducks/ui/flow"; +import flowReducer, { + selectTab, + setContentViewFor, + defaultState, +} from "../../../ducks/ui/flow"; describe("option reducer", () => { it("should return initial state", () => { - expect(reduceFlow(undefined, { type: "other" })).toEqual( - FlowActions.defaultState, - ); + expect(flowReducer(undefined, { type: "other" })).toEqual(defaultState); }); it("should handle set tab", () => { - expect( - reduceFlow(undefined, FlowActions.selectTab("response")).tab, - ).toEqual("response"); + expect(flowReducer(undefined, selectTab("response")).tab).toEqual( + "response", + ); }); it("should handle set content view", () => { expect( - reduceFlow(undefined, FlowActions.setContentViewFor("foo", "Raw")) - .contentViewFor["foo"], + flowReducer( + undefined, + setContentViewFor({ messageId: "foo", contentView: "Raw" }), + ).contentViewFor["foo"], ).toEqual("Raw"); }); }); diff --git a/web/src/js/__tests__/ducks/ui/modalSpec.tsx b/web/src/js/__tests__/ducks/ui/modalSpec.tsx index 1a31a3367..313752efc 100644 --- a/web/src/js/__tests__/ducks/ui/modalSpec.tsx +++ b/web/src/js/__tests__/ducks/ui/modalSpec.tsx @@ -1,20 +1,22 @@ -import reduceModal, * as ModalActions from "../../../ducks/ui/modal"; +import modalReducer, { + setActiveModal, + hideModal, +} from "../../../ducks/ui/modal"; describe("modal reducer", () => { it("should return the initial state", () => { - expect(reduceModal(undefined, {})).toEqual({ activeModal: undefined }); + expect(modalReducer(undefined, { type: "unknown" })).toEqual({ + activeModal: undefined, + }); }); it("should handle setActiveModal action", () => { - const state = reduceModal( - undefined, - ModalActions.setActiveModal("foo"), - ); + const state = modalReducer(undefined, setActiveModal("foo")); expect(state).toEqual({ activeModal: "foo" }); }); it("should handle hideModal action", () => { - const state = reduceModal(undefined, ModalActions.hideModal()); + const state = modalReducer({ activeModal: "foo" }, hideModal()); expect(state).toEqual({ activeModal: undefined }); }); }); diff --git a/web/src/js/__tests__/urlStateSpec.tsx b/web/src/js/__tests__/urlStateSpec.tsx index 9f24feca0..ef141b4f4 100644 --- a/web/src/js/__tests__/urlStateSpec.tsx +++ b/web/src/js/__tests__/urlStateSpec.tsx @@ -62,8 +62,8 @@ describe("updateStoreFromUrl", () => { type: "FLOWS_SELECT", }, { - tab: "request", - type: "UI_FLOWVIEW_SET_TAB", + payload: "request", + type: "ui/flow/selectTab", }, ]); }); diff --git a/web/src/js/components/FlowView/Messages.tsx b/web/src/js/components/FlowView/Messages.tsx index f135a6a87..054ffb509 100644 --- a/web/src/js/components/FlowView/Messages.tsx +++ b/web/src/js/components/FlowView/Messages.tsx @@ -57,7 +57,12 @@ export default function Messages({ flow, messages_meta }: MessagesPropTypes) { - dispatch(setContentViewFor(flow.id + "messages", cv)) + dispatch( + setContentViewFor({ + messageId: flow.id + "messages", + contentView: cv, + }), + ) } /> diff --git a/web/src/js/components/Modal/Modal.tsx b/web/src/js/components/Modal/Modal.tsx index ec6637696..648fcb165 100644 --- a/web/src/js/components/Modal/Modal.tsx +++ b/web/src/js/components/Modal/Modal.tsx @@ -3,9 +3,7 @@ import ModalList from "./ModalList"; import { useAppSelector } from "../../ducks"; export default function PureModal() { - const activeModal: string = useAppSelector( - (state) => state.ui.modal.activeModal, - ); + const activeModal = useAppSelector((state) => state.ui.modal.activeModal); const ActiveModal: (() => JSX.Element) | undefined = ModalList.find( (m) => m.name === activeModal, ); diff --git a/web/src/js/components/contentviews/HttpMessage.tsx b/web/src/js/components/contentviews/HttpMessage.tsx index 272112661..d34c04c3d 100644 --- a/web/src/js/components/contentviews/HttpMessage.tsx +++ b/web/src/js/components/contentviews/HttpMessage.tsx @@ -118,7 +118,12 @@ export default function HttpMessage({ flow, message }: HttpMessageProps) { - dispatch(setContentViewFor(flow.id + part, cv)) + dispatch( + setContentViewFor({ + messageId: flow.id + part, + contentView: cv, + }), + ) } /> diff --git a/web/src/js/ducks/ui/flow.ts b/web/src/js/ducks/ui/flow.ts index 96dca1b49..d118cfbc2 100644 --- a/web/src/js/ducks/ui/flow.ts +++ b/web/src/js/ducks/ui/flow.ts @@ -1,5 +1,4 @@ -export const SET_TAB = "UI_FLOWVIEW_SET_TAB"; -export const SET_CONTENT_VIEW_FOR = "SET_CONTENT_VIEW_FOR"; +import { createSlice, PayloadAction } from "@reduxjs/toolkit"; interface UiFlowState { tab: string; @@ -11,32 +10,23 @@ export const defaultState: UiFlowState = { contentViewFor: {}, }; -export default function reducer(state = defaultState, action): UiFlowState { - switch (action.type) { - case SET_CONTENT_VIEW_FOR: - return { - ...state, - contentViewFor: { - ...state.contentViewFor, - [action.messageId]: action.contentView, - }, - }; +const flowsSlice = createSlice({ + name: "ui/flow", + initialState: defaultState, + reducers: { + selectTab(state, action: PayloadAction) { + state.tab = action.payload; + }, + setContentViewFor( + state, + action: PayloadAction<{ messageId: string; contentView: string }>, + ) { + state.contentViewFor[action.payload.messageId] = + action.payload.contentView; + }, + }, +}); - case SET_TAB: - return { - ...state, - tab: action.tab ? action.tab : "request", - }; - - default: - return state; - } -} - -export function selectTab(tab) { - return { type: SET_TAB, tab }; -} - -export function setContentViewFor(messageId: string, contentView: string) { - return { type: SET_CONTENT_VIEW_FOR, messageId, contentView }; -} +const { actions, reducer } = flowsSlice; +export const { selectTab, setContentViewFor } = actions; +export default reducer; diff --git a/web/src/js/ducks/ui/modal.ts b/web/src/js/ducks/ui/modal.ts index 734f4a995..3563a3f35 100644 --- a/web/src/js/ducks/ui/modal.ts +++ b/web/src/js/ducks/ui/modal.ts @@ -1,32 +1,23 @@ -export const HIDE_MODAL = "UI_HIDE_MODAL"; -export const SET_ACTIVE_MODAL = "UI_SET_ACTIVE_MODAL"; +import { createSlice } from "@reduxjs/toolkit"; -const defaultState = { +const defaultState: { activeModal: string | undefined } = { activeModal: undefined, }; -export default function reducer(state = defaultState, action) { - switch (action.type) { - case SET_ACTIVE_MODAL: - return { - ...state, - activeModal: action.activeModal, - }; +const modalSlice = createSlice({ + name: "ui/modal", + initialState: defaultState, + reducers: { + setActiveModal(state, action) { + state.activeModal = action.payload; + }, + hideModal(state) { + state.activeModal = undefined; + }, + }, +}); - case HIDE_MODAL: - return { - ...state, - activeModal: undefined, - }; - default: - return state; - } -} - -export function setActiveModal(activeModal) { - return { type: SET_ACTIVE_MODAL, activeModal }; -} - -export function hideModal() { - return { type: HIDE_MODAL }; -} +const { actions, reducer } = modalSlice; +export const HIDE_MODAL = modalSlice.actions.hideModal.type; +export const { setActiveModal, hideModal } = actions; +export default reducer;