Merge pull request #90 from oss-slu/ClockRedjusting

(WIP 86)ClockRedjusting
oss-slu · Oct 23, 2023 · 7417890 · 7417890
2 parents 11292b7 + 9565d46
commit 7417890
Showing 1 changed file with 48 additions and 24 deletions.
diff --git a/lib/components/time.tsx b/lib/components/time.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { View, Text, StyleSheet } from "react-native";
+import { View, Text, StyleSheet ,Button} from "react-native";
 import DateTimePicker from "@react-native-community/datetimepicker";
 
 export function formatToLocalDateString(date: Date): string {
@@ -37,6 +37,8 @@ export default function LocationWindow({
   const [date, setDate] = useState(new Date());
   const [chosenDate, setChosenDate] = useState(new Date());
   const [chosenTime, setChosenTime] = useState(new Date());
+  const [showPicker, setShowPicker] = useState(false);
+  const [savedDateTime, setSavedDateTime] = useState<null | Date>(null);
 
   useEffect(() => {
     setDate(time);
@@ -45,48 +47,59 @@ export default function LocationWindow({
   const onChangeDate = (event: any, selectedDate: any) => {
     const currentDate = selectedDate || date;
     setChosenDate(currentDate);
-    combineDateTime();
   };
 
   const onChangeTime = (event: any, selectedTime: any) => {
     const currentTime = selectedTime || date;
     setChosenTime(currentTime);
-    combineDateTime();
   };
 
-  const combineDateTime = () => {
+  const saveDateTime = () => {
     const combinedDate = new Date(
       chosenDate.getFullYear(),
       chosenDate.getMonth(),
       chosenDate.getDate(),
       chosenTime.getHours(),
       chosenTime.getMinutes()
     );
-    setDate(combinedDate);
     setTime(combinedDate);
+    setSavedDateTime(combinedDate); // Store the saved date and time
+    setShowPicker(false);
   };
 
   return (
     <View style={styles.container}>
       <Text style={styles.label}>Date & Time</Text>
-      <View style={{ flexDirection: "row" }}>
-        <DateTimePicker
-          testID="datePicker"
-          value={date}
-          mode={"date"}
-          is24Hour={true}
-          display="default"
-          onChange={onChangeDate}
-        />
-        <DateTimePicker
-          testID="timePicker"
-          value={date}
-          mode={"time"}
-          is24Hour={true}
-          display="default"
-          onChange={onChangeTime}
-        />
-      </View>
+      {showPicker ? (
+          <View style={styles.dateTimePickerContainer}>
+    <DateTimePicker
+      testID="datePicker"
+      value={chosenDate}
+      mode={"date"}
+      is24Hour={true}
+      display="default"
+      onChange={onChangeDate}
+    />
+    <DateTimePicker
+      testID="timePicker"
+      value={chosenTime}
+      mode={"time"}
+      is24Hour={true}
+      display="default"
+      onChange={onChangeTime}
+    />
+      <Button title="Save" onPress={saveDateTime} />
+    </View>
+) : (
+  <View>
+    <View style={styles.savedTimeContainer}>
+      <Text style={styles.savedTime}>
+        {formatToLocalDateString(savedDateTime || time)}
+      </Text>
+    </View>
+    <Button title="Select Date & Time" onPress={() => setShowPicker(true)} />
+  </View>
+)}
     </View>
   );
 }
@@ -101,7 +114,7 @@ const styles = StyleSheet.create({
   label: {
     fontSize: 18,
     fontWeight: "bold",
-    marginBottom: 5,
+    marginBottom: 1,
   },
   input: {
     width: "100%",
@@ -111,4 +124,15 @@ const styles = StyleSheet.create({
     borderRadius: 5,
     paddingHorizontal: 10,
   },
+  dateTimePickerContainer: {
+    flexDirection: "row", 
+  },
+  savedTimeContainer: {
+    alignItems: "center",
+    marginTop: 10,
+  },
+  savedTime: {
+    fontSize: 16,
+  },
 });
+