From 1e6b2f8df7328278dc053b1eca3ddc31d022d6ea Mon Sep 17 00:00:00 2001 From: gibbyb Date: Tue, 10 Sep 2024 13:30:33 -0500 Subject: [PATCH] Truly an MVP Now. Needs to look good --- .env | 2 + app/(tabs)/countdown.tsx | 43 +++++++-- app/(tabs)/index.tsx | 4 +- app/(tabs)/sendmessage.tsx | 56 ++++++++---- components/ChangeDateDrawer.tsx | 154 ++++++++++++++++++++++++++++++++ components/UserSelection.tsx | 5 +- package-lock.json | 13 +++ package.json | 1 + 8 files changed, 246 insertions(+), 32 deletions(-) create mode 100644 .env create mode 100644 components/ChangeDateDrawer.tsx diff --git a/.env b/.env new file mode 100644 index 0000000..05aac83 --- /dev/null +++ b/.env @@ -0,0 +1,2 @@ +EXPO_PUBLIC_API_KEY=I_Love_Madeline +EXPO_PUBLIC_BASE_URL=https://ismadelinethecutest.gibbyb.com/api diff --git a/app/(tabs)/countdown.tsx b/app/(tabs)/countdown.tsx index 55a5e1a..611d0f5 100644 --- a/app/(tabs)/countdown.tsx +++ b/app/(tabs)/countdown.tsx @@ -1,12 +1,13 @@ import React, { useState, useEffect } from 'react'; -import { StyleSheet, ActivityIndicator } from 'react-native'; +import { StyleSheet, ActivityIndicator, TouchableOpacity } from 'react-native'; import { ThemedText } from '@/components/ThemedText'; import { ThemedView } from '@/components/ThemedView'; import axios from 'axios'; +import ChangeDateDrawer from '@/components/ChangeDateDrawer'; + +const API_KEY = process.env.EXPO_PUBLIC_API_KEY; +const BASE_URL = process.env.EXPO_PUBLIC_BASE_URL; -const API_KEY = 'I_Love_Madeline'; -//const BASE_URL = 'http://192.168.0.39:3000/api'; -const BASE_URL = 'https://ismadelinethecutest.gibbyb.com/api'; // Separate API call function const fetchCountdownDate = async () => { @@ -14,7 +15,6 @@ const fetchCountdownDate = async () => { const response = await axios.get(`${BASE_URL}/getCountdown`, { params: { apiKey: API_KEY } }); - //const response = await axios.get(`${BASE_URL}/getCountdown?apiKey=I_Love_Madeline`); console.log('API response:', response.data); if (response.data && response.data[0] && response.data[0].countdown) { console.log('Countdown date:', response.data[0].countdown); @@ -38,6 +38,7 @@ export default function TabTwoScreen() { }); const [targetDate, setTargetDate] = useState(null); const [isLoading, setIsLoading] = useState(true); + const [isDateDrawerVisible, setIsDateDrawerVisible] = useState(false); useEffect(() => { const loadCountdownDate = async () => { @@ -45,9 +46,6 @@ export default function TabTwoScreen() { const date = await fetchCountdownDate(); if (date) { setTargetDate(date); - } else { - // Fallback to a default date if API call fails - setTargetDate(new Date()); } setIsLoading(false); }; @@ -78,6 +76,10 @@ export default function TabTwoScreen() { return () => clearInterval(interval); }, [targetDate]); + const handleDateChange = (newDate: Date) => { + setTargetDate(newDate); + }; + if (isLoading) { return ( @@ -95,6 +97,20 @@ export default function TabTwoScreen() { + setIsDateDrawerVisible(true)} + > + Change Date + + {targetDate && ( + setIsDateDrawerVisible(false)} + onDateChange={handleDateChange} + currentDate={targetDate} + /> + )} ); } @@ -140,4 +156,15 @@ const styles = StyleSheet.create({ countdownLabel: { fontSize: 24, }, + changeButton: { + backgroundColor: '#007AFF', + padding: 10, + borderRadius: 5, + marginTop: 20, + }, + changeButtonText: { + color: 'white', + fontSize: 16, + fontWeight: 'bold', + }, }); diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx index 548477b..7a01a78 100644 --- a/app/(tabs)/index.tsx +++ b/app/(tabs)/index.tsx @@ -5,8 +5,8 @@ import { ThemedView } from '@/components/ThemedView'; import AsyncStorage from '@react-native-async-storage/async-storage'; import axios from 'axios'; -const API_KEY = 'I_Love_Madeline'; -const BASE_URL = 'https://ismadelinethecutest.gibbyb.com/api'; +const API_KEY = process.env.EXPO_PUBLIC_API_KEY; +const BASE_URL = process.env.EXPO_PUBLIC_BASE_URL; export default function HomeScreen() { const [message, setMessage] = useState('Loading message...'); diff --git a/app/(tabs)/sendmessage.tsx b/app/(tabs)/sendmessage.tsx index 1edecf7..6a2117d 100644 --- a/app/(tabs)/sendmessage.tsx +++ b/app/(tabs)/sendmessage.tsx @@ -1,12 +1,21 @@ import React, { useState, useEffect } from 'react'; -import { StyleSheet, TextInput, TouchableOpacity, Alert, Keyboard } from 'react-native'; +import { + StyleSheet, + TextInput, + TouchableOpacity, + Alert, + Keyboard, + TouchableWithoutFeedback, + KeyboardAvoidingView, + Platform +} from 'react-native'; import { ThemedText } from '@/components/ThemedText'; import { ThemedView } from '@/components/ThemedView'; import AsyncStorage from '@react-native-async-storage/async-storage'; import axios from 'axios'; -const API_KEY = 'I_Love_Madeline'; -const BASE_URL = 'https://ismadelinethecutest.gibbyb.com/api'; +const API_KEY = process.env.EXPO_PUBLIC_API_KEY; +const BASE_URL = process.env.EXPO_PUBLIC_BASE_URL; export default function SendMessageScreen() { const [message, setMessage] = useState(''); @@ -53,20 +62,27 @@ export default function SendMessageScreen() { }; return ( - - Send a Message - - - Send Message - - + + + + Send a Message + + + Send Message + + + + ); } @@ -78,14 +94,15 @@ const styles = StyleSheet.create({ padding: 20, }, title: { - fontSize: 24, + fontSize: 36, + lineHeight: 40, fontWeight: 'bold', marginBottom: 20, textAlign: 'center', }, input: { width: '100%', - height: 100, + height: 80, borderColor: '#ccc', borderWidth: 1, borderRadius: 5, @@ -93,6 +110,7 @@ const styles = StyleSheet.create({ marginBottom: 20, textAlignVertical: 'top', color: '#FFF', + fontSize: 18, }, button: { backgroundColor: '#007AFF', diff --git a/components/ChangeDateDrawer.tsx b/components/ChangeDateDrawer.tsx new file mode 100644 index 0000000..f3e3a17 --- /dev/null +++ b/components/ChangeDateDrawer.tsx @@ -0,0 +1,154 @@ +import React, { useState } from 'react'; +import { StyleSheet, TouchableOpacity, Modal, Platform, View } from 'react-native'; +import { ThemedText } from '@/components/ThemedText'; +import { ThemedView } from '@/components/ThemedView'; +import DateTimePicker from '@react-native-community/datetimepicker'; +import axios from 'axios'; + +const API_KEY = process.env.EXPO_PUBLIC_API_KEY; +const BASE_URL = process.env.EXPO_PUBLIC_BASE_URL; + +interface ChangeDateDrawerProps { + isVisible: boolean; + onClose: () => void; + onDateChange: (date: Date) => void; + currentDate: Date; +} + +export default function ChangeDateDrawer({ isVisible, onClose, onDateChange, currentDate }: ChangeDateDrawerProps) { + const [date, setDate] = useState(currentDate); + const [showDatePicker, setShowDatePicker] = useState(false); + const [showTimePicker, setShowTimePicker] = useState(false); + + const handleDateChange = (event: any, selectedDate?: Date) => { + const currentDate = selectedDate || date; + setShowDatePicker(Platform.OS === 'ios'); + setDate(currentDate); + }; + + const handleTimeChange = (event: any, selectedTime?: Date) => { + const currentTime = selectedTime || date; + setShowTimePicker(Platform.OS === 'ios'); + setDate(currentTime); + }; + + const handleSave = async () => { + try { + await axios.post(`${BASE_URL}/setCountdown`, null, { + params: { apiKey: API_KEY, countdown: date.toISOString() } + }); + onDateChange(date); + onClose(); + } catch (error) { + console.error('Failed to update countdown date:', error); + // You might want to show an error message to the user here + } + }; + + return ( + + + + Set New Countdown Date and Time + + setShowDatePicker(true)}> + Select Date + + + setShowTimePicker(true)}> + Select Time + + + {showDatePicker && ( + + )} + + {showTimePicker && ( + + )} + + + Selected: {date.toLocaleString()} + + + + Save + + + + Cancel + + + + + ); +} + +const styles = StyleSheet.create({ + centeredView: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: 'rgba(0, 0, 0, 0.5)', + }, + modalView: { + margin: 20, + backgroundColor: 'black', + borderRadius: 20, + padding: 35, + alignItems: 'center', + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 2 + }, + shadowOpacity: 0.25, + shadowRadius: 4, + elevation: 5 + }, + button: { + backgroundColor: '#2196F3', + borderRadius: 20, + padding: 10, + elevation: 2, + marginVertical: 10, + minWidth: 120, + }, + cancelButton: { + backgroundColor: '#FF3B30', + }, + buttonText: { + color: 'white', + fontWeight: 'bold', + textAlign: 'center', + }, + modalText: { + marginBottom: 15, + textAlign: 'center', + fontWeight: 'bold', + fontSize: 18, + }, + dateText: { + marginVertical: 10, + fontSize: 16, + }, +}); diff --git a/components/UserSelection.tsx b/components/UserSelection.tsx index e5fd9a1..217bd89 100644 --- a/components/UserSelection.tsx +++ b/components/UserSelection.tsx @@ -15,9 +15,8 @@ interface UserSelectionProps { onUserSelected: (user: User) => void; } -const API_KEY = 'I_Love_Madeline'; -const BASE_URL = 'https://ismadelinethecutest.gibbyb.com/api'; -//const BASE_URL = 'http://192.168.0.39:3000/api'; +const API_KEY = process.env.EXPO_PUBLIC_API_KEY; +const BASE_URL = process.env.EXPO_PUBLIC_BASE_URL; const UserSelection: React.FC = ({ onUserSelected }) => { const [users, setUsers] = useState([]); diff --git a/package-lock.json b/package-lock.json index c4b0bfb..0e3c659 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-native": "0.74.5", + "react-native-dotenv": "^3.4.11", "react-native-gesture-handler": "~2.16.1", "react-native-reanimated": "~3.10.1", "react-native-safe-area-context": "4.10.5", @@ -16927,6 +16928,18 @@ } } }, + "node_modules/react-native-dotenv": { + "version": "3.4.11", + "resolved": "https://registry.npmjs.org/react-native-dotenv/-/react-native-dotenv-3.4.11.tgz", + "integrity": "sha512-6vnIE+WHABSeHCaYP6l3O1BOEhWxKH6nHAdV7n/wKn/sciZ64zPPp2NUdEUf1m7g4uuzlLbjgr+6uDt89q2DOg==", + "license": "MIT", + "dependencies": { + "dotenv": "^16.4.5" + }, + "peerDependencies": { + "@babel/runtime": "^7.20.6" + } + }, "node_modules/react-native-gesture-handler": { "version": "2.16.2", "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.16.2.tgz", diff --git a/package.json b/package.json index 1ef20ea..1cfd853 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-native": "0.74.5", + "react-native-dotenv": "^3.4.11", "react-native-gesture-handler": "~2.16.1", "react-native-reanimated": "~3.10.1", "react-native-safe-area-context": "4.10.5",