handle filtering of transactions by references

src/hooks/useTransactionsHistory.tsx

 import { type Transaction, getTransactionsHistory } from "@/utils/requests/transactions";
 import { LOG } from "@logger";
 import { useQuery } from "@tanstack/react-query";
-import { useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 
 const log = LOG.extend("useTransactionsHistory");
 
 const useTransactionsHistory = () => {
+	const [referenceFilter, setReferenceFilter] = useState<string>("");
+
 	log.verbose("useTransactionsHistory");
 
 	const { data, isLoading, error, refetch } = useQuery({
@@ -13,13 +15,24 @@ const useTransactionsHistory = () => {
 		queryFn: getTransactionsHistory,
 	});
 
-	const transactionsHistory: Transaction[] = useMemo(() => data || [], [data]);
+	const filterByReference = useCallback(
+		(reference: string) => {
+			if (!data?.length) return [];
+			return data.filter((transaction) => transaction.reference.includes(reference));
+		},
+		[data],
+	);
+	const transactionsHistory: Transaction[] = useMemo(() => {
+		if (!data) return [];
+		return filterByReference(referenceFilter);
+	}, [data, filterByReference, referenceFilter]);
 
 	return {
 		transactionsHistory,
 		isLoading,
 		error,
 		refetch,
+		setReferenceFilter,
 	};
 };
 

src/screens/TransactionHistoryScreen.tsx

@@ -11,20 +11,19 @@ const log = LOG.extend("TransactionHistoryScreen");
 const TransactionHistoryScreen = () => {
 	log.verbose("TransactionHistoryScreen");
 
-	const { transactionsHistory: data, isLoading, error, refetch } = useTransactionsHistory();
-
-	// const { data, isLoading, error, refetch } = useQuery({
-	// 	queryKey: ["transactionsHistory"],
-	// 	queryFn: getTransactionsHistory,
-	// });
-
-	console.info("Data", data);
+	const {
+		transactionsHistory: data,
+		isLoading,
+		error,
+		refetch,
+		setReferenceFilter,
+	} = useTransactionsHistory();
 
 	return (
 		<BackgroundWithBeasyIconAndWhiteContentArea>
 			<>
 				<Box px={"m"} mt={"m"}>
-					<Input label={"Reference"} />
+					<Input label={"Reference"} onChangeText={setReferenceFilter} />
 				</Box>
 				<ScrollView
 					refreshControl={<RefreshControl refreshing={isLoading} onRefresh={refetch} />}