hot fix for events navigator

App.tsx

@@ -12,6 +12,7 @@ import Navigation from "./navigation/Navigation";
 import Home from "./screens/Home";
 import * as Linking from "expo-linking";
 import Login from "./screens/Login";
+import GuestLogin from "./screens/GuestLogin";
 import {
   createStackNavigator,
   StackNavigationProp,
@@ -36,6 +37,7 @@ const prefix = Linking.createURL("/");
 
 type RootStackParamList = {
   Login: undefined;
+  Guest: undefined;
   Main: undefined;
 };
 
@@ -53,6 +55,7 @@ const App = (props) => {
     config: {
       screens: {
         Login: "Login",
+        Guest: "Guest",
         Main: "Main",
         Home: "home",
         Camera: "camera",
@@ -78,13 +81,13 @@ const App = (props) => {
 
   useEffect(() => {
     const handleDeepLink = (event: { url: string }) => {
-      console.log("handling deep link:", event.url);
+      // console.log("handling deep link:", event.url);
       const searchParams = new URL(event.url).searchParams;
       const token = searchParams.get("token");
       if (token) {
         const decoded = decodeToken(token);
-        console.log("token", token, "decoded token", decoded);
-        console.log(decoded.roles);
+        //console.log("token", token, "decoded token", decoded);
+        //console.log(decoded.roles);
 
         if (!decoded.roles.includes("USER")) {
           Toast.show({
@@ -106,7 +109,7 @@ const App = (props) => {
 
     async function getInitialURL() {
       const initialURL = await Linking.getInitialURL();
-      console.log("getting initial URL:", initialURL);
+      //console.log("getting initial URL:", initialURL);
       if (initialURL) handleDeepLink({ url: initialURL });
     }
 
@@ -117,7 +120,7 @@ const App = (props) => {
 
   useEffect(() => {
     if (isReady && deepLinkHandled) {
-      console.log("navigating");
+      //console.log("navigating");
       navigationRef.navigate("Main");
     }
   }, [isReady, deepLinkHandled]);
@@ -136,6 +139,7 @@ const App = (props) => {
               initialRouteName="Login"
             >
               <Stack.Screen name="Login" component={Login} />
+              <Stack.Screen name="Guest" component={GuestLogin} />
               <Stack.Screen name="Main" component={Navigation} />
             </Stack.Navigator>
           </NavigationContainer>

Components/Text.tsx

@@ -1,6 +1,6 @@
 import { styled } from "@gluestack-style/react";
 import { Text } from "@gluestack-ui/themed";
-import { useFonts, Kufam_400Regular, Kufam_700Bold, Kufam_700Bold_Italic } from "@expo-google-fonts/kufam";
+import { useFonts, Kufam_400Regular, Kufam_700Bold, Kufam_700Bold_Italic, Kufam_600SemiBold } from "@expo-google-fonts/kufam";
 
 const StyledText = styled(Text, 
     {
@@ -17,6 +17,12 @@ const StyledText = styled(Text,
                     textAlign: 'center',
                     fontFamily: "Kufam_700Bold"
                 },
+                footerText: {
+                    fontSize: 40,
+                    fontWeight: '$bold',
+                    textAlign: 'center',
+                    fontFamily: "Kufam_600SemiBold"
+                },
                 basic: {
                     fontSize: "$md",
                     fontWeight: "$normal",

api/getAttendee.tsx

@@ -9,13 +9,11 @@ export const getAttendee = (token: string) => {
               Authorization: token
             },
           });
-
-          clone = response.clone();
 
           if (!response.ok) {
             throw new Error(`HTTP error! Status: ${response.status}`);
           }
-
+          
           const data = await response.json();
           dispatch(setAttendee(data));
         } catch (error) {

api/getEvents.tsx

@@ -4,7 +4,7 @@ export const getEvents = async (token: string) => {
     try{
         const response = await axios.get('https://api.reflectionsprojections.org/events/', {
             headers: {
-                Authorization: token
+
             }
         });
         return response.data;

api/getQRCode.tsx

@@ -1,18 +1,18 @@
 import { setQRCode } from "../redux/actions";
 
 export const getQRCode = async (token: string, callback:Function) => {
-      try {
-        const response = await fetch('https://api.reflectionsprojections.org/attendee/qr/', {
-          headers: {
-            Authorization: token,
-            'Content-Type': 'application/json'
-          },
-        });
-        const data = await response.json();
-        console.log(data)
-        //dispatch(setQRCode(data.qrCode));
-        callback(data.qrCode)
-      } catch (error) {
-        console.error('Error fetching qrcode:', error);
-      };
+    try {
+      const response = await fetch('https://api.reflectionsprojections.org/attendee/qr/', {
+        headers: {
+          Authorization: token,
+          'Content-Type': 'application/json'
+        },
+      });
+      const data = await response.json();
+      console.log(data)
+      //dispatch(setQRCode(data.qrCode));
+      callback(data.qrCode)
+    } catch (error) {
+      console.error('Error fetching qrcode:', error);
+    };
 };

navigation/DayEvent.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Text, View, ScrollView, StyleSheet } from "react-native";
 import EventCard from "../Components/EventCard";
 import Colors from "../constants/Colors";
+import { StyledText } from "../Components/Text";
 
 export const formatTime = (timestamp) => {
   const date = new Date(timestamp);
@@ -30,10 +31,11 @@ export const formatLocation = (location) => {
 const DayEvent = ({ day, events }) => {
   return (
     <View style={styles.container}>
-      <ScrollView
-        style={styles.scrollView}
-        contentContainerStyle={styles.contentContainer}
-      >
+      {events.length > 0 ? (
+        <ScrollView
+          style={styles.scrollView}
+          contentContainerStyle={styles.contentContainer}
+        >
         {events.map((event) => (
           <EventCard
             key={event.id}
@@ -44,7 +46,11 @@ const DayEvent = ({ day, events }) => {
             points={event.points}
           />
         ))}
+        <StyledText variant="footerText" color={Colors.WHITE} fontSize={16}>No more events for the day!</StyledText>
       </ScrollView>
+      ) : (
+        <StyledText variant="profileText" color={Colors.WHITE} fontSize={30} marginTop={30}>No events on this day</StyledText>
+      )}
     </View>
   );
 };

navigation/EventDaysNavigator.tsx

@@ -8,6 +8,9 @@ import {
   Inter_500Medium,
   Inter_700Bold,
 } from "@expo-google-fonts/inter";
+
+import { Kufam_400Regular, Kufam_700Bold, Kufam_700Bold_Italic, Kufam_600SemiBold } from "@expo-google-fonts/kufam";
+
 import { useFocusEffect } from "@react-navigation/native";
 
 const eventsURL = "https://api.reflectionsprojections.org/events/";
@@ -17,7 +20,7 @@ const WeekTab = createMaterialTopTabNavigator();
 const EventDaysNavigator = () => {
   const [eventsData, setEventsData] = useState([]);
   const loaded = useRef(false)
-
+  
   useFocusEffect(
     useCallback(() => {
       if (!loaded.current) {
@@ -31,6 +34,7 @@ const EventDaysNavigator = () => {
             setEventsData(data); // Update eventsData state with fetched data
           } catch (error) {
             console.error("Error fetching events:", error);
+            setEventsData([]);
           }
         };
         fetchEvents();
@@ -71,6 +75,8 @@ const EventDaysNavigator = () => {
     Inter_400Regular,
     Inter_500Medium,
     Inter_700Bold,
+    Kufam_600SemiBold,
+    Kufam_700Bold
   });
 
   if (!fontsLoaded) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rp-mobile-2024",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start",

screens/GuestLogin.tsx

@@ -0,0 +1,118 @@
+import React, { useEffect, useState } from "react";
+import {
+  Dimensions,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
+import { Button, ButtonText } from '@gluestack-ui/themed';
+import * as WebBrowser from "expo-web-browser";
+import { NavigationProp, ParamListBase } from "@react-navigation/native";
+import { useAppSelector } from "../redux/hooks";
+import { RootState } from "../redux/store";
+import Colors from "../constants/Colors";
+import * as Linking from "expo-linking"
+import { StyledText } from "../Components/Text";
+import { useFonts, Kufam_400Regular, Kufam_700Bold, Kufam_700Bold_Italic, Kufam_600SemiBold } from "@expo-google-fonts/kufam";
+
+const authUrl = "https://api.reflectionsprojections.org/auth/login/mobile/";
+const redirectURL = "reflectionsprojections://--/Main";
+
+interface LoginProps {
+  navigation: NavigationProp<ParamListBase>;
+}
+
+const GuestLogin: React.FC<LoginProps> = ({ navigation }) => {
+  const token = useAppSelector((state: RootState) => state.token);
+  const roles = useAppSelector((state: RootState) => state.roles);
+  const [loggedIn, setLoggedIn] = useState(false);
+  let [fontsLoaded] = useFonts({
+    Kufam_600SemiBold,
+    Kufam_700Bold
+  });
+  useEffect(() => {
+    if (token && roles.includes('USER')) {
+      setLoggedIn(true);
+    } else {
+      setLoggedIn(false);
+    }
+  }, [token, roles]);
+
+  const handleLoginPress = () => {
+    if(loggedIn) {
+      navigation.navigate("Main");
+    } else {
+      WebBrowser.openAuthSessionAsync(
+        `${authUrl}?redirect_uri=${redirectURL}`,
+        redirectURL
+      ).then((result) => {
+        if (result.type === "success") {
+          Linking.openURL(result.url);
+          navigation.navigate("Main");
+        }
+      }).catch((err) => {
+        console.error("Failed to open URL:", err.message);
+        alert("Failed to open URL");
+      });
+    }
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.loginContainer}>
+        <StyledText variant="footerText" color={Colors.WHITE} fontSize={32} marginBottom={-10}>Haven't registered?</StyledText>
+        <Button 
+          onPress={() => navigation.navigate("Main")}
+          style={styles.button}
+        >
+            <ButtonText color={Colors.DARK_BLUE} fontWeight={"bold"} fontSize={20} fontFamily="Kufam_600SemiBold">Login as Guest</ButtonText>
+        </Button>
+        <StyledText variant="footerText" color={Colors.WHITE} fontSize={16}>OR</StyledText>
+        <Button 
+          onPress={() => WebBrowser.openBrowserAsync('https://reflectionsprojections.org')}
+          style={styles.button}
+        >
+            <ButtonText color={Colors.DARK_BLUE} fontWeight={"bold"} fontSize={20} fontFamily="Kufam_600SemiBold">Register!</ButtonText>
+        </Button>
+        <View style={styles.spacing} />
+        <StyledText variant="footerText" color={Colors.WHITE} fontSize={32} marginBottom={-10}>Already registered?</StyledText>
+        <Button 
+          onPress={handleLoginPress}
+          style={styles.button}
+        >
+            <ButtonText color={Colors.DARK_BLUE} fontWeight={"bold"} fontSize={20} fontFamily="Kufam_600SemiBold">Login</ButtonText>
+        </Button>
+      </View>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: Colors.DARK_BLUE,
+  },
+  loginContainer: {
+    width: "80%",
+    alignItems: 'center',
+    backgroundColor: 'transparent',
+  },
+  button: {
+    marginBottom: 20,
+    width: '100%',
+    marginTop: 20,
+    backgroundColor: Colors.YELLOW
+  },
+  separator: {
+    color: Colors.WHITE,
+    fontSize: 16,
+  },
+  spacing: {
+    height: 60, // Increased space before the already registered section
+  }
+});
+
+export default GuestLogin;

screens/Login.tsx

@@ -37,26 +37,13 @@ const Login: React.FC<LoginProps> = ({ navigation }) => {
     } else {
       setLoggedIn(false);
     }
-  }, [token, roles, navigation]);
+  }, []);
 
   const handleLoginPress = () => {
     if(loggedIn) {
       navigation.navigate("Main");
     } else {
-      WebBrowser.openAuthSessionAsync(
-        `${authUrl}?redirect_uri=${redirectURL}`,
-        redirectURL
-      )
-        .then((result) => {
-          if (result.type === "success") {
-            Linking.openURL(result.url);
-            navigation.navigate("Main");
-          }
-        })
-        .catch((err) => {
-          console.error("Failed to open URL:", err.message);
-          alert("Failed to open URL");
-        });
+      navigation.navigate("Guest");
     }
   };
 

screens/Profile.tsx

@@ -58,11 +58,15 @@ const Profile: React.FC = () => {
       const foodwave = await getFoodWave(token);
       setFoodWave(foodwave.foodwave);
     }
-    fetchFoodWave();
-  })
+    if (token) {
+      fetchFoodWave();
+    }
+  });
 
   useEffect(() => {
-    setInterval(async () => {await getQRCode(token, setQRCode)}, 18000 + (Math.random() * 5000));
+    if (token) {
+      setInterval(async () => {await getQRCode(token, setQRCode)}, 18000 + (Math.random() * 5000));
+    }
   }, []);
 
   const handleLogOut = () => {