From c74c2058bdd741079a7232af5cd5eb6f4d1789d7 Mon Sep 17 00:00:00 2001
From: Bahl-Aryan <bahlaryan@gmail.com>
Date: Sat, 7 Sep 2024 09:13:26 -0500
Subject: [PATCH] log-in check

---
 App.tsx                   | 68 +++++++++++++++++++++++++++++++++------
 api/postCheckIn.tsx       |  5 ++-
 navigation/Navigation.tsx |  2 +-
 package.json              |  1 +
 screens/Login.tsx         |  5 +--
 5 files changed, 66 insertions(+), 15 deletions(-)

diff --git a/App.tsx b/App.tsx
index a92f103..6019b4b 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,13 +1,14 @@
 import React, { useEffect, useState } from "react";
+import { Dimensions } from "react-native";
 import { GluestackUIProvider, Text, Box } from "@gluestack-ui/themed";
 import { config } from "@gluestack-ui/config"; // Optional if you want to use default theme
-import { NavigationContainer, useNavigation } from "@react-navigation/native";
+import { NavigationContainer, useNavigation, useNavigationContainerRef } from "@react-navigation/native";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import Navigation from "./navigation/Navigation";
 import Home from "./screens/Home";
 import * as Linking from "expo-linking";
 import Login from "./screens/Login";
-import { createStackNavigator } from "@react-navigation/stack";
+import { createStackNavigator, StackNavigationProp } from "@react-navigation/stack";
 import store, { RootState } from "./redux/store";
 import { Provider, useDispatch } from 'react-redux';
 import { setToken, clearTokens, AuthActionTypes, setRoles } from './redux/actions';
@@ -15,18 +16,30 @@ import { Dispatch } from "@reduxjs/toolkit";
 import { decodeToken } from "./api/decodeToken";
 import { useAppSelector } from "./redux/hooks";
 import { State } from "react-native-gesture-handler";
+import Toast, { ErrorToast } from "react-native-toast-message";
 
 const prefix = Linking.createURL("/");
 console.log(prefix);
-const Stack = createStackNavigator();
 
-const App = () => {
-  const [data, setData] = useState(null);
+type RootStackParamList = {
+  Login: undefined,
+  Main: undefined
+}
+
+const Stack = createStackNavigator<RootStackParamList>();
+const { width, height } = Dimensions.get("window");
+
+const App = (props) => {
+  const [deepLinkHandled, setDeepLinkHandled] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+
   const dispatch = useDispatch<Dispatch<AuthActionTypes>>();
+  const navigationRef = useNavigationContainerRef<RootStackParamList>();
   const linking = {
     prefixes:[prefix],
     config:{
       screens: {
+        Login: "Login",
         Main: "Main",
         Home: "home",
         Camera: "camera",
@@ -36,6 +49,18 @@ const App = () => {
       }
     }
   }
+  const toastConfig = {
+    error: (props) => (
+      <ErrorToast {...props}
+        text1Style ={{
+          fontSize: 20
+        }}
+        text2Style={{
+          fontSize: 15
+        }}
+      />
+    )
+  }
     
   useEffect(() => {
     const handleDeepLink = (event: { url: string; }) => {
@@ -46,7 +71,20 @@ const App = () => {
         dispatch(setToken(token))
         const decoded = decodeToken(token);
         console.log(decoded.roles);
-        dispatch(setRoles(decoded.roles));
+        
+        if(!decoded.roles.includes('USER')) {
+          Toast.show({
+            type: 'error',
+            text1: 'No user found!',
+            text2: 'Please register on the R|P website!',
+            topOffset: 30
+          })
+          setDeepLinkHandled(false);
+        } else {
+          console.log('dispatched')
+          dispatch(setRoles(decoded.roles));
+          setDeepLinkHandled(true);
+        }
       }
     }
 
@@ -56,17 +94,27 @@ const App = () => {
       if (initialURL) handleDeepLink({url: initialURL});
 	  }
 
-    
     getInitialURL();
     const listener = Linking.addEventListener("url", handleDeepLink);
-
     return () => listener.remove();
   }, [dispatch]);
 
+  useEffect(() => {
+    if(isReady && deepLinkHandled) {
+      console.log('navigating');
+      navigationRef.navigate('Main');
+    }
+  }, [isReady, deepLinkHandled])
+
   return (
+    <>
       <GluestackUIProvider config={config}>
         <SafeAreaProvider>
-          <NavigationContainer linking={linking}>
+          <NavigationContainer 
+            linking={linking}
+            ref={navigationRef}
+            onReady={() => setIsReady(true)}
+          >
             <Stack.Navigator screenOptions={{ headerShown: false}} initialRouteName="Login">
               <Stack.Screen name="Login" component={Login}/>
               <Stack.Screen name="Main" component={Navigation}/>
@@ -74,6 +122,8 @@ const App = () => {
           </NavigationContainer> 
         </SafeAreaProvider>
       </GluestackUIProvider>
+      <Toast config={toastConfig}/>
+    </>
   );
 }
 
diff --git a/api/postCheckIn.tsx b/api/postCheckIn.tsx
index 2ee236e..52cc76d 100644
--- a/api/postCheckIn.tsx
+++ b/api/postCheckIn.tsx
@@ -5,13 +5,12 @@ export const postCheckIn = async(token, eventId, qrCode) => {
     try {
         const response = await axios.post('https://api.reflectionsprojections.org/staff/scan/', payload, {
             headers: {
-                Authorization: token,
-                'Content-Type': 'application/json'
+                Authorization: token
             }
         });
         console.log('post CheckIn:', response.data)
     } catch (error) {
         console.log('Error posting check in:', error)
-        alert(`Error with scanning QR Code! Please double check selected event`);
+        alert(`Error with scanning QR Code!`);
     }
 };
\ No newline at end of file
diff --git a/navigation/Navigation.tsx b/navigation/Navigation.tsx
index 6972316..1cd5fee 100644
--- a/navigation/Navigation.tsx
+++ b/navigation/Navigation.tsx
@@ -103,7 +103,7 @@ const AppNavigator: React.FC = () => {
         component={Events}
         options={{ tabBarLabel: () => null }}
       />
-      {roles.includes('STAFF') ? (
+      {roles.includes('STAFF') || roles.includes('ADMIN') ? (
         <Tab.Screen
         name="AdminScanner"
         component={AdminScanner}
diff --git a/package.json b/package.json
index 08cd6cf..a71166a 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "react-native-svg-transformer": "^1.5.0",
     "react-native-svg-uri": "^0.0.1",
     "react-native-tab-view": "^3.5.2",
+    "react-native-toast-message": "^2.2.0",
     "react-native-webview": "^13.12.0",
     "react-navigation": "^5.0.0",
     "react-redux": "^9.1.2"
diff --git a/screens/Login.tsx b/screens/Login.tsx
index 72bebef..40fae8e 100644
--- a/screens/Login.tsx
+++ b/screens/Login.tsx
@@ -26,9 +26,10 @@ const { width, height } = Dimensions.get("window");
 
 const Login: React.FC<LoginProps> = ({ navigation }) => {
   const token = useAppSelector((state: RootState) => state.token);
-
+  const roles = useAppSelector((state: RootState) => state.roles);
+  
   useEffect(() => {
-    if (token) {
+    if (token && roles.includes('USER')) {
       navigation.navigate("Main");
     }
   }, [token, navigation]);