fix: of-546 encounter header

Author: wsdt

mobile/components/OPageHeader/OPageHeaderEncounters/OPageHeaderEncounters.tsx

@@ -0,0 +1,45 @@
+import { OPageHeader } from "@/components/OPageHeader/OPageHeader";
+import {
+    EACTION_ENCOUNTERS,
+    useEncountersContext,
+} from "@/context/EncountersContext";
+import { i18n, TR } from "@/localization/translate.service";
+import { getLocalValue, LOCAL_VALUE } from "@/services/storage.service";
+import * as Sentry from "@sentry/react-native";
+import * as React from "react";
+import { useEffect, useState } from "react";
+
+export const OPageHeaderEncounters = () => {
+    const { dispatch: dispatchEncounters } = useEncountersContext();
+
+    const [hasDoneEncounterWalkthrough, setHasDoneEncounterWalkthrough] =
+        useState(true);
+
+    useEffect(() => {
+        getLocalValue(LOCAL_VALUE.HAS_DONE_ENCOUNTER_WALKTHROUGH)
+            .then((value) => {
+                setHasDoneEncounterWalkthrough(value);
+            })
+            .catch((err: any) => {
+                Sentry.captureException(err, {
+                    tags: {
+                        pageHeaderEncounters:
+                            "getLocalValue:hasDoneEncounterWalkthrough",
+                    },
+                });
+            });
+    }, []);
+
+    return (
+        <OPageHeader
+            title={i18n.t(TR.encounters)}
+            highlightHelpBtn={!hasDoneEncounterWalkthrough}
+            onHelpPress={() => {
+                dispatchEncounters({
+                    type: EACTION_ENCOUNTERS.SET_IS_WALKTHROUGH_RUNNING,
+                    payload: true,
+                });
+            }}
+        />
+    );
+};

mobile/screens/main/MainScreenTabs.tsx

@@ -1,10 +1,7 @@
 import { Color, Title } from "@/GlobalStyles";
 import { OGoLiveToggle } from "@/components/OGoLiveToggle/OGoLiveToggle";
 import { OPageHeader } from "@/components/OPageHeader/OPageHeader";
-import {
-    EACTION_ENCOUNTERS,
-    useEncountersContext,
-} from "@/context/EncountersContext";
+import { OPageHeaderEncounters } from "@/components/OPageHeader/OPageHeaderEncounters/OPageHeaderEncounters";
 import { useNotifications } from "@/hooks/useNotifications";
 import { TR, i18n } from "@/localization/translate.service";
 import { MainTabs } from "@/screens/main/MainScreenTabs.navigator";
@@ -23,29 +20,16 @@ import ProfileSettings from "./ProfileSettings";
 export const MainScreenTabs = ({ navigation }: any) => {
     useNotifications(navigation);
 
-    const { state: encounterState, dispatch: dispatchEncounters } =
-        useEncountersContext();
     const { tourKey: tourKeyFind, start: startTourFind } =
         useTourGuideController(TOURKEY.FIND);
-    const { start: startTourEncounters } = useTourGuideController(
-        TOURKEY.ENCOUNTERS,
-    );
 
     // @dev true by default to not unnecessarily distract user
     const [hasDoneFindWalkthrough, setHasDoneFindWalkthrough] = useState(true);
-    const [hasDoneEncounterWalkthrough, setHasDoneEncounterWalkthrough] =
-        useState(true);
 
     useEffect(() => {
-        const getValues = [
-            getLocalValue(LOCAL_VALUE.HAS_DONE_FIND_WALKTHROUGH),
-            getLocalValue(LOCAL_VALUE.HAS_DONE_ENCOUNTER_WALKTHROUGH),
-        ];
-
-        Promise.all(getValues)
-            .then((vals: boolean[]) => {
-                setHasDoneFindWalkthrough(vals[0]);
-                setHasDoneEncounterWalkthrough(vals[1]);
+        getLocalValue(LOCAL_VALUE.HAS_DONE_FIND_WALKTHROUGH)
+            .then((value: boolean) => {
+                setHasDoneFindWalkthrough(value);
             })
             .catch((err) => {
                 Sentry.captureException(err, {
@@ -110,18 +94,7 @@ export const MainScreenTabs = ({ navigation }: any) => {
                 component={EncounterScreenStack}
                 options={{
                     tabBarLabel: i18n.t(TR.encounters),
-                    headerLeft: () => (
-                        <OPageHeader
-                            title={i18n.t(TR.encounters)}
-                            highlightHelpBtn={!hasDoneEncounterWalkthrough}
-                            onHelpPress={() => {
-                                dispatchEncounters({
-                                    type: EACTION_ENCOUNTERS.SET_IS_WALKTHROUGH_RUNNING,
-                                    payload: true,
-                                });
-                            }}
-                        />
-                    ),
+                    headerLeft: () => <OPageHeaderEncounters />,
                     // tabBarBadge:
                     // unreadNotifications.length === 0
                     //     ? undefined

mobile/screens/main/ProfileView.tsx

@@ -3,6 +3,7 @@ import { UserPublicDTO } from "@/api/gen/src";
 import { OBadgesOfUser } from "@/components/OBadge/OBadgesOfUser";
 import { OPageContainer } from "@/components/OPageContainer/OPageContainer";
 import { OPageHeader } from "@/components/OPageHeader/OPageHeader";
+import { OPageHeaderEncounters } from "@/components/OPageHeader/OPageHeaderEncounters/OPageHeaderEncounters";
 import { TR, i18n } from "@/localization/translate.service";
 import { EncounterStackParamList } from "@/screens/main/EncounterStack.navigator";
 import { ROUTES } from "@/screens/routes";
@@ -63,11 +64,17 @@ const ProfileView = ({
 
     useEffect(() => {
         // @dev overrides tab nav title
-        navigation.getParent()?.setOptions({
+        const parent = navigation.getParent();
+        parent?.setOptions({
             headerLeft: () => (
                 <OPageHeader title={`${user.firstName}, ${user.age}`} />
             ),
         });
+        return () => {
+            parent?.setOptions({
+                headerLeft: () => <OPageHeaderEncounters />,
+            });
+        };
     }); // empty dep array to run it only once
 
     return (