From b1f795798acd7486444510a4a8eccc4f04d1af52 Mon Sep 17 00:00:00 2001 From: lcflight Date: Fri, 2 Feb 2024 11:47:50 -0500 Subject: [PATCH] updated datetime picker --- ios/Podfile.lock | 6 -- src/components/datePickerPopup.tsx | 67 ++++++++++++++++++++++ src/components/newTaskPopup.tsx | 89 +++++++++++++++++++++-------- src/components/types.tsx | 8 +++ src/screens/HomeScreen.tsx | 7 --- src/styles/datePickerPopupStyle.tsx | 42 ++++++++++++++ src/styles/newTaskPopupStyle.tsx | 40 ++++++++++--- 7 files changed, 213 insertions(+), 46 deletions(-) create mode 100644 src/components/datePickerPopup.tsx create mode 100644 src/styles/datePickerPopupStyle.tsx diff --git a/ios/Podfile.lock b/ios/Podfile.lock index fad04a3..422a67a 100644 --- 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 new file mode 100644 index 0000000..267d57f --- /dev/null +++ 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 ( + + + + + + + Select Date: + + + {user?.timezone} + + [ + { + backgroundColor: pressed + ? 'rgba(33, 150, 243, 0.5)' + : '#2196F3', + }, + styles.button, + ]} + onPress={() => { + setDateModalVisible(!dateModalVisible); + }}> + Set + + + + + + ); +} diff --git a/src/components/newTaskPopup.tsx b/src/components/newTaskPopup.tsx index e195b58..a3dd251 100644 --- 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,7 +52,9 @@ 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, @@ -62,43 +62,65 @@ export default function NewTaskPopup({ 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 ( - - Set Task Title: - + Task setTitle(text)} /> + - Set Value: + Stakes setDollars(parseFloat(text))} /> + - - Select Date: - - - {user?.timezone} + Date + { + handleSetDatePress(); + }}> + + {chosenDate.toLocaleString([], { + dateStyle: 'short', + timeStyle: 'short', + })} + + + {failMessage} + [ { @@ -108,8 +130,17 @@ export default function NewTaskPopup({ }, styles.createButton, ]} - onPress={() => mutation.mutate()}> - Create + 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'); + } + }}> + Create [ @@ -120,11 +151,21 @@ export default function NewTaskPopup({ }, styles.button, ]} - onPress={() => setModalVisible(!modalVisible)}> - Hide + onPress={() => { + setModalVisible(!modalVisible); + resetTaskData(); + }}> + Hide + ); diff --git a/src/components/types.tsx b/src/components/types.tsx index 3bb41c4..e8d5bad 100644 --- a/src/components/types.tsx +++ b/src/components/types.tsx @@ -44,6 +44,14 @@ export type infoPopupProps = { setModalVisible: Dispatch>; }; +export type DatePickerPopupProps = { + testID?: string; + dateModalVisible: boolean; + setDateModalVisible: Dispatch>; + date: Date; + onDateChange: Dispatch>; +}; + export type LoginScreenProps = StackScreenProps< RootStackParamList, 'LoginScreen' diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx index c411910..a2ff577 100644 --- a/src/screens/HomeScreen.tsx +++ b/src/screens/HomeScreen.tsx @@ -181,13 +181,6 @@ export default function HomeScreen({navigation}: Props): JSX.Element { [ - // { - // 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 new file mode 100644 index 0000000..f09899c --- /dev/null +++ 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', + }, +}); diff --git a/src/styles/newTaskPopupStyle.tsx b/src/styles/newTaskPopupStyle.tsx index d232e4f..2a7baca 100644 --- a/src/styles/newTaskPopupStyle.tsx +++ b/src/styles/newTaskPopupStyle.tsx @@ -27,6 +27,12 @@ export const styles = StyleSheet.create({ padding: 10, elevation: 2, }, + buttonText: { + fontSize: 18, + color: 'white', + fontWeight: 'bold', + textAlign: 'center', + }, createButton: { borderRadius: 20, margin: 5, @@ -37,22 +43,25 @@ export const styles = StyleSheet.create({ fontSize: 18, color: 'white', fontWeight: 'bold', - textAlign: 'center', + marginBottom: 5, }, - datePicker: {}, datePair: { marginBottom: 10, justifyContent: 'space-between', - alignItems: 'center', }, titlePair: { marginBottom: 10, - flexDirection: 'row', justifyContent: 'space-between', - alignItems: 'center', + // alignItems: 'center', + }, + titleTextStyle: { + marginBottom: 5, + fontSize: 18, + color: 'white', + fontWeight: 'bold', }, - titleInput: { - width: '45%', + input: { + width: '100%', fontSize: 18, padding: 6, paddingRight: 12, @@ -61,8 +70,21 @@ export const styles = StyleSheet.create({ }, centsPair: { marginBottom: 10, - flexDirection: 'row', justifyContent: 'space-between', - alignItems: 'center', + }, + textStyleInputEmulator: { + fontSize: 18, + }, + failMessageTextStyle: { + fontSize: 15, + color: '#ff0000', + textAlign: 'center', + }, + inputEmulatorBox: { + width: '100%', + padding: 6, + paddingRight: 12, + paddingLeft: 12, + borderRadius: 7, }, });