Dev/bahl aryan/home page

Components/FoodWaveSVG.tsx

@@ -18,11 +18,7 @@ const FoodWaveSVG: React.FC<FoodWaveSVGProps> = ({ foodWave }) => {
             case 1:
                 return <Foodwave1/>;
             case 2:
-                return <Foodwave2/>;
-            case 3:
                 return <Foodwave3/>;
-            case 4:
-                return <Foodwave4/>;
             default:
                 return <Text>No SVG available</Text>
         }

api/getFoodWave.tsx

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

navigation/Navigation.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { createStackNavigator } from "@react-navigation/stack";
 import { FontAwesome } from "@expo/vector-icons";
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
 import { View } from "react-native";
 import Home from "../screens/Home";
 import Events from "../screens/Events";
@@ -36,53 +37,50 @@ const AppNavigator: React.FC = () => {
           switch (route.name) {
             case "Home":
               return (
-                <FontAwesome
-                  name="home"
+                <MaterialCommunityIcons
+                  name="home-variant"
                   color={focused ? ACTIVE_COLOR : INACTIVE_COLOR}
                   size={35}
                   solid
                 />
               );
             case "Events":
               return (
-                <FontAwesome
+                <MaterialCommunityIcons
                   name="calendar"
                   color={focused ? ACTIVE_COLOR : INACTIVE_COLOR}
                   size={35}
-                  solid
+
                 />
               );
             case "Camera":
               return (
-                <FontAwesome
-                  name="camera"
-                  color={focused ? ACTIVE_COLOR : INACTIVE_COLOR}
+                <MaterialCommunityIcons
+                  name="qrcode-scan"
                   size={35}
-                  solid
+                  color={focused ? ACTIVE_COLOR : INACTIVE_COLOR}
                 />
               );
             case "AdminScanner":
               return (
-                <FontAwesome
+                <MaterialCommunityIcons
                   name="camera"
                   color={focused ? ACTIVE_COLOR : INACTIVE_COLOR}
                   size={35}
-                  solid
                 />
               );
             case "Shop":
               return (
-                <FontAwesome
-                  name="shopping-cart"
+                <MaterialCommunityIcons
+                  name="shopping-outline"
                   color={focused ? ACTIVE_COLOR : INACTIVE_COLOR}
                   size={35}
-                  solid
                 />
               );
             case "Profile":
               return (
-                <FontAwesome
-                  name="user"
+                <MaterialCommunityIcons
+                  name="account"
                   color={focused ? ACTIVE_COLOR : INACTIVE_COLOR}
                   size={35}
                   solid

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rp-mobile-2024",
-  "version": "1.0.0",
+  "version": "1.3.1",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
@@ -42,6 +42,7 @@
     "jwt-decode": "^4.0.0",
     "lucide-react-native": "^0.381.0",
     "react": "18.2.0",
+    "react-icons": "^5.3.0",
     "react-native": "0.74.2",
     "react-native-gesture-handler": "^2.16.0",
     "react-native-modal": "^13.0.1",

screens/Profile.tsx

@@ -20,9 +20,11 @@ import { logout } from "../redux/actions";
 import { useNavigation } from "@react-navigation/native";
 import { StackNavigationProp } from "@react-navigation/stack";
 
-import QRFrame from '../assets/SVGs/qrcode/qr_frame.svg'
+import QRFrame from '../assets/SVGs/qrcode/QRFrame1.svg'
+import QRFrame2 from '../assets/SVGs/qrcode/qr_frame.svg'
 import Background from '../assets/SVGs/home/home_bg.svg'
 import Logout from '../assets/SVGs/profile/logout.svg'
+import { getFoodWave } from "../api/getFoodWave";
 
 const {width, height} = Dimensions.get("window")
 type RootStackParamList = {
@@ -40,6 +42,8 @@ const Profile: React.FC = () => {
   const attendee = useAppSelector((state: RootState) => state.attendee);
   const qrcode = useAppSelector((state: RootState) => state.qrCodeURL);
 
+  const [foodWave, setFoodWave] = useState(null);
+
   useEffect(() => {
     if (token && !attendee) {
       dispatch(getAttendee(token));
@@ -49,6 +53,14 @@ const Profile: React.FC = () => {
     }
   }, [token, attendee, qrcode, dispatch]);
 
+  useEffect(() => {
+    const fetchFoodWave = async () => {
+      const foodwave = await getFoodWave(token);
+      setFoodWave(foodwave.foodwave);
+    }
+    fetchFoodWave();
+  }, [token])
+
   useEffect(() => {
     const fetchQRCode = async() => {
       if (token) {
@@ -119,16 +131,20 @@ const Profile: React.FC = () => {
       {attendee && qrcode &&
       <View style={styles.qrContainer}>
         <View style={styles.qrFrameContainer}>
-          <QRFrame style={styles.qrFrame} height={qrCodeSize * 1.1} width={qrCodeSize * 1.4}/>
+          {foodWave == 1 ? (
+            <QRFrame style={styles.qrFrame} height={qrCodeSize * 1.1} width={qrCodeSize * 1.4}/>
+          ) : (
+            <QRFrame2 style={styles.qrFrame} height={qrCodeSize * 1.1} width={qrCodeSize * 1.4}/>
+          )}
           <View style={styles.qrCodeStyle}>
             <QRCode
-              value="Sample QR Code Value"
+              value={qrcode}
               size={qrCodeSize}
             />
           </View>
         </View>
         <StyledText variant="profileText" color={Colors.WHITE} style={styles.profileText}>{attendee.name}</StyledText>
-        <FoodWaveSVG foodWave={attendee.foodWave} />
+        <FoodWaveSVG foodWave={foodWave} />
       </View>}
     </SafeAreaView>
   );

screens/Shop.tsx

@@ -9,6 +9,10 @@ import {
 } from "@expo-google-fonts/press-start-2p";
 import AppLoading from "expo-app-loading";
 
+import Question1 from "../assets/SVGs/question_1.svg"
+import Question2 from "../assets/SVGs/purple-question_1.svg"
+import Question3 from "../assets/SVGs/pink-question_1.svg"
+
 import VerticalProgressBar from '../Components/VerticalProgressBar';
 import { getPoints } from "../api/getPoints";
 
@@ -47,14 +51,18 @@ const Shop: React.FC = () => {
             source={require("../assets/token.png")}
             style={styles.tokenImage}
           />
-          <Text style={styles.points}>x{userPoints}</Text>
+          <Text style={styles.myPoints}>x{userPoints}</Text>
         </View>
         <View style={styles.photoContainer}>
           <View style={styles.leftSide}>
             <View style={styles.photoWithPoints}>
-              <Image
-                source={{ uri: "https://via.placeholder.com/150" }}
+              {/* <Image
+                source={{ uri: "https://via.placeholder.com/100" }}
                 style={styles.smallPhoto}
+              /> */}
+              <Question1 //might have to consolidate this into single component
+                width={100}
+                height={100}
               />
               <Image
                 source={require("../assets/token.png")}
@@ -63,9 +71,9 @@ const Shop: React.FC = () => {
               <Text style={styles.points}>x{50}</Text>
             </View>
             <View style={styles.photoWithPoints}>
-              <Image
-                source={{ uri: "https://via.placeholder.com/150" }}
-                style={styles.smallPhoto}
+              <Question2
+                width={100}
+                height={100}
               />
               <Image
                 source={require("../assets/token.png")}
@@ -74,9 +82,9 @@ const Shop: React.FC = () => {
               <Text style={styles.points}>x{35}</Text>
             </View>
             <View style={styles.photoWithPoints}>
-              <Image
-                source={{ uri: "https://via.placeholder.com/150" }}
-                style={styles.smallPhoto}
+            <Question3
+              width={100}
+              height={100}
               />
               <Image
                 source={require("../assets/token.png")}
@@ -105,9 +113,9 @@ const styles = StyleSheet.create({
   },
   description: {
     fontSize: 15,
-    marginBottom: 10,
+    marginBottom: 20,
     fontFamily: "PressStart2P_400Regular",
-    color: Colors.YELLOW,
+    color: Colors.WHITE,
   },
   pointsContainer: {
     flexDirection: "row",
@@ -116,7 +124,13 @@ const styles = StyleSheet.create({
     marginBottom: 20,
   },
   points: {
-    fontSize: 15,
+    fontSize: 17,
+    marginRight: 10,
+    fontFamily: "PressStart2P_400Regular",
+    color: Colors.WHITE,
+  },
+  myPoints: {
+    fontSize: 30,
     marginRight: 10,
     fontFamily: "PressStart2P_400Regular",
     color: Colors.YELLOW,
@@ -134,13 +148,14 @@ const styles = StyleSheet.create({
   leftSide: {
     flex: 1, // Take up the remaining space
     justifyContent: "space-around",
-    marginLeft: 10,
+    // marginLeft: 10,
     // backgroundColor: 'blue',
   },
   photoWithPoints: {
     flexDirection: "row",
     alignItems: "center",
     marginBottom: 10,
+    // backgroundColor: 'red'
   },
   smallPhoto: {
     width: 100,
@@ -152,6 +167,7 @@ const styles = StyleSheet.create({
     alignItems: "flex-end",
     justifyContent: "center",
     marginVertical: 50,
+    marginRight: 20,
     // backgroundColor: 'red',
   },
   progressBar: {