Merge pull request #33 from ReflectionsProjections/dev/Bahl-Aryan/log-in

log-in check

App.tsx

@@ -1,32 +1,45 @@
 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';
 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,24 +94,36 @@ 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}/>
             </Stack.Navigator>
           </NavigationContainer> 
         </SafeAreaProvider>
       </GluestackUIProvider>
+      <Toast config={toastConfig}/>
+    </>
   );
 }
 

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!`);
     }
 };

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}

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"

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]);