43 fix supabase

App.tsx

@@ -1,8 +1,13 @@
 import * as React from 'react';
+import { useEffect } from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import NavigationBar from '@/navigation/BottomTabNavigator';
+import getDataOnce from '@/supabase/getDataOnce';
 
 export default function App() {
+  useEffect(() => {
+    getDataOnce();
+  }, []);
   return (
     <NavigationContainer>
       <NavigationBar />

package.json

@@ -15,6 +15,7 @@
     "pre-commit": "(npm run tsc || true) && (npm run lint:check || true) && npm run prettier:check"
   },
   "dependencies": {
+    "@react-native-async-storage/async-storage": "^2.1.2",
     "@react-native/metro-config": "^0.76.3",
     "@react-navigation/bottom-tabs": "^7.0.6",
     "@react-navigation/drawer": "^7.0.6",
@@ -27,8 +28,8 @@
     "expo": "^52.0.5",
     "expo-av": "~15.0.1",
     "expo-status-bar": "~2.0.0",
-    "metro-config": "^0.81.0",
     "expo-video": "~2.0.2",
+    "metro-config": "^0.81.0",
     "react": "^18.3.1",
     "react-native": "0.76.1",
     "react-native-dotenv": "^3.4.11",

src/components/HFHPage/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { View } from 'react-native';
+import { DrawerScreenProps } from '@react-navigation/drawer';
+import HealingPage from 'src/screens/HealingResources/HFHGuide';
+
+type RootDrawerParamList = {
+  DynamicHealingPage: { id: string };
+};
+
+function DynamicHealingPage({
+  route,
+  navigation,
+}: DrawerScreenProps<RootDrawerParamList, 'DynamicHealingPage'>) {
+  const { id } = route.params;
+
+  return (
+    <View style={{ flex: 1 }}>
+      <HealingPage id={id} navigation={navigation} />
+    </View>
+  );
+}
+
+export default DynamicHealingPage;

src/navigation/BottomTabNavigator.tsx

@@ -15,11 +15,10 @@ import { colors } from 'src/styles/colors';
 import HealingResourcesNavigator from './stacks/HealingResourcesNavigator';
 import LegalRightsNavigator from './stacks/LegalRightsNavigator';
 import SeekHelpNavigator from './stacks/SeekHelpNavigator';
-import { BottomTabParams } from './types';
 
 const initialRouteName = 'Healing';
 
-const Tab = createBottomTabNavigator<BottomTabParams>();
+const Tab = createBottomTabNavigator();
 
 export default function NavigationBar() {
   return (
@@ -35,7 +34,7 @@ export default function NavigationBar() {
         component={HomeScreen}
         options={{
           headerTitle: '',
-          tabBarIcon: ({ focused }) =>
+          tabBarIcon: ({ focused }: { focused: boolean }) =>
             focused ? <OrangeHomeIcon /> : <GreyHomeIcon />,
           headerStyle: {
             backgroundColor: '#F7F9FC',
@@ -59,7 +58,7 @@ export default function NavigationBar() {
         name="Healing"
         component={HealingResourcesNavigator}
         options={{
-          tabBarIcon: ({ focused }) =>
+          tabBarIcon: ({ focused }: { focused: boolean }) =>
             focused ? (
               <OrangeHealingResourcesIcon />
             ) : (
@@ -72,7 +71,7 @@ export default function NavigationBar() {
         component={LegalRightsNavigator}
         options={{
           tabBarLabel: 'Legal Rights',
-          tabBarIcon: ({ focused }) =>
+          tabBarIcon: ({ focused }: { focused: boolean }) =>
             focused ? <OrangePREAIcon /> : <GreyPREAIcon />,
         }}
       />
@@ -81,7 +80,7 @@ export default function NavigationBar() {
         component={SeekHelpNavigator}
         options={{
           tabBarLabel: 'Seek Help',
-          tabBarIcon: ({ focused }) =>
+          tabBarIcon: ({ focused }: { focused: boolean }) =>
             focused ? <OrangeHelpResourcesIcon /> : <GreyHelpResourcesIcon />,
         }}
       />

src/navigation/HopeHealingNavigator.tsx

@@ -0,0 +1,109 @@
+import React, { useEffect, useState } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import {
+  DrawerContentComponentProps,
+  DrawerContentScrollView,
+} from '@react-navigation/drawer';
+import BottomCarrot from 'src/assets/images/bottom-carrot.svg';
+import RightCarrot from 'src/assets/images/right-carrot.svg';
+import getDataOnce from '@/supabase/getDataOnce';
+import { DrawerItem } from '../types/types';
+import styles from './styles';
+
+export default function HopeHealingNavigator(
+  props: DrawerContentComponentProps,
+) {
+  const [drawerItems, setDrawerItems] = useState<DrawerItem[] | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      const data = await getDataOnce();
+      setDrawerItems(data);
+    })();
+  }, []);
+
+  const [expandedSections, setExpandedSections] = useState<
+    Record<string, boolean>
+  >({});
+  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
+
+  const toggleSection = (title: string) => {
+    setExpandedSections(prev => ({ ...prev, [title]: !prev[title] }));
+  };
+
+  const handleNavigate = (id: string) => {
+    setSelectedItemId(id);
+    props.navigation.navigate('DynamicHealingPage', { id });
+  };
+
+  if (!drawerItems) {
+    return null;
+  }
+
+  return (
+    <DrawerContentScrollView {...props} style={{ backgroundColor: '#F7F9FC' }}>
+      {drawerItems.map(item => {
+        const isExpanded = expandedSections[item.title];
+
+        const isParentSelected = item.mainPageId === selectedItemId;
+
+        return (
+          <View key={item.title}>
+            <TouchableOpacity
+              style={
+                isParentSelected
+                  ? [styles.navLabelContainer, { backgroundColor: '#E6EAEF' }]
+                  : styles.navLabelContainer
+              }
+              onPress={() => {
+                handleNavigate(item.mainPageId);
+                toggleSection(item.title);
+              }}
+            >
+              {isExpanded ? <BottomCarrot /> : <RightCarrot />}
+              <Text
+                style={
+                  isParentSelected
+                    ? styles.selectedDrawerLabelText
+                    : styles.drawerLabelText
+                }
+              >
+                {item.title}
+              </Text>
+            </TouchableOpacity>
+
+            {isExpanded &&
+              item.subItems?.map(sub => {
+                const isSubSelected = sub.pageId === selectedItemId;
+
+                return (
+                  <TouchableOpacity
+                    key={sub.pageId}
+                    style={
+                      isSubSelected
+                        ? [
+                            styles.subitemContainer,
+                            { backgroundColor: '#E6EAEF' },
+                          ]
+                        : styles.subitemContainer
+                    }
+                    onPress={() => handleNavigate(sub.pageId)}
+                  >
+                    <Text
+                      style={
+                        isSubSelected
+                          ? styles.selectedLabelText
+                          : styles.labelText
+                      }
+                    >
+                      {sub.title}
+                    </Text>
+                  </TouchableOpacity>
+                );
+              })}
+          </View>
+        );
+      })}
+    </DrawerContentScrollView>
+  );
+}

src/navigation/MainNavigator.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import BottomTabNavigator from './BottomTabNavigator';
 
-const Stack = createNativeStackNavigator();
-
 export default function AppNavigator() {
   return (
     <NavigationContainer>

src/navigation/stacks/HealingResourcesNavigator.tsx

@@ -7,9 +7,8 @@ import BackButton from '@/components/BackButton';
 import HealingResources from '@/screens/HealingResources';
 import HealingCatalogue from '@/screens/HealingResources/HealingCatalogue';
 import HopeHealingGuide from '@/screens/HealingResources/HopeHealingGuide/';
-import { HealingStackParams } from '../types';
 
-const HealingStack = createNativeStackNavigator<HealingStackParams>();
+const HealingStack = createNativeStackNavigator();
 
 export default function HealingResourcesNavigator() {
   return (

src/navigation/stacks/LegalRightsNavigator.tsx

@@ -6,9 +6,8 @@ import { colors } from 'src/styles/colors';
 import LegalRights from '@/screens/LegalRights';
 import VideoPage from '@/screens/LegalRights/VideoPage';
 import BackButton from '../../components/BackButton';
-import { LegalStackParams } from '../types';
 
-const LegalStack = createNativeStackNavigator<LegalStackParams>();
+const LegalStack = createNativeStackNavigator();
 
 export default function LegalRightsNavigator() {
   return (

src/navigation/stacks/SeekHelpNavigator.tsx

@@ -4,9 +4,8 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import Logo from 'src/assets/images/logo.svg';
 import { colors } from 'src/styles/colors';
 import SeekHelp from '@/screens/SeekHelp';
-import { SeekHelpStackParams } from '../types';
 
-const SeekHelpStack = createNativeStackNavigator<SeekHelpStackParams>();
+const SeekHelpStack = createNativeStackNavigator();
 
 export default function SeekHelpNavigator() {
   return (

src/navigation/styles.ts

@@ -0,0 +1,34 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  drawerLabelText: {
+    fontSize: 20,
+    color: '#444',
+  },
+  selectedDrawerLabelText: {
+    fontWeight: 'bold',
+    color: '#444',
+    fontSize: 20,
+  },
+  selectedLabelText: {
+    fontWeight: 'bold',
+    color: '#444',
+    fontSize: 18,
+  },
+  labelText: {
+    fontSize: 18,
+    color: '#444',
+  },
+  navLabelContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    columnGap: 10,
+    borderRadius: 10,
+    padding: 15,
+  },
+  subitemContainer: {
+    paddingLeft: 32,
+    padding: 10,
+    borderRadius: 10,
+  },
+});