Add category name to transaction list

bouzuya · Mar 31, 2023 · 0ff6bd3 · 0ff6bd3
1 parent 0b203b4
commit 0ff6bd3
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 60 deletions.
diff --git a/app/accounts/[id]/transactions/index.tsx b/app/accounts/[id]/transactions/index.tsx
@@ -1,11 +1,17 @@
 import { usePathname, useRouter, useSearchParams } from "expo-router";
 import { useState } from "react";
-import { FlatList, StyleSheet, View } from "react-native";
-import { FAB, List, Text } from "react-native-paper";
+import { StyleSheet } from "react-native";
+import { FAB, Text } from "react-native-paper";
 import { useAccount } from "../../../../components/AccountContext";
 import { DeleteTransactionDialog } from "../../../../components/DeleteTransactionDialog";
 import { Screen } from "../../../../components/Screen";
-import { deleteTransaction, getLastEventId } from "../../../../lib/account";
+import { TransactionList } from "../../../../components/TransactionList";
+import {
+  deleteTransaction,
+  getLastEventId,
+  listCategory,
+  Transaction,
+} from "../../../../lib/account";
 import { storeEvent } from "../../../../lib/api";
 
 export default function Transactions(): JSX.Element {
@@ -30,64 +36,29 @@ export default function Transactions(): JSX.Element {
           <Text>Register a new transaction</Text>
         )
       ) : (
-        <FlatList
-          data={account?.transactions ?? []}
-          renderItem={({ item: transaction }) => {
-            const ensureDescription = (s: string): string =>
-              s.length === 0 ? " " : s;
-            return (
-              <List.Item
-                description={ensureDescription(transaction.comment)}
-                key={transaction.id}
-                left={() => (
-                  <View
-                    style={{
-                      flexDirection: "row",
-                      flexWrap: "nowrap",
-                      margin: 0,
-                      paddingStart: 16,
-                      position: "absolute",
-                      width: "100%",
-                    }}
-                  >
-                    <Text style={{ flex: 1 }}>{transaction.date}</Text>
-                    <Text
-                      style={{
-                        flex: 1,
-                        textAlign: "right",
-                        paddingHorizontal: 8,
-                      }}
-                    >
-                      {transaction.amount}
-                    </Text>
-                  </View>
-                )}
-                onLongPress={() => {
-                  setDate(transaction.date);
-                  setAmount(transaction.amount);
-                  setComment(transaction.comment);
-                  setTransactionId(transaction.id);
-                  setDeleteModalVisible(true);
-                }}
-                onPress={() => {
-                  router.push({
-                    pathname:
-                      "/accounts/[id]/transactions/[transactionId]/edit",
-                    params: {
-                      id: accountId,
-                      categoryId: transaction.categoryId,
-                      transactionId: transaction.id,
-                      date: transaction.date,
-                      amount: transaction.amount,
-                      comment: encodeURIComponent(transaction.comment),
-                    },
-                  });
-                }}
-                title=""
-              />
-            );
+        <TransactionList
+          categories={account === null ? [] : listCategory(account, true)}
+          transactions={account?.transactions ?? []}
+          onLongPressTransaction={(transaction: Transaction) => {
+            setDate(transaction.date);
+            setAmount(transaction.amount);
+            setComment(transaction.comment);
+            setTransactionId(transaction.id);
+            setDeleteModalVisible(true);
+          }}
+          onPressTransaction={(transaction: Transaction) => {
+            router.push({
+              pathname: "/accounts/[id]/transactions/[transactionId]/edit",
+              params: {
+                id: accountId,
+                categoryId: transaction.categoryId,
+                transactionId: transaction.id,
+                date: transaction.date,
+                amount: transaction.amount,
+                comment: encodeURIComponent(transaction.comment),
+              },
+            });
           }}
-          style={{ flex: 1, width: "100%" }}
         />
       )}
       {(account?.categories ?? []).length === 0 ? null : (

diff --git a/components/TransactionList.tsx b/components/TransactionList.tsx
@@ -0,0 +1,81 @@
+import { FlatList, FlatListProps, View } from "react-native";
+import { List, Text } from "react-native-paper";
+import { Category, Transaction } from "../lib/account";
+
+type Props = Omit<
+  FlatListProps<Transaction>,
+  "data" | "keyExtractor" | "renderItem" | "style"
+> & {
+  categories: Category[];
+  onLongPressTransaction: (item: Transaction) => void;
+  onPressTransaction: (item: Transaction) => void;
+  transactions: Transaction[];
+};
+
+export function TransactionList({
+  categories,
+  onLongPressTransaction,
+  onPressTransaction,
+  transactions,
+  ...props
+}: Props): JSX.Element {
+  const categoryNames = Object.fromEntries(
+    categories.map(({ id, name, deletedAt }) => [
+      id,
+      name + (deletedAt === null ? "" : "(deleted)"),
+    ])
+  );
+  return (
+    <FlatList
+      {...props}
+      data={transactions}
+      keyExtractor={(item) => item.id}
+      renderItem={({ item: transaction }) => {
+        const ensureDescription = (s: string): string =>
+          s.length === 0 ? " " : s;
+        return (
+          <List.Item
+            description={ensureDescription(transaction.comment)}
+            key={transaction.id}
+            left={() => (
+              <View
+                style={{
+                  flexDirection: "row",
+                  flexWrap: "nowrap",
+                  margin: 0,
+                  paddingStart: 16,
+                  position: "absolute",
+                  width: "100%",
+                }}
+              >
+                <Text style={{ flex: 1 }}>{transaction.date}</Text>
+                <Text
+                  style={{
+                    flex: 1,
+                    textAlign: "right",
+                    paddingHorizontal: 8,
+                  }}
+                >
+                  {categoryNames[transaction.categoryId]}
+                </Text>
+                <Text
+                  style={{
+                    flex: 1,
+                    textAlign: "right",
+                    paddingHorizontal: 8,
+                  }}
+                >
+                  {transaction.amount}
+                </Text>
+              </View>
+            )}
+            onLongPress={() => onLongPressTransaction(transaction)}
+            onPress={() => onPressTransaction(transaction)}
+            title=""
+          />
+        );
+      }}
+      style={{ flex: 1, width: "100%" }}
+    />
+  );
+}