From 432da99424b12ece04209a2e06517ccdca85c49c Mon Sep 17 00:00:00 2001
From: avichaljadeja2002 <jadejaavichal2020@gmail.com>
Date: Mon, 13 Jan 2025 19:32:19 -0500
Subject: [PATCH] refractor view events to a common component

---
 .gitignore                                    |   2 +-
 app/constants.js                              |   6 +-
 app/genericViewEventPage.tsx                  | 242 ++++++++++++++++++
 app/viewCalendarEvents.tsx                    |  68 ++---
 app/viewEventPage.tsx                         | 185 -------------
 app/viewFinanceEvents.tsx                     |  71 ++---
 app/viewHealthEvents.tsx                      |  67 ++---
 app/viewMealEvents.tsx                        |  94 ++-----
 .../src/main/resources/application.properties |  16 ++
 tsconfig.json                                 |   6 +-
 10 files changed, 346 insertions(+), 411 deletions(-)
 create mode 100644 app/genericViewEventPage.tsx
 delete mode 100644 app/viewEventPage.tsx
 create mode 100644 backend/omniplanner/src/main/resources/application.properties

diff --git a/.gitignore b/.gitignore
index e1a76c9..d74d7c7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,4 +22,4 @@ expo-env.d.ts
 # @end expo-cli
 credentials.json
 
-/backend/omniplanner/src/main/resources/application.properties
+#/backend/omniplanner/src/main/resources/application.properties
diff --git a/app/constants.js b/app/constants.js
index 2cc9e1c..a20d3f8 100644
--- a/app/constants.js
+++ b/app/constants.js
@@ -3,7 +3,7 @@ import axios from "axios";
 import { cLog } from './log';
 
 // export const IPAddr = "http://34.204.83.156:8080" // For AWS
-export const IPAddr = "http://137.112.196.132:8080" // For local testing on laptop
+export const IPAddr = "http://127.0.0.1:8080" // For local testing on laptop
 export const logging = true;
 
 export const repeatingData = [
@@ -70,4 +70,8 @@ export const verifyToken = async (navigation) => {
     }
     cLog('Verify response:', response.data);
     return true;
+}
+
+export const getUserId = async() => {
+  return await AsyncStorage.getItem('userId');
 }
