add title I think

components/home/Countdown.tsx

@@ -24,6 +24,7 @@ const CountdownView = () => {
   const [isDateModalOpen, setIsDateModalOpen] = useState(false);
   const [user, setUser] = useState<User | null>(null);
   const [relationship, setRelationship] = useState<Relationship | null>(null);
+  const [title, setTitle] = useState('');
 
   useEffect(() => {
     const loadData = async () => {
@@ -65,14 +66,14 @@ const CountdownView = () => {
     return () => clearInterval(interval);
   }, [countdown]);
 
-  const handleCountdownUpdate = async (newDate: Date) => {
+  const handleCountdownUpdate = async (newDate: Date, newTitle: string) => {
     if (relationship) {
       const newCountdown: Countdown = countdown
-        ? { ...countdown, date: newDate }
+        ? { ...countdown, date: newDate, title: newTitle }
         : {
             id: 0, // This will be set by the server
             relationshipId: relationship.id,
-            title: 'Countdown to Next Visit',
+            title: newTitle ? newTitle : 'Countdown to Next Visit',
             date: newDate,
             createdAt: new Date(),
           };
@@ -135,7 +136,7 @@ const CountdownView = () => {
       </ThemedView>
       <TextButton
         width={320} height={68}
-        text='Change Date'
+        text='Change Countdown'
         fontSize={24}
         onPress={() => setIsDateModalOpen(true)}
       />

components/home/CountdownChangeDateModal.tsx

@@ -1,23 +1,27 @@
 import React, { useState } from 'react';
-import { StyleSheet, Modal } from 'react-native';
+import { StyleSheet, Modal, TextInput } from 'react-native';
 import { ThemedText, ThemedView } from '@/components/theme/Theme';
 import DateTimePicker from '@react-native-community/datetimepicker';
 import { Countdown, User } from '@/constants/Types';
 import { setCountdown } from '@/constants/APIs';
 import TextButton from '@/components/theme/buttons/TextButton';
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
 
 type ChangeDateModalProps = {
   user: User;
   isVisible: boolean;
   onClose: () => void;
-  onDateChange: (date: Date) => void;
+  onDateChange: (date: Date, title: string) => void;
   currentCountdown?: Countdown;
 };
 
 const ChangeDateModal = ({
   user, isVisible, onClose, onDateChange, currentCountdown
 }: ChangeDateModalProps) => {
+  const scheme = useColorScheme() ?? 'dark';
   const [date, setDate] = useState(currentCountdown ? new Date(currentCountdown.date) : new Date());
+  const [title, setTitle] = useState('');
 
   const handleDateChange = (event: any, selectedDate?: Date) => {
     const currentDate = selectedDate ?? date;
@@ -33,9 +37,10 @@ const ChangeDateModal = ({
     try {
       let updatedCountdown: Countdown;
       if (currentCountdown) {
-        updatedCountdown = { ...currentCountdown, date: date };
+        updatedCountdown = { ...currentCountdown, date: date, title: title };
+        console.log(updatedCountdown);
         await setCountdown(user.id, updatedCountdown);
-        onDateChange(date);
+        onDateChange(date, title);
         onClose();
       }
     } catch (error) {
@@ -55,44 +60,56 @@ const ChangeDateModal = ({
           <ThemedText style={styles.modalText}>
             Set New Countdown
           </ThemedText>
-            <ThemedView style={styles.container}>
+          <ThemedView style={styles.titleBox}>
-              <ThemedView style={styles.dateContainer}>
+            <TextInput
-                <DateTimePicker
+              style={[
-                  testID="datePicker"
+                styles.titleInput,
-                  value={date}
+                {color: Colors[scheme].text}
-                  mode="date"
+              ]}
-                  is24Hour={true}
+              onChangeText={setTitle}
-                  display="default"
+              value={title}
-                  onChange={handleDateChange}
+              placeholder='Countdown Title'
-                />
+              placeholderTextColor={Colors[scheme].icon}
-              </ThemedView>
+            />
-              <ThemedView style={styles.timeContainer}>
+          </ThemedView>
-                <DateTimePicker
+          <ThemedView style={styles.container}>
-                  testID="timePicker"
+            <ThemedView style={styles.dateContainer}>
-                  value={date}
+              <DateTimePicker
-                  mode="time"
+                testID="datePicker"
-                  is24Hour={true}
+                value={date}
-                  display="default"
+                mode="date"
-                  onChange={handleTimeChange}
+                is24Hour={true}
-                />
+                display="default"
-              </ThemedView>
+                onChange={handleDateChange}
-            </ThemedView>
-            <ThemedView style={styles.buttonContainer}>
-              <TextButton
-                width={120}
-                height={60}
-                text='Save'
-                fontSize={18}
-                onPress={handleSave}
-              />
-              <TextButton
-                width={120}
-                height={60}
-                text='Cancel'
-                fontSize={18}
-                onPress={onClose}
               />
             </ThemedView>
+            <ThemedView style={styles.timeContainer}>
+              <DateTimePicker
+                testID="timePicker"
+                value={date}
+                mode="time"
+                is24Hour={true}
+                display="default"
+                onChange={handleTimeChange}
+              />
+            </ThemedView>
+          </ThemedView>
+          <ThemedView style={styles.buttonContainer}>
+            <TextButton
+              width={120}
+              height={60}
+              text='Save'
+              fontSize={18}
+              onPress={handleSave}
+            />
+            <TextButton
+              width={120}
+              height={60}
+              text='Cancel'
+              fontSize={18}
+              onPress={onClose}
+            />
+          </ThemedView>
         </ThemedView>
       </ThemedView>
     </Modal>
@@ -123,6 +140,16 @@ const styles = StyleSheet.create({
     elevation: 5,
     width: '80%',
   },
+  titleBox: {
+  },
+  titleInput: {
+    height: 40,
+    width: 200,
+    paddingHorizontal: 10,
+    borderColor: 'gray',
+    borderWidth: 1,
+    marginBottom: 20,
+  },
   modalText: {
     marginBottom: 20,
     textAlign: 'center',