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 124 additions and 151 deletions
src/features/auth/slice.ts
...@@ -31,7 +31,9 @@ export const authSlice = createSlice({ ...@@ -31,7 +31,9 @@ export const authSlice = createSlice({
state.token = action.payload.tokens; state.token = action.payload.tokens;
}, },
logout: (state) => { 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 { asp as g } from "@asp/asp";
import BarWithBeasyAndNotificationsIcon from "@components/BarWithBeasyAndNotificationsIcon"; import { BarnoinPayBackground } from "@components/BarnoinPayBackground";
import Button from "@components/Button"; import BeasyLogoIcon from "@components/BeasyLogoIcon";
import Box from "@components/bases/Box"; import * as Button from "@components/ButtonNew";
import Text from "@components/bases/Text"; import Ionicons from "@expo/vector-icons/Ionicons";
import WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight from "@components/wrappers/WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight";
import { LOG } from "@logger"; 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 log = LOG.extend("UserProfileScreen");
const UserProfileScreen = () => { const UserProfileScreen = () => {
log.verbose("UserProfileScreen"); log.verbose("UserProfileScreen");
const { logout } = useUserAuthenticationContext(); const dispatch = useDispatch();
const { userInformations } = useUserAuthenticationContext(); const { userInformations } = useUserAuthenticationContext();
return ( return (
<WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight> <BarnoinPayBackground style={[g.flex_col, g.justify_between]}>
<> <View style={[g.px_lg, g.flex_row, g.justify_between]}>
<BarWithBeasyAndNotificationsIcon /> <BeasyLogoIcon />
<Card <Ionicons name="notifications" size={24} color="black" />
variant="curvedTopContainer" </View>
height={"100%"}
padding={"m"} <View
gap={"m"} style={[
marginTop={"m"} g.gap_md,
> g.p_md,
<Box {
width={"100%"} borderTopLeftRadius: 20,
// height={200} borderTopRightRadius: 20,
backgroundColor={"lightGray"} backgroundColor: "white",
borderRadius={10} height: "90%",
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 /> <View style={[g.w_full, g.rounded_md, g.p_md, { backgroundColor: "#F4F4F4" }]}>
</Box> <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"}> <View style={[g.flex_1, g.flex_col]}>
<Text fontWeight={"bold"} variant={"black"} fontSize={20}> <Text style={[g.font_bold]}>
{userInformations.first_name} {userInformations.last_name} {userInformations.first_name} {userInformations.last_name}
</Text> </Text>
<Text>{userInformations.email}</Text> <Text>{userInformations.email}</Text>
</Box> </View>
</Box> </View>
<Box <View style={[g.w_full, g.flex_row, g.justify_between, g.py_md]}>
width={"100%"} <Text style={[g.font_bold]}>Utilisateur</Text>
flexDirection={"row"} <Text style={[g.text_center]}>{userInformations.username}</Text>
justifyContent={"space-between"} </View>
py={"m"} </View>
>
<Text variant={"black"} fontWeight={"bold"}>
Utilisateur
</Text>
<Text textAlign={"center"}>{userInformations.username}</Text>
</Box>
</Box>
<Button <Button.Container
label={"Deconnexion"} style={[g.rounded_lg, { backgroundColor: "#960101ff" }]}
onPress={logout} onPress={() => dispatch(logout())}
variant={"danger"} >
textVariants={"white"} <Button.Label>Deconnexion</Button.Label>
/> </Button.Container>
<Text fontWeight={"bold"}>Informations sur le marchand</Text> <Text style={[g.font_bold]}>Informations sur le marchand</Text>
<Box <View
width={"100%"} style={[
backgroundColor={"lightGray"} g.w_full,
borderRadius={10} g.rounded_md,
p={"s"} g.p_sm,
flexDirection={"column"} g.flex_col,
// gap={"m"} { backgroundColor: "#F4F4F4" },
]}
> >
<Box <View
width={"100%"} style={[
flexDirection={"row"} g.w_full,
borderBottomWidth={1} g.flex_row,
borderBottomColor={"white"} g.justify_between,
justifyContent={"space-between"} g.py_md,
py={"m"} { borderBottomColor: "white", borderBottomWidth: 1 },
]}
> >
<Text variant={"black"} fontWeight={"bold"}> <Text style={[g.font_bold]}>Identifiant</Text>
Identifiant <Text style={[g.text_center]}>{userInformations.marchand.marchand_id}</Text>
</Text> </View>
<Text textAlign={"center"}> <View
{userInformations.marchand.marchand_id} style={[
</Text> g.w_full,
</Box> g.flex_row,
<Box g.justify_between,
width={"100%"} g.py_md,
flexDirection={"row"} { borderBottomColor: "white", borderBottomWidth: 1 },
borderBottomWidth={1} ]}
borderBottomColor={"white"}
justifyContent={"space-between"}
py={"m"}
> >
<Text variant={"black"} fontWeight={"bold"}> <Text style={[g.font_bold]}>Entreprise</Text>
Entreprise <Text style={[g.text_center]}>{userInformations.marchand.nom}</Text>
</Text> </View>
<Text textAlign={"center"}>{userInformations.marchand.nom}</Text> <View
</Box> style={[
<Box g.w_full,
width={"100%"} g.flex_row,
flexDirection={"row"} g.justify_between,
borderBottomWidth={1} g.py_md,
borderBottomColor={"white"} { borderBottomColor: "white", borderBottomWidth: 1 },
justifyContent={"space-between"} ]}
py={"m"}
> >
<Text variant={"black"} fontWeight={"bold"}> <Text style={[g.font_bold]}>Code</Text>
Code <Text style={[g.text_center]}>{userInformations.marchand.code}</Text>
</Text> </View>
<Text textAlign={"center"}>{userInformations.marchand.code}</Text> <View
</Box> style={[
<Box g.w_full,
width={"100%"} g.flex_row,
flexDirection={"row"} g.justify_between,
borderBottomWidth={1} g.py_md,
borderBottomColor={"white"} { borderBottomColor: "white", borderBottomWidth: 1 },
justifyContent={"space-between"} ]}
py={"m"}
> >
<Text variant={"black"} fontWeight={"bold"}> <Text style={[g.font_bold]}>Addresse</Text>
Addresse <Text style={[g.text_center]}>{userInformations.marchand.adresse}</Text>
</Text> </View>
<Text textAlign={"center"}>{userInformations.marchand.adresse}</Text> <View
</Box> style={[
<Box g.w_full,
width={"100%"} g.flex_row,
flexDirection={"row"} g.justify_between,
borderBottomWidth={1} g.py_md,
borderBottomColor={"white"} { borderBottomColor: "white", borderBottomWidth: 1 },
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"}> <Text style={[g.font_bold]}>Url succès</Text>
Url échec <Text style={[g.text_center]}>{userInformations.marchand.url_succes}</Text>
</Text> </View>
<Text textAlign={"center"}>{userInformations.marchand.url_echec}</Text> <View style={[g.w_full, g.flex_row, g.py_md, g.justify_between]}>
</Box> <Text style={[g.font_bold]}>Url échec</Text>
</Box> <Text style={[g.text_center]}>{userInformations.marchand.url_echec}</Text>
</Card> </View>
</> </View>
</WrapperWithDefaultBeasyBackgroundAndSafeAreaTopLeftRight> </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