From fdcf8931d06038e05cf077c991301d8fc0413b58 Mon Sep 17 00:00:00 2001 From: Hailey <me@haileyok.com> Date: Mon, 4 Mar 2024 14:47:10 -0800 Subject: [PATCH 1/3] Revert other base PR changes, switch date picker library rm expo-linear-gradient Revert "remove unused packages, switch to `expo-linear-gradient`" This reverts commit 20a0ffcf Revert "upgrade expo deps" This reverts commit a43dca92caa120d45fb771431752dd2db3b37ab5. Revert other library changes This reverts commit 5219f66e Revert "re-add normalize-url" This reverts commit 654019c4babe2e455f6069a6c725eb51140ab1ab. Revert "add `expo-haptics`" This reverts commit ff3a0399b1c7eae07b83946f13543eedf7cdfe82. Revert "add `expo-clipboard`" This reverts commit 440ae91632153e22ff79050d8ac803a7305e88a0. Revert "add `expo-file-system`" This reverts commit c0fe0c94534564982399c22299a8a19052bf3e54. fix android alf use modal on android migrate to `react-native-date-picker` rm `@reactnativecommunity/datetimepicker` add `react-native-date-picker` add `expo-file-system` add `expo-clipboard` add `expo-haptics` re-add normalize-url rm blur view upgrade expo deps remove unused packages, switch to `expo-linear-gradient` --- package.json | 1 + .../forms/DateField/index.android.tsx | 39 +++++++++---------- src/components/forms/DateField/index.tsx | 20 ++++------ src/view/com/util/forms/DateInput.tsx | 31 ++++++++------- yarn.lock | 5 +++ 5 files changed, 49 insertions(+), 47 deletions(-) diff --git a/package.json b/package.json index d694d26c31..df890dd2db 100644 --- a/package.json +++ b/package.json @@ -150,6 +150,7 @@ "react-dom": "^18.2.0", "react-native": "0.73.2", "react-native-appstate-hook": "^1.0.6", + "react-native-date-picker": "^4.4.0", "react-native-drawer-layout": "^4.0.0-alpha.3", "react-native-fs": "^2.20.0", "react-native-gesture-handler": "~2.14.0", diff --git a/src/components/forms/DateField/index.android.tsx b/src/components/forms/DateField/index.android.tsx index cddb643d61..451810a5ea 100644 --- a/src/components/forms/DateField/index.android.tsx +++ b/src/components/forms/DateField/index.android.tsx @@ -1,8 +1,5 @@ import React from 'react' import {View, Pressable} from 'react-native' -import DateTimePicker, { - BaseProps as DateTimePickerProps, -} from '@react-native-community/datetimepicker' import {useTheme, atoms} from '#/alf' import {Text} from '#/components/Typography' @@ -15,6 +12,8 @@ import { localizeDate, toSimpleDateString, } from '#/components/forms/DateField/utils' +import DatePicker from 'react-native-date-picker' +import {isAndroid} from 'platform/detection' export * as utils from '#/components/forms/DateField/utils' export const Label = TextField.Label @@ -38,20 +37,20 @@ export function DateField({ const {chromeFocus, chromeError, chromeErrorHover} = TextField.useSharedInputStyles() - const onChangeInternal = React.useCallback< - Required<DateTimePickerProps>['onChange'] - >( - (_event, date) => { + const onChangeInternal = React.useCallback( + (date: Date) => { setOpen(false) - if (date) { - const formatted = toSimpleDateString(date) - onChangeDate(formatted) - } + const formatted = toSimpleDateString(date) + onChangeDate(formatted) }, [onChangeDate, setOpen], ) + const onCancel = React.useCallback(() => { + setOpen(false) + }, []) + return ( <View style={[atoms.relative, atoms.w_full]}> <Pressable @@ -89,18 +88,18 @@ export function DateField({ </Pressable> {open && ( - <DateTimePicker + <DatePicker + modal={isAndroid} + open={isAndroid} + theme={t.name === 'light' ? 'light' : 'dark'} + date={new Date(value)} + onConfirm={onChangeInternal} + onCancel={onCancel} + mode="date" + testID={`${testID}-datepicker`} aria-label={label} accessibilityLabel={label} accessibilityHint={undefined} - testID={`${testID}-datepicker`} - mode="date" - timeZoneName={'Etc/UTC'} - display="spinner" - // @ts-ignore applies in iOS only -prf - themeVariant={t.name === 'light' ? 'light' : 'dark'} - value={new Date(value)} - onChange={onChangeInternal} /> )} </View> diff --git a/src/components/forms/DateField/index.tsx b/src/components/forms/DateField/index.tsx index e65936e0ea..49e47a01e3 100644 --- a/src/components/forms/DateField/index.tsx +++ b/src/components/forms/DateField/index.tsx @@ -1,13 +1,11 @@ import React from 'react' import {View} from 'react-native' -import DateTimePicker, { - DateTimePickerEvent, -} from '@react-native-community/datetimepicker' import {useTheme, atoms} from '#/alf' import * as TextField from '#/components/forms/TextField' import {toSimpleDateString} from '#/components/forms/DateField/utils' import {DateFieldProps} from '#/components/forms/DateField/types' +import DatePicker from 'react-native-date-picker' export * as utils from '#/components/forms/DateField/utils' export const Label = TextField.Label @@ -28,7 +26,7 @@ export function DateField({ const t = useTheme() const onChangeInternal = React.useCallback( - (event: DateTimePickerEvent, date: Date | undefined) => { + (date: Date | undefined) => { if (date) { const formatted = toSimpleDateString(date) onChangeDate(formatted) @@ -39,17 +37,15 @@ export function DateField({ return ( <View style={[atoms.relative, atoms.w_full]}> - <DateTimePicker + <DatePicker + theme={t.name === 'light' ? 'light' : 'dark'} + date={new Date(value)} + onDateChange={onChangeInternal} + mode="date" + testID={`${testID}-datepicker`} aria-label={label} accessibilityLabel={label} accessibilityHint={undefined} - testID={`${testID}-datepicker`} - mode="date" - timeZoneName={'Etc/UTC'} - display="spinner" - themeVariant={t.name === 'light' ? 'light' : 'dark'} - value={new Date(value)} - onChange={onChangeInternal} /> </View> ) diff --git a/src/view/com/util/forms/DateInput.tsx b/src/view/com/util/forms/DateInput.tsx index c5f0afc8fc..202e46fb95 100644 --- a/src/view/com/util/forms/DateInput.tsx +++ b/src/view/com/util/forms/DateInput.tsx @@ -1,8 +1,5 @@ import React, {useState, useCallback} from 'react' import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' -import DateTimePicker, { - DateTimePickerEvent, -} from '@react-native-community/datetimepicker' import { FontAwesomeIcon, FontAwesomeIconStyle, @@ -14,6 +11,7 @@ import {TypographyVariant} from 'lib/ThemeContext' import {useTheme} from 'lib/ThemeContext' import {usePalette} from 'lib/hooks/usePalette' import {getLocales} from 'expo-localization' +import DatePicker from 'react-native-date-picker' const LOCALE = getLocales()[0] @@ -43,11 +41,9 @@ export function DateInput(props: Props) { }, [props.handleAsUTC]) const onChangeInternal = useCallback( - (event: DateTimePickerEvent, date: Date | undefined) => { + (date: Date) => { setShow(false) - if (date) { - props.onChange(date) - } + props.onChange(date) }, [setShow, props], ) @@ -56,6 +52,10 @@ export function DateInput(props: Props) { setShow(true) }, [setShow]) + const onCancel = useCallback(() => { + setShow(false) + }, []) + return ( <View> {isAndroid && ( @@ -80,15 +80,16 @@ export function DateInput(props: Props) { </Button> )} {(isIOS || show) && ( - <DateTimePicker - testID={props.testID ? `${props.testID}-datepicker` : undefined} + <DatePicker + modal={isAndroid} + open={isAndroid} + theme={theme.colorScheme} + date={props.value} + onDateChange={onChangeInternal} + onConfirm={onChangeInternal} + onCancel={onCancel} mode="date" - timeZoneName={props.handleAsUTC ? 'Etc/UTC' : undefined} - display="spinner" - // @ts-ignore applies in iOS only -prf - themeVariant={theme.colorScheme} - value={props.value} - onChange={onChangeInternal} + testID={props.testID ? `${props.testID}-datepicker` : undefined} accessibilityLabel={props.accessibilityLabel} accessibilityHint={props.accessibilityHint} accessibilityLabelledBy={props.accessibilityLabelledBy} diff --git a/yarn.lock b/yarn.lock index ceb712ce27..9310a595d0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -18377,6 +18377,11 @@ react-native-appstate-hook@^1.0.6: resolved "https://registry.yarnpkg.com/react-native-appstate-hook/-/react-native-appstate-hook-1.0.6.tgz#cbc16e7b89cfaea034cabd999f00e99053cabd06" integrity sha512-0hPVyf5yLxCSVrrNEuGqN1ZnSSj3Ye2gZex0NtcK/AHYwMc0rXWFNZjBKOoZSouspqu3hXBbQ6NOUSTzrME1AQ== +react-native-date-picker@^4.4.0: + version "4.4.0" + resolved "https://registry.yarnpkg.com/react-native-date-picker/-/react-native-date-picker-4.4.0.tgz#fe5b6eb8d85a4a30b2991ada5169a30ce5023ead" + integrity sha512-Axx3byihwwhKRLRVjPAr/UaEysapkRcKmjjM8/05UaVm4Q0xDn2RFUcRdy1QAahhRcjLjlVYhepxvU5bdgy7ZQ== + react-native-dotenv@^3.3.1: version "3.4.9" resolved "https://registry.yarnpkg.com/react-native-dotenv/-/react-native-dotenv-3.4.9.tgz#621c5b0c1d0c5c7f569bfe5a1d804bec7885c010" From 7ff626733f69b5239c5bfa7c28706246bc755159 Mon Sep 17 00:00:00 2001 From: Hailey <me@haileyok.com> Date: Wed, 6 Mar 2024 09:41:05 -0800 Subject: [PATCH 2/3] rm old library --- package.json | 1 - yarn.lock | 7 ------- 2 files changed, 8 deletions(-) diff --git a/package.json b/package.json index df890dd2db..b95551b7ca 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,6 @@ "@react-native-camera-roll/camera-roll": "^5.2.2", "@react-native-clipboard/clipboard": "^1.10.0", "@react-native-community/blur": "^4.3.0", - "@react-native-community/datetimepicker": "7.6.1", "@react-native-masked-view/masked-view": "0.3.0", "@react-native-menu/menu": "^0.8.0", "@react-native-picker/picker": "2.6.1", diff --git a/yarn.lock b/yarn.lock index 9310a595d0..804dba8460 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4832,13 +4832,6 @@ prompts "^2.4.2" semver "^7.5.2" -"@react-native-community/datetimepicker@7.6.1": - version "7.6.1" - resolved "https://registry.yarnpkg.com/@react-native-community/datetimepicker/-/datetimepicker-7.6.1.tgz#98bdee01e3df490526ee1125e438c2030becac1f" - integrity sha512-g66Q2Kd9Uw3eRL7kkrTsGhi+eXxNoPDRFYH6z78sZQuYjPkUQgJDDMUYgBmaBsQx/fKMtemPrCj1ulGmyi0OSw== - dependencies: - invariant "^2.2.4" - "@react-native-community/eslint-config@^3.0.0": version "3.2.0" resolved "https://registry.yarnpkg.com/@react-native-community/eslint-config/-/eslint-config-3.2.0.tgz#42f677d5fff385bccf1be1d3b8faa8c086cf998d" From c63d264479c35b363799d4e477d9ec05bb93c0f3 Mon Sep 17 00:00:00 2001 From: Eric Bailey <git@esb.lol> Date: Wed, 6 Mar 2024 13:07:18 -0600 Subject: [PATCH 3/3] Use UTC for dates --- src/state/queries/preferences/index.ts | 2 +- src/view/com/util/forms/DateInput.tsx | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/state/queries/preferences/index.ts b/src/state/queries/preferences/index.ts index 07198de77f..37ef10ae0c 100644 --- a/src/state/queries/preferences/index.ts +++ b/src/state/queries/preferences/index.ts @@ -169,7 +169,7 @@ export function usePreferencesSetBirthDateMutation() { return useMutation<void, unknown, {birthDate: Date}>({ mutationFn: async ({birthDate}: {birthDate: Date}) => { - await getAgent().setPersonalDetails({birthDate}) + await getAgent().setPersonalDetails({birthDate: birthDate.toISOString()}) // triggers a refetch await queryClient.invalidateQueries({ queryKey: preferencesQueryKey, diff --git a/src/view/com/util/forms/DateInput.tsx b/src/view/com/util/forms/DateInput.tsx index 202e46fb95..0104562aa5 100644 --- a/src/view/com/util/forms/DateInput.tsx +++ b/src/view/com/util/forms/DateInput.tsx @@ -81,6 +81,7 @@ export function DateInput(props: Props) { )} {(isIOS || show) && ( <DatePicker + timeZoneOffsetInMinutes={0} modal={isAndroid} open={isAndroid} theme={theme.colorScheme}