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

Merge pull request #20 from lemeow125/feature/logout

Browse source 
Feature/logout
This commit is contained in:
lemeow125 2023-04-16 18:39:02 +08:00 committed by GitHub
commit c3b4816ce2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 195 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
App.tsx
View file

@ -33,6 +33,7 @@ export default function App() {
<Drawer.Screen name="User Info" component={UserInfo} />
<Drawer.Screen name="Login" component={Login} />
<Drawer.Screen name="Register" component={Register} />
<Drawer.Screen name="LogOut" component={Register} />
</Drawer.Navigator>
</NavigationContainer>

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

@ -13,79 +13,141 @@ import LoginIcon from "../../../Icons/LoginIcon/LoginIcon";
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 { useDispatch, useSelector } from "react-redux";
import { RootState } from "../../../../Features/Redux/Store/Store";
import { Toggle_Login } from "../../../../Features/Redux/Slices/LoginSlice/LoginSlice";
import AsyncStorage from "@react-native-async-storage/async-storage";
export default function CustomDrawerContent(props: {}) {
const navigation = useNavigation<RootDrawerParamList>();
const dispatch = useDispatch();
const width = 224;
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("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>
</DrawerContentScrollView>
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={() => {
dispatch(Toggle_Login());
AsyncStorage.removeItem("token");
}}
>
<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>
);
}
}

2
src/Components/Drawer/DrawerScreenSettings/DrawerScreenSettings.tsx
View file

@ -1,6 +1,7 @@
import { View, Image, Text } from "react-native";
import type { DrawerNavigationOptions } from "@react-navigation/drawer";
import AppIcon from "../../Icons/AppIcon/AppIcon";
import PreviousSessionChecker from "../../PreviousSessionChecker/PreviousSessionChecker";
const DrawerScreenSettings: DrawerNavigationOptions = {
headerTitleStyle: { color: "white", fontSize: 26 },
unmountOnBlur: true,
@ -18,6 +19,7 @@ const DrawerScreenSettings: DrawerNavigationOptions = {
<View
style={{ flexDirection: "row", marginRight: 16, alignItems: "center" }}
>
<PreviousSessionChecker />
<AppIcon size={32} color="white" />
</View>
),

25
src/Components/Icons/LogoutIcon/LogoutIcon.tsx Normal file
View file

@ -0,0 +1,25 @@
import * as React from "react";
import { IconProps } from "../../../Interfaces/Interfaces";
import { Svg, Path } from "react-native-svg";
export default function LogoutIcon(props: IconProps) {
return (
<>
<Svg
width={props.size}
height={props.size}
viewBox="0 0 24 24"
strokeWidth="2"
stroke={props.color}
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
>
<Path stroke="none" d="M0 0h24v24H0z" fill="none"></Path>
<Path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></Path>
<Path d="M7 12h14l-3 -3m0 6l3 -3"></Path>
</Svg>
</>
);
}

33
src/Components/PreviousSessionChecker/PreviousSessionChecker.tsx Normal file
View file

@ -0,0 +1,33 @@
import * as React from "react";
import { View, Text, TextInput, ScrollView } from "react-native";
import { useEffect, useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import { UserInfo } from "../Api/Api";
import { Toggle_Login } from "../../Features/Redux/Slices/LoginSlice/LoginSlice";
import { SetUser } from "../../Features/Redux/Slices/LoggedInUserSlice/LoggedInUserSlice";
import { set_checked } from "../../Features/Redux/Slices/OldSession/OldSessionSlice";
import { RootState } from "../../Features/Redux/Store/Store";
export default function PreviousSessionChecker() {
const dispatch = useDispatch();
const logged_in = useSelector((state: RootState) => state.logged_in.value);
// Function to check for previous login session
const check = useCallback(async () => {
if (await UserInfo()) {
if (logged_in !== true) {
console.log("Previous session found. Restoring");
await dispatch(Toggle_Login());
await dispatch(SetUser(await UserInfo()));
}
} else {
console.log("No old session found");
localStorage.removeItem("token");
}
await dispatch(set_checked());
}, [dispatch, logged_in]);
useEffect(() => {
if (!logged_in) {
check();
}
}, [check, logged_in]);
return <View />;
}

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 {