add title I think

This commit is contained in:
Gabriel Brown 2024-10-29 16:57:46 -05:00
parent 4fb9e60c6c
commit cfb6f01d00
2 changed files with 72 additions and 44 deletions

View File

@ -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)}
/>

View File

@ -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,6 +60,18 @@ const ChangeDateModal = ({
<ThemedText style={styles.modalText}>
Set New Countdown
</ThemedText>
<ThemedView style={styles.titleBox}>
<TextInput
style={[
styles.titleInput,
{color: Colors[scheme].text}
]}
onChangeText={setTitle}
value={title}
placeholder='Countdown Title'
placeholderTextColor={Colors[scheme].icon}
/>
</ThemedView>
<ThemedView style={styles.container}>
<ThemedView style={styles.dateContainer}>
<DateTimePicker
@ -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',