Made Template for main page Ref #18

avichaljadeja2002 · Oct 20, 2024 · 4a655b1 · 4a655b1
1 parent 218d518
commit 4a655b1
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 85 deletions.
diff --git a/app/addCalendarEvents.tsx b/app/addCalendarEvents.tsx
@@ -9,7 +9,7 @@ import { IPAddr } from './constants';
 import { useNavigation } from '@react-navigation/native';
 import axios from 'axios';
 import { IPAddr } from './constants';
-import GenericForm from './addEventPage';
+import GenericAddPageForm from './addEventPage';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { RootStackParamList } from '@/components/Types';
 

diff --git a/app/addEventPage.tsx b/app/addEventPage.tsx
@@ -12,7 +12,7 @@ interface FormProps {
   onCancel: () => void;
 }
 
-const GenericForm: React.FC<FormProps> = ({ title, initialData, fields, onSave, onCancel }) => {
+const GenericAddPageForm: React.FC<FormProps> = ({ title, initialData, fields, onSave, onCancel }) => {
   const [formData, setFormData] = useState(initialData);
   const handleChange = (name: string, value: any) => {
     setFormData({ ...formData, [name]: value });
@@ -115,4 +115,4 @@ const GenericForm: React.FC<FormProps> = ({ title, initialData, fields, onSave,
   );
 };
 
-export default GenericForm;
+export default GenericAddPageForm;
diff --git a/app/addFinanceEvents.tsx b/app/addFinanceEvents.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useNavigation } from '@react-navigation/native';
 import axios from 'axios';
 import { IPAddr } from './constants';
-import GenericForm from './addEventPage';
+import GenericAddPageForm from './addEventPage';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { RootStackParamList } from '@/components/Types';
 
@@ -52,7 +52,7 @@ export default function AddFinanceEvents() {
 
 
     return (
-        <GenericForm
+        <GenericAddPageForm
             title="New Finance Event"
             initialData={initialData}
             fields={fields}

diff --git a/app/addHealthEvents.tsx b/app/addHealthEvents.tsx
@@ -3,7 +3,7 @@ import { useNavigation } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import axios from 'axios';
 import { IPAddr } from './constants';
-import GenericForm from './addEventPage';
+import GenericAddPageForm from './addEventPage';
 import { RootStackParamList } from '@/components/Types';
 
 const data = [
@@ -48,7 +48,7 @@ export default function AddHealthEvents() {
   };
 
   return (
-    <GenericForm
+    <GenericAddPageForm
       title="New Health Event"
       initialData={initialData}
       fields={fields}

diff --git a/app/addMeals.tsx b/app/addMeals.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useNavigation } from '@react-navigation/native';
 import axios from 'axios';
 import { IPAddr } from './constants';
-import GenericForm from './addEventPage';
+import GenericAddPageForm from './addEventPage';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { RootStackParamList } from '@/components/Types';
 
@@ -39,7 +39,7 @@ const AddMeals = () => {
   };
 
   return (
-    <GenericForm
+    <GenericAddPageForm
       title="New Meal"
       initialData={initialData}
       fields={fields}

diff --git a/app/healthTracker.tsx b/app/healthTracker.tsx
@@ -1,31 +1,19 @@
 import React, { useState, useCallback } from 'react';
-import { View, Text, FlatList, TouchableOpacity } from 'react-native';
-import BouncyCheckbox from "react-native-bouncy-checkbox";
-import { Calendar } from 'react-native-calendars';
-import { styles } from './styles';
 import { IPAddr } from './constants';
-import { Ionicons } from "@expo/vector-icons";
-import { RootStackParamList, Task } from '../components/Types';
-import { useNavigation, useFocusEffect } from '@react-navigation/native';
-import { StackNavigationProp } from '@react-navigation/stack';
+import { Task } from '../components/Types';
+import { useFocusEffect } from '@react-navigation/native';
 import axios from 'axios';
-
-
+import GenericMainPageForm from './mainPageTemplate';
 
 export default function HealthTracker() {
-  const [selectedDate, setSelectedDate] = useState('');
   const [tasks, setTasks] = useState<Task[]>([]);
 
-  type HealthProp = StackNavigationProp<RootStackParamList, 'healthTracker'>;
-  const navigation = useNavigation<HealthProp>();  
-
   useFocusEffect(
     useCallback(() => {
       getEvents();
     }, [])
   );
 
-
   const getEvents = (() => {
     axios.get(IPAddr + '/get_health_events/1')
     .then(response => {
@@ -38,69 +26,14 @@ export default function HealthTracker() {
       setTasks(events);
     })
     .catch(error => console.error('Error fetching events:', error));
-
   })
 
-  const handleDayPress = (day: { dateString: React.SetStateAction<string>; }) => {
-    setSelectedDate(day.dateString);
-  };
-
-  const renderTask = ({ item }: { item: Task }) => (
-    <View style={styles.taskItem}>
-      <Text style={styles.bullet}>
-        <View style={styles.taskicon}>
-          <Ionicons name={item.icon} size={30} color={'#000'} />
-        </View>
-      </Text>
-      <Text style={styles.taskText}>{item.title}</Text>
-      <View>
-        <BouncyCheckbox
-          fillColor="#65558F"
-          iconStyle={{ borderRadius: 0 }}
-          innerIconStyle={{ borderRadius: 0, borderWidth: 2 }}
-          onPress={(isChecked: boolean) => { item.done = isChecked; }} />
-      </View>
-    </View>
-  );
-
   return (
-    <View style={styles.container}>
-      <View>
-        <Text style={styles.headerText}>Health Tracker</Text>
-        <Text style={styles.sectionHeader}>Upcoming Events</Text>
-      </View>
-
-      <FlatList style={styles.flatList}
-        data={tasks}
-        renderItem={renderTask}
-        keyExtractor={(item) => item.id}
-      />
-      <View style={{ height: 50 }}>
-        <Text style={styles.sectionHeader}>Title</Text>
-      </View>
-      <Calendar
-        onDayPress={handleDayPress}
-        markedDates={{
-          [selectedDate]: {
-            selected: true,
-            marked: true,
-            selectedColor: '#9b59b6',
-          },
-        }}
-        theme={{
-          selectedDayBackgroundColor: '#65558F',
-          todayTextColor: '#00adf5',
-          arrowColor: '#9b59b6',
-        }}
-      />
-      <TouchableOpacity style={styles.fixedButton}
-        onPress={() => navigation.navigate('addHealthEvents')}
-        hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}>
-        <View style={styles.icon}>
-          <Ionicons name="add-outline" size={40} color={'#eee'} />
-          <Text style={styles.newText}>New</Text>
-        </View>
-      </TouchableOpacity>
-    </View>
+    <GenericMainPageForm
+            title='Health Tracker'
+            page='healthTracker'
+            nextPage='addHealthEvents'
+            tasks={tasks}
+        />
   );
 }
diff --git a/app/mainPageTemplate.tsx b/app/mainPageTemplate.tsx
@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import { View, Text, FlatList, TouchableOpacity } from 'react-native';
+import BouncyCheckbox from "react-native-bouncy-checkbox";
+import { Calendar } from 'react-native-calendars';
+import { styles } from './styles';
+import { Ionicons } from "@expo/vector-icons";
+import { RootStackParamList, Task } from '../components/Types';
+import { useNavigation, useFocusEffect } from '@react-navigation/native';
+import { StackNavigationProp } from '@react-navigation/stack';
+
+interface FormProps {
+    title: string;
+    page: keyof RootStackParamList;
+    nextPage: keyof RootStackParamList
+    tasks: Array<Task>;
+  }
+
+const GenericMainPageForm: React.FC<FormProps> = ({ title, page, nextPage, tasks }) => {
+    const [selectedDate, setSelectedDate] = useState('');
+
+    type Prop = StackNavigationProp<RootStackParamList, typeof page>;
+    const navigation = useNavigation<Prop>();  
+
+    const handleDayPress = (day: { dateString: React.SetStateAction<string>; }) => {
+        setSelectedDate(day.dateString);
+    };
+
+    const renderTask = ({ item }: { item: Task }) => (
+        <View style={styles.taskItem}>
+            <Text style={styles.bullet}>
+                <View style={styles.taskicon}>
+                    <Ionicons name={item.icon} size={30} color={'#000'} />
+                </View>
+            </Text>
+            <Text style={styles.taskText}>{item.title}</Text>
+            <View>
+                <BouncyCheckbox
+                    fillColor="#65558F"
+                    iconStyle={{ borderRadius: 0 }}
+                    innerIconStyle={{ borderRadius: 0, borderWidth: 2 }}
+                    onPress={(isChecked: boolean) => { item.done = isChecked; }} />
+            </View>
+        </View>
+    );
+
+    return (
+        <View style={styles.container}>
+            <View>
+                <Text style={styles.headerText}>{title}</Text>
+                <Text style={styles.sectionHeader}>Upcoming Events</Text>
+            </View>
+
+            <FlatList style={styles.flatList}
+                data={tasks}
+                renderItem={renderTask}
+                keyExtractor={(item) => item.id}
+            />
+            <View style={{ height: 50 }}>
+                <Text style={styles.sectionHeader}>Title</Text>
+            </View>
+
+            <Calendar
+                onDayPress={handleDayPress}
+                markedDates={{
+                    [selectedDate]: {
+                        selected: true,
+                        marked: true,
+                        selectedColor: '#9b59b6',
+                    },
+                }}
+                theme={{
+                    selectedDayBackgroundColor: '#65558F',
+                    todayTextColor: '#00adf5',
+                    arrowColor: '#9b59b6',
+                }}
+            />
+
+            <TouchableOpacity style={styles.fixedButton}
+                onPress={() => navigation.navigate(nextPage)}
+                hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}>
+                <View style={styles.icon}>
+                    <Ionicons name="add-outline" size={40} color={'#eee'} />
+                    <Text style={styles.newText}>New</Text>
+                </View>
+            </TouchableOpacity>
+        </View>
+    );
+}
+export default GenericMainPageForm;