updated datetime picker

TaskRatchet · Feb 2, 2024 · b1f7957 · b1f7957
1 parent b9b4dcf
commit b1f7957
Show file tree

Hide file tree

Showing 7 changed files with 213 additions and 46 deletions.
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -493,8 +493,6 @@ PODS:
     - React-perflogger (= 0.72.7)
   - RNCAsyncStorage (1.21.0):
     - React-Core
-  - RNDateTimePicker (7.2.0):
-    - React-Core
   - RNGestureHandler (2.14.1):
     - RCT-Folly (= 2021.07.22.00)
     - React-Core
@@ -573,7 +571,6 @@ DEPENDENCIES:
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
-  - "RNDateTimePicker (from `../node_modules/@react-native-community/datetimepicker`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
@@ -681,8 +678,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-async-storage/async-storage"
-  RNDateTimePicker:
-    :path: "../node_modules/@react-native-community/datetimepicker"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
   RNScreens:
@@ -745,7 +740,6 @@ SPEC CHECKSUMS:
   React-utils: 56838edeaaf651220d1e53cd0b8934fb8ce68415
   ReactCommon: 5f704096ccf7733b390f59043b6fa9cc180ee4f6
   RNCAsyncStorage: 618d03a5f52fbccb3d7010076bc54712844c18ef
-  RNDateTimePicker: 3942382593f104af226ad9c56e16166960c7ae30
   RNGestureHandler: fe2be3be5598dc74329b211c58c9f2d231461769
   RNScreens: 3c5b9f4a9dcde752466854b6109b79c0e205dad3
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17

diff --git a/src/components/datePickerPopup.tsx b/src/components/datePickerPopup.tsx
@@ -0,0 +1,67 @@
+import {useQuery} from '@tanstack/react-query';
+import React from 'react';
+import {Modal, Pressable, Text, View} from 'react-native';
+import DatePicker from 'react-native-date-picker';
+
+import themeProvider from '../providers/themeProvider';
+import {getMe} from '../services/taskratchet/getMe';
+import {styles} from '../styles/datePickerPopupStyle';
+import useIsDarkMode from '../utils/checkDarkMode';
+import type {DatePickerPopupProps} from './types';
+
+export default function DatePickerPopup({
+  dateModalVisible,
+  setDateModalVisible,
+  date,
+  onDateChange,
+}: DatePickerPopupProps): JSX.Element {
+  const {data: user} = useQuery({queryKey: ['user'], queryFn: getMe});
+
+  const isDarkMode = useIsDarkMode();
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode
+      ? themeProvider.colorsDark.secondaryLight
+      : themeProvider.colorsLight.secondary,
+  };
+
+  const textColorStyle = {
+    color: isDarkMode ? 'white' : 'black',
+  };
+
+  return (
+    <View>
+      <Modal visible={dateModalVisible} transparent={true} animationType="none">
+        <View style={styles.centeredView}>
+          <View style={[styles.modalView, backgroundStyle]}>
+            <View style={styles.datePickerGroup}>
+              <Text style={[styles.textStyle, textColorStyle]}>
+                Select Date:
+              </Text>
+              <DatePicker
+                style={styles.datePicker}
+                date={date}
+                onDateChange={onDateChange}
+              />
+              <Text style={[textColorStyle]}>{user?.timezone}</Text>
+            </View>
+            <Pressable
+              style={({pressed}) => [
+                {
+                  backgroundColor: pressed
+                    ? 'rgba(33, 150, 243, 0.5)'
+                    : '#2196F3',
+                },
+                styles.button,
+              ]}
+              onPress={() => {
+                setDateModalVisible(!dateModalVisible);
+              }}>
+              <Text style={styles.textStyle}>Set</Text>
+            </Pressable>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+}
diff --git a/src/components/newTaskPopup.tsx b/src/components/newTaskPopup.tsx
@@ -1,20 +1,18 @@
-import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query';
+import {useMutation, useQueryClient} from '@tanstack/react-query';
 import React, {useState} from 'react';
 import {Modal, Pressable, Text, TextInput, View} from 'react-native';
-import DatePicker from 'react-native-date-picker';
 
 import themeProvider from '../providers/themeProvider';
 import {addTask} from '../services/taskratchet/addTask';
-import {getMe} from '../services/taskratchet/getMe';
 import {styles} from '../styles/newTaskPopupStyle';
 import useIsDarkMode from '../utils/checkDarkMode';
