From 25413cfa768e3527ab9751764a0c9d07c0e030e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Qu=E1=BB=91c=20Kh=C3=A1nh?= <bkdev98@gmail.com>
Date: Sun, 22 Sep 2024 13:05:52 +0700
Subject: [PATCH] fix(mobile): fix incorrect burndown amount and budget scroll
 issue

---
 apps/mobile/app/(app)/(tabs)/budgets.tsx      | 22 +++++++++++++---
 .../app/(app)/budget/[budgetId]/index.tsx     | 26 ++++++++++++++++---
 apps/mobile/components/budget/budget-item.tsx |  8 +++---
 .../common/burndown-chart/burndown-chart.tsx  |  4 +--
 4 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/apps/mobile/app/(app)/(tabs)/budgets.tsx b/apps/mobile/app/(app)/(tabs)/budgets.tsx
index 2c954c4f..839bb974 100644
--- a/apps/mobile/app/(app)/(tabs)/budgets.tsx
+++ b/apps/mobile/app/(app)/(tabs)/budgets.tsx
@@ -56,6 +56,21 @@ export default function BudgetsScreen() {
     }
   })
 
+  const headerStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateY: interpolate(
+            headerAnimation.value,
+            [0, chartHeight * 1.5, chartHeight * 1.7],
+            [0, 0, -chartHeight],
+            Extrapolation.EXTEND,
+          ),
+        },
+      ],
+    }
+  })
+
   const summaryStyle = useAnimatedStyle(() => {
     const extraSectionHeaderSpacing = spacing * 2
     return {
@@ -175,7 +190,7 @@ export default function BudgetsScreen() {
   const chartData = map(
     groupBy(
       transactions.filter((i) => !!i.budgetId),
-      (t) => t.date,
+      (transaction) => dayjsExtended(transaction.date).format('YYYY-MM-DD'),
     ),
     (transactions, key) => ({
       day: new Date(key).getDate(),
@@ -199,8 +214,9 @@ export default function BudgetsScreen() {
 
   return (
     <View className="flex-1 bg-background">
-      <View
+      <Animated.View
         className="absolute z-50 w-full"
+        style={headerStyle}
         onLayout={(ev) => {
           if (headerHeight.value === ev.nativeEvent.layout.height) {
             return
@@ -226,7 +242,7 @@ export default function BudgetsScreen() {
             data={chartData}
           />
         </Animated.View>
-      </View>
+      </Animated.View>
       <AnimatedSectionList
         onScroll={onScroll}
         showsVerticalScrollIndicator={false}
diff --git a/apps/mobile/app/(app)/budget/[budgetId]/index.tsx b/apps/mobile/app/(app)/budget/[budgetId]/index.tsx
index f2727542..b539e10b 100644
--- a/apps/mobile/app/(app)/budget/[budgetId]/index.tsx
+++ b/apps/mobile/app/(app)/budget/[budgetId]/index.tsx
@@ -107,6 +107,21 @@ export default function BudgetDetailScreen() {
     }
   })
 
+  const headerStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateY: interpolate(
+            headerAnimation.value,
+            [0, chartHeight * 1.5, chartHeight * 1.7],
+            [0, 0, -chartHeight],
+            Extrapolation.EXTEND,
+          ),
+        },
+      ],
+    }
+  })
+
   const summaryStyle = useAnimatedStyle(() => {
     const extraSectionHeaderSpacing = spacing * 2
     return {
@@ -190,7 +205,9 @@ export default function BudgetDetailScreen() {
   }
 
   const chartData = map(
-    groupBy(transactions, (t) => t.date),
+    groupBy(transactions, (transaction) =>
+      dayjsExtended(transaction.date).format('YYYY-MM-DD'),
+    ),
     (transactions, key) => ({
       day: new Date(key).getDate(),
       amount: transactions.reduce((acc, t) => acc - t.amountInVnd, 0),
@@ -204,8 +221,9 @@ export default function BudgetDetailScreen() {
         index={currentPeriodIndex}
         onChange={setCurrentPeriodIndex}
       />
-      <View
-        className="absolute top-12 z-50 w-full"
+      <Animated.View
+        className="absolute top-12 z-10 w-full"
+        style={headerStyle}
         onLayout={(ev) => {
           if (headerHeight.value === ev.nativeEvent.layout.height) {
             return
@@ -237,7 +255,7 @@ export default function BudgetDetailScreen() {
             }
           />
         </Animated.View>
-      </View>
+      </Animated.View>
       <AnimatedSectionList
         onScroll={onScroll}
         showsVerticalScrollIndicator={false}
diff --git a/apps/mobile/components/budget/budget-item.tsx b/apps/mobile/components/budget/budget-item.tsx
index 36d8b72f..c76d77ee 100644
--- a/apps/mobile/components/budget/budget-item.tsx
+++ b/apps/mobile/components/budget/budget-item.tsx
@@ -51,10 +51,10 @@ export const BudgetItem: FC<BudgetItemProps> = ({ budget }) => {
     >
       <Pressable className="mx-6 mt-1 mb-3 justify-between gap-4 rounded-lg border border-border p-4">
         <View className="flex-row items-center justify-between gap-6">
-          <View className="flex-1 gap-3">
+          <View className="flex-1 gap-2">
             <Text
               numberOfLines={1}
-              className="line-clamp-1 flex-1 font-semiBold text-xl"
+              className="line-clamp-1 flex-1 font-semiBold text-lg"
             >
               {budget.name}
             </Text>
@@ -90,7 +90,7 @@ export const BudgetItem: FC<BudgetItemProps> = ({ budget }) => {
             <AmountFormat
               amount={remainingAmount?.toNumber() ?? 0}
               displayNegativeSign
-              className="text-xl"
+              className="text-lg"
               currency={budget.preferredCurrency}
             />
             <Text
@@ -104,7 +104,7 @@ export const BudgetItem: FC<BudgetItemProps> = ({ budget }) => {
             <AmountFormat
               amount={remainingAmountPerDays?.toNumber() ?? 0}
               displayNegativeSign
-              className="text-xl"
+              className="text-lg"
               currency={budget.preferredCurrency}
             />
             <Text
diff --git a/apps/mobile/components/common/burndown-chart/burndown-chart.tsx b/apps/mobile/components/common/burndown-chart/burndown-chart.tsx
index 96a03d13..2c984b55 100644
--- a/apps/mobile/components/common/burndown-chart/burndown-chart.tsx
+++ b/apps/mobile/components/common/burndown-chart/burndown-chart.tsx
@@ -81,10 +81,10 @@ export function BurndownChart({
     })
 
   useEffect(() => {
-    if (isFirstPressActive) {
+    if (firstTouch.x) {
       Haptics.selectionAsync().catch(() => null)
     }
-  }, [isFirstPressActive])
+  }, [firstTouch.x])
 
   return (
     <View className="min-h-[200px] w-full rounded-lg bg-muted">