keannu125/Reactnative-notesapp
1
0
Fork 0
mirror of https://github.com/lemeow125/Reactnative-notesapp.git synced 2024-11-17 06:29:27 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixed login page referencing wrong file for redux login state and made sidebar responsive to login state

Browse source
This commit is contained in:
keannu125 2023-04-16 18:06:08 +08:00
parent f5d5da0246
commit c782851c48
3 changed files with 129 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

216
src/Components/Drawer/DrawerScreenSettings/CustomDrawerContent/CustomDrawerContent.tsx
View file

@ -14,98 +14,136 @@ import SignupIcon from "../../../Icons/SignupIcon/SignupIcon";
import UserIcon from "../../../Icons/UserIcon/UserIcon"; import UserIcon from "../../../Icons/UserIcon/UserIcon";
import AppIcon from "../../../Icons/AppIcon/AppIcon"; import AppIcon from "../../../Icons/AppIcon/AppIcon";
import LogoutIcon from "../../../Icons/LogoutIcon/LogoutIcon"; import LogoutIcon from "../../../Icons/LogoutIcon/LogoutIcon";
import { useSelector } from "react-redux";
import { RootState } from "../../../../Features/Redux/Store/Store";
export default function CustomDrawerContent(props: {}) { export default function CustomDrawerContent(props: {}) {
const navigation = useNavigation<RootDrawerParamList>(); const navigation = useNavigation<RootDrawerParamList>();
const width = 224; const width = 224;
return ( const logged_in = useSelector((state: RootState) => state.logged_in.value);
<DrawerContentScrollView {...props}> const logged_in_user = useSelector(
<View (state: RootState) => state.logged_in_user.value
style={{
...styles.flex_row,
...{ justifyContent: "center" },
}}
>
<AppIcon size={32} color="white" />
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
Clip Notes
</Text>
</View>
<ButtonAlignLeft
color="Blue"
width={width}
onPress={() => {
navigation.navigate("Home");
}}
>
<HomeIcon size={32} color="white" />
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>Home</Text>
</ButtonAlignLeft>
<ButtonAlignLeft
color="Green"
width={width}
onPress={() => {
navigation.navigate("New Note");
}}
>
<AddIcon size={32} color="white" />
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
New Note
</Text>
</ButtonAlignLeft>
<ButtonAlignLeft
color="Green"
width={width}
onPress={() => {
navigation.navigate("Login");
}}
>
<LoginIcon size={32} color="white" />
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>Login</Text>
</ButtonAlignLeft>
<ButtonAlignLeft
color="Yellow"
width={width}
onPress={() => {
navigation.navigate("User Info");
}}
>
<UserIcon size={32} color="white" />
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
User Info
</Text>
</ButtonAlignLeft>
<ButtonAlignLeft
color="Yellow"
width={width}
onPress={() => {
navigation.navigate("Register");
}}
>
<SignupIcon size={32} color="white" />
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
Register
</Text>
</ButtonAlignLeft>
<ButtonAlignLeft
color="Red"
width={width}
onPress={() => {
navigation.navigate("Register");
}}
>
<LogoutIcon size={32} color="white" />
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
Log Out
</Text>
</ButtonAlignLeft>
</DrawerContentScrollView>
); );
if (logged_in) {
return (
<DrawerContentScrollView {...props}>
<View
style={{
...styles.flex_row,
...{ justifyContent: "center" },
}}
>
<AppIcon size={32} color="white" />
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
Clip Notes
</Text>
</View>
<Text style={{ ...styles.text_white, ...{ fontSize: 16 } }}>
Logged in as {logged_in_user.username}
</Text>
<ButtonAlignLeft
color="Blue"
width={width}
onPress={() => {
navigation.navigate("Home");
}}
>
<HomeIcon size={32} color="white" />
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
Home
</Text>
</ButtonAlignLeft>
<ButtonAlignLeft
color="Green"
width={width}
onPress={() => {
navigation.navigate("New Note");
}}
>
<AddIcon size={32} color="white" />
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
New Note
</Text>
</ButtonAlignLeft>
<ButtonAlignLeft
color="Yellow"
width={width}
onPress={() => {
navigation.navigate("User Info");
}}
>
<UserIcon size={32} color="white" />
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
User Info
</Text>
</ButtonAlignLeft>
<ButtonAlignLeft
color="Red"
width={width}
onPress={() => {
navigation.navigate("Register");
}}
>
<LogoutIcon size={32} color="white" />
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
Log Out
</Text>
</ButtonAlignLeft>
</DrawerContentScrollView>
);
} else {
return (
<DrawerContentScrollView {...props}>
<View
style={{
...styles.flex_row,
...{ justifyContent: "center" },
}}
>
<AppIcon size={32} color="white" />
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
Clip Notes
</Text>
</View>
<ButtonAlignLeft
color="Blue"
width={width}
onPress={() => {
navigation.navigate("Home");
}}
>
<HomeIcon size={32} color="white" />
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
Home
</Text>
</ButtonAlignLeft>
<ButtonAlignLeft
color="Green"
width={width}
onPress={() => {
navigation.navigate("Login");
}}
>
<LoginIcon size={32} color="white" />
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
Login
</Text>
</ButtonAlignLeft>
<ButtonAlignLeft
color="Yellow"
width={width}
onPress={() => {
navigation.navigate("Register");
}}
>
<SignupIcon size={32} color="white" />
<Text style={{ ...styles.text_white, ...{ fontSize: 32 } }}>
Register
</Text>
</ButtonAlignLeft>
</DrawerContentScrollView>
);
}
} }

21
src/Features/Redux/Store/LoginSlice.tsx
View file

@ -1,21 +0,0 @@
import { createSlice } from "@reduxjs/toolkit";
export const LoginSlice = createSlice({
name: "Login",
initialState: {
value: false,
},
reducers: {
SetLoggedIn: (state) => {
state.value = !state.value;
},
SetLoggedOut: (state) => {
state.value = !state.value;
},
},
});
// Action creators are generated for each case reducer function
export const { SetLoggedIn, SetLoggedOut } = LoginSlice.actions;
export default LoginSlice.reducer;

4
src/Routes/Login/Login.tsx
View file

@ -16,7 +16,7 @@ import {
} from "@react-navigation/native"; } from "@react-navigation/native";
import { useDispatch } from "react-redux"; import { useDispatch } from "react-redux";
import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice"; import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
import { SetLoggedIn } from "../../Features/Redux/Store/LoginSlice"; import { Toggle_Login } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
import { UserInfo, UserLogin } from "../../Components/Api/Api"; import { UserInfo, UserLogin } from "../../Components/Api/Api";
import { RootDrawerParamList } from "../../Interfaces/Interfaces"; import { RootDrawerParamList } from "../../Interfaces/Interfaces";
@ -77,7 +77,7 @@ export default function Login() {
password: "", password: "",
}); });
if (await UserLogin(user)) { if (await UserLogin(user)) {
await dispatch(SetLoggedIn()); await dispatch(Toggle_Login());
await dispatch(SetUser(await UserInfo())); await dispatch(SetUser(await UserInfo()));
navigation.navigate("Home"); navigation.navigate("Home");
} else { } else {