From 6d417f81bf76ba67335457f5f4525232c99598f7 Mon Sep 17 00:00:00 2001
From: G <idouattara@ldfgroupe.com>
Date: Wed, 11 Sep 2024 15:34:16 +0000
Subject: [PATCH] update the modal filter to take advantage of the card custom made. And instead of conditional rendering it on the same screen. the task is offload to the modal context manager to render

---
 src/screens/TransactionHistoryScreen.tsx | 260 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------------------------------------------------------------------------------------------------------------
 1 file changed, 135 insertions(+), 125 deletions(-)

diff --git a/src/screens/TransactionHistoryScreen.tsx b/src/screens/TransactionHistoryScreen.tsx
index d0a6ef1..63a21a5 100644
--- a/src/screens/TransactionHistoryScreen.tsx
+++ b/src/screens/TransactionHistoryScreen.tsx
@@ -1,11 +1,14 @@
+import { useModalsManagerContext } from "@/contexts/ModalsManagerContext";
+import BarWithBeasyAndNotificationsIcon from "@components/BarWithBeasyAndNotificationsIcon";
 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 WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight from "@components/wrappers/WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight";
 import useTransactionsHistory, { type OperatorsFilter } from "@hooks/useTransactionsHistory";
 import { LOG } from "@logger";
+import Card from "@re-card";
 import theme from "@themes/Theme";
 import { useCallback, useState } from "react";
 import { RefreshControl, ScrollView, Switch } from "react-native";
@@ -28,9 +31,13 @@ const TransactionHistoryScreen = () => {
 		setOperatorsFilter,
 	} = useTransactionsHistory();
 
+	const { showModal } = useModalsManagerContext();
+
 	return (
-		<BackgroundWithBeasyIconAndWhiteContentArea>
-			<>
+		<WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
+			<BarWithBeasyAndNotificationsIcon />
+
+			<Card variant={"curvedTopContainer"} padding={"s"} height={"100%"} mt={"m"}>
 				{showFiltersModal && (
 					<FiltersModal
 						setShowFiltersModal={setShowFiltersModal}
@@ -39,7 +46,7 @@ const TransactionHistoryScreen = () => {
 					/>
 				)}
 				{/* <FiltersModal setShowFiltersModal={setShowFiltersModal} /> */}
-				<Box px={"m"} mt={"m"} flexDirection={"row"} gap={"s"} alignItems={"center"}>
+				<Box px={"m"} flexDirection={"row"} gap={"s"} alignItems={"center"}>
 					<Box flex={1}>
 						<Input placeholder="Reference" onChangeText={setReferenceFilter} />
 					</Box>
@@ -56,15 +63,25 @@ const TransactionHistoryScreen = () => {
 							name="filter"
 							size={30}
 							color="black"
-							onPress={() => setShowFiltersModal(true)}
+							// onPress={() => setShowFiltersModal(true)}
+							onPress={() =>
+								showModal(
+									<FiltersModal
+										setShowFiltersModal={setShowFiltersModal}
+										setOperatorsFilter={setOperatorsFilter}
+										operatorsFilter={operatorsFilter}
+									/>,
+								)
+							}
 						/>
 					</Box>
 				</Box>
 				<ScrollView
+					// style={{ backgroundColor: "red" }}
 					refreshControl={<RefreshControl refreshing={isLoading} onRefresh={refetch} />}
 					contentContainerStyle={{
 						gap: 10,
-						padding: 10,
+						padding: 5,
 						// marginTop: 10,
 						paddingBottom: 30,
 						flexDirection: "column",
@@ -82,8 +99,8 @@ const TransactionHistoryScreen = () => {
 						/>
 					))}
 				</ScrollView>
-			</>
-		</BackgroundWithBeasyIconAndWhiteContentArea>
+			</Card>
+		</WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
 	);
 };
 
@@ -122,147 +139,140 @@ const FiltersModal: React.FC<FiltersModalProps> = ({
 		});
 	}, [filterOm, filterMtn, filterFlooz, filterWave, filterCb, setOperatorsFilter]);
 
