everything went wrong :(

calblueprint · Dec 8, 2024 · 43b4238 · 43b4238
1 parent 45a4464
commit 43b4238
Show file tree

Hide file tree

Showing 7 changed files with 184 additions and 66 deletions.
diff --git a/src/assets/images/bottom-carrot.svg b/src/assets/images/bottom-carrot.svg
diff --git a/src/assets/images/left-carrot.svg b/src/assets/images/left-carrot.svg
diff --git a/src/assets/images/right-carrot.svg b/src/assets/images/right-carrot.svg
diff --git a/src/screens/HealingResources/HFHGuide/index.tsx b/src/screens/HealingResources/HFHGuide/index.tsx
@@ -1,23 +1,39 @@
 import React, { useEffect, useState } from 'react';
-import { ScrollView, Text, View } from 'react-native';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
 import RenderHTML, { MixedStyleRecord } from 'react-native-render-html';
 import { useFonts } from 'expo-font';
-import { HealingScreenProps } from '@/navigation/types';
+import LeftCarrot from 'src/assets/images/left-carrot.svg';
+import RightCarrot from 'src/assets/images/right-carrot.svg';
 import {
   getNextSubheadingId,
   getSubheadingById,
 } from '@/supabase/queries/generalQueries';
 import styles from './styles';
 
+// mapping of IDs to next screens -- this is not how we should be doing this, just to add some functionality for demo
+const idToNextPageMapping: Record<string, string> = {
+  '7012e24a-894e-4972-9dcc-612666bff21e': 'WelcomeSectionOne',
+  'ac62e7cb-649c-4b43-b979-43f20c5a6760': 'ChapterOneSectionOne',
+  'bc8fc4fe-33cf-40b1-b7b3-e5e62e7f5570': '',
+  'd72fd68a-2fff-43f7-85dc-7d2ce63f3cb4': 'WelcomeSectionTwo',
+  'e35ce756-9579-4e33-8361-54eeb1eecb2b': 'ChapterOne',
+};
+
+const findNextPage = (currentId: string) => {
+  return idToNextPageMapping[currentId] || null; // Return the next page or null if no mapping exists
+};
+
 export default function HFHGuide({
+  id,
   navigation,
-  route,
-}: HealingScreenProps<'HopeForHealingGuide'>) {
+}: {
+  id: string;
+  navigation: any;
+}) {
   const [htmlContent, setHtmlContent] = useState<string | null>(null);
   const [nextId, setNextId] = useState<string>(
     '7012e24a-894e-4972-9dcc-612666bff21e',
   );
-  const { id } = route.params;
 
   const [fontsLoaded] = useFonts({
     'Roboto Serif': require('src/assets/fonts/Roboto_Serif/RobotoSerif-Regular.ttf'),
@@ -37,12 +53,23 @@ export default function HFHGuide({
       }
     };
     fetchHtml();
-  }, []);
+  }, [id]);
+
+  const handleNext = () => {
+    if (nextId) {
+      const nextPage = findNextPage(nextId);
+      if (nextPage) {
+        navigation.navigate(nextPage);
+      } else {
+        console.warn('Next page not found for this id');
+      }
+    }
+  };
 
   return (
     <View style={styles.container}>
       <ScrollView contentContainerStyle={styles.scrollView}>
-        {fontsLoaded ? ( // Check if fonts are loaded
+        {fontsLoaded ? (
           htmlContent ? (
             <RenderHTML
               contentWidth={300}
@@ -61,6 +88,21 @@ export default function HFHGuide({
         ) : (
           <Text>Loading content...</Text>
         )}
+        <View style={styles.buttonContainer}>
+          <TouchableOpacity
+            style={styles.button}
+            onPress={() => navigation.goBack()}
+          >
+            <LeftCarrot />
+            <Text style={styles.buttonText}>Back</Text>
+          </TouchableOpacity>
+          {nextId && (
+            <TouchableOpacity style={styles.button} onPress={handleNext}>
+              <Text style={styles.buttonText}>Next</Text>
+              <RightCarrot />
+            </TouchableOpacity>
+          )}
+        </View>
       </ScrollView>
     </View>
   );
@@ -70,7 +112,7 @@ const htmlStyles: MixedStyleRecord = {
   p: {
     fontFamily: 'Roboto Serif',
     fontSize: 20,
-    fontWeight: '200', // Use a valid string value as per the error
+    fontWeight: '200',
     color: '#444',
     lineHeight: 30,
     marginVertical: 6,

diff --git a/src/screens/HealingResources/HFHGuide/styles.ts b/src/screens/HealingResources/HFHGuide/styles.ts
@@ -3,6 +3,7 @@ import { StyleSheet } from 'react-native';
 export default StyleSheet.create({
   container: {
     flex: 1,
+    width: '100%',
     backgroundColor: '#FFFFFF',
   },
   scrollView: {
@@ -12,4 +13,24 @@ export default StyleSheet.create({
     fontFamily: 'Roboto Serif',
     color: '#444',
   },
+  buttonContainer: {
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+    color: '#444',
+  },
+  button: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 15,
+    backgroundColor: '#EDF0F5',
+    width: 125,
+    height: 43,
+    columnGap: 20,
+  },
+  buttonText: {
+    color: '#4C4C4C',
+    fontSize: 16,
+    fontWeight: 500,
+  },
 });
diff --git a/src/screens/HealingResources/HopeHealingGuide/index.tsx b/src/screens/HealingResources/HopeHealingGuide/index.tsx
@@ -1,71 +1,85 @@
 import React, { useState } from 'react';
 import { Text, TouchableOpacity, View } from 'react-native';
-import { createDrawerNavigator } from '@react-navigation/drawer';
+import {
+  createDrawerNavigator,
+  DrawerScreenProps,
+} from '@react-navigation/drawer';
+import BottomCarrot from 'src/assets/images/bottom-carrot.svg';
+import RightCarrot from 'src/assets/images/right-carrot.svg';
+import HealingPage from 'src/screens/HealingResources/HFHGuide';
 import styles from './styles';
 
 type RootDrawerParamList = {
   Welcome: undefined;
+  ChapterOne: undefined;
   ChapterTwo: undefined;
-  ChapterThree: undefined;
   WelcomeSectionOne: undefined;
   WelcomeSectionTwo: undefined;
-  SectionOne: undefined;
-  SectionTwo: undefined;
+  ChapterOneSectionOne: undefined;
   Resource: undefined;
 };
 
-function Welcome() {
+function Welcome({
+  navigation,
+}: DrawerScreenProps<RootDrawerParamList, 'Welcome'>) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text>Main Welcome Screen</Text>
-    </View>
-  );
-}
-
-function ChapterTwo() {
-  return (
-    <View style={styles.drawerItem}>
-      <Text>Chapter 2</Text>
-    </View>
-  );
-}
-
-function ChapterThree() {
-  return (
-    <View style={styles.drawerItem}>
-      <Text>Chapter 3</Text>
+      <HealingPage
+        id="7012e24a-894e-4972-9dcc-612666bff21e"
+        navigation={navigation}
+      />
     </View>
   );
 }
 
-function WelcomeSectionOne() {
+function WelcomeSectionOne({
+  navigation,
+}: DrawerScreenProps<RootDrawerParamList, 'WelcomeSectionOne'>) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text>A Few Words on Language</Text>
+      <HealingPage
+        id="d72fd68a-2fff-43f7-85dc-7d2ce63f3cb4"
+        navigation={navigation}
+      />
     </View>
   );
 }
 
-function WelcomeSectionTwo() {
+function WelcomeSectionTwo({
+  navigation,
+}: DrawerScreenProps<RootDrawerParamList, 'WelcomeSectionTwo'>) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text>How to Use This Booklet</Text>
+      <HealingPage
+        id="e35ce756-9579-4e33-8361-54eeb1eecb2b"
+        navigation={navigation}
+      />
     </View>
   );
 }
 
-function SectionOne() {
+function ChapterOne({
+  navigation,
+}: DrawerScreenProps<RootDrawerParamList, 'ChapterOne'>) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text>Section One of Chapter One</Text>
+      <HealingPage
+        id="ac62e7cb-649c-4b43-b979-43f20c5a6760"
+        navigation={navigation}
+      />
     </View>
   );
 }
 
-function SectionTwo() {
+function ChapterOneSectionOne({
+  navigation,
+}: DrawerScreenProps<RootDrawerParamList, 'ChapterOneSectionOne'>) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text>Section Two of Chapter One</Text>
+      <HealingPage
+        id="bc8fc4fe-33cf-40b1-b7b3-e5e62e7f5570"
+        navigation={navigation}
+      />
     </View>
   );
 }
@@ -80,17 +94,32 @@ export default function HopeHealingGuide() {
     <Drawer.Navigator
       initialRouteName="Welcome"
       screenOptions={{
-        drawerType: 'front',
+        drawerType: 'slide',
+        drawerPosition: 'left',
         overlayColor: 'transparent',
-        headerTitle: '',
+        drawerStyle: {
+          width: '23%',
+          backgroundColor: '#F7F9FC',
+        },
       }}
     >
       <Drawer.Screen
         name="Welcome"
         options={{
+          headerShown: false,
           drawerLabel: () => (
-            <TouchableOpacity onPress={() => setIsWelcomeOpen(!isWelcomeOpen)}>
-              <Text style={isWelcomeOpen ? styles.drawerLabelText : null}>
+            <TouchableOpacity
+              style={styles.navLabelContainer}
+              onPress={() => setIsWelcomeOpen(!isWelcomeOpen)}
+            >
+              {isWelcomeOpen ? <BottomCarrot /> : <RightCarrot />}
+              <Text
+                style={
+                  isWelcomeOpen
+                    ? styles.selectedDrawerLabelText
+                    : styles.drawerLabelText
+                }
+              >
                 Welcome
               </Text>
             </TouchableOpacity>
@@ -103,6 +132,8 @@ export default function HopeHealingGuide() {
           <Drawer.Screen
             name="WelcomeSectionOne"
             options={{
+              headerShown: false,
+
               drawerLabel: () => (
                 <Text style={styles.subsectionLabelText}>
                   A Few Words on Language
@@ -115,6 +146,7 @@ export default function HopeHealingGuide() {
             name="WelcomeSectionTwo"
             component={WelcomeSectionTwo}
             options={{
+              headerShown: false,
               drawerLabel: () => (
                 <Text style={styles.subsectionLabelText}>
                   How to Use This Booklet
@@ -125,15 +157,25 @@ export default function HopeHealingGuide() {
         </>
       )}
       <Drawer.Screen
-        name="ChapterTwo"
-        component={ChapterTwo}
+        name="ChapterOne"
+        component={ChapterOne}
         options={{
+          headerShown: false,
           drawerLabel: () => (
             <TouchableOpacity
+              style={styles.navLabelContainer}
               onPress={() => setIsChapterOneOpen(!isChapterOneOpen)}
             >
-              <Text style={isChapterOneOpen ? styles.drawerLabelText : null}>
-                Chapter 2
+              {isChapterOneOpen ? <BottomCarrot /> : <RightCarrot />}
+
+              <Text
+                style={
+                  isChapterOneOpen
+                    ? styles.selectedDrawerLabelText
+                    : styles.drawerLabelText
+                }
+              >
+                Chapter 1
               </Text>
             </TouchableOpacity>
           ),
@@ -142,30 +184,20 @@ export default function HopeHealingGuide() {
       {isChapterOneOpen && (
         <>
           <Drawer.Screen
-            name="SectionOne"
-            component={SectionOne}
-            options={{
-              drawerLabel: () => (
-                <Text style={styles.subsectionLabelText}>Section One</Text>
-              ),
-            }}
-          />
-          <Drawer.Screen
-            name="SectionTwo"
-            component={SectionTwo}
+            name="ChapterOneSectionOne"
             options={{
+              headerShown: false,
+
               drawerLabel: () => (
-                <Text style={styles.subsectionLabelText}>Section Two</Text>
+                <Text style={styles.subsectionLabelText}>
+                  Making Sense of What Happened
+                </Text>
               ),
             }}
+            component={ChapterOneSectionOne}
           />
         </>
       )}
-      <Drawer.Screen
-        name="ChapterThree"
-        component={ChapterThree}
-        options={{ drawerLabel: 'Chapter 3' }}
-      />
     </Drawer.Navigator>
   );
 }