+import DatePickerPopup from './datePickerPopup';
 import type {infoPopupProps} from './types';
 
 export default function NewTaskPopup({
   modalVisible,
   setModalVisible,
 }: infoPopupProps): JSX.Element {
-  const {data: user} = useQuery({queryKey: ['user'], queryFn: getMe});
   const queryClient = useQueryClient();
   const mutation = useMutation({
     mutationFn: () =>
@@ -54,51 +52,75 @@ export default function NewTaskPopup({
   };
 
   const [title, setTitle] = useState('');
-  const [dollars, setDollars] = useState(0);
+  const [dollars, setDollars] = useState(5);
+  const [failMessage, setFailMessage] = useState('');
+  const [datePickerModalVisible, setDatePickerModalVisible] = useState(false);
 
   const taskData = {
     title: title,
     date: chosenDate,
     cents: dollars * 100,
   };
 
+  function handleSetDatePress() {
+    setDatePickerModalVisible(!datePickerModalVisible);
+  }
+
+  function resetTaskData() {
+    setFailMessage('');
+    setTitle('');
+    setDollars(5);
+    setChosenDate(() => {
+      const d = new Date();
+      d.setDate(d.getDate() + 7);
+      d.setHours(23, 59, 0, 0);
+      return d;
+    });
+  }
+
   return (
     <View>
       <Modal visible={modalVisible} transparent={true} animationType="none">
         <View style={styles.centeredView}>
           <View style={[styles.modalView, backgroundStyle]}>
             <View style={styles.titlePair}>
-              <Text style={[styles.textStyle, textColorStyle]}>
-                Set Task Title:
-              </Text>
+              <Text style={[styles.titleTextStyle, textColorStyle]}>Task</Text>
               <TextInput
-                style={[styles.titleInput, inputBackgroundStyle]}
+                style={[styles.input, inputBackgroundStyle, textColorStyle]}
                 keyboardType="default"
                 placeholder="Enter Title"
                 onChangeText={text => setTitle(text)}
               />
             </View>
+
             <View style={styles.centsPair}>
-              <Text style={[styles.textStyle, textColorStyle]}>Set Value:</Text>
+              <Text style={[styles.textStyle, textColorStyle]}>Stakes</Text>
               <TextInput
-                style={[styles.titleInput, inputBackgroundStyle]}
+                style={[styles.input, inputBackgroundStyle, textColorStyle]}
                 keyboardType="numeric"
                 placeholder="Enter Value"
                 onChangeText={text => setDollars(parseFloat(text))}
               />
             </View>
+
             <View style={styles.datePair}>
-              <Text style={[styles.textStyle, textColorStyle]}>
-                Select Date:
-              </Text>
-              <DatePicker
-                style={styles.datePicker}
-                date={chosenDate}
-                onDateChange={setChosenDate}
-              />
-              <Text>{user?.timezone}</Text>
+              <Text style={[styles.textStyle, textColorStyle]}>Date</Text>
+              <Pressable
+                style={[styles.inputEmulatorBox, inputBackgroundStyle]}
+                onPress={() => {
+                  handleSetDatePress();
+                }}>
+                <Text style={[styles.textStyleInputEmulator, textColorStyle]}>
+                  {chosenDate.toLocaleString([], {
+                    dateStyle: 'short',
+                    timeStyle: 'short',
+                  })}
+                </Text>
+              </Pressable>
             </View>
 
+            <Text style={styles.failMessageTextStyle}>{failMessage}</Text>
+
             <Pressable
               style={({pressed}) => [
                 {
@@ -108,8 +130,17 @@ export default function NewTaskPopup({
                 },
                 styles.createButton,
               ]}
-              onPress={() => mutation.mutate()}>
-              <Text style={styles.textStyle}>Create</Text>
+              onPress={() => {
+                if (taskData.title !== '' && taskData.cents !== 0) {
+                  mutation.mutate();
+                  setModalVisible(!modalVisible);
+                  resetTaskData();
+                } else {
+                  console.error('Invalid task data');
+                  setFailMessage('Title and Value must be set');
+                }
+              }}>
+              <Text style={styles.buttonText}>Create</Text>
             </Pressable>
             <Pressable
               style={({pressed}) => [
@@ -120,11 +151,21 @@ export default function NewTaskPopup({
                 },
                 styles.button,
               ]}
-              onPress={() => setModalVisible(!modalVisible)}>
-              <Text style={styles.textStyle}>Hide</Text>
+              onPress={() => {
+                setModalVisible(!modalVisible);
+                resetTaskData();
+              }}>
+              <Text style={styles.buttonText}>Hide</Text>
             </Pressable>
           </View>
         </View>
+        <DatePickerPopup
+          testID="datePickerPopup"
+          dateModalVisible={datePickerModalVisible}
+          setDateModalVisible={setDatePickerModalVisible}
+          date={chosenDate}
+          onDateChange={setChosenDate}
+        />
       </Modal>
     </View>
   );

diff --git a/src/components/types.tsx b/src/components/types.tsx
@@ -44,6 +44,14 @@ export type infoPopupProps = {
   setModalVisible: Dispatch<SetStateAction<boolean>>;
 };
 
+export type DatePickerPopupProps = {
+  testID?: string;
+  dateModalVisible: boolean;
+  setDateModalVisible: Dispatch<SetStateAction<boolean>>;
+  date: Date;
+  onDateChange: Dispatch<SetStateAction<Date>>;
+};
+
 export type LoginScreenProps = StackScreenProps<
   RootStackParamList,
   'LoginScreen'

diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx
@@ -181,13 +181,6 @@ export default function HomeScreen({navigation}: Props): JSX.Element {
         </View>
       </ScrollView>
       <Pressable
-        // style={[styles.plusImageBox, plusButtonColor]}
-        // style={({pressed}) => [
-        //   {
-        //     backgroundColor: pressed ? 'rgba(33, 150, 243, 0.5)' : '#2196F3',
-        //   },
-        //   styles.button,
-        // ]}
         style={({pressed}) => [
           styles.plusImageBox,
           {

diff --git a/src/styles/datePickerPopupStyle.tsx b/src/styles/datePickerPopupStyle.tsx
@@ -0,0 +1,42 @@
+import {StyleSheet} from 'react-native';
+
+export const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 22,
+  },
+  modalView: {
+    width: '90%',
+    backgroundColor: 'white',
+    borderRadius: 20,
+    padding: 35,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  button: {
+    borderRadius: 20,
+    margin: 5,
+    padding: 10,
+    elevation: 2,
+  },
+  datePickerGroup: {
+    marginBottom: 10,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  datePicker: {},
+  textStyle: {
+    fontSize: 18,
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+});