Merge pull request #56 from devsoc-unsw/feature/event-management

Feature/event management

backend/src/config/storage.ts

@@ -42,7 +42,7 @@ export const uploadFile = async (
     throw new Error(error.message);
   }
   console.log(data);
-  return data.path;
+  return (await getFileUrl(data.path)).publicUrl;
 };
 
 export const getFile = async (path: string) => {
@@ -62,7 +62,7 @@ export const getFileUrl = async (path: string) => {
     throw new Error('Storage client not initialised.');
   }
 
-  const { data } = await storageClient.from('images').getPublicUrl(path);
+  const { data } = storageClient.from('images').getPublicUrl(path);
 
   return data;
 };

backend/src/index.ts

@@ -745,15 +745,8 @@ app.put('/event', async (req: TypedRequest<UpdateEventBody>, res: Response) => {
         description: req.body.description,
       },
     });
-    // we are choosing to send the image back as a url
-    let imageFile;
-    try {
-      imageFile = await getFileUrl(event.banner); // getFile(event.banner) if we wanted raw file
-    } catch (error) {
-      return res.status(400).json({ error: (error as Error).message });
-    }
 
-    return res.status(200).json({ ...event, banner: imageFile });
+    return res.status(200).json(eventRes);
   } catch (e) {
     return res.status(400).json({ message: 'Invalid event input' });
   }

frontend/src/Settings/SettingsPage/EventManagementPage/EventManagementPage.tsx

@@ -2,33 +2,47 @@ import { Link, useLocation } from 'react-router';
 import Button from '../../../Button/Button';
 import { ButtonIcons, ButtonVariants } from '../../../Button/ButtonTypes';
 import { SettingsPage } from '../SettingsPage';
-import { useEffect } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import classes from './EventManagementPage.module.css';
+import { UserContext } from '../../../UserContext/UserContext';
+
+interface SocietyEvent {
+  banner: string,
+  description: string,
+  id: number,
+  startDateTime: Date,
+  endDateTime: Date,
+  location: string,
+  name: string,
+  societyId: number,
+}
 
 export function EventManagementPage() {
   const location = useLocation();
-  const { creationSuccess } = location.state;
+  const { creationSuccess } = location.state ? location.state : { creationSuccess: false };
+  const { society } = useContext(UserContext);
+  const [events, setEvents] = useState<SocietyEvent[]>([]);
 
   useEffect(() => {
-    const getEvents = async () => {
-      const events = await fetch(
-        'http://localhost:5180/society/events?' +
-          new URLSearchParams({
-            id: '1',
-          }),
-        {
-          method: 'GET',
-          credentials: 'include',
-        }
-      );
-
-      if (events.ok) {
-        const eventsJson = await events.json();
-        console.log(eventsJson);
-      }
-    };
-    getEvents();
-  }, []);
+    if(society) {
+      const getEvents = async () => {
+        const events = await fetch(
+          'http://localhost:5180/society/events?' +
+            new URLSearchParams({
+              id: String(society?.id),
+            }),
+          {
+            method: 'GET',
+            credentials: 'include',
+          }
+        );
+
+          const eventsJson: SocietyEvent[] = await events.json();
+          setEvents(eventsJson.map((event) => {return {...event, startDateTime: new Date(event.startDateTime), endDateTime: new Date(event.endDateTime)}}));
+      };
+      getEvents();
+    }
+  }, [society]);
 
   return (
     <SettingsPage
@@ -57,7 +71,15 @@ export function EventManagementPage() {
             <th>Where</th>
           </tr>
         </thead>
-        <tbody></tbody>
+        <tbody>
+          {events && events.map((event) => 
+            <tr>
+              <td>{event.name}</td>
+              <td>{event.endDateTime.toLocaleDateString('en-GB')}</td>
+              <td>{event.location}</td>
+            </tr>
+          )}
+        </tbody>
       </table>
     </SettingsPage>
   );

frontend/src/Settings/SocietyDropdown/SocietyDropdown.module.css

@@ -1,7 +1,3 @@
-.dropdown {
-
-}
-
 .container {
     position: absolute;
     right: 0;