Update flow.ts and modal.ts ducks to RTK (#7311)

* use rtk in modal duck

* adapt flow duck to rtk

* export HIDE_MODAL event type

* change object to string in selectTab

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

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");
     });
 });

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 });
     });
 });

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",
             },
         ]);
     });

web/src/js/components/FlowView/Messages.tsx

@@ -57,7 +57,12 @@ export default function Messages({ flow, messages_meta }: MessagesPropTypes) {
                 <ViewSelector
                     value={contentView}
                     onChange={(cv) =>
-                        dispatch(setContentViewFor(flow.id + "messages", cv))
+                        dispatch(
+                            setContentViewFor({
+                                messageId: flow.id + "messages",
+                                contentView: cv,
+                            }),
+                        )
                     }
                 />
             </div>

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,
     );

web/src/js/components/contentviews/HttpMessage.tsx

@@ -118,7 +118,12 @@ export default function HttpMessage({ flow, message }: HttpMessageProps) {
                     <ViewSelector
                         value={contentView}
                         onChange={(cv) =>
-                            dispatch(setContentViewFor(flow.id + part, cv))
+                            dispatch(
+                                setContentViewFor({
+                                    messageId: flow.id + part,
+                                    contentView: cv,
+                                }),
+                            )
                         }
                     />
                 </div>

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<string>) {
+            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;

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;