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