fix(mobile): fix incorrect burndown amount and budget scroll issue

get6pm · Sep 22, 2024 · 25413cf · 25413cf
1 parent c6d4d76
commit 25413cf
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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">