From 6a0aa9cd9debb116210812d0f06aeb58a68e9d7d Mon Sep 17 00:00:00 2001
From: G <idouattara@ldfgroupe.com>
Date: Mon, 1 Jul 2024 16:50:03 +0000
Subject: [PATCH] With this update i can persist the switch values for the different operators using the modal and the useTransactionHistory Hook.

---
 src/hooks/useTransactionsHistory.tsx     | 23 +++++++++++++++++++++--
 src/screens/TransactionHistoryScreen.tsx | 79 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------
 2 files changed, 89 insertions(+), 13 deletions(-)

diff --git a/src/hooks/useTransactionsHistory.tsx b/src/hooks/useTransactionsHistory.tsx
index 6fec05f..3c537fe 100644
--- a/src/hooks/useTransactionsHistory.tsx
+++ b/src/hooks/useTransactionsHistory.tsx
@@ -1,15 +1,32 @@
 import { type Transaction, getTransactionsHistory } from "@/utils/requests/transactions";
+import type { PaymentCode } from "@/utils/requests/types";
 import { LOG } from "@logger";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback, useMemo, useState } from "react";
 
 const log = LOG.extend("useTransactionsHistory");
 
-const useTransactionsHistory = () => {
-	const [referenceFilter, setReferenceFilter] = useState<string>("");
+// biome-ignore lint/style/useNamingConvention: <explanation>
+export type OperatorsFilter = { [key in PaymentCode]: boolean };
 
+const useTransactionsHistory = () => {
 	log.verbose("useTransactionsHistory");
 
+	const [referenceFilter, setReferenceFilter] = useState<string>("");
+	// biome-ignore lint/style/useNamingConvention: <Types values are in uppercase>
+	const [operatorsFilter, setOperatorsFilter] = useState<OperatorsFilter>({
+		// biome-ignore lint/style/useNamingConvention: <Types values are in uppercase>
+		OM: true,
+		// biome-ignore lint/style/useNamingConvention: <Types values are in uppercase>
+		MTN: true,
+		// biome-ignore lint/style/useNamingConvention: <Types values are in uppercase>
+		FLOOZ: true,
+		// biome-ignore lint/style/useNamingConvention: <Types values are in uppercase>
+		WAVE: true,
+		// biome-ignore lint/style/useNamingConvention: <Types values are in uppercase>
+		CB: true,
+	});
+
 	const { data, isLoading, error, refetch } = useQuery({
 		queryKey: ["transactionsHistory"],
 		queryFn: getTransactionsHistory,
@@ -36,6 +53,8 @@ const useTransactionsHistory = () => {
 		error,
 		refetch,
 		setReferenceFilter,
+		operatorsFilter,
+		setOperatorsFilter,
 	};
 };
 
diff --git a/src/screens/TransactionHistoryScreen.tsx b/src/screens/TransactionHistoryScreen.tsx
index 8056409..d0a6ef1 100644
--- a/src/screens/TransactionHistoryScreen.tsx
+++ b/src/screens/TransactionHistoryScreen.tsx
@@ -1,12 +1,13 @@
+import Button from "@components/Button";
 import Input from "@components/Input";
 import TransactionInformationsItem from "@components/TransactionInformationsItem";
 import BackgroundWithBeasyIconAndWhiteContentArea from "@components/backgrounds/BackgroundWithBeasyIconAndWhiteContentArea";
 import Box from "@components/bases/Box";
 import Text from "@components/bases/Text";
-import useTransactionsHistory from "@hooks/useTransactionsHistory";
+import useTransactionsHistory, { type OperatorsFilter } from "@hooks/useTransactionsHistory";
 import { LOG } from "@logger";
 import theme from "@themes/Theme";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { RefreshControl, ScrollView, Switch } from "react-native";
 import Icon from "react-native-vector-icons/Ionicons";
 
@@ -23,12 +24,20 @@ const TransactionHistoryScreen = () => {
 		error,
 		refetch,
 		setReferenceFilter,
+		operatorsFilter,
+		setOperatorsFilter,
 	} = useTransactionsHistory();
 
 	return (
 		<BackgroundWithBeasyIconAndWhiteContentArea>
 			<>
-				{showFiltersModal && <FiltersModal setShowFiltersModal={setShowFiltersModal} />}
+				{showFiltersModal && (
+					<FiltersModal
+						setShowFiltersModal={setShowFiltersModal}
+						setOperatorsFilter={setOperatorsFilter}
+						operatorsFilter={operatorsFilter}
+					/>
+				)}
 				{/* <FiltersModal setShowFiltersModal={setShowFiltersModal} /> */}
 				<Box px={"m"} mt={"m"} flexDirection={"row"} gap={"s"} alignItems={"center"}>
 					<Box flex={1}>
@@ -82,8 +91,42 @@ export default TransactionHistoryScreen;
 
 interface FiltersModalProps {
 	setShowFiltersModal: React.Dispatch<React.SetStateAction<boolean>>;
+	// biome-ignore lint/style/useNamingConvention: <explanation>
+	operatorsFilter: OperatorsFilter;
+	// biome-ignore lint/style/useNamingConvention: <explanation>
+	setOperatorsFilter: React.Dispatch<React.SetStateAction<OperatorsFilter>>;
 }
-const FiltersModal: React.FC<FiltersModalProps> = ({ setShowFiltersModal }) => {
+const FiltersModal: React.FC<FiltersModalProps> = ({
+	setShowFiltersModal,
+	operatorsFilter,
+	setOperatorsFilter,
+}) => {
+	const [filterOm, setFilterOm] = useState(operatorsFilter.OM);
+	const [filterMtn, setFilterMtn] = useState(operatorsFilter.MTN);
+	const [filterFlooz, setFilterFlooz] = useState(operatorsFilter.FLOOZ);
+	const [filterWave, setFilterWave] = useState(operatorsFilter.WAVE);
+	const [filterCb, setFilterCb] = useState(operatorsFilter.CB);
+
+	const saveOperatorsFilters = useCallback(() => {
+		setOperatorsFilter({
+			// biome-ignore lint/style/useNamingConvention: <PaymentCode Type requirement>
+			OM: filterOm,
+			// biome-ignore lint/style/useNamingConvention: <PaymentCode Type requirement>
+			MTN: filterMtn,
+			// biome-ignore lint/style/useNamingConvention: <PaymentCode Type requirement>
+			FLOOZ: filterFlooz,
+			// biome-ignore lint/style/useNamingConvention: <PaymentCode Type requirement>
+			WAVE: filterWave,
+			// biome-ignore lint/style/useNamingConvention: <PaymentCode Type requirement>
+			CB: filterCb,
+		});
+	}, [filterOm, filterMtn, filterFlooz, filterWave, filterCb, setOperatorsFilter]);
+
+	const saveFilters = useCallback(() => {
+		saveOperatorsFilters();
+		setShowFiltersModal(false);
+	}, [saveOperatorsFilters, setShowFiltersModal]);
+
 	return (
 		<>
 			{/* Overlay */}
@@ -106,6 +149,7 @@ const FiltersModal: React.FC<FiltersModalProps> = ({ setShowFiltersModal }) => {
 					height={"100%"}
 					borderRadius={10}
 					p={"m"}
+					flexDirection={"column"}
 				>
 					<Box
 						justifyContent={"space-between"}
@@ -145,7 +189,8 @@ const FiltersModal: React.FC<FiltersModalProps> = ({ setShowFiltersModal }) => {
 							<Text fontWeight={"bold"}>Orange Money</Text>
 							<Switch
 								trackColor={{ false: "#767577", true: theme.colors.secondary }}
-								value={true}
+								value={filterOm}
+								onValueChange={setFilterOm}
 							/>
 						</Box>
 						<Box
@@ -159,7 +204,8 @@ const FiltersModal: React.FC<FiltersModalProps> = ({ setShowFiltersModal }) => {
 							<Text fontWeight={"bold"}>MTN Money</Text>
 							<Switch
 								trackColor={{ false: "#767577", true: theme.colors.secondary }}
-								value={true}
+								value={filterMtn}
+								onValueChange={setFilterMtn}
 							/>
 						</Box>
 						<Box
@@ -170,10 +216,11 @@ const FiltersModal: React.FC<FiltersModalProps> = ({ setShowFiltersModal }) => {
 							borderBottomWidth={1}
 							py={"s"}
 						>
-							<Text fontWeight={"bold"}>Moov Money</Text>
+							<Text fontWeight={"bold"}>Flooz Money</Text>
 							<Switch
 								trackColor={{ false: "#767577", true: theme.colors.secondary }}
-								value={true}
+								value={filterFlooz}
+								onValueChange={setFilterFlooz}
 							/>
 						</Box>
 						<Box
@@ -187,7 +234,8 @@ const FiltersModal: React.FC<FiltersModalProps> = ({ setShowFiltersModal }) => {
 							<Text fontWeight={"bold"}>Wave</Text>
 							<Switch
 								trackColor={{ false: "#767577", true: theme.colors.secondary }}
-								value={true}
+								value={filterWave}
+								onValueChange={setFilterWave}
 							/>
 						</Box>
 						<Box
@@ -197,13 +245,22 @@ const FiltersModal: React.FC<FiltersModalProps> = ({ setShowFiltersModal }) => {
 							borderBottomColor={"white"}
 							py={"s"}
 						>
-							<Text fontWeight={"bold"}>Visa</Text>
+							<Text fontWeight={"bold"}>Carte Bancaire</Text>
 							<Switch
 								trackColor={{ false: "#767577", true: theme.colors.secondary }}
-								value={true}
+								value={filterCb}
+								onValueChange={setFilterCb}
 							/>
 						</Box>
 					</Box>
+					<Box style={{ marginTop: "auto" }}>
+						<Button
+							variant={"full"}
+							label={"Valider"}
+							textVariants={"white"}
+							onPress={saveFilters}
+						/>
+					</Box>
 				</Box>
 			</Box>
 		</>
--
libgit2 0.27.1