+	const { closeModal } = useModalsManagerContext();
+
 	const saveFilters = useCallback(() => {
 		saveOperatorsFilters();
 		setShowFiltersModal(false);
-	}, [saveOperatorsFilters, setShowFiltersModal]);
+		closeModal();
+	}, [saveOperatorsFilters, setShowFiltersModal, closeModal]);
 
 	return (
-		<>
-			{/* Overlay */}
+		<Card variant={"absoluteForegroundScreenSizedTransparentCard"}>
 			<Box
-				width={"100%"}
-				height={"100%"}
-				backgroundColor={"black"}
-				opacity={0.5}
-				position={"absolute"}
-				zIndex={10}
-				// p={"m"}
-			/>
-
-			{/* Content */}
+				backgroundColor={"white"}
+				width={"90%"}
+				// height={"70%"}
+				maxHeight={"80%"}
+				borderRadius={10}
+				p={"m"}
+				flexDirection={"column"}
+				style={{ margin: "auto" }}
+			>
+				<Box
+					justifyContent={"space-between"}
+					alignItems={"center"}
+					flexDirection={"row"}
+					width={"100%"}
+				>
+					<Text fontSize={20} variant={"black"} fontWeight={"bold"}>
+						Paramétrage filtre
+					</Text>
+					<Icon
+						name="close-outline"
+						size={30}
+						color="black"
+						onPress={() => {
+							closeModal();
+							setShowFiltersModal(false);
+						}}
+					/>
+				</Box>
 
-			<Box width={"100%"} height={"100%"} position={"absolute"} zIndex={11} p={"m"}>
+				<Text fontSize={20} fontWeight={"bold"} my={"s"}>
+					Opérateurs
+				</Text>
 				<Box
-					backgroundColor={"white"}
 					width={"100%"}
-					height={"100%"}
+					backgroundColor={"lightGray"}
 					borderRadius={10}
-					p={"m"}
-					flexDirection={"column"}
+					p={"s"}
+					gap={"s"}
 				>
 					<Box
+						flexDirection={"row"}
+						alignItems={"center"}
 						justifyContent={"space-between"}
+						borderBottomColor={"white"}
+						borderBottomWidth={1}
+						py={"s"}
+					>
+						<Text fontWeight={"bold"}>Orange Money</Text>
+						<Switch
+							trackColor={{ false: "#767577", true: theme.colors.secondary }}
+							value={filterOm}
+							onValueChange={setFilterOm}
+						/>
+					</Box>
+					<Box
+						flexDirection={"row"}
 						alignItems={"center"}
+						justifyContent={"space-between"}
+						borderBottomColor={"white"}
+						borderBottomWidth={1}
+						py={"s"}
+					>
+						<Text fontWeight={"bold"}>MTN Money</Text>
+						<Switch
+							trackColor={{ false: "#767577", true: theme.colors.secondary }}
+							value={filterMtn}
+							onValueChange={setFilterMtn}
+						/>
+					</Box>
+					<Box
 						flexDirection={"row"}
-						width={"100%"}
+						alignItems={"center"}
+						justifyContent={"space-between"}
+						borderBottomColor={"white"}
+						borderBottomWidth={1}
+						py={"s"}
 					>
-						<Text fontSize={20} variant={"black"} fontWeight={"bold"}>
-							Paramétrage filtre
-						</Text>
-						<Icon
-							name="close-outline"
-							size={30}
-							color="black"
-							onPress={() => setShowFiltersModal(false)}
+						<Text fontWeight={"bold"}>Flooz Money</Text>
+						<Switch
+							trackColor={{ false: "#767577", true: theme.colors.secondary }}
+							value={filterFlooz}
+							onValueChange={setFilterFlooz}
 						/>
 					</Box>
-
-					<Text fontSize={20} fontWeight={"bold"} my={"s"}>
-						Opérateurs
-					</Text>
 					<Box
-						width={"100%"}
-						backgroundColor={"lightGray"}
-						borderRadius={10}
-						p={"s"}
-						gap={"s"}
+						flexDirection={"row"}
+						alignItems={"center"}
+						justifyContent={"space-between"}
+						borderBottomColor={"white"}
+						borderBottomWidth={1}
+						py={"s"}
 					>
-						<Box
-							flexDirection={"row"}
-							alignItems={"center"}
-							justifyContent={"space-between"}
-							borderBottomColor={"white"}
-							borderBottomWidth={1}
-							py={"s"}
-						>
-							<Text fontWeight={"bold"}>Orange Money</Text>
-							<Switch
-								trackColor={{ false: "#767577", true: theme.colors.secondary }}
-								value={filterOm}
-								onValueChange={setFilterOm}
-							/>
-						</Box>
-						<Box
-							flexDirection={"row"}
-							alignItems={"center"}
-							justifyContent={"space-between"}
-							borderBottomColor={"white"}
-							borderBottomWidth={1}
-							py={"s"}
-						>
-							<Text fontWeight={"bold"}>MTN Money</Text>
-							<Switch
-								trackColor={{ false: "#767577", true: theme.colors.secondary }}
-								value={filterMtn}
-								onValueChange={setFilterMtn}
-							/>
-						</Box>
-						<Box
-							flexDirection={"row"}
-							alignItems={"center"}
-							justifyContent={"space-between"}
-							borderBottomColor={"white"}
-							borderBottomWidth={1}
-							py={"s"}
-						>
-							<Text fontWeight={"bold"}>Flooz Money</Text>
-							<Switch
-								trackColor={{ false: "#767577", true: theme.colors.secondary }}
-								value={filterFlooz}
-								onValueChange={setFilterFlooz}
-							/>
-						</Box>
-						<Box
-							flexDirection={"row"}
-							alignItems={"center"}
-							justifyContent={"space-between"}
-							borderBottomColor={"white"}
-							borderBottomWidth={1}
-							py={"s"}
-						>
-							<Text fontWeight={"bold"}>Wave</Text>
-							<Switch
-								trackColor={{ false: "#767577", true: theme.colors.secondary }}
-								value={filterWave}
-								onValueChange={setFilterWave}
-							/>
-						</Box>
-						<Box
-							flexDirection={"row"}
-							alignItems={"center"}
-							justifyContent={"space-between"}
-							borderBottomColor={"white"}
-							py={"s"}
-						>
-							<Text fontWeight={"bold"}>Carte Bancaire</Text>
-							<Switch
-								trackColor={{ false: "#767577", true: theme.colors.secondary }}
-								value={filterCb}
-								onValueChange={setFilterCb}
-							/>
-						</Box>
+						<Text fontWeight={"bold"}>Wave</Text>
+						<Switch
+							trackColor={{ false: "#767577", true: theme.colors.secondary }}
+							value={filterWave}
+							onValueChange={setFilterWave}
+						/>
 					</Box>
-					<Box style={{ marginTop: "auto" }}>
-						<Button
-							variant={"full"}
-							label={"Valider"}
-							textVariants={"white"}
-							onPress={saveFilters}
+					<Box
+						flexDirection={"row"}
+						alignItems={"center"}
+						justifyContent={"space-between"}
+						borderBottomColor={"white"}
+						py={"s"}
+					>
+						<Text fontWeight={"bold"}>Carte Bancaire</Text>
+						<Switch
+							trackColor={{ false: "#767577", true: theme.colors.secondary }}
+							value={filterCb}
+							onValueChange={setFilterCb}
 						/>
 					</Box>
 				</Box>
+				<Box style={{ marginTop: 20 }}>
+					<Button
+						variant={"full"}
+						label={"Valider"}
+						textVariants={"white"}
+						onPress={saveFilters}
+					/>
+				</Box>
 			</Box>
-		</>
+		</Card>
 	);
 };
--
libgit2 0.27.1