Skip to content

B
beasy-mobile
Commit 6d417f81 by G
Options

update the modal filter to take advantage of the card custom made. And instead…

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
parent 7dd5f05c
Showing with 135 additions and 125 deletions
src/screens/TransactionHistoryScreen.tsx
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>
);
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment