feat: implement pagination in transaction list

gatherloop · Sep 19, 2024 · a474868 · a474868
1 parent 3f5cdb7
commit a474868
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 47 deletions.
diff --git a/apps/api/modules/transactions/handler.go b/apps/api/modules/transactions/handler.go
@@ -34,13 +34,13 @@ func (handler Handler) GetTransactionList(w http.ResponseWriter, r *http.Request
 		return
 	}
 
-	transactions, err := handler.usecase.GetTransactionList(ctx, query, sortBy, order, skip, limit)
+	transactions, total, err := handler.usecase.GetTransactionList(ctx, query, sortBy, order, skip, limit)
 	if err != nil {
 		base.WriteError(w, apiContract.Error{Code: apiContract.SERVER_ERROR, Message: err.Error()})
 		return
 	}
 
-	json.NewEncoder(w).Encode(apiContract.TransactionList200Response{Data: transactions})
+	json.NewEncoder(w).Encode(apiContract.TransactionList200Response{Data: transactions, Meta: apiContract.MetaPage{total}})
 }
 
 func (handler Handler) GetTransactionById(w http.ResponseWriter, r *http.Request) {

diff --git a/apps/api/modules/transactions/repository.go b/apps/api/modules/transactions/repository.go
@@ -49,6 +49,20 @@ func (repo Repository) GetTransactionList(ctx context.Context, query string, sor
 	return transactions, result.Error
 }
 
+func (repo Repository) GetTransactionListTotal(ctx context.Context, query string) (int64, error) {
+	db := utils.GetDbFromCtx(ctx, repo.db)
+	var count int64
+	result := db.Table("transactions").Where("deleted_at", nil)
+
+	if query != "" {
+		result = result.Where("name LIKE ?", "%"+query+"%")
+	}
+
+	result = result.Count(&count)
+
+	return count, result.Error
+}
+
 func (repo Repository) GetTransactionById(ctx context.Context, id int64) (apiContract.Transaction, error) {
 	db := utils.GetDbFromCtx(ctx, repo.db)
 

diff --git a/apps/api/modules/transactions/usecase.go b/apps/api/modules/transactions/usecase.go
@@ -26,8 +26,18 @@ func NewUsecase(repository Repository, productRepository products.Repository, wa
 	}
 }
 
-func (usecase Usecase) GetTransactionList(ctx context.Context, query string, sortBy string, order string, skip int, limit int) ([]apiContract.Transaction, error) {
-	return usecase.repository.GetTransactionList(ctx, query, sortBy, order, skip, limit)
+func (usecase Usecase) GetTransactionList(ctx context.Context, query string, sortBy string, order string, skip int, limit int) ([]apiContract.Transaction, int64, error) {
+	transactions, err := usecase.repository.GetTransactionList(ctx, query, sortBy, order, skip, limit)
+	if err != nil {
+		return []apiContract.Transaction{}, 0, err
+	}
+
+	total, err := usecase.repository.GetTransactionListTotal(ctx, query)
+	if err != nil {
+		return []apiContract.Transaction{}, 0, err
+	}
+
+	return transactions, total, nil
 }
 
 func (usecase Usecase) GetTransactionById(ctx context.Context, id int64) (apiContract.Transaction, error) {

diff --git a/libs/api-contract/src/api.yaml b/libs/api-contract/src/api.yaml
@@ -773,11 +773,14 @@ paths:
                 type: object
                 required:
                   - data
+                  - meta
                 properties:
                   data:
                     type: array
                     items:
                       $ref: '#/components/schemas/Transaction'
+                  meta:
+                    $ref: '#/components/schemas/MetaPage'
         '500':
           description: server error
           content:

diff --git a/libs/ui/src/base/components/Pagination/Pagination.tsx b/libs/ui/src/base/components/Pagination/Pagination.tsx
@@ -27,6 +27,7 @@ export const Pagination = ({
       />
       {Array.from(Array(totalPage)).map((_, index) => (
         <Button
+          key={index}
           size="$2"
           onPress={() => onChangePage(index + 1)}
           disabled={currentPage === index + 1}

diff --git a/libs/ui/src/transactions/components/TransactionForm/TransactionForm.tsx b/libs/ui/src/transactions/components/TransactionForm/TransactionForm.tsx
@@ -63,7 +63,7 @@ export const TransactionForm = ({
                           Product will automatically added to transaction
                         </Paragraph>
                       </YStack>
-                      <ProductList onItemPress={onAddItem} isSearchAutoFocus />
+                      <ProductList onItemPress={onAddItem} />
                     </YStack>
                   </Sheet>
 

diff --git a/libs/ui/src/transactions/components/TransactionList/TransactionList.state.ts b/libs/ui/src/transactions/components/TransactionList/TransactionList.state.ts
@@ -1,18 +1,32 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 // eslint-disable-next-line @nx/enforce-module-boundaries
 import { useTransactionList } from '../../../../../api-contract/src';
-import { Event, Listener, useDebounce, useEventEmitter } from '../../../base';
+import { Event, Listener, useEventEmitter } from '../../../base';
 import { useRouter } from 'solito/router';
 
+const LIMIT = 10;
+
 export const useTransactionListState = () => {
   const router = useRouter();
 
+  const [searchValue, setSearhValue] = useState('');
+
   const [query, setQuery] = useState('');
 
+  const [page, setPage] = useState(1);
+
+  useEffect(() => {
+    setPage(1);
+    const timeout = setTimeout(() => setQuery(searchValue), 600);
+    return () => clearTimeout(timeout);
+  }, [searchValue]);
+
   const { data, status, error, refetch } = useTransactionList({
     sortBy: 'created_at',
     order: 'desc',
     query,
+    limit: LIMIT,
+    skip: (page - 1) * LIMIT,
   });
 
   const listeners = useMemo<Listener<Event['type']>[]>(
@@ -31,19 +45,18 @@ export const useTransactionListState = () => {
 
   const { emit } = useEventEmitter(listeners);
 
-  const debounce = useDebounce();
-
-  const handleSearchInputChange = (text: string) => {
-    debounce(() => setQuery(text), 600);
-  };
-
   return {
     transactions: data?.data ?? [],
     status,
     error,
     refetch,
-    handleSearchInputChange,
+    searchValue,
+    setSearhValue,
     emit,
     router,
+    page,
+    setPage,
+    totalItem: data?.meta.total ?? 0,
+    itemPerPage: LIMIT,
   };
 };
diff --git a/libs/ui/src/transactions/components/TransactionList/TransactionList.tsx b/libs/ui/src/transactions/components/TransactionList/TransactionList.tsx
@@ -1,4 +1,4 @@
-import { EmptyView, ErrorView, LoadingView } from '../../../base';
+import { EmptyView, ErrorView, LoadingView, Pagination } from '../../../base';
 import { Input, YStack } from 'tamagui';
 import { useTransactionListState } from './TransactionList.state';
 import { FlatList } from 'react-native';
@@ -9,52 +9,66 @@ export const TransactionList = () => {
     transactions,
     refetch,
     status,
-    handleSearchInputChange,
+    searchValue,
+    setSearhValue,
     emit,
     router,
+    page,
+    setPage,
+    totalItem,
+    itemPerPage,
   } = useTransactionListState();
   return (
     <YStack gap="$3" flex={1}>
       <YStack>
         <Input
           placeholder="Search Transaction by Customer Name"
-          onChangeText={handleSearchInputChange}
+          value={searchValue}
+          onChangeText={setSearhValue}
         />
       </YStack>
       {status === 'pending' ? (
         <LoadingView title="Fetching Transactions..." />
       ) : status === 'success' ? (
         transactions.length > 0 ? (
-          <FlatList
-            data={transactions}
-            renderItem={({ item: transaction }) => (
-              <TransactionListItem
-                name={transaction.name}
-                total={transaction.total}
-                createdAt={transaction.createdAt}
-                paidAt={transaction.paidAt}
-                walletName={transaction.wallet?.name}
-                onDeleteMenuPress={() =>
-                  emit({
-                    type: 'TransactionDeleteConfirmation',
-                    transactionId: transaction.id,
-                  })
-                }
-                onEditMenuPress={() =>
-                  router.push(`/transactions/${transaction.id}`)
-                }
-                onPayMenuPress={() =>
-                  emit({
-                    type: 'TransactionPayConfirmation',
-                    transactionId: transaction.id,
-                  })
-                }
-                onPress={() => router.push(`/transactions/${transaction.id}`)}
-              />
-            )}
-            keyExtractor={(item) => item.id.toString()}
-            ItemSeparatorComponent={() => <YStack height="$1" />}
-          />
+          <>
+            <FlatList
+              data={transactions}
+              renderItem={({ item: transaction }) => (
+                <TransactionListItem
+                  name={transaction.name}
+                  total={transaction.total}
+                  createdAt={transaction.createdAt}
+                  paidAt={transaction.paidAt}
+                  walletName={transaction.wallet?.name}
+                  onDeleteMenuPress={() =>
+                    emit({
+                      type: 'TransactionDeleteConfirmation',
+                      transactionId: transaction.id,
+                    })
+                  }
+                  onEditMenuPress={() =>
+                    router.push(`/transactions/${transaction.id}`)
+                  }
+                  onPayMenuPress={() =>
+                    emit({
+                      type: 'TransactionPayConfirmation',
+                      transactionId: transaction.id,
+                    })
+                  }
+                  onPress={() => router.push(`/transactions/${transaction.id}`)}
+                />
+              )}
+              keyExtractor={(item) => item.id.toString()}
+              ItemSeparatorComponent={() => <YStack height="$1" />}
+            />
+            <Pagination
+              currentPage={page}
+              onChangePage={setPage}
+              totalItem={totalItem}
+              itemPerPage={itemPerPage}
+            />
+          </>
         ) : (
           <EmptyView
             title="Oops, Transaction is Empty"

diff --git a/libs/ui/src/transactions/screens/TransactionListScreen/TransactionListScreen.prefetch.tsx b/libs/ui/src/transactions/screens/TransactionListScreen/TransactionListScreen.prefetch.tsx
@@ -14,12 +14,16 @@ export const getTransactionListScreenDehydratedState =
         sortBy: 'created_at',
         order: 'desc',
         query: '',
+        limit: 10,
+        skip: 0,
       }),
       queryFn: ({ queryKey }) => {
         return transactionList({
           sortBy: queryKey[1].sortBy,
           order: queryKey[1].order,
           query: queryKey[1].query,
+          limit: queryKey[1].limit,
+          skip: queryKey[1].skip,
         });
       },
     });