Skip to content

B
beasy-mobile
Commit 6a0aa9cd by G
Options

With this update i can persist the switch values for the different operators…

With this update i can persist the switch values for the different operators using the modal and the useTransactionHistory Hook.
parent 21ddacf1
Showing with 89 additions and 13 deletions
src/hooks/useTransactionsHistory.tsx
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,
};
};
......
src/screens/TransactionHistoryScreen.tsx
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>
</>
......
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