Merge pull request #21 from ReflectionsProjections/dev/Bahl-Aryan/sta…

…ff_scan_page

Staff Scan Page

App.tsx

@@ -8,10 +8,13 @@ import Home from "./screens/Home";
 import * as Linking from "expo-linking";
 import Login from "./screens/Login";
 import { createStackNavigator } from "@react-navigation/stack";
-import store from "./redux/store";
+import store, { RootState } from "./redux/store";
 import { Provider, useDispatch } from 'react-redux';
-import { setToken, clearTokens, AuthActionTypes } from './redux/actions';
+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";
 
 const prefix = Linking.createURL("/");
 console.log(prefix);
@@ -39,8 +42,12 @@ const App = () => {
       console.log("handling deep link:", event.url);
       const searchParams = new URL(event.url).searchParams;
       const token = searchParams.get('token');
-      console.log("TOKEN", token);
-      dispatch(setToken(token))
+      if (token) {
+        dispatch(setToken(token))
+        const decoded = decodeToken(token);
+        console.log(decoded.roles);
+        dispatch(setRoles(decoded.roles));
+      }
     }
 
     async function getInitialURL() {      
@@ -49,6 +56,7 @@ const App = () => {
       if (initialURL) handleDeepLink({url: initialURL});
 	  }
 
+
     getInitialURL();
     const listener = Linking.addEventListener("url", handleDeepLink);
 

Components/Buttons.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Pressable } from "@gluestack-ui/themed";
 import { Button } from "@gluestack-ui/themed";
 import { styled } from "@gluestack-style/react";
+import Colors from "../constants/Colors";
 
 const StyledButton = styled(Button, 
     {
@@ -12,6 +13,9 @@ const StyledButton = styled(Button,
                     width: 250, 
                     marginBottom: "$3",
                     bg: "$lightgray",
+                }, 
+                scan: {
+                    bg: Colors.DARK_BLUE
                 }
             },
         },

Components/EventDropdown.tsx

@@ -0,0 +1,100 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import RNPickerSelect from 'react-native-picker-select';
+import { getEvents } from '../api/getEvents';
+import Colors from '../constants/Colors';
+
+interface Event {
+  eventId: string;
+  name: string;
+}
+
+interface EventDropdownProps {
+  token: string;
+  onEventSelect: (eventId: string | null) => void;
+}
+
+const EventDropdown: React.FC<EventDropdownProps> = ({ token, onEventSelect }) => {
+  const [events, setEvents] = useState<Event[]>([]);
+  const [selectedEvent, setSelectedEvent] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchEvents = async () => {
+      try {
+        const eventData = await getEvents(token);
+        setEvents(eventData);
+      } catch (error) {
+        console.error('Error fetching events:', error);
+      }
+    };
+
+    fetchEvents();
+  }, [token]);
+
+  return (
+    <View style={styles.container}>
+      <RNPickerSelect
+        onValueChange={(value) => {
+          setSelectedEvent(value);
+          onEventSelect(value);
+        }}
+        items={events.map((event) => ({
+          label: event.name,
+          value: event.eventId,
+        }))}
+        style={pickerSelectStyles}
+        placeholder={{ label: 'Select an event...', value: null}}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 25,
+    paddingRight: -10
+  },
+  label: {
+    fontSize: 18,
+    marginBottom: 10,
+    color: Colors.WHITE
+  },
+  selectedEvent: {
+    marginTop: 20,
+    fontSize: 16,
+    color: Colors.WHITE,
+  },
+});
+
+const pickerSelectStyles = StyleSheet.create({
+  inputIOS: {
+    textAlign: 'center',
+    fontSize: 20,
+    fontWeight: "bold",
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+    borderWidth: 3,
+    borderColor: Colors.YELLOW,
+    backgroundColor: Colors.DARK_BLUE,
+    borderRadius: 6,
+    color: Colors.WHITE,
+    fontFamily: "Inter_500Medium",
+    paddingRight: 12, // to ensure the text is never behind the icon
+
+  },
+  inputAndroid: {
+    fontSize: 20,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    borderWidth: 0.5,
+    borderColor: 'purple',
+    borderRadius: 8,
+    color: Colors.WHITE,
+    paddingRight: 12, // to ensure the text is never behind the icon
+  },
+});
+
+export default EventDropdown;

Components/FoodWaveSVG.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View, Text } from 'react-native'
+import { StyledText } from './Text';
+
+import Foodwave1 from '../assets/SVGs/foodwave/food_wave.svg'
+import Foodwave2 from '../assets/SVGs/foodwave/food_wave2.svg'
+import Foodwave3 from '../assets/SVGs/foodwave/food_wave3.svg'
+import Foodwave4 from '../assets/SVGs/foodwave/food_wave4.svg'
+
+
+interface FoodWaveSVGProps {
+    foodWave: Number;  // Ensure you define all props your component expects.
+  }
+
+const FoodWaveSVG: React.FC<FoodWaveSVGProps> = ({ foodWave }) => {
+    const getSVG = () => {
+        switch(foodWave) {
+            case 1:
+                return <Foodwave1/>;
+            case 2:
+                return <Foodwave2/>;
+            case 3:
+                return <Foodwave3/>;
+            case 4:
+                return <Foodwave4/>;
+            default:
+                return <Text>No SVG available</Text>
+        }
+    };
+
+    return (
+        <View style={{ 
+            alignItems: 'center',
+            justifyContent: 'center',
+            position: 'relative', 
+        }}>
+          {getSVG()}
+          <StyledText variant="medium" position='absolute' top={5}>
+            {`Food Wave: ${foodWave}`}
+          </StyledText>
+        </View>
+    );
+};
+
+export default FoodWaveSVG;

Components/Images.tsx

@@ -9,13 +9,13 @@ const Images = styled(Image,
                 qrCode: {
                     height: 300,
                     width: 300, 
-                    borderRadius: "$xl",
+                    borderRadius: "$lg",
                     marginTop: "$5",
                 },
                 loginLogo: {
                     height: 300,
                     width: 300, 
-                    borderRadius: "$xl",
+                    borderRadius: "$lg",
                     marginTop: "$5",
                 }
             }

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";
 
 const StyledText = styled(Text, 
     {
@@ -11,7 +11,7 @@ const StyledText = styled(Text,
                     fontWeight: "$bold",
                     textAlign: 'center'
                 }, 
-                bigText: {
+                profileText: {
                     fontSize: 60,
                     fontWeight: "$bold",
                     textAlign: 'center',

api/decodeToken.tsx

@@ -0,0 +1,16 @@
+import {jwtDecode} from 'jwt-decode';
+
+interface DecodedToken {
+    userId: string;
+    displayName: string;
+    roles: string[];
+}
+
+export function decodeToken(token: string): DecodedToken {
+    try {
+        const decoded = jwtDecode<DecodedToken>(token)
+        return decoded;
+    } catch (error) {
+        console.error('Error decoding token:', error)
+    }
+}

api/getAttendee.tsx

@@ -6,7 +6,7 @@ export const getAttendee = (token: string) => {
         try {
           const response = await fetch('https://api.reflectionsprojections.org/attendee/', {
             headers: {
-              'Authorization': `Bearer ${token}`,
+              Authorization: token
             },
           });
 
@@ -17,7 +17,6 @@ export const getAttendee = (token: string) => {
           }
 
           const data = await response.json();
-          console.log("attendee:", data);
           dispatch(setAttendee(data));
         } catch (error) {
           console.error('Error fetching attendee:', error);

api/getEvents.tsx

@@ -0,0 +1,15 @@
+import axios from "axios";
+
+export const getEvents = async (token: string) => {
+    try{
+        const response = await axios.get('https://api.reflectionsprojections.org/events/', {
+            headers: {
+                Authorization: token
+            }
+        });
+        return response.data;
+    } catch (error) {
+        console.error("Error in catching events:", error);
+        throw error;
+    }
+}

api/getQRCode.tsx

@@ -5,23 +5,12 @@ export const getQRCode = (token: string) => {
         try {
           const response = await fetch('https://api.reflectionsprojections.org/attendee/qr/', {
             headers: {
-              'Authorization': `${token}`,
+              Authorization: token,
               'Content-Type': 'application/json'
             },
           });
           const data = await response.json();
-          dispatch(setQRCode(data));
-
-          // Refresh the QR Code every 20 seconds
-          setInterval(async () => {
-            const refreshResponse = await fetch('https://api.reflectionsprojections.org/attendee/qr/', {
-                headers: {
-                    'Authorization': `${token}`,
-                },
-            });
-            const refreshData = await refreshResponse.json();
-            dispatch(setQRCode(refreshData));
-          }, 20000)
+          dispatch(setQRCode(data.qrCode));
         } catch (error) {
           console.error('Error fetching qrcode:', error);
         }

api/postCheckIn.tsx

@@ -0,0 +1,17 @@
+import axios from "axios";
+
+export const postCheckIn = async(token, eventId, qrCode) => {
+    const payload = { eventId, qrCode }
+    try {
+        const response = await axios.post('https://api.reflectionsprojections.org/staff/scan/', payload, {
+            headers: {
+                Authorization: token,
+                'Content-Type': 'application/json'
+            }
+        });
+        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`);
+    }
+};