Merge pull request #27 from ReflectionsProjections/newHome

updated home screen

Components/CurrentEventCard.tsx

@@ -0,0 +1,161 @@
+import React, { useState } from "react";
+import {
+  View,
+  StyleSheet,
+  Text,
+  Pressable,
+  Dimensions,
+  Image,
+} from "react-native";
+import {
+  useFonts,
+  Kufam_400Regular,
+  Kufam_700Bold,
+  Kufam_700Bold_Italic,
+} from "@expo-google-fonts/kufam";
+import CustomModal from "./CustomModal"; // Import the custom modal
+
+// import AppLoading from "expo-app-loading";
+import Colors from "../constants/Colors";
+
+import {formatTime} from "../navigation/DayEvent";
+
+import EvilIcons from "@expo/vector-icons/EvilIcons";
+
+import OngoingEventCard from "../assets/currentEventCard.svg";
+import NextEventCard from "../assets/nextEventCard.svg";
+
+const CurrentEventCard = ({
+  name,
+  startTime,
+  endTime,
+  location,
+  description,
+  points,
+}) => {
+  const [showModal, setShowModal] = useState(false);
+
+  let [fontsLoaded] = useFonts({
+    Kufam_400Regular,
+    Kufam_700Bold,
+    Kufam_700Bold_Italic,
+  });
+
+  //   if (!fontsLoaded) {
+  //     return <AppLoading />;
+  //   }
+
+  // Get the current time
+  const currentTime = new Date();
+
+  // Convert startTime and endTime to Date objects
+  const start = new Date(startTime);
+  const end = new Date(endTime);
+
+//   console.log("CURRENT", currentTime);
+//   console.log("START", start);
+//   console.log("END", end);
+  // Check if current time is within the event's duration
+  const isOngoing = currentTime >= start && currentTime <= end;
+
+  return (
+    <View style={styles.card}>
+      <Pressable onPress={() => setShowModal(true)} style={styles.pressable}>
+        <View style={styles.imageContainer}>
+          {isOngoing ? <OngoingEventCard /> : <NextEventCard />}
+          <View style={styles.eventDetails}>
+            <Text style={styles.name} numberOfLines={1} ellipsizeMode="tail">
+              {name}{" "}
+            </Text>
+            <View style={styles.info}>
+              <View style={styles.infoItem}>
+                <EvilIcons name="location" size={26} color={Colors.DARK_BLUE} />
+                <Text style={styles.infoText}>{location}</Text>
+              </View>
+              <View style={styles.infoItem}>
+                <EvilIcons name="clock" size={26} color={Colors.DARK_BLUE} />
+                <Text style={styles.infoText}>{formatTime(start)}</Text>
+              </View>
+              <View style={styles.infoItem}>
+                <Image
+                  source={require("../assets/token.png")}
+                  style={styles.tokenImage}
+                ></Image>
+                <Text style={styles.infoText}> x{points}</Text>
+              </View>
+            </View>
+            <Text
+              style={styles.description}
+              numberOfLines={2}
+              ellipsizeMode="tail"
+            >
+              {description}
+            </Text>
+          </View>
+        </View>
+      </Pressable>
+      <CustomModal
+        visible={showModal}
+        onClose={() => setShowModal(false)}
+        title={name}
+        location={location}
+        time={formatTime(start)}
+        points={points}
+        description={description}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    width: "100%",
+    marginBottom: 30,
+  },
+  pressable: {
+    flex: 1,
+    alignSelf: "center",
+  },
+  imageContainer: {
+    width: "100%",
+    height: 120,
+  },
+  eventDetails: {
+    position: "absolute",
+    marginLeft: 15,
+    marginTop: 60,
+    maxWidth: 320,
+    // backgroundColor: 'red'
+  },
+  name: {
+    fontSize: 20,
+    color: "black",
+    fontFamily: "Kufam_700Bold",
+  },
+  info: {
+    flexDirection: "row",
+  },
+  infoItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginHorizontal: 8,
+  },
+  infoText: {
+    color: Colors.DARK_BLUE,
+    fontSize: 16,
+    fontWeight: "bold",
+  },
+  tokenImage: {
+    width: 20,
+    height: 20,
+  },
+  description: {
+    fontSize: 14,
+    color: "black",
+    fontFamily: "Kufam_400Regular",
+    marginTop: 10,
+    flexWrap: "wrap",
+  },
+});
+
+export default CurrentEventCard;

components/EventCard.tsx

@@ -97,9 +97,6 @@ const styles = StyleSheet.create({
   imageContainer: {
     width: "100%",
     height: 120,
-    // justifyContent: 'center',
-    // alignItems: 'center',
-    // position: 'relative',
   },
   eventDetails: {
     position: "absolute",
@@ -114,23 +111,20 @@ const styles = StyleSheet.create({
   },
   info: {
     flexDirection: "row",
-    // justifyContent: "space-evenly",
   },
   infoItem: {
     flexDirection: "row",
     alignItems: "center",
-    // justifyContent: "space-evenly",
     marginHorizontal: 8,
   },
   infoText: {
-    // marginLeft: 4,
     color: Colors.DARK_BLUE,
     fontSize: 16,
     fontWeight: "bold",
   },
   tokenImage: {
-    width: 20, // Adjust the width as needed
-    height: 20, // Adjust the height as needed
+    width: 20, 
+    height: 20,
   },
   description: {
     fontSize: 14,

components/EventModal.tsx

@@ -73,8 +73,6 @@ const styles = StyleSheet.create({
   },
   info: {
     flexDirection: "row",
-    // justifyContent: "space-evenly",
-
   },
   infoItem: {
     flexDirection: "row",
@@ -83,7 +81,6 @@ const styles = StyleSheet.create({
     marginRight: 16,
   },
   infoText: {
-    // marginLeft: 4,
     color: Colors.DARK_BLUE,
     fontSize: 16,
     fontWeight: "bold",

navigation/DayEvent.tsx

@@ -3,7 +3,7 @@ import { Text, View, ScrollView, StyleSheet } from "react-native";
 import EventCard from "../Components/EventCard";
 import Colors from "../constants/Colors";
 
-const formatTime = (timestamp) => {
+export const formatTime = (timestamp) => {
   const date = new Date(timestamp); // Create a Date object from the timestamp string
   let hours = date.getUTCHours();
   let minutes = date.getUTCMinutes();
@@ -17,25 +17,27 @@ const formatTime = (timestamp) => {
   return formattedTime;
 };
 
-const DayEvent = ({ day, events }) => (
-  <View style={styles.container}>
-    <ScrollView
-      style={styles.scrollView}
-      contentContainerStyle={styles.contentContainer}
-    >
-      {events.map((event) => (
-        <EventCard
-          key={event.id}
-          name={event.name}
-          time={formatTime(event.startTime)}
-          location={event.location}
-          description={event.description}
-          points={event.points}
-        />
-      ))}
-    </ScrollView>
-  </View>
-);
+const DayEvent = ({ day, events }) => {
+  return (
+    <View style={styles.container}>
+      <ScrollView
+        style={styles.scrollView}
+        contentContainerStyle={styles.contentContainer}
+      >
+        {events.map((event) => (
+          <EventCard
+            key={event.id}
+            name={event.name}
+            time={formatTime(event.startTime)}
+            location={"location"}
+            description={event.description}
+            points={event.points}
+          />
+        ))}
+      </ScrollView>
+    </View>
+  );
+};
 
 const styles = StyleSheet.create({
   container: {