diff --git a/components/home/Countdown.tsx b/components/home/Countdown.tsx index 8bec823..fe83ee4 100644 --- a/components/home/Countdown.tsx +++ b/components/home/Countdown.tsx @@ -24,6 +24,7 @@ const CountdownView = () => { const [isDateModalOpen, setIsDateModalOpen] = useState(false); const [user, setUser] = useState(null); const [relationship, setRelationship] = useState(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 = () => { setIsDateModalOpen(true)} /> diff --git a/components/home/CountdownChangeDateModal.tsx b/components/home/CountdownChangeDateModal.tsx index 02e1e65..4cc144e 100644 --- a/components/home/CountdownChangeDateModal.tsx +++ b/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 = ({ Set New Countdown - - - - - - - - - - - + + + + + + + + + + + + + @@ -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',