From 48e8d343be17209c14fca823040f2efb9c59ee97 Mon Sep 17 00:00:00 2001 From: Aryan Date: Tue, 30 Jul 2024 22:35:34 -0400 Subject: [PATCH 1/2] home page updated --- api/getCurrentNextEvent.tsx | 15 +++ assets/SVGs/home/home_bg.svg | 99 +++++++++++++++++++ assets/SVGs/home/ongoing_event.svg | 31 ++++++ assets/SVGs/home/token.svg | 24 +++++ package.json | 1 + screens/Home.tsx | 151 +++++++++++++++++++++++++---- 6 files changed, 300 insertions(+), 21 deletions(-) create mode 100644 api/getCurrentNextEvent.tsx create mode 100644 assets/SVGs/home/home_bg.svg create mode 100644 assets/SVGs/home/ongoing_event.svg create mode 100644 assets/SVGs/home/token.svg diff --git a/api/getCurrentNextEvent.tsx b/api/getCurrentNextEvent.tsx new file mode 100644 index 0000000..3388917 --- /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 977000d..56260cf 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..4d07d7c 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,148 @@ 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"; + + + +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(); + }, []); return ( - - - + + + + + {1==1 ? ( + + + ONGOING + + + Event + + + + + Location + + + + 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; From dbc1f4099c401e8389f929aafd0f881a47cd5fe4 Mon Sep 17 00:00:00 2001 From: Aryan Date: Fri, 2 Aug 2024 21:22:16 -0400 Subject: [PATCH 2/2] api connected home page --- api/getCurrentNextEvent.tsx | 2 +- screens/Home.tsx | 11 ++++++----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/api/getCurrentNextEvent.tsx b/api/getCurrentNextEvent.tsx index 3388917..4944a91 100644 --- a/api/getCurrentNextEvent.tsx +++ b/api/getCurrentNextEvent.tsx @@ -2,7 +2,7 @@ import axios from "axios"; export const getCurrentOrNext = async (token: string) => { try{ - const response = await axios.get('https://api.reflectionsprojections.org/events/currentOrNext/', { + const response = await axios.get('https://api.reflectionsprojections.org/events/currentOrNext', { headers: { Authorization: token } diff --git a/screens/Home.tsx b/screens/Home.tsx index 4d07d7c..e2e159f 100644 --- a/screens/Home.tsx +++ b/screens/Home.tsx @@ -26,6 +26,7 @@ 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"; @@ -50,29 +51,29 @@ const Home: React.FC = ({}) => { }; fetchCurrNext(); - }, []); + }, [token]); return ( - {1==1 ? ( + {currNextEvent && token ? ( ONGOING - Event + {currNextEvent.name} - Location + {currNextEvent.location} - Time + {currNextEvent.time}