From f206ef7aa525e2756f79f72603ec4fb481a06839 Mon Sep 17 00:00:00 2001 From: Andrea Date: Tue, 11 Jun 2024 16:26:27 +0200 Subject: [PATCH] feat: [IOCOM-1411] Navigation to message routing, from new DS messages' home (#5830) ## Short description This PR adds the navigation to the message routing on a message tap, on the new DS messages' home. Precondition handling will come in a later PR (same goes for archiving/unarchiving) ## List of changes proposed in this pull request - Added callback to navigate to the message router upon MessageListItem tap selection ## How to test Using the io-dev-api-server, enable the new DS and the new messages' home. Select a message. --------- Co-authored-by: Martino Cesari Tomba <60693085+forrest57@users.noreply.github.com> --- .../messages/components/Home/MessageList.tsx | 4 +-- .../Home/WrappedMessageListItem.tsx | 24 ++++++++++++++-- .../__tests__/WrappedMessageListItem.test.tsx | 28 ++++++++++++++++++- .../WrappedMessageListItem.test.tsx.snap | 4 +++ 4 files changed, 55 insertions(+), 5 deletions(-) diff --git a/ts/features/messages/components/Home/MessageList.tsx b/ts/features/messages/components/Home/MessageList.tsx index 1bfb6764ffa..9a39289e469 100644 --- a/ts/features/messages/components/Home/MessageList.tsx +++ b/ts/features/messages/components/Home/MessageList.tsx @@ -45,7 +45,7 @@ export const MessageList = ({ category }: MessageListProps) => { data={(messageList ?? loadingList) as Readonly>} ListEmptyComponent={} ItemSeparatorComponent={messageList ? () => : undefined} - renderItem={({ item }) => { + renderItem={({ index, item }) => { if (typeof item === "number") { return ( { /> ); } else { - return ; + return ; } }} /> diff --git a/ts/features/messages/components/Home/WrappedMessageListItem.tsx b/ts/features/messages/components/Home/WrappedMessageListItem.tsx index d6b52d5eb5e..d077119c2cb 100644 --- a/ts/features/messages/components/Home/WrappedMessageListItem.tsx +++ b/ts/features/messages/components/Home/WrappedMessageListItem.tsx @@ -1,19 +1,24 @@ -import React, { useMemo } from "react"; +import React, { useCallback, useMemo } from "react"; import { UIMessage } from "../../types"; import I18n from "../../../../i18n"; import { TagEnum } from "../../../../../definitions/backend/MessageCategoryPN"; import { convertDateToWordDistance } from "../../utils/convertDateToWordDistance"; +import { useIONavigation } from "../../../../navigation/params/AppParamsList"; +import { MESSAGES_ROUTES } from "../../navigation/routes"; import { logoForService } from "../../../services/home/utils"; import { accessibilityLabelForMessageItem } from "./homeUtils"; import { MessageListItem } from "./DS/MessageListItem"; type WrappedMessageListItemProps = { + index: number; message: UIMessage; }; export const WrappedMessageListItem = ({ + index, message }: WrappedMessageListItemProps) => { + const navigation = useIONavigation(); const serviceId = message.serviceId; const organizationFiscalCode = message.organizationFiscalCode; @@ -40,18 +45,33 @@ export const WrappedMessageListItem = ({ [message] ); + const onPressCallback = useCallback(() => { + if (message.category.tag === TagEnum.PN || message.hasPrecondition) { + // TODO preconditions IOCOM-840 + return; + } + navigation.navigate(MESSAGES_ROUTES.MESSAGES_NAVIGATOR, { + screen: MESSAGES_ROUTES.MESSAGE_ROUTER, + params: { + messageId: message.id, + fromNotification: false + } + }); + }, [message, navigation]); + return ( undefined} - onPress={() => undefined} + onPress={onPressCallback} serviceLogos={serviceLogoUriSources} badgeText={badgeText} isRead={isRead} organizationName={organizationName} formattedDate={messageDate} + testID={`wrapped_message_list_item_${index}`} /> ); }; diff --git a/ts/features/messages/components/Home/__tests__/WrappedMessageListItem.test.tsx b/ts/features/messages/components/Home/__tests__/WrappedMessageListItem.test.tsx index a84085a0a5f..c5a2e8cbd35 100644 --- a/ts/features/messages/components/Home/__tests__/WrappedMessageListItem.test.tsx +++ b/ts/features/messages/components/Home/__tests__/WrappedMessageListItem.test.tsx @@ -1,5 +1,6 @@ import React from "react"; import { createStore } from "redux"; +import { fireEvent } from "@testing-library/react-native"; import { appReducer } from "../../../../../store/reducers"; import { applicationChangeState } from "../../../../../store/actions/application"; import { preferencesDesignSystemSetEnabled } from "../../../../../store/actions/persistedPreferences"; @@ -17,6 +18,16 @@ jest.mock("react-redux", () => ({ useDispatch: () => mockDispatch })); +const mockNavigate = jest.fn(); +jest.mock("@react-navigation/native", () => ({ + ...jest.requireActual( + "@react-navigation/native" + ), + useNavigation: () => ({ + navigate: mockNavigate + }) +})); + describe("WrappedMessageListItem", () => { beforeEach(() => { jest.resetAllMocks(); @@ -42,6 +53,21 @@ describe("WrappedMessageListItem", () => { const component = renderComponent(message); expect(component.toJSON()).toMatchSnapshot(); }); + it("should trigger navigation to Message Routing when the component is pressed", () => { + const message = messageGenerator(false, true); + const component = renderComponent(message); + const pressable = component.getByTestId("wrapped_message_list_item_0"); + expect(pressable).toBeDefined(); + fireEvent.press(pressable); + expect(mockNavigate.mock.calls.length).toBe(1); + expect(mockNavigate.mock.calls[0][1]).toStrictEqual({ + screen: MESSAGES_ROUTES.MESSAGE_ROUTER, + params: { + messageId: message.id, + fromNotification: false + } + }); + }); }); const messageGenerator = (isFromSend: boolean, isRead: boolean): UIMessage => @@ -66,7 +92,7 @@ const renderComponent = (message: UIMessage) => { ); const store = createStore(appReducer, designSystemState as any); return renderScreenWithNavigationStoreContext( - () => , + () => , MESSAGES_ROUTES.MESSAGES_HOME, {}, store diff --git a/ts/features/messages/components/Home/__tests__/__snapshots__/WrappedMessageListItem.test.tsx.snap b/ts/features/messages/components/Home/__tests__/__snapshots__/WrappedMessageListItem.test.tsx.snap index 1da5cd9c84d..43259c5bd14 100644 --- a/ts/features/messages/components/Home/__tests__/__snapshots__/WrappedMessageListItem.test.tsx.snap +++ b/ts/features/messages/components/Home/__tests__/__snapshots__/WrappedMessageListItem.test.tsx.snap @@ -342,6 +342,7 @@ exports[`WrappedMessageListItem should match snapshot, from SEND, read mes "backgroundColor": undefined, } } + testID="wrapped_message_list_item_0" >