From e4f2af0e14c2e8b5690948821af8adc94d567e85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Qu=E1=BB=91c=20Kh=C3=A1nh?= <bkdev98@gmail.com>
Date: Fri, 19 Jul 2024 20:52:25 +0700
Subject: [PATCH] refactor(mobile): add generic date picker field (#140)

---
 .../date-picker.tsx}                          | 28 ++++++++++++-------
 .../transaction/transaction-form.tsx          | 15 ++++++++--
 2 files changed, 31 insertions(+), 12 deletions(-)
 rename apps/mobile/components/{transaction/select-date-field.tsx => common/date-picker.tsx} (86%)

diff --git a/apps/mobile/components/transaction/select-date-field.tsx b/apps/mobile/components/common/date-picker.tsx
similarity index 86%
rename from apps/mobile/components/transaction/select-date-field.tsx
rename to apps/mobile/components/common/date-picker.tsx
index 3fac88cc..fcaffb50 100644
--- a/apps/mobile/components/transaction/select-date-field.tsx
+++ b/apps/mobile/components/common/date-picker.tsx
@@ -13,7 +13,6 @@ import DateTimePicker from '@react-native-community/datetimepicker'
 import * as Haptics from 'expo-haptics'
 import { Calendar } from 'lucide-react-native'
 import { useRef, useState } from 'react'
-import { useController } from 'react-hook-form'
 import { Keyboard, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { FullWindowOverlay } from 'react-native-screens'
@@ -23,9 +22,13 @@ import { Text } from '../ui/text'
 function SpinnerDatePicker({
   value,
   onChange,
+  maximumDate,
+  minimumDate,
 }: {
   value: Date
   onChange: (date: Date | undefined) => void
+  maximumDate?: Date
+  minimumDate?: Date
 }) {
   const { i18n } = useLingui()
   const [date, setDate] = useState<Date | undefined>(value)
@@ -39,6 +42,8 @@ function SpinnerDatePicker({
         onChange={(_, selectedDate) => {
           setDate(selectedDate)
         }}
+        maximumDate={maximumDate}
+        minimumDate={minimumDate}
       />
       <Button
         className="mx-6"
@@ -53,17 +58,20 @@ function SpinnerDatePicker({
   )
 }
 
-export function SelectDateField({
-  onSelect,
+export function DatePicker({
+  value = new Date(),
+  onChange,
+  maximumDate,
+  minimumDate,
 }: {
-  onSelect?: (date?: Date) => void
+  value?: Date
+  onChange?: (date?: Date) => void
+  maximumDate?: Date
+  minimumDate?: Date
 }) {
   const { bottom } = useSafeAreaInsets()
   const { colorScheme } = useColorScheme()
   const sheetRef = useRef<BottomSheetModal>(null)
-  const {
-    field: { onChange, onBlur, value },
-  } = useController({ name: 'date' })
 
   return (
     <>
@@ -108,10 +116,10 @@ export function SelectDateField({
             onChange={async (date) => {
               sheetRef.current?.close()
               await sleep(500)
-              onChange(date)
-              onBlur()
-              onSelect?.(date)
+              onChange?.(date)
             }}
+            maximumDate={maximumDate}
+            minimumDate={minimumDate}
           />
         </BottomSheetView>
       </BottomSheetModal>
diff --git a/apps/mobile/components/transaction/transaction-form.tsx b/apps/mobile/components/transaction/transaction-form.tsx
index 940c9e28..5b9a21a2 100644
--- a/apps/mobile/components/transaction/transaction-form.tsx
+++ b/apps/mobile/components/transaction/transaction-form.tsx
@@ -14,6 +14,7 @@ import Animated, {
   useAnimatedKeyboard,
   useAnimatedStyle,
 } from 'react-native-reanimated'
+import { DatePicker } from '../common/date-picker'
 import { InputField } from '../form-fields/input-field'
 import { SubmitButton } from '../form-fields/submit-button'
 import { NumericPad } from '../numeric-pad'
@@ -22,7 +23,6 @@ import { Button } from '../ui/button'
 import { Text } from '../ui/text'
 import { SelectAccountField } from './select-account-field'
 import { SelectCategoryField } from './select-category-field'
-import { SelectDateField } from './select-date-field'
 
 type TransactionFormProps = {
   onSubmit: (data: TransactionFormValues) => void
@@ -93,7 +93,18 @@ export const TransactionForm = ({
           <Button size="icon" variant="secondary" onPress={onCancel}>
             <XIcon className="size-6 text-primary" />
           </Button>
-          <SelectDateField />
+          <Controller
+            name="date"
+            control={form.control}
+            render={({ field: { onChange, value } }) => (
+              <DatePicker
+                value={value}
+                onChange={onChange}
+                minimumDate={new Date(Date.now() - 365 * 24 * 60 * 60 * 1000)}
+                maximumDate={new Date(Date.now() + 365 * 24 * 60 * 60 * 1000)}
+              />
+            )}
+          />
           <View className="flex-row items-center gap-4">
             {onDelete ? (
               <Button size="icon" variant="secondary" onPress={onDelete}>