useEvents fix/incorporation

components/Work/Events/PastEvent.tsx

@@ -13,6 +13,7 @@ interface Props {
 }
 
 const PastEvent : React.FC<Props> = ({ event }) => {
+
   return (
     <Card
         p={0}

components/Work/Events/PastEvents.tsx

@@ -1,30 +1,11 @@
 import { VStack, Text, HStack } from '@chakra-ui/react'
 import React from 'react'
-import { Event } from '../../../types/event'
+import useEvents from '../../../hooks/useEvents'
 import PastEvent from './PastEvent'
 
-const pastEvents : Event[] = [
-    {
-        title: 'Food Drive',
-        type: 'Supply School Drive',
-        month: 'Aug',
-        date: "21",
-        day: "Sat",
-        time: '10:00 AM',
-        imageURL: 'https://via.placeholder.com/75'
-    },
-    {
-        title: 'Food Drive',
-        type: 'Supply School Drive',
-        month: 'Aug',
-        date: "21",
-        day: "Sat",
-        time: '10:00 AM',
-        imageURL: 'https://via.placeholder.com/75'
-    },
-]
-
 const PastEvents = () => {
+    const { pastEventData } = useEvents(""); 
+
   return (
     <VStack
         alignItems='flex-start'
@@ -39,7 +20,7 @@ const PastEvents = () => {
             w="100%"
         >
             {
-                pastEvents.map((event, index) => (
+                pastEventData.map((event, index) => (
                     <PastEvent 
                         key={index}
                         event={event}

components/Work/Events/UpcomingEvents.tsx

@@ -2,30 +2,11 @@ import React from 'react'
 
 import { Button, HStack, Image, Text, VStack, Box } from '@chakra-ui/react'
 import { FaClock, FaMapMarkerAlt } from 'react-icons/fa'
-
-interface Event {
-    title: string;
-    type: string;
-    day: string;
-    month: string;
-    date: number;
-    time: string;
-    location: string;
-    image: string;
-}
-
-const event : Event = {
-    title: 'Food Drive',
-    type: 'Supply School Drive',
-    month: 'Aug',
-    date: 21,
-    day: "Sat",
-    time: '10:00 AM',
-    location: '1234 Main St, New York, NY',
-    image: 'https://via.placeholder.com/150'
-}
+import useEvents from '../../../hooks/useEvents'
 
 const UpcomingEvents = () => {
+  const { upcomingEventData } = useEvents(""); 
+  const event = upcomingEventData[0]
   return (
     <VStack
       alignItems='flex-start'
@@ -41,7 +22,7 @@ const UpcomingEvents = () => {
           position='relative'
         >
           <Image 
-            src={event.image}
+            src={event.imageURL}
             alt='event image'
           />
           <VStack

data/learn.ts

@@ -1,5 +1,6 @@
 import { Timestamp } from "firebase/firestore";
 import { Goal, LessonData } from '../hooks/types'
+import { Event } from '../types/event'
 const now = new Date();
 
 export const lessonData = [
@@ -127,4 +128,40 @@ export const lessonDataInfo: LessonData = {
     title: 'Week 1 - Budget',
     id: '1234132',
     text: "TEST TEST TEST TEST",
-}
+}
+
+export var pastEventData: Event[] = [
+    {
+        title: 'Food Drive',
+        type: 'Supply School Drive',
+        month: 'Aug',
+        date: "21",
+        day: "Sat",
+        time: '10:00 AM',
+        location: '1234 Main St, New York, NY',
+        imageURL: 'https://via.placeholder.com/75'
+    },
+    {
+        title: 'Food Drive',
+        type: 'Supply School Drive',
+        month: 'Aug',
+        date: "21",
+        day: "Sat",
+        time: '10:00 AM',
+        location: '1234 Main St, New York, NY',
+        imageURL: 'https://via.placeholder.com/75'
+    },
+]
+
+export var upcomingEventData: Event[] = [
+    {
+        title: 'Food Drive',
+        type: 'Supply School Drive',
+        month: 'Aug',
+        date: "21",
+        day: "Sat",
+        time: '10:00 AM',
+        location: '1234 Main St, New York, NY',
+        imageURL: 'https://via.placeholder.com/150'
+    }
+]

hooks/useEvents.ts

@@ -3,20 +3,25 @@ import { useCollectionData } from "react-firebase-hooks/firestore"
 import { collection, CollectionReference, doc, updateDoc } from "firebase/firestore"
 
 import { Event } from "../types/event"
-import { eventGData } from "../data/learn"
+import { pastEventData, upcomingEventData } from "../data/learn"
 
 const useEvents = (classId: string) => {
 
-    const [ event, loading, error] = useCollectionData<Event>(collection(db, 'classes', classId, 'events') as CollectionReference<Event>);
+    // const [ event, loading, error] = useCollectionData<Event>(collection(db, 'classes', classId, 'events') as CollectionReference<Event>);
 
-    const getEventData = (eventId: string) => {
-        return eventGData;
+    const getPastEventData = (eventId: string) => {
+        return pastEventData;
+    }
+
+    const getUpcomingEventData = (eventId: string) => {
+        return upcomingEventData;
     }
 
     return {
-        event,
-        loading,
-        eventGData
+        // event,
+        // loading,
+        pastEventData,
+        upcomingEventData
     }
 }
 

types/event.ts

@@ -6,4 +6,5 @@ export interface Event {
     day: string;
     date: string;
     imageURL: string;
+    location: string;
 }