Merge pull request #24 from ReflectionsProjections/dev/Bahl-Aryan/hom…

…e-page

Dev/bahl aryan/home page

api/getCurrentNextEvent.tsx

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

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@expo-google-fonts/inter": "^0.2.3",
     "@expo-google-fonts/kufam": "^0.2.3",
+    "@expo-google-fonts/press-start-2p": "^0.2.3",
     "@gluestack-style/react": "^1.0.52",
     "@gluestack-ui/config": "^1.1.18",
     "@gluestack-ui/themed": "^1.1.30",

screens/Home.tsx

@@ -1,44 +1,154 @@
-import React, {useEffect} from "react";
+import React, {useEffect, useState} from "react";
 import { GluestackUIProvider, Text, Box } from "@gluestack-ui/themed";
 import { Button, ButtonText, ButtonIcon, AddIcon } from "@gluestack-ui/themed";
 import { useRoute } from "@react-navigation/native";
 import { logout } from "../redux/actions";
 import { useAppDispatch, useAppSelector } from '../redux/hooks';
 import { useNavigation } from "@react-navigation/native";
 import { StackNavigationProp } from "@react-navigation/stack";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Dimensions, View, StyleSheet } from 'react-native'
+import { RootState } from "../redux/store";
+import EvilIcons from "@expo/vector-icons/EvilIcons";
+import Colors from "../constants/Colors";
+import {
+  useFonts,
+  PressStart2P_400Regular,
+} from "@expo-google-fonts/press-start-2p";
 
 type RootStackParamList = {
   Home: undefined;
   Login: undefined;
 };
 
+import OngoingEvent from "../assets/SVGs/home/ongoing_event.svg"
+import Background from "../assets/SVGs/home/home_bg.svg"
+import Token from "../assets/SVGs/home/token.svg"
+
+import { getCurrentOrNext } from "../api/getCurrentNextEvent";
+import { getEvents } from "../api/getEvents";
+
+
+
+const {width, height} = Dimensions.get("window")
 type HomeScreenNavigationProp = StackNavigationProp<RootStackParamList, 'Home'>;
 
 const Home: React.FC = ({}) => {
-  const dispatch = useAppDispatch();
-  const navigation = useNavigation<HomeScreenNavigationProp>();
+  let [fontsLoaded] = useFonts({
+    PressStart2P_400Regular
+  });
+  const token = useAppSelector((state: RootState) => state.token);
+  const [currNextEvent, setCurrNextEvent] = useState(null);
+
+  useEffect(() => {
+    const fetchCurrNext = async() => {
+      try {
+        const event = await getCurrentOrNext(token);
+        setCurrNextEvent(event);
+      } catch (error) {
+        console.error('error fetching current/next event:', error);
+      }
+    };
 
-  const handleLogOut = () => {
-    console.log("logging out")
-    dispatch(logout());
-    navigation.navigate('Login');
-  }
+    fetchCurrNext();
+  }, [token]);
 
   return (
-    <Box width="100%" height="100%" justifyContent="center" alignItems="center">
-      <Button
-        size="md"
-        variant="solid"
-        action="primary"
-        isDisabled={false}
-        isFocusVisible={false}
-        onPress={handleLogOut}
-      >
-        <ButtonText>Logout</ButtonText>
-        <ButtonIcon as={AddIcon} />
-      </Button>
-    </Box>
+    <SafeAreaView style = {{flex: 1, position: 'relative'}}>
+      <Background width={width} height={height} style={{position: 'absolute'}}/>
+      <View style={{position: 'relative', width:'100%', height:'100%'}}>
+        <OngoingEvent style={{position: 'absolute', top:'25%', left:'10%'}} />
+        {currNextEvent && token ? (
+          <View style={styles.eventDataContainer}>
+            <View style={styles.tabValue}>
+              <Text style = {styles.tabText}>ONGOING</Text>
+            </View>
+            <View style={styles.header}>
+              <Text style={styles.title}>{currNextEvent.name}</Text>
+            </View>
+            <View style={styles.info}>
+              <View style={styles.infoItem}>
+                <EvilIcons name="location" size={26} color={Colors.WHITE} />
+                <Text style={styles.infoText}>{currNextEvent.location}</Text>
+              </View>
+              <View style={styles.infoItem}>
+                <EvilIcons name="clock" size={26} color={Colors.WHITE} />
+                <Text style={styles.infoText}>{currNextEvent.time}</Text>
+              </View>
+              <View style={styles.infoItem}>
+                <Token width={30} height={30} style={{marginRight: 5, marginLeft: 40}}/>
+                <Text style={styles.badgeText}>x{50}</Text>
+              </View>
+            </View>
+          </View>
+        ): (
+          <Text>loading...</Text>
+        )}
+      </View>
+    </SafeAreaView>
   );
 };
 
+const styles = StyleSheet.create({
+  eventDataContainer: {
+    position: 'absolute',
+    top: '25%', // Adjust according to the layout of the SVG
+    left: '10%', // Adjust according to the layout of the SVG
+  },
+  tabValue: {
+    marginTop: 10,
+    marginLeft: 25
+  },
+  tabText: {
+    fontSize: 12,
+    color: Colors.DARK_BLUE,
+    fontFamily: "PressStart2P_400Regular"
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems:'center',
+    marginTop: 35,
+    marginLeft: 20
+  },
+  title: {
+    fontSize: 25,
+    color: Colors.WHITE,
+    fontFamily: "Kufam_700Bold_Italic",
+  },
+  info: {
+    flexDirection: "row",
+    marginTop: 10,
+    marginLeft: 15,
+    justifyContent: "flex-start",
+    flexWrap: "wrap",
+  },
+  infoItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginRight: 15,
+  },
+  infoText: {
+    marginLeft: 4,
+    color: Colors.WHITE,
+    fontSize: 16,
+    fontWeight: "bold",
+  },
+  badge: {
+    flexDirection: 'row',
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  tokenImage: {
+    width: 2,
+    height: 2,
+    marginRight: 15
+  },
+  badgeText: {
+    fontSize: 15,
+    marginRight: 20,
+    fontFamily: "PressStart2P_400Regular",
+    color: Colors.YELLOW,
+  },
+})
 export default Home;