Feature/club dashboard events

backend/controllers/clubsController.js

@@ -1,3 +1,4 @@
+import supabaseConnection from '../database.js';
 import clubs from '../models/clubs.js';
 
 const clubsController = {
@@ -61,5 +62,19 @@ const clubsController = {
       res.status(500).json({ message: 'Internal Server Error' });
     }
   },
+
+  getEventsClub: async (req, res) => {
+    try {
+      const clubId = req.params?.id;
+      if (!clubId) {
+        return res.status(400).json({ message: 'Club ID is required' });
+      }
+      const events = await supabaseConnection.from('events').select('*').eq('hostClubId', clubId);
+      res.status(200).json(events)
+    } catch (error) {
+      console.error('Error updating club info:', error);
+      res.status(500).json({ message: 'Internal Server Error' });
+    }
+  }
 };
-export default clubsController;
+export default clubsController;

backend/routes/clubsRouter.js

@@ -6,6 +6,11 @@ const router = Router();
 router.get('/', clubsController.getAllClubs);
 router.get('/me/:id', clubsController.getClubByAccountId);
 router.get('/:id', clubsController.getClubById);
+<<<<<<< Updated upstream
 router.patch('/:id', clubsController.updateClub);
+=======
+router.patch(':id', clubsController.updateClub);
+router.get('/:id/events', clubsController.getEventsClub);
+>>>>>>> Stashed changes
 
 export default router;

frontend/app/dashboard/index.tsx

@@ -0,0 +1,13 @@
+import { useState, useEffect } from "react";
+import { FlatList, Text, View } from "react-native"; 
+import { useAuth } from "@/context";
+import ClubDashboardEventsList from "../../components/club/dashboard/ClubDashboardEventsList";
+export default function Dashboard() {
+
+  return (
+    <View>
+      <ClubDashboardEventsList clubId={4}/>
+    </View>
+  );
+
+}

frontend/app/index.tsx

@@ -1,42 +1,32 @@
 import { Text, View } from "react-native";
-import { useState, useEffect } from "react";
-import { supabase } from "../lib/supabase";
-import { Session } from "@supabase/supabase-js";
+import { SafeAreaView } from "react-native-safe-area-context";
+// import Feed from "../components/feed/feed.js";
 import { useAuth } from "../context/AuthContext";
 import Feed from "../components/feed/feed.js"
 import { SafeAreaView } from "react-native-safe-area-context";
 
-
 export default function Index() {
   const { session, accountType } = useAuth();
 
   return (
-    <SafeAreaView>
-      <View
-        style={{
-          flex: 1,
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-      >
+    <SafeAreaView style={{ flex: 1 }}>
+      <View style={{ flex: 1, padding: 16 }}>
         {session && session.user ? (
-          <View>
+          <>
             <Text style={{ fontSize: 20, fontWeight: "bold" }}>
               Welcome, {session.user.email}!
             </Text>
-            <Text style={{ fontSize: 16 }}>
+            <Text style={{ fontSize: 16, marginBottom: 12 }}>
               Account Type: {accountType === 'club' ? 'Club Account' : 'User Account'}
             </Text>
-            <Feed></Feed>
-
-          </View>
+            <Feed />
+          </>
         ) : (
           <Text style={{ fontSize: 20, fontWeight: "bold" }}>
             Please log in or sign up.
           </Text>
         )}
       </View>
     </SafeAreaView>
-
   );
-}
+}

frontend/components/club/dashboard/ClubDashboardEventCard.js

@@ -0,0 +1,73 @@
+import {Button, Text, TouchableHighlight, View, StyleSheet} from "react-native";
+
+export function ClubDashboardEventCard({ data }) {
+  const { id, title, description, startTimestamp, endTimestamp} = data;
+
+  const handleEdit = (e) => {
+    console.log("trying to edit event:" + id);
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.infoContainer}>
+        <View style={styles.headerContainer}>
+          <Text style={styles.title}>{title}</Text>
+        </View>
+        <Text style={styles.description}>{description}</Text>
+        <Text style={styles.timestamp}>
+            {formatTimestamp(startTimestamp)} - {formatTimestamp(endTimestamp)}
+        </Text>
+      </View>
+      <TouchableHighlight onPress={handleEdit}>
+        <Text>Edit</Text>
+      </TouchableHighlight>
+    </View>
+  );
+}
+
+function formatTimestamp(ts) {
+  const date = new Date(ts);
+  return date.toLocaleString();
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 12,
+    borderRadius: 10,
+    backgroundColor: '#fff',
+    marginVertical: 6,
+    marginHorizontal: 12,
+    shadowColor: '#000',
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+    alignSelf: 'stretch',
+  },
+  headerContainer: {
+    flex: 1,
+    flexDirection: "row",
+    flexWrap: 'wrap',
+    gap: 10,
+    alignItems: 'center',
+    marginBottom: 4,
+
+    fontSize: 30,
+  },
+  title: {
+    fontWeight: 'bold',
+    fontSize: 20
+  },
+  subtitle: {
+    fontWeight: 'bold',
+    color: 'grey'
+  },
+  description: {
+    fontSize: 14,
+    color: '#444',
+    marginBottom: 6,
+  },
+  timestamp: {
+    fontSize: 12,
+    color: '#888',
+  },
+});

frontend/components/club/dashboard/ClubDashboardEventsList.js

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+import { View, Text, FlatList} from "react-native";
+import {ClubDashboardEventCard} from "./ClubDashboardEventCard";
+
+//TODO: make it so this page is ONLY accessible to the account that's logged in.
+export default function ClubDashboardEventsList({clubId}) {
+
+  const [eventData, setEventData] = useState([]);
+
+  const fetchEventData = async () => {
+    const res = await fetch(`http://localhost:3000/api/clubs/${clubId}/events`);
+    if(res.ok) {
+      const body = await res.json();
+      setEventData(body.data);
+    }
+  }
+
+  useEffect(() => {
+    fetchEventData();
+  }, []);
+
+  const renderListItem = ({item}) => {
+    return (
+      <ClubDashboardEventCard
+        data={item}
+      />
+    );
+  }
+
+  return (
+    <FlatList
+      data={eventData}
+      ListEmptyComponent={
+        <Text>Getting events...</Text>
+      }
+      renderItem={renderListItem}
+    />
+  );
+}