fix(mobile): fix wrong start day of week and remove date-fns (#351)

get6pm · Sep 21, 2024 · 8fa2032 · 8fa2032
1 parent acdd24c
commit 8fa2032
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 14 deletions.
diff --git a/apps/mobile/app/(app)/(tabs)/index.tsx b/apps/mobile/app/(app)/(tabs)/index.tsx
@@ -16,7 +16,6 @@ import { useTransactionStore } from '@/stores/transaction/store'
 import { dayjsExtended } from '@6pm/utilities'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
-import { format } from 'date-fns/format'
 import { groupBy, mapValues, orderBy, sumBy } from 'lodash-es'
 import { useMemo, useState } from 'react'
 import { SectionList, View } from 'react-native'
@@ -76,8 +75,9 @@ export default function HomeScreen() {
   }
 
   const transactionsGroupByDate = useMemo(() => {
-    const groupedByDay = groupBy(transactions, (transaction) =>
-      format(new Date(transaction.date), 'yyyy-MM-dd'),
+    const groupedByDay = groupBy(
+      transactions,
+      (transaction) => dayjsExtended(transaction.date).format('YYYY-MM-DD'),
     )
 
     const sectionDict = mapValues(groupedByDay, (transactions, key) => ({

diff --git a/apps/mobile/app/(app)/budget/[budgetId]/index.tsx b/apps/mobile/app/(app)/budget/[budgetId]/index.tsx
@@ -8,8 +8,8 @@ import { Button } from '@/components/ui/button'
 import { Text } from '@/components/ui/text'
 import { formatDateShort } from '@/lib/date'
 import { useBudget, useBudgetPeriodStats } from '@/stores/budget/hooks'
+import { dayjsExtended } from '@6pm/utilities'
 import type { TransactionPopulated } from '@6pm/validation'
-import { format } from 'date-fns'
 import { Link, useLocalSearchParams, useNavigation } from 'expo-router'
 import { groupBy, map, mapValues, orderBy, sortBy, sumBy } from 'lodash-es'
 import { SettingsIcon } from 'lucide-react-native'
@@ -63,7 +63,7 @@ export default function BudgetDetailScreen() {
 
   const transactionsGroupByDate = useMemo(() => {
     const groupedByDay = groupBy(transactions, (transaction) =>
-      format(new Date(transaction.date), 'yyyy-MM-dd'),
+      dayjsExtended(transaction.date).format('YYYY-MM-DD'),
     )
 
     const sectionDict = mapValues(groupedByDay, (transactions, key) => ({

diff --git a/apps/mobile/components/common/date-range-picker.tsx b/apps/mobile/components/common/date-range-picker.tsx
@@ -1,11 +1,10 @@
 import { formatDateShort } from '@/lib/date'
 import { cn, sleep } from '@/lib/utils'
+import { dayjsExtended } from '@6pm/utilities'
 import { type BottomSheetModal, BottomSheetView } from '@gorhom/bottom-sheet'
 import { t } from '@lingui/macro'
 import { useLingui } from '@lingui/react'
 import DateTimePicker from '@react-native-community/datetimepicker'
-import { addDays } from 'date-fns/addDays'
-import { subDays } from 'date-fns/subDays'
 import * as Haptics from 'expo-haptics'
 import { ArrowRightIcon } from 'lucide-react-native'
 import { useRef, useState } from 'react'
@@ -125,13 +124,17 @@ export function DateRangePicker({
               await sleep(500)
               onChange?.([date, toDate])
               if (!toDate) {
-                onChange?.([date, addDays(date, 1)])
+                onChange?.([date, dayjsExtended(date).add(1, 'day').toDate()])
                 sheetToRef.current?.present()
               } else {
                 onChange?.([date, toDate])
               }
             }}
-            maximumDate={toDate ? subDays(toDate, 1) : maximumDate}
+            maximumDate={
+              toDate
+                ? dayjsExtended(toDate).subtract(1, 'day').toDate()
+                : maximumDate
+            }
             minimumDate={minimumDate}
           />
         </BottomSheetView>
@@ -151,7 +154,11 @@ export function DateRangePicker({
               onChange?.([fromDate, date])
             }}
             maximumDate={maximumDate}
-            minimumDate={fromDate ? addDays(fromDate, 1) : minimumDate}
+            minimumDate={
+              fromDate
+                ? dayjsExtended(fromDate).add(1, 'day').toDate()
+                : minimumDate
+            }
           />
         </BottomSheetView>
       </BottomSheet>

diff --git a/apps/mobile/components/home/wallet-statistics.tsx b/apps/mobile/components/home/wallet-statistics.tsx
@@ -46,8 +46,8 @@ export function WalletStatistics({
   const timeRange = useMemo(() => {
     if (view === HomeView.SpentThisWeek || view === HomeView.RevenueThisWeek) {
       return {
-        from: dayjsExtended().startOf('week').toDate(),
-        to: dayjsExtended().endOf('week').toDate(),
+        from: dayjsExtended().startOf('isoWeek').toDate(),
+        to: dayjsExtended().endOf('isoWeek').toDate(),
       }
     }
 

diff --git a/packages/utilities/src/date/dayjs.ts b/packages/utilities/src/date/dayjs.ts
@@ -1,6 +1,6 @@
 import dayjsExtended from 'dayjs'
-import quarterOfYear from 'dayjs/plugin/quarterOfYear'
+import isoWeek from 'dayjs/plugin/isoWeek'
 
-dayjsExtended.extend(quarterOfYear)
+dayjsExtended.extend(isoWeek)
 
 export { dayjsExtended }