Skip to content

B
beasy-mobile
Commit 9585491f by G
Options

refactor: UserProfileScreen. No more dependencies on Box/Text themes's…

refactor: UserProfileScreen. No more dependencies on Box/Text themes's components. Dispatch a redux action to disconnect the user.
parent e23251de
Showing with 132 additions and 159 deletions
src/features/auth/slice.ts
......@@ -31,7 +31,9 @@ export const authSlice = createSlice({
state.token = action.payload.tokens;
},
logout: (state) => {
state = initialState;
state.isAuthenticated = false;
state.token = {} as Token;
state.user = {} as UserData;
},
},
});
......
src/screens/UserProfileScreen.tsx
import { useUserAuthenticationContext } from "@/contexts/UserAuthenticationContext";
import BarWithBeasyAndNotificationsIcon from "@components/BarWithBeasyAndNotificationsIcon";
import Button from "@components/Button";
import Box from "@components/bases/Box";
import Text from "@components/bases/Text";
import WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight from "@components/wrappers/WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight";
import { asp as g } from "@asp/asp";
import { BarnoinPayBackground } from "@components/BarnoinPayBackground";
import BeasyLogoIcon from "@components/BeasyLogoIcon";
import * as Button from "@components/ButtonNew";
import Ionicons from "@expo/vector-icons/Ionicons";
import { LOG } from "@logger";
import Card from "@re-card";
import { Text, View } from "react-native";
import { useDispatch } from "react-redux";
import { useUserAuthenticationContext } from "@/contexts/UserAuthenticationContext";
import { logout } from "@/features/auth/slice";
const log = LOG.extend("UserProfileScreen");
const UserProfileScreen = () => {
log.verbose("UserProfileScreen");
const { logout } = useUserAuthenticationContext();
const dispatch = useDispatch();
const { userInformations } = useUserAuthenticationContext();
return (
<WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
<>
<BarWithBeasyAndNotificationsIcon />
<Card
variant="curvedTopContainer"
height={"100%"}
padding={"m"}
gap={"m"}
marginTop={"m"}
>
<Box
width={"100%"}
// height={200}
backgroundColor={"lightGray"}
borderRadius={10}
p={"s"}
>
<Box
width={"100%"}
// height={"100%"}
flexDirection={"row"}
gap={"s"}
py={"m"}
borderBottomColor={"white"}
borderBottomWidth={1}
>
<Box
height={70}
aspectRatio={1}
borderRadius={50}
backgroundColor={"secondary"}
>
<Text />
</Box>
<BarnoinPayBackground style={[g.flex_col, g.justify_between]}>
<View style={[g.px_lg, g.flex_row, g.justify_between]}>
<BeasyLogoIcon />
<Ionicons name="notifications" size={24} color="black" />
</View>
<View
style={[
g.gap_md,
g.p_md,
{
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
backgroundColor: "white",
height: "90%",
},
]}
>
<View style={[g.w_full, g.rounded_md, g.p_md, { backgroundColor: "#F4F4F4" }]}>
<View style={[g.flex_row, g.gap_sm, g.py_sm]}>
<View
style={[
g.rounded_full,
{ height: 70, aspectRatio: 1, backgroundColor: "green" },
]}
/>
<Box height={"100%"} flex={1} flexDirection={"column"}>
<Text fontWeight={"bold"} variant={"black"} fontSize={20}>
{userInformations.first_name} {userInformations.last_name}
</Text>
<Text>{userInformations.email}</Text>
</Box>
</Box>
<Box
width={"100%"}
flexDirection={"row"}
justifyContent={"space-between"}
py={"m"}
>
<Text variant={"black"} fontWeight={"bold"}>
Utilisateur
<View style={[g.flex_1, g.flex_col]}>
<Text style={[g.font_bold]}>
{userInformations.first_name} {userInformations.last_name}
</Text>
<Text textAlign={"center"}>{userInformations.username}</Text>
</Box>
</Box>
<Text>{userInformations.email}</Text>
</View>
</View>
<View style={[g.w_full, g.flex_row, g.justify_between, g.py_md]}>
<Text style={[g.font_bold]}>Utilisateur</Text>
<Text style={[g.text_center]}>{userInformations.username}</Text>
</View>
</View>
<Button
label={"Deconnexion"}
onPress={logout}
variant={"danger"}
textVariants={"white"}
/>
<Button.Container
style={[g.rounded_lg, { backgroundColor: "#960101ff" }]}
onPress={() => dispatch(logout())}
>
<Button.Label>Deconnexion</Button.Label>
</Button.Container>
<Text fontWeight={"bold"}>Informations sur le marchand</Text>
<Box
width={"100%"}
backgroundColor={"lightGray"}
borderRadius={10}
p={"s"}
flexDirection={"column"}
// gap={"m"}
<Text style={[g.font_bold]}>Informations sur le marchand</Text>
<View
style={[
g.w_full,
g.rounded_md,
g.p_sm,
g.flex_col,
{ backgroundColor: "#F4F4F4" },
]}
>
<View
style={[
g.w_full,
g.flex_row,
g.justify_between,
g.py_md,
{ borderBottomColor: "white", borderBottomWidth: 1 },
]}
>
<Box
width={"100%"}
flexDirection={"row"}
borderBottomWidth={1}
borderBottomColor={"white"}
justifyContent={"space-between"}
py={"m"}
>
<Text variant={"black"} fontWeight={"bold"}>
Identifiant
</Text>
<Text textAlign={"center"}>
{userInformations.marchand.marchand_id}
</Text>
</Box>
<Box
width={"100%"}
flexDirection={"row"}
borderBottomWidth={1}
borderBottomColor={"white"}
justifyContent={"space-between"}
py={"m"}
>
<Text variant={"black"} fontWeight={"bold"}>
Entreprise
</Text>
<Text textAlign={"center"}>{userInformations.marchand.nom}</Text>
</Box>
<Box
width={"100%"}
flexDirection={"row"}
borderBottomWidth={1}
borderBottomColor={"white"}
justifyContent={"space-between"}
py={"m"}
>
<Text variant={"black"} fontWeight={"bold"}>
Code
</Text>
<Text textAlign={"center"}>{userInformations.marchand.code}</Text>
</Box>
<Box
width={"100%"}
flexDirection={"row"}
borderBottomWidth={1}
borderBottomColor={"white"}
justifyContent={"space-between"}
py={"m"}
>
<Text variant={"black"} fontWeight={"bold"}>
Addresse
</Text>
<Text textAlign={"center"}>{userInformations.marchand.adresse}</Text>
</Box>
<Box
width={"100%"}
flexDirection={"row"}
borderBottomWidth={1}
borderBottomColor={"white"}
justifyContent={"space-between"}
py={"m"}
alignItems={"center"}
>
<Text variant={"black"} fontWeight={"bold"}>
Url succès
</Text>
<Text textAlign={"center"}>{userInformations.marchand.url_succes}</Text>
</Box>
<Box
width={"100%"}
flexDirection={"row"}
justifyContent={"space-between"}
// alignItems={"center"}
py={"m"}
>
<Text variant={"black"} fontWeight={"bold"}>
Url échec
</Text>
<Text textAlign={"center"}>{userInformations.marchand.url_echec}</Text>
</Box>
</Box>
</Card>
</>
</WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight>
<Text style={[g.font_bold]}>Identifiant</Text>
<Text style={[g.text_center]}>{userInformations.marchand.marchand_id}</Text>
</View>
<View
style={[
g.w_full,
g.flex_row,
g.justify_between,
g.py_md,
{ borderBottomColor: "white", borderBottomWidth: 1 },
]}
>
<Text style={[g.font_bold]}>Entreprise</Text>
<Text style={[g.text_center]}>{userInformations.marchand.nom}</Text>
</View>
<View
style={[
g.w_full,
g.flex_row,
g.justify_between,
g.py_md,
{ borderBottomColor: "white", borderBottomWidth: 1 },
]}
>
<Text style={[g.font_bold]}>Code</Text>
<Text style={[g.text_center]}>{userInformations.marchand.code}</Text>
</View>
<View
style={[
g.w_full,
g.flex_row,
g.justify_between,
g.py_md,
{ borderBottomColor: "white", borderBottomWidth: 1 },
]}
>
<Text style={[g.font_bold]}>Addresse</Text>
<Text style={[g.text_center]}>{userInformations.marchand.adresse}</Text>
</View>
<View
style={[
g.w_full,
g.flex_row,
g.justify_between,
g.py_md,
{ borderBottomColor: "white", borderBottomWidth: 1 },
]}
>
<Text style={[g.font_bold]}>Url succès</Text>
<Text style={[g.text_center]}>{userInformations.marchand.url_succes}</Text>
</View>
<View style={[g.w_full, g.flex_row, g.py_md, g.justify_between]}>
<Text style={[g.font_bold]}>Url échec</Text>
<Text style={[g.text_center]}>{userInformations.marchand.url_echec}</Text>
</View>
</View>
</View>
</BarnoinPayBackground>
);
};
......
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