\ No newline at end of file
diff --git a/app/genericViewEventPage.tsx b/app/genericViewEventPage.tsx
new file mode 100644
index 0000000..c720cd4
--- /dev/null
+++ b/app/genericViewEventPage.tsx
@@ -0,0 +1,242 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
+import DateTimePicker from '@react-native-community/datetimepicker';
+import MultiSelect from 'react-native-multiple-select';
+import { Dropdown } from 'react-native-element-dropdown';
+import { getUserId, IPAddr, repeatingData } from './constants';
+import { cLog } from './log';
+import { RouteProp, useRoute } from '@react-navigation/native';
+import { RootStackParamList } from '@/components/Types';
+
+export interface Field {
+  name: string;
+  label: string;
+  type: 'text' | 'date' | 'time' | 'dropdown' | 'multi-select' | 'number' | 'textarea';
+  options?: { label: string; value: any }[];
+}
+
+type EventParams = {
+  event: {
+    event_date: string;
+    event_time: string;
+    repeat_timeline?: string;
+    ingredients?: string;
+    [key: string]: any;
+  };
+};
+
+type GenericEventPageProps = {
+  title: string;
+  fields: Field[];
+  updateEndpoint: string;
+  fetchEndpoint?: string;
+  mainPage: string;
+};
+
+const GenericEventPage = ({
+  title,
+  fields,
+  updateEndpoint,
+  fetchEndpoint,
+  mainPage,
+}: GenericEventPageProps) => {
+  const [formData, setFormData] = useState<any>({});
+  const [additionalData, setAdditionalData] = useState<any>([]);
+  const route = useRoute<RouteProp<RootStackParamList, any>>();
+  const { event } = route.params as EventParams;
+
+  const [userId, setUserId] = useState<number | null>(null);
+
+  useEffect(() => {
+    const fetchUserId = async () => {
+      const id = await getUserId();
+      if (id !== null) {
+        setUserId(Number(id));
+      }
+    };
+
+    fetchUserId();
+  }, []);
+  const handleSave = async (saveData: any) => {
+    try {
+      cLog('Save Data:', saveData);
+      const response = await axios.put(updateEndpoint, saveData);
+      cLog('Event updated successfully:', response.data);
+    } catch (error) {
+      console.error('Error updating event:', error);
+    }
+  };
+
+  const fetchAdditionalData = async () => {
+    if (!fetchEndpoint) return;
+    try {
+      const response = await axios.get(fetchEndpoint);
+      setAdditionalData(response.data);
+    } catch (error) {
+      console.error('Error fetching additional data:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchAdditionalData();
+    let eventDate = event.event.event_date;
+    if (event.event.event_date !== event.event.event_time) {
+      const dateTimeString = `${event.event.event_date}T${event.event.event_time}`;
+      eventDate = new Date(dateTimeString);
+    }
+
+    if (eventDate) {
+      event.event['event_date'] = eventDate;
+      event.event['event_time'] = eventDate;
+    }
+
+    if (event.event['repeat_timeline']) {
+      event.event['repeat_timeline'] = parseInt(event.event['repeat_timeline'], 10);
+      event.event['repeating'] = event.event['repeat_timeline'] !== 0;
+    }
+
+    setFormData(event.event);
+  }, [event]);
+
+  const handleChange = (name: string, value: any) => {
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleFormSave = () => {
+    cLog("Saving data:", formData);
+    setFormData({ ...formData, userId: userId });
+    handleSave(formData);
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{title}</Text>
+      {fields.map((field) => {
+        switch (field.type) {
+          case 'text':
+            return (
+              <View key={field.name} style={styles.field}>
+                <Text>{field.label}</Text>
+                <TextInput
+                  style={styles.input}
+                  value={formData[field.name]}
+                  onChangeText={(value) => handleChange(field.name, value)}
+                />
+              </View>
+            );
+          case 'date':
+          case 'time':
+            return (
+              <View key={field.name} style={styles.field}>
+                <Text>{field.label}</Text>
+                <TextInput
+                  style={styles.input}
+                  value={formData[field.name]?.toString()}
+                  onChangeText={(value) => handleChange(field.name, value)}
+                  placeholder={field.type === 'date' ? 'YYYY-MM-DD' : 'HH:MM'}
+                />
+              </View>
+            );
+          case 'dropdown':
+            return (
+              <View key={field.name} style={styles.field}>
+                <Text>{field.label}</Text>
+                <Dropdown
+                  style={{ height: 50, width: '80%' }}
+                  data={field.options || []}
+                  maxHeight={300}
+                  labelField="label"
+                  valueField="value"
+                  value={formData[field.name]}
+                  onChange={(item: { label: string; value: any }) =>
+                    handleChange(field.name, item.value)
+                  }
+                  placeholder="Select"
+                />
+              </View>
+
+            );
+          case 'multi-select':
+            return (
+              <View key={field.name} style={styles.field}>
+                <Text>{field.label}</Text>
+                {/* <MultiSelect
+                  items={field.options || []}
+                  uniqueKey="value"
+                  selectedItems={formData[field.name] || []}
+                  onSelectedItemsChange={(selected) => handleChange(field.name, selected)}
+                  selectText="Choose items"
+                  searchInputPlaceholderText="Search items..."
+                  tagRemoveIconColor="#CCC"
+                  tagBorderColor="#CCC"
+                  tagTextColor="#CCC"
+                  selectedItemTextColor="#CCC"
+                  selectedItemIconColor="#CCC"
+                  itemTextColor="#000"
+                  displayKey="label"
+                  searchInputStyle={{ color: '#CCC' }}
+                  submitButtonColor="#48d22b"
+                  submitButtonText="Submit"
+                /> */}
+              </View>
+            );
+          case 'number':
+            {
+              return (
+                <View key={field.name} style={styles.field}>
+                  <Text>{field.label}</Text>
+                  <TextInput
+                    style={[styles.input, { height: 50 }]}
+                    value={formData[field.name]}
+                    onChangeText={(text) => handleChange(field.name, text)}
+                    placeholder={field.label}
+                    keyboardType="numeric"
+                  />
+                </View>
+              )
+            }
+          case 'textarea':
+            {
+              return (
+                <View key={field.name} style={styles.field}>
+                  <Text>{field.label}</Text>
+                  <TextInput
+                    value={formData[field.name]}
+                    onChangeText={(text) => handleChange(field.name, text)}
+                    multiline
+                    placeholder={field.label}
+                  />
+                </View>
+              )
+            }
+          default:
+            return null;
+        }
+      })}
+      <Button title="Save" onPress={handleFormSave} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 20,
+  },
+  field: {
+    marginBottom: 15,
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#ccc',
+    padding: 10,
+    borderRadius: 5,
+  },
+});
+
+export default GenericEventPage;
diff --git a/app/viewCalendarEvents.tsx b/app/viewCalendarEvents.tsx
index 13a1b2b..ed44cac 100644
--- a/app/viewCalendarEvents.tsx
+++ b/app/viewCalendarEvents.tsx
@@ -1,54 +1,24 @@
-import React from 'react';
-import axios from 'axios';
+import React, { useEffect, useState } from 'react';
+import GenericEventPage, { Field } from './genericViewEventPage';
 import { IPAddr, repeatingData } from './constants';
-import { cLog } from './log'
-import GenericViewPageForm from './viewEventPage';
-import { RouteProp, useRoute } from '@react-navigation/native';
-import { RootStackParamList } from '@/components/Types';
 
-type ViewEventsRouteProp = RouteProp<RootStackParamList, 'viewCalendarEvents'>;
 
-export default function ViewCalendarEvents() {
-    const route = useRoute<ViewEventsRouteProp>();
-    const { event } = route.params;
-    cLog("Passed event:", event);
-    const fields = [
-        { name: 'title', label: 'Title', type: 'text' },
-        { name: 'event_date', label: 'Date', type: 'date' },
-        { name: 'event_time', label: 'Time', type: 'time' },
-        { name: 'description', label: 'Description', type: 'textarea' },
-        { name: 'repeat_timeline', label: 'Repeating', type: 'dropdown', options: repeatingData },
-    ];
-    const handleSave = async (saveData: any) => {
-        try {
-            cLog("Save Data:", saveData);
-            const hit = IPAddr + '/update_calendar_event';
-            cLog('Updating event with:' + hit);
-            const response = await axios.put(hit, saveData);
-            cLog('Event updated successfully:' + response.data);
-        } catch (error) {
-            console.error('Error updating event:', error);
-        }
-    };
-
-    let eventDate = event.event.event_date;
-    if (event.event.event_date != event.event.event_time) {
-        const dateTimeString = `${event.event.event_date}T${event.event.event_time}`;
-        eventDate = new Date(dateTimeString);
-    }
 
-    if (eventDate) event.event['event_date'] = eventDate;
-    if (eventDate) event.event['event_time'] = eventDate;
-    if (event.event['repeat_timeline']) event.event['repeat_timeline'] = parseInt(event.event['repeat_timeline'], 10);
-    if (event.event['repeat_timeline'] !== undefined) event.event['repeating'] = event.event['repeat_timeline'] !== 0;
+export default function ViewHealthEvents() {
+  const fields: Field[] = [
+    { name: 'title', label: 'Title', type: 'text' },
+    { name: 'description', label: 'Description', type: 'textarea' },
+    { name: 'event_date', label: 'Date', type: 'date' },
+    { name: 'event_time', label: 'Time', type: 'time' },
+        { name: 'repeat_timeline', label: 'Repeating', type: 'dropdown', options: repeatingData },
+  ];
 
-    return (
-        <GenericViewPageForm
-            title="Calendar Event"
-            initialData={event.event}
-            fields={fields}
-            mainPage='calendarEvents'
-            onSave={handleSave}
-        />
-    );
-}
\ No newline at end of file
+  return (
+    <GenericEventPage
+    title="Calendar event"
+    fields={fields}
+      updateEndpoint={`${IPAddr}/update_calendar_event`}
+      mainPage="calendarEvents"
+    />
+  );
+}
diff --git a/app/viewEventPage.tsx b/app/viewEventPage.tsx
deleted file mode 100644
index 07b5ad6..0000000
--- a/app/viewEventPage.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { View, TextInput, Text, TouchableOpacity, ScrollView } from 'react-native';
-import DateTimePicker from '@react-native-community/datetimepicker';
-import { Dropdown } from 'react-native-element-dropdown';
-import { styles } from './styles';
-import { RootStackParamList } from '@/components/Types';
-import { StackNavigationProp } from '@react-navigation/stack';
-import { useFocusEffect, useNavigation } from '@react-navigation/native';
-import MultiSelect from 'react-native-multiple-select';
-import { verifyToken } from './constants';
-
-interface FormProps {
-  title: string;
-  initialData: any;
-  fields: Array<{ name: string; label: string; type: string; options?: any }>;
-  mainPage: keyof RootStackParamList;
-  onSave: (data: any) => void;
-}
-
-const GenericViewPageForm: React.FC<FormProps> = ({ title, initialData, fields, mainPage, onSave }) => {
-  const [formData, setFormData] = useState(initialData);
-  const [showDatePicker, setShowDatePicker] = useState(false);
-  const [showTimePicker, setShowTimePicker] = useState(false);
-  const [currentField, setCurrentField] = useState<string | null>(null); // Tracks which field is being edited
-
-  type TrackerNavigationProp = StackNavigationProp<RootStackParamList, keyof RootStackParamList>;
-  const navigation = useNavigation<TrackerNavigationProp>();
-
-  const handleChange = (name: string, value: any) => {
-    setFormData({ ...formData, [name]: value });
-  };
-
-  const handleDateChange = (name: string, selectedDate: any) => {
-    if (selectedDate) {
-      handleChange(name, selectedDate);
-      setShowDatePicker(false);
-    }
-  };
-
-  const handleTimeChange = (name: string, event: any, selectedTime: any) => {
-    if (event.type === 'dismissed') {
-      setShowTimePicker(false);
-    } else if (selectedTime) {
-      handleChange(name, selectedTime);
-    }
-  };
-
-  const handleSave = async () => {
-    const isTokenValid = await verifyToken(navigation); // Await the token verification
-    if (!isTokenValid) return;
-    const formattedData = {
-      ...formData,
-      event_date: formData.event_date?.toISOString().split('T')[0],
-      event_time: formData.event_time?.toTimeString().split(' ')[0],
-    };
-    onSave(formattedData);
-    navigation.navigate(mainPage as any);
-  };
-
-  const showPicker = (type: 'date' | 'time', fieldName: string) => {
-    setCurrentField(fieldName);
-    if (type === 'date') {
-      setShowDatePicker(true);
-    } else {
-      setShowTimePicker(true);
-    }
-  };
-
-  const handleIngredientChange = (selectedItems: string[]) => {
-    handleChange('ingredients', selectedItems);
-  };
-
-  useFocusEffect(
-    useCallback(() => {
-      verifyToken(navigation);
-    }, [])
-  );
-
-  return (
-    <ScrollView contentContainerStyle={styles.addContainer}>
-      <Text style={styles.sectionHeader}>{title}</Text>
-      <View>
-        {fields.map((field, index) => (
-          <View key={index} style={styles.inputContainer}>
-            <View style={field.type === 'textarea' ? styles.inLineDescription : styles.inLine}>
-              <Text style={styles.inputText}>{field.label}</Text>
-              {field.type === 'text' && (
-                <TextInput
-                  style={[styles.input, { height: 50 }]}
-                  value={formData[field.name]}
-                  onChangeText={(text) => handleChange(field.name, text)}
-                  placeholder={field.label}
-                />
-              )}
-              {field.type === 'date' && (
-                <View style={styles.dateTimeInLine}>
-                  <TouchableOpacity onPress={() => showPicker('date', field.name)}>
-                    <Text style={{ textAlign: 'left' }}>{formData[field.name] ? formData[field.name].toDateString() : 'Select Date'}</Text>
-                  </TouchableOpacity>
-                  {showDatePicker && (
-                    <DateTimePicker
-                      value={currentField ? formData[currentField] || new Date() : new Date()}
-                      mode="date"
-                      display="default"
-                      onChange={(event, selectedDate) => handleDateChange(currentField!, selectedDate)}
-                    />
-                  )}
-                </View>
-              )}
-              {field.type === 'multi-select' && (
-                <MultiSelect
-                  items={initialData.allIngredients} // Ensure ingredients is an array
-                  uniqueKey="value"
-                  selectedItems={formData[field.name] || initialData.ingredients} // Default to an empty array
-                  onSelectedItemsChange={(selectedItems) => handleIngredientChange(selectedItems)}
-                  selectText="Select Ingredients"
-                  searchInputPlaceholderText="Search Ingredients..."
-                  displayKey="label"
-                  styleDropdownMenuSubsection={styles.dropdown}
-                />
-              )}
-              {field.type === 'time' && (
-                <View style={styles.dateTimeInLine}>
-                  <TouchableOpacity onPress={() => showPicker('time', field.name)}>
-                    <Text style={{ textAlign: 'left' }}>{formData[field.name] ? formData[field.name].toLocaleTimeString() : 'Select Time'}</Text>
-                  </TouchableOpacity>
-                  {showTimePicker && (
-                    <DateTimePicker
-                      minuteInterval={15}
-                      value={currentField ? formData[currentField] || new Date() : new Date()}
-                      mode="time"
-                      display="default"
-                      onChange={(event, selectedTime) => handleTimeChange(currentField!, event, selectedTime)}
-                    />
-                  )}
-                </View>
-              )}
-              {field.type === 'dropdown' && (
-                <Dropdown
-                  style={[styles.dropdown, { height: 50, width: '80%' }]}
-                  data={field.options}
-                  maxHeight={300}
-                  labelField="label"
-                  valueField="value"
-                  value={formData[field.name]}
-                  onChange={(item) => handleChange(field.name, item.value)}
-                  placeholder="Select"
-                />
-              )}
-
-              {field.type === 'textarea' && (
-                <TextInput
-                  style={styles.bigInput}
-                  value={formData[field.name]}
-                  onChangeText={(text) => handleChange(field.name, text)}
-                  multiline
-                  placeholder={field.label}
-                />
-              )}
-              {field.type === 'number' && (
-                <TextInput
-                  style={[styles.input, { height: 50 }]}
-                  value={formData[field.name]}
-                  onChangeText={(text) => handleChange(field.name, text)}
-                  placeholder={field.label}
-                  keyboardType="numeric"
-                />
-              )}
-            </View>
-          </View>
-        ))}
-      </View>
-      <View style={styles.saveCancelContainer}>
-        <TouchableOpacity style={styles.saveButton} onPress={handleSave}>
-          <Text style={styles.saveText}>Save</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.cancelButton} onPress={() => navigation.navigate(mainPage as any)}>
-          <Text style={styles.cancelText}>Cancel</Text>
-        </TouchableOpacity>
-      </View>
-    </ScrollView>
-  );
-};
-
-export default GenericViewPageForm;
\ No newline at end of file
diff --git a/app/viewFinanceEvents.tsx b/app/viewFinanceEvents.tsx
index d96207e..cc707bb 100644
--- a/app/viewFinanceEvents.tsx
+++ b/app/viewFinanceEvents.tsx
@@ -1,54 +1,23 @@
-import React from 'react';
-import axios from 'axios';
+import React, { useEffect, useState } from 'react';
+import GenericEventPage, { Field } from './genericViewEventPage';
 import { IPAddr, repeatingData } from './constants';
-import { cLog } from './log'
-import GenericViewPageForm from './viewEventPage';
-import { RouteProp, useRoute } from '@react-navigation/native';
-import { RootStackParamList } from '@/components/Types';
 
-type ViewEventsRouteProp = RouteProp<RootStackParamList, 'viewFinanceEvents'>;
+export default function ViewHealthEvents() {
+  const fields: Field[] = [
+    { name: 'title', label: 'Title', type: 'text' },
+    { name: 'description', label: 'Description', type: 'textarea' },
+    { name: 'event_date', label: 'Date', type: 'date' },
+    { name: 'event_time', label: 'Time', type: 'time' },
+    { name: 'repeat_timeline', label: 'Repeating', type: 'dropdown', options: repeatingData },
+    { name: 'money', label: 'Money', type: 'number' }
+  ];
 
-export default function ViewFinanceEvents() {
-    const route = useRoute<ViewEventsRouteProp>();
-    const { event } = route.params;
-    cLog("Passed event:", event);
-    const fields = [
-        { name: 'title', label: 'Title', type: 'text' },
-        { name: 'event_date', label: 'Date', type: 'date' },
-        { name: 'event_time', label: 'Time', type: 'time' },
-        { name: 'repeat_timeline', label: 'Repeating', type: 'dropdown', options: repeatingData },
-        { name: 'money', label: 'Money', type: 'number' }
-    ];
-    const handleSave = async (saveData: any) => {
-        try {
-            cLog("Save Data:", saveData);
-            const hit = IPAddr + '/update_finance_event';
-            cLog('Updating event with:' + hit);
-            const response = await axios.put(hit, saveData);
-            cLog('Event updated successfully:' + response.data);
-        } catch (error) {
-            console.error('Error updating event:', error);
-        }
-    };
-
-    let eventDate = event.event.event_date;
-    if (event.event.event_date != event.event.event_time) {
-        const dateTimeString = `${event.event.event_date}T${event.event.event_time}`;
-        eventDate = new Date(dateTimeString);
-    }
-
-    if (eventDate) event.event['event_date'] = eventDate;
-    if (eventDate) event.event['event_time'] = eventDate;
-    if (event.event['repeat_timeline']) event.event['repeat_timeline'] = parseInt(event.event['repeat_timeline'], 10);
-    if (event.event['repeat_timeline'] !== undefined) event.event['repeating'] = event.event['repeat_timeline'] !== 0;
-
-    return (
-        <GenericViewPageForm
-            title="Finance Event"
-            initialData={event.event}
-            fields={fields}
-            mainPage='finance'
-            onSave={handleSave}
-        />
-    );
-}
\ No newline at end of file
+  return (
+    <GenericEventPage
+    title="Finance Event"
+    fields={fields}
+      updateEndpoint={`${IPAddr}/update_finance_event`}
+      mainPage="financeTracker"
+    />
+  );
+}
diff --git a/app/viewHealthEvents.tsx b/app/viewHealthEvents.tsx
index 6da44e2..3009424 100644
--- a/app/viewHealthEvents.tsx
+++ b/app/viewHealthEvents.tsx
@@ -1,53 +1,24 @@
-import React from 'react';
-import axios from 'axios';
+import React, { useEffect, useState } from 'react';
+import GenericEventPage, { Field } from './genericViewEventPage';
 import { IPAddr, repeatingData } from './constants';
-import { cLog } from './log'
-import GenericViewPageForm from './viewEventPage';
-import { RouteProp, useRoute } from '@react-navigation/native';
-import { RootStackParamList } from '@/components/Types';
 
-type ViewEventsRouteProp = RouteProp<RootStackParamList, 'viewHealthEvents'>;
 
-export default function ViewHealthEvents() {
-    const route = useRoute<ViewEventsRouteProp>();
-    const { event } = route.params;
-    cLog("Passed event:", event);
-    const fields = [
-        { name: 'title', label: 'Title', type: 'text' },
-        { name: 'event_date', label: 'Date', type: 'date' },
-        { name: 'event_time', label: 'Time', type: 'time' },
-        { name: 'repeat_timeline', label: 'Repeating', type: 'dropdown', options: repeatingData },
-    ];
-    const handleSave = async (saveData: any) => {
-        try {
-            cLog("Save Data:", saveData);
-            const hit = IPAddr + '/update_health_event';
-            cLog('Updating event with:' + hit);
-            const response = await axios.put(hit, saveData);
-            cLog('Event updated successfully:' + response.data);
-        } catch (error) {
-            console.error('Error updating event:', error);
-        }
-    };
-
-    let eventDate = event.event.event_date;
-    if (event.event.event_date != event.event.event_time) {
-        const dateTimeString = `${event.event.event_date}T${event.event.event_time}`;
-        eventDate = new Date(dateTimeString);
-    }
 
-    if (eventDate) event.event['event_date'] = eventDate;
-    if (eventDate) event.event['event_time'] = eventDate;
-    if (event.event['repeat_timeline']) event.event['repeat_timeline'] = parseInt(event.event['repeat_timeline'], 10);
-    if (event.event['repeat_timeline'] !== undefined) event.event['repeating'] = event.event['repeat_timeline'] !== 0;
+export default function ViewHealthEvents() {
+  const fields: Field[] = [
+    { name: 'title', label: 'Title', type: 'text' },
+    { name: 'description', label: 'Description', type: 'textarea' },
+    { name: 'event_date', label: 'Date', type: 'date' },
+    { name: 'event_time', label: 'Time', type: 'time' },
+    { name: 'repeat_timeline', label: 'Repeating', type: 'dropdown', options: repeatingData },
+  ];
 
-    return (
-        <GenericViewPageForm
-            title="Health Event"
-            initialData={event.event}
-            fields={fields}
-            mainPage='healthTracker'
-            onSave={handleSave}
-        />
-    );
-}
\ No newline at end of file
+  return (
+    <GenericEventPage
+    title="Health Event"
+    fields={fields}
+      updateEndpoint={`${IPAddr}/update_health_event`}
+      mainPage="healthTracker"
+    />
+  );
+}
diff --git a/app/viewMealEvents.tsx b/app/viewMealEvents.tsx
index f84e9f9..1be49dd 100644
--- a/app/viewMealEvents.tsx
+++ b/app/viewMealEvents.tsx
@@ -1,79 +1,25 @@
-import React, { useEffect, useState } from 'react';
-import axios from 'axios';
+import React from 'react';
+import GenericEventPage, { Field } from './genericViewEventPage';
 import { IPAddr, repeatingData } from './constants';
-import { cLog } from './log'
-import GenericViewPageForm from './viewEventPage';
-import { RouteProp, useRoute } from '@react-navigation/native';
-import { RootStackParamList } from '@/components/Types';
-import AsyncStorage from '@react-native-async-storage/async-storage';
 
-type ViewEventsRouteProp = RouteProp<RootStackParamList, 'viewMealEvents'>;
 
 export default function ViewMealEvents() {
-    const [allIngredients, setIngredients] = useState([]);
-    const route = useRoute<ViewEventsRouteProp>();
-    const { event } = route.params;
-    cLog("Passed event:", event);
-    const fields = [
-        { name: 'title', label: 'Title', type: 'text' },
-        { name: 'event_date', label: 'Date', type: 'date' },
-        { name: 'event_time', label: 'Time', type: 'time' },
-        { name: 'repeat_timeline', label: 'Repeating', type: 'dropdown', options: repeatingData },
-        { name: 'ingredients', label: 'Ingredients', type: 'multi-select' },
-    ];
-    const handleSave = async (saveData: any) => {
-        try {
-            const payload = {
-                ...saveData,
-                ingredients: saveData.ingredients.join(','),
-            };
-            cLog("Save Data:", payload);
-            const hit = IPAddr + '/update_meal_event';
-            cLog('Updating event with:' + hit);
-            const response = await axios.put(hit, payload);
-            cLog('Event updated successfully:' + response.data);
-        } catch (error) {
-            console.error('Error updating event:', error);
-        }
-    };
+  const fields: Field[] = [
+    { name: 'title', label: 'Title', type: 'text' },
+    { name: 'description', label: 'Description', type: 'textarea' },
+    { name: 'event_date', label: 'Date', type: 'date' },
+    { name: 'event_time', label: 'Time', type: 'time' },
+    { name: 'repeat_timeline', label: 'Repeating', type: 'dropdown', options: repeatingData },
+    { name: 'ingredients', label: 'Ingredients', type: 'multi-select' },
+  ];
 
-    const fetchIngredients = async () => {
-        try {
-            const response = await axios.get(IPAddr + '/get_ingredients/'+(await AsyncStorage.getItem('userId')));
-            const fetchedIngredients = response.data.map((item: any) => ({
-                label: item.ingredientName,
-                value: item.id,
-            }));
-            setIngredients(fetchedIngredients); // Update state with fetched ingredients
-        } catch (error) {
-            console.error('Error fetching ingredients:', error);
-        }
-    };
-
-
-    useEffect(() => {
-        fetchIngredients();
-    }, []);
-
-    let eventDate = event.event.event_date;
-    if (event.event.event_date != event.event.event_time) {
-        const dateTimeString = `${event.event.event_date}T${event.event.event_time}`;
-        eventDate = new Date(dateTimeString);
-    }
-    cLog("Ingredients:", allIngredients);
-    if (event.event['ingredients'] && !Array.isArray(event.event['ingredients'])) event.event['ingredients'] = event.event['ingredients'].split(',').map((id: string) => parseInt(id, 10));
-    if (eventDate) event.event['event_date'] = eventDate;
-    if (eventDate) event.event['event_time'] = eventDate;
-    if (event.event['repeat_timeline']) event.event['repeat_timeline'] = parseInt(event.event['repeat_timeline'], 10);
-    if (event.event['repeat_timeline'] !== undefined) event.event['repeating'] = event.event['repeat_timeline'] !== 0;
-
-    return (
-        <GenericViewPageForm
-            title="Meal Event"
-            initialData={{ ...event.event, allIngredients }}
-            fields={fields}
-            mainPage='mealTracker'
-            onSave={handleSave}
-        />
-    );
-}
\ No newline at end of file
+  return (
+    <GenericEventPage
+      title="Meal Event"
+      fields={fields}
+      updateEndpoint={`${IPAddr}/update_meal_event`}
+      fetchEndpoint={`${IPAddr}/get_ingredients/13`}
+      mainPage="mealTracker"
+    />
+  );
+}
diff --git a/backend/omniplanner/src/main/resources/application.properties b/backend/omniplanner/src/main/resources/application.properties
new file mode 100644
index 0000000..b2130b5
--- /dev/null
+++ b/backend/omniplanner/src/main/resources/application.properties
@@ -0,0 +1,16 @@
+spring.application.name=omniplanner
+
+server.port=8080
+server.address = 0.0.0.0
+
+spring.datasource.url=jdbc:sqlite:omniplanner.db
+spring.datasource.driver-class-name=org.sqlite.JDBC
+spring.jpa.show-sql=true
+spring.jpa.database-platform=org.hibernate.community.dialect.SQLiteDialect
+spring.jpa.hibernate.ddl-auto=update
+
+jwt.secret=uNkNbJvurJtLdYV2pa0YG6jwGMBapa4+HAzbuT4Q9VAbdocVsc5ich2cIuy+BzbHb9n6bzQTGk7YTdROTR+4QQ=
+jwt.expiration=86400000
+
+spring.datasource.hikari.connection-timeout=30000
+spring.datasource.hikari.maximum-pool-size=10
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index b9aec3a..1fa0269 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
     "strict": true,
+    "esModuleInterop": true, 
     "paths": {
       "@/*": [
         "./*"
@@ -12,6 +13,7 @@
     "**/*.ts",
     "**/*.tsx",
     ".expo/types/**/*.ts",
-    "expo-env.d.ts"
-, "app/constants.js"  ]
+    "expo-env.d.ts",
+    "app/constants.js"
+  ]
 }