keannu125/Reactnative-notesapp
1
0
Fork 0
mirror of https://github.com/lemeow125/Reactnative-notesapp.git synced 2024-11-16 22:19:26 +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

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

@ -14,10 +14,85 @@ import SignupIcon from "../../../Icons/SignupIcon/SignupIcon";
import UserIcon from "../../../Icons/UserIcon/UserIcon";
import AppIcon from "../../../Icons/AppIcon/AppIcon";
import LogoutIcon from "../../../Icons/LogoutIcon/LogoutIcon";
import { useSelector } from "react-redux";
import { RootState } from "../../../../Features/Redux/Store/Store";
export default function CustomDrawerContent(props: {}) {
const navigation = useNavigation<RootDrawerParamList>();
const width = 224;
const logged_in = useSelector((state: RootState) => state.logged_in.value);
const logged_in_user = useSelector(
(state: RootState) => state.logged_in_user.value
);
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
@ -40,22 +115,10 @@ export default function CustomDrawerContent(props: {}) {
}}
>
<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
Home
</Text>
</ButtonAlignLeft>
<ButtonAlignLeft
color="Green"
width={width}
@ -64,22 +127,10 @@ export default function CustomDrawerContent(props: {}) {
}}
>
<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
Login
</Text>
</ButtonAlignLeft>
<ButtonAlignLeft
color="Yellow"
width={width}
@ -92,20 +143,7 @@ export default function CustomDrawerContent(props: {}) {
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>
);
}
}

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";
import { useDispatch } from "react-redux";
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 { RootDrawerParamList } from "../../Interfaces/Interfaces";
@ -77,7 +77,7 @@ export default function Login() {
password: "",
});
if (await UserLogin(user)) {
await dispatch(SetLoggedIn());
await dispatch(Toggle_Login());
await dispatch(SetUser(await UserInfo()));
navigation.navigate("Home");
} else {