diff --git a/api/getCurrentNextEvent.tsx b/api/getCurrentNextEvent.tsx
new file mode 100644
index 0000000..4944a91
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/assets/SVGs/home/home_bg.svg b/assets/SVGs/home/home_bg.svg
new file mode 100644
index 0000000..64077a8
--- /dev/null
+++ b/assets/SVGs/home/home_bg.svg
@@ -0,0 +1,99 @@
+
diff --git a/assets/SVGs/home/ongoing_event.svg b/assets/SVGs/home/ongoing_event.svg
new file mode 100644
index 0000000..bef253c
--- /dev/null
+++ b/assets/SVGs/home/ongoing_event.svg
@@ -0,0 +1,31 @@
+
diff --git a/assets/SVGs/home/token.svg b/assets/SVGs/home/token.svg
new file mode 100644
index 0000000..0c5b032
--- /dev/null
+++ b/assets/SVGs/home/token.svg
@@ -0,0 +1,24 @@
+
diff --git a/package.json b/package.json
index 99bbc43..9c7f59f 100644
--- a/package.json
+++ b/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",
diff --git a/screens/Home.tsx b/screens/Home.tsx
index 50628c3..e2e159f 100644
--- a/screens/Home.tsx
+++ b/screens/Home.tsx
@@ -1,4 +1,4 @@
-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";
@@ -6,39 +6,149 @@ 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;
const Home: React.FC = ({}) => {
- const dispatch = useAppDispatch();
- const navigation = useNavigation();
+ 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 (
-
-
-
+
+
+
+
+ {currNextEvent && token ? (
+
+
+ ONGOING
+
+
+ {currNextEvent.name}
+
+
+
+
+ {currNextEvent.location}
+
+
+
+ {currNextEvent.time}
+
+
+
+ x{50}
+
+
+
+ ): (
+ loading...
+ )}
+
+
);
};
+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;