Truly an MVP Now. Needs to look good

.env

@@ -0,0 +1,2 @@
+EXPO_PUBLIC_API_KEY=I_Love_Madeline
+EXPO_PUBLIC_BASE_URL=https://ismadelinethecutest.gibbyb.com/api

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<Date | null>(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 (
       <ThemedView style={styles.container}>
@@ -95,6 +97,20 @@ export default function TabTwoScreen() {
         <CountdownItem value={countdown.minutes} label="Minutes" />
         <CountdownItem value={countdown.seconds} label="Seconds" />
       </ThemedView>
+      <TouchableOpacity 
+        style={styles.changeButton} 
+        onPress={() => setIsDateDrawerVisible(true)}
+      >
+        <ThemedText style={styles.changeButtonText}>Change Date</ThemedText>
+      </TouchableOpacity>
+      {targetDate && (
+        <ChangeDateDrawer
+          isVisible={isDateDrawerVisible}
+          onClose={() => setIsDateDrawerVisible(false)}
+          onDateChange={handleDateChange}
+          currentDate={targetDate}
+        />
+      )}
     </ThemedView>
   );
 }
@@ -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',
+  },
 });

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 API_KEY = process.env.EXPO_PUBLIC_API_KEY;
-const BASE_URL = 'https://ismadelinethecutest.gibbyb.com/api';
+const BASE_URL = process.env.EXPO_PUBLIC_BASE_URL;
 
 export default function HomeScreen() {
   const [message, setMessage] = useState('Loading message...');

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 API_KEY = process.env.EXPO_PUBLIC_API_KEY;
-const BASE_URL = 'https://ismadelinethecutest.gibbyb.com/api';
+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 (
-    <ThemedView style={styles.container}>
+    <KeyboardAvoidingView 
-      <ThemedText style={styles.title}>Send a Message</ThemedText>
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
-      <TextInput
+      style={{flex: 1}}
-        style={styles.input}
+    >
-        value={message}
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
-        onChangeText={setMessage}
+        <ThemedView style={styles.container}>
-        placeholder="Enter your message"
+          <ThemedText style={styles.title}>Send a Message</ThemedText>
-        placeholderTextColor="#999"
+          <TextInput
-        multiline
+            style={styles.input}
-      />
+            value={message}
-      <TouchableOpacity style={styles.button} onPress={sendMessage}>
+            onChangeText={setMessage}
-        <ThemedText style={styles.buttonText}>Send Message</ThemedText>
+            placeholder="Enter your message"
-      </TouchableOpacity>
+            placeholderTextColor="#999"
-    </ThemedView>
+            multiline
+          />
+          <TouchableOpacity style={styles.button} onPress={sendMessage}>
+            <ThemedText style={styles.buttonText}>Send Message</ThemedText>
+          </TouchableOpacity>
+        </ThemedView>
+      </TouchableWithoutFeedback>
+    </KeyboardAvoidingView>
   );
 }
 
@@ -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',

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 (
+    <Modal
+      animationType="slide"
+      transparent={true}
+      visible={isVisible}
+      onRequestClose={onClose}
+    >
+      <ThemedView style={styles.centeredView}>
+        <ThemedView style={styles.modalView}>
+          <ThemedText style={styles.modalText}>Set New Countdown Date and Time</ThemedText>
+          
+          <TouchableOpacity style={styles.button} onPress={() => setShowDatePicker(true)}>
+            <ThemedText style={styles.buttonText}>Select Date</ThemedText>
+          </TouchableOpacity>
+          
+          <TouchableOpacity style={styles.button} onPress={() => setShowTimePicker(true)}>
+            <ThemedText style={styles.buttonText}>Select Time</ThemedText>
+          </TouchableOpacity>
+          
+          {showDatePicker && (
+            <DateTimePicker
+              testID="datePicker"
+              value={date}
+              mode="date"
+              is24Hour={true}
+              display="default"
+              onChange={handleDateChange}
+            />
+          )}
+          
+          {showTimePicker && (
+            <DateTimePicker
+              testID="timePicker"
+              value={date}
+              mode="time"
+              is24Hour={true}
+              display="default"
+              onChange={handleTimeChange}
+            />
+          )}
+          
+          <ThemedText style={styles.dateText}>
+            Selected: {date.toLocaleString()}
+          </ThemedText>
+          
+          <TouchableOpacity style={styles.button} onPress={handleSave}>
+            <ThemedText style={styles.buttonText}>Save</ThemedText>
+          </TouchableOpacity>
+          
+          <TouchableOpacity style={[styles.button, styles.cancelButton]} onPress={onClose}>
+            <ThemedText style={styles.buttonText}>Cancel</ThemedText>
+          </TouchableOpacity>
+        </ThemedView>
+      </ThemedView>
+    </Modal>
+  );
+}
+
+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,
+  },
+});

components/UserSelection.tsx

@@ -15,9 +15,8 @@ interface UserSelectionProps {
   onUserSelected: (user: User) => void;
 }
 
-const API_KEY = 'I_Love_Madeline';
+const API_KEY = process.env.EXPO_PUBLIC_API_KEY;
-const BASE_URL = 'https://ismadelinethecutest.gibbyb.com/api';
+const BASE_URL = process.env.EXPO_PUBLIC_BASE_URL;
-//const BASE_URL = 'http://192.168.0.39:3000/api';
 
 const UserSelection: React.FC<UserSelectionProps> = ({ onUserSelected }) => {
   const [users, setUsers] = useState<User[]>([]);

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",

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",