Merge branch 'master' into IOAPPX-283-add-ioscrollview-next-iteration…

…-of-gradientscroll
pagopa · May 17, 2024 · fb4f97f · fb4f97f
2 parents 763d43d + cb333d9
commit fb4f97f
Show file tree

Hide file tree

Showing 39 changed files with 2,455 additions and 162 deletions.
diff --git a/ts/boot/__tests__/__snapshots__/persistedStore.test.ts.snap b/ts/boot/__tests__/__snapshots__/persistedStore.test.ts.snap
@@ -64,6 +64,7 @@ Object {
       "migration": Object {
         "_tag": "None",
       },
+      "shownCategory": "INBOX",
     },
     "detailsById": Object {},
     "downloads": Object {},

diff --git a/ts/features/messages/components/Home/MessageList.tsx b/ts/features/messages/components/Home/MessageList.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import { Body } from "@pagopa/io-app-design-system";
+import { MessageListCategory } from "../../types/messageListCategory";
+
+const styles = StyleSheet.create({
+  tempPagerViewContainer: {
+    alignItems: "center",
+    flex: 1,
+    justifyContent: "center"
+  }
+});
+
+type MessageListProps = {
+  category: MessageListCategory;
+};
+
+export const MessageList = ({ category }: MessageListProps) => (
+  <View collapsable={false} style={styles.tempPagerViewContainer}>
+    <Body>{`${category} in sviluppo`}</Body>
+  </View>
+);
diff --git a/ts/features/messages/components/Home/PagerViewContainer.tsx b/ts/features/messages/components/Home/PagerViewContainer.tsx
@@ -0,0 +1,39 @@
+import React, { useCallback } from "react";
+import { NativeSyntheticEvent } from "react-native";
+import PagerView from "react-native-pager-view";
+import { OnPageSelectedEventData } from "react-native-pager-view/lib/typescript/PagerViewNativeComponent";
+import { IOStyles } from "@pagopa/io-app-design-system";
+import { useIODispatch, useIOStore } from "../../../../store/hooks";
+import { setShownMessageCategoryAction } from "../../store/actions";
+import { MessageList } from "./MessageList";
+import {
+  getMessagesViewPagerInitialPageIndex,
+  messageViewPageIndexToListCategory
+} from "./homeUtils";
+
+export const PagerViewContainer = React.forwardRef<PagerView>((_, ref) => {
+  const dispatch = useIODispatch();
+  const store = useIOStore();
+  const state = store.getState();
+  const initialPageIndex = getMessagesViewPagerInitialPageIndex(state);
+  const onPagerViewPageSelected = useCallback(
+    (selectionEvent: NativeSyntheticEvent<OnPageSelectedEventData>) => {
+      const selectedTabIndex = selectionEvent.nativeEvent.position;
+      const selectedShownCategory =
+        messageViewPageIndexToListCategory(selectedTabIndex);
+      dispatch(setShownMessageCategoryAction(selectedShownCategory));
+    },
+    [dispatch]
+  );
+  return (
+    <PagerView
+      initialPage={initialPageIndex}
+      onPageSelected={onPagerViewPageSelected}
+      ref={ref}
+      style={IOStyles.flex}
+    >
+      <MessageList key={`message_list_inbox`} category={"INBOX"} />
+      <MessageList key={`message_list_category`} category={"ARCHIVE"} />
+    </PagerView>
+  );
+});
diff --git a/ts/features/messages/components/Home/TabNavigationContainer.tsx b/ts/features/messages/components/Home/TabNavigationContainer.tsx
@@ -0,0 +1,80 @@
+import React, { useCallback, useEffect } from "react";
+import { StyleSheet, View } from "react-native";
+import PagerView from "react-native-pager-view";
+import { TabItem, TabNavigation } from "@pagopa/io-app-design-system";
+import I18n from "../../../../i18n";
+import {
+  useIODispatch,
+  useIOSelector,
+  useIOStore
+} from "../../../../store/hooks";
+import { shownMessageCategorySelector } from "../../store/reducers/allPaginated";
+import { setShownMessageCategoryAction } from "../../store/actions";
+import {
+  getInitialReloadAllMessagesActionIfNeeded,
+  messageListCategoryToViewPageIndex,
+  messageViewPageIndexToListCategory
+} from "./homeUtils";
+
+const styles = StyleSheet.create({
+  tabContainer: {
+    paddingVertical: 8
+  }
+});
+
+export const TabNavigationContainer = ({
+  pagerViewRef
+}: {
+  pagerViewRef: React.MutableRefObject<PagerView | null>;
+}) => {
+  const dispatch = useIODispatch();
+  const store = useIOStore();
+  const shownMessageCategory = useIOSelector(shownMessageCategorySelector);
+  const shownPageIndex =
+    messageListCategoryToViewPageIndex(shownMessageCategory);
+  const onTabNavigationItemPressed = useCallback(
+    (selectedTabIndex: number) => {
+      if (shownPageIndex !== selectedTabIndex) {
+        const selectedShownCategory =
+          messageViewPageIndexToListCategory(selectedTabIndex);
+        dispatch(setShownMessageCategoryAction(selectedShownCategory));
+        pagerViewRef.current?.setPage(selectedTabIndex);
+      }
+    },
+    [dispatch, pagerViewRef, shownPageIndex]
+  );
+  useEffect(() => {
+    const state = store.getState();
+    const reloadAllMessagesActionOrUndefined =
+      getInitialReloadAllMessagesActionIfNeeded(state);
+    if (reloadAllMessagesActionOrUndefined) {
+      dispatch(reloadAllMessagesActionOrUndefined);
+    }
+  }, [dispatch, shownMessageCategory, store]);
+  return (
+    <View style={styles.tabContainer}>
+      <TabNavigation
+        onItemPress={onTabNavigationItemPressed}
+        tabAlignment="start"
+        selectedIndex={shownPageIndex}
+      >
+        <TabItem
+          accessibilityLabel={I18n.t(`messages.tab.inbox`)}
+          icon={"inbox"}
+          iconSelected={"inboxFilled"}
+          key={`messages_home_tab_inbox`}
+          label={I18n.t(`messages.tab.inbox`)}
+          testID={"home_tab_item_inbox"}
+        />
+        <TabItem
+          accessibilityLabel={I18n.t(`messages.tab.archive`)}
+          icon={"archive"}
+          iconSelected={"archiveFilled"}
+          key={`messages_home_tab_archived`}
+          label={I18n.t(`messages.tab.archive`)}
+          testID={"home_tab_item_archive"}
+        />
+      </TabNavigation>
+    </View>
+  );
+};
diff --git a/...nents/MessageList/__tests__/Item.test.tsx → ...s/components/Home/__tests__/Item.test.tsx b/...nents/MessageList/__tests__/Item.test.tsx → ...s/components/Home/__tests__/Item.test.tsx
@@ -6,7 +6,7 @@ import { MessageCategory } from "../../../../../../definitions/backend/MessageCa
 import { TagEnum } from "../../../../../../definitions/backend/MessageCategoryBase";
 import { TagEnum as TagEnumPN } from "../../../../../../definitions/backend/MessageCategoryPN";
 import { successReloadMessagesPayload } from "../../../__mocks__/messages";
-import Item from "../Item";
+import Item from "../legacy/Item";
 import { GlobalState } from "../../../../../store/reducers/types";
 import { applicationChangeState } from "../../../../../store/actions/application";
 import { appReducer } from "../../../../../store/reducers";

diff --git a/ts/features/messages/components/Home/__tests__/TabNavigationContainer.test.tsx b/ts/features/messages/components/Home/__tests__/TabNavigationContainer.test.tsx
@@ -0,0 +1,128 @@
+import React from "react";
+import { createStore } from "redux";
+import PagerView from "react-native-pager-view";
+import { fireEvent } from "@testing-library/react-native";
+import { applicationChangeState } from "../../../../../store/actions/application";
+import { preferencesDesignSystemSetEnabled } from "../../../../../store/actions/persistedPreferences";
+import { appReducer } from "../../../../../store/reducers";
+import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper";
+import { MESSAGES_ROUTES } from "../../../navigation/routes";
+import { TabNavigationContainer } from "../TabNavigationContainer";
+import { MessageListCategory } from "../../../types/messageListCategory";
+import {
+  reloadAllMessages,
+  setShownMessageCategoryAction
+} from "../../../store/actions";
+import { pageSize } from "../../../../../config";
+
+const mockDispatch = jest.fn();
+jest.mock("react-redux", () => ({
+  ...jest.requireActual<typeof import("react-redux")>("react-redux"),
+  useDispatch: () => mockDispatch
+}));
+
+describe("TabNavigationContainer", () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+    jest.clearAllMocks();
+  });
+  it("should match snapshot when shownCategory is INBOX", () => {
+    const screen = renderScreen("INBOX");
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+  it("should match snapshot when shownCategory is ARCHIVE", () => {
+    const screen = renderScreen("ARCHIVE");
+    expect(screen.toJSON()).toMatchSnapshot();
+  });
+  it("when displaying INBOX, pot.none inbox, should dispatch reloadAllMessages.request", () => {
+    renderScreen("INBOX");
+    expect(mockDispatch.mock.calls[0][0]).toStrictEqual(
+      reloadAllMessages.request({
+        pageSize,
+        filter: { getArchived: false }
+      })
+    );
+  });
+  it("when displaying INBOX and ARCHIVE chips is pressed, it should dispatch setShownMessageCategoryAction and trigger pagerViewRef ", () => {
+    const setPageMock = jest.fn();
+    const screen = renderScreen("INBOX", setPageMock);
+    const archivePressableComponent = screen.getByTestId(
+      "home_tab_item_archive"
+    );
+    expect(archivePressableComponent).toBeDefined();
+    fireEvent.press(archivePressableComponent);
+    expect(mockDispatch.mock.calls[1][0]).toStrictEqual(
+      setShownMessageCategoryAction("ARCHIVE")
+    );
+    expect(setPageMock.mock.calls[0][0]).toStrictEqual(1);
+  });
+  it("when displaying INBOX and INBOX chips is pressed, it should NOT dispatch setShownMessageCategoryAction and NOT trigger pagerViewRef ", () => {
+    const setPageMock = jest.fn();
+    const screen = renderScreen("INBOX", setPageMock);
+    const inboxPressableComponent = screen.getByTestId("home_tab_item_inbox");
+    expect(inboxPressableComponent).toBeDefined();
+    fireEvent.press(inboxPressableComponent);
+    expect(mockDispatch.mock.calls[1]).toBeUndefined();
+    expect(setPageMock.mock.calls[0]).toBeUndefined();
+  });
+  it("when displaying ARCHIVE, pot.none archive, should dispatch reloadAllMessages.request", () => {
+    renderScreen("ARCHIVE");
+    expect(mockDispatch.mock.calls[0][0]).toStrictEqual(
+      reloadAllMessages.request({
+        pageSize,
+        filter: { getArchived: true }
+      })
+    );
+  });
+  it("when displaying INBOX and INBOX chips is pressed, it should dispatch setShownMessageCategoryAction and trigger pagerViewRef ", () => {
+    const setPageMock = jest.fn();
+    const screen = renderScreen("ARCHIVE", setPageMock);
+    const inboxPressableComponent = screen.getByTestId("home_tab_item_inbox");
+    expect(inboxPressableComponent).toBeDefined();
+    fireEvent.press(inboxPressableComponent);
+    expect(mockDispatch.mock.calls[1][0]).toStrictEqual(
+      setShownMessageCategoryAction("INBOX")
+    );
+    expect(setPageMock.mock.calls[0][0]).toStrictEqual(0);
+  });
+  it("when displaying INBOX and ARCHIVE chips is pressed, it should NOT dispatch setShownMessageCategoryAction and NOT trigger pagerViewRef ", () => {
+    const setPageMock = jest.fn();
+    const screen = renderScreen("ARCHIVE", setPageMock);
+    const archivePressableComponent = screen.getByTestId(
+      "home_tab_item_archive"
+    );
+    expect(archivePressableComponent).toBeDefined();
+    fireEvent.press(archivePressableComponent);
+    expect(mockDispatch.mock.calls[1]).toBeUndefined();
+    expect(setPageMock.mock.calls[0]).toBeUndefined();
+  });
+});
+
+const renderScreen = (
+  shownCategory: MessageListCategory,
+  setPageMock: jest.Mock<any, any> = jest.fn()
+) => {
+  const initialState = appReducer(undefined, applicationChangeState("active"));
+  const designSystemState = appReducer(
+    initialState,
+    preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true })
+  );
+  const finalState = appReducer(
+    designSystemState,
+    setShownMessageCategoryAction(shownCategory)
+  );
+  const store = createStore(appReducer, finalState as any);
+
+  const mockPaferViewRef = {
+    current: {
+      setPage: (_: number) => setPageMock(_)
+    } as PagerView
+  };
+
+  return renderScreenWithNavigationStoreContext(
+    () => <TabNavigationContainer pagerViewRef={mockPaferViewRef} />,
+    MESSAGES_ROUTES.MESSAGES_HOME,
+    {},
+    store
+  );
+};
diff --git a/..._tests__/__snapshots__/Item.test.tsx.snap → ..._tests__/__snapshots__/Item.test.tsx.snap b/..._tests__/__snapshots__/Item.test.tsx.snap → ..._tests__/__snapshots__/Item.test.tsx.snap