Merge pull request #53 from hack4impact-calpoly/iss25

feat: calendar load events (backend) / add event (frontend)

README.md

@@ -31,6 +31,7 @@ The SLO Beaver Brigade team consists of {#} Cal Poly students. Over the course o
 - [HanYu Wu](https://www.linkedin.com/) - Software Developer
 - [Logan Costello](www.linkedin.com/in/logancostello) - Software Developer
 - [Noah Giboney](https://www.linkedin.com/in/noah-giboney-896847261/) - Software Developer
+- [Shawn Gill](https://www.linkedin.com/in/shawngill404/) - Software Developer
 
 ## Getting Started And Contributing
 

src/app/admin/events/page.tsx

@@ -1,9 +1,26 @@
-const dashboard = () => {
+import React from 'react'
+import Calendar from '@components/Calendar'
+import style from "@styles/calendar/eventpage.module.css"
+import { Calendarify, getEvents } from 'app/calendar/page';
+
+
+export default async function dashboard(){
+  const events = await getEvents();
+  const calEvent = events.map(Calendarify)
+
   return (
-    <div>
-      <h2>Event Admin Page</h2>
+    <div className={style.page}>
+        <header className={style.header}>
+            <h1>Event Calendar</h1>
+        </header>
+        <main>
+            <div>
+                <Calendar events={calEvent} admin={true}
+                />
+            </div>
+        </main>
     </div>
-  );
+  )
 };
 
-export default dashboard;
+

src/app/api/events/route.ts

@@ -9,7 +9,6 @@ export async function GET() {
 	try {
 			// query for all events and sort by date
 	    const events = await Event.find().sort({ date: -1 }).orFail()
-      console.log(events)
 			// returns all events in json format or errors
 	    return NextResponse.json(events, { status: 200 });
 	} catch (err) {

src/app/calendar/page.tsx

@@ -1,25 +1,60 @@
-'use client'
 import React from 'react'
 import Calendar from '@components/Calendar'
+import {IEvent} from '@database/eventSchema'
 import style from "@styles/calendar/eventpage.module.css"
 
+//gets events from api endpoint
+export async function getEvents() {
+  const res = await fetch(`http://localhost:3000/api/events`,
+  {
+    cache:"no-store"
+  });
 
+  if(res.ok){
+    return res.json()
+  }
+  return null
+}
 
+  //converts an event into a FullCalendar event
+  export function Calendarify(event : IEvent) {
+    //convert events into plain object before passing into client component
+    const calEvent = JSON.parse(JSON.stringify(event));
 
-export default function Events() {
-    return (
-        <div className={style.page}>
-            <header className={style.header}>
-                <h1>Event Calendar</h1>
-            </header>
-            <main>
-                <div>
-                    <Calendar 
-                    />
-                </div>
-            </main>
-
-
-        </div>
-    )
+    calEvent.title = event.eventName;
+    delete calEvent.eventName;
+    calEvent.start = event.startTime;
+    calEvent.end = event.endTime;
+
+    if(event.eventName == "Beaver Walk"){
+      calEvent.backgroundColor = "#8A6240"
+      calEvent.borderColor = "#4D2D18"
+      calEvent.textColor = "#fff"
+    }
+    else{
+      calEvent.backgroundColor = "#0077b6"
+      calEvent.borderColor = "#03045e"
+      calEvent.textColor = "#fff"
+    }
+
+    return calEvent
+  }
+
+export default async function Events() {
+  const events = await getEvents();
+  const calEvent = events.map(Calendarify)
+
+  return (
+    <div className={style.page}>
+        <header className={style.header}>
+            <h1>Event Calendar</h1>
+        </header>
+        <main>
+            <div>
+                <Calendar events={calEvent} admin={false}
+                />
+            </div>
+        </main>
+    </div>
+  )
 }

src/app/components/Calendar.tsx

@@ -1,47 +1,95 @@
-import React from 'react'
-import FullCalendar from '@fullcalendar/react'
-import dayGridPlugin from '@fullcalendar/daygrid' 
-import ineractionPlugin, {Draggable, DropArg} from '@fullcalendar/interaction'
-import timeGridPlugin from '@fullcalendar/timegrid'
-import listPlugin from "@fullcalendar/list"
-import {IEvent} from '@database/eventSchema'
-import style from "@styles/calendar/calendar.module.css"
-import styled from 'styled-components'
-import bootstrap5Plugin from '@fullcalendar/bootstrap5';
+"use client";
+import React, { useState } from "react";
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import ineractionPlugin, {
+  Draggable,
+  DropArg,
+} from "@fullcalendar/interaction";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import listPlugin from "@fullcalendar/list";
+import style from "@styles/calendar/calendar.module.css";
+import { Schema } from "mongoose";
+import bootstrap5Plugin from "@fullcalendar/bootstrap5";
+import "bootstrap/dist/css/bootstrap.css";
+import "bootstrap-icons/font/bootstrap-icons.css";
+import CreateEditEvent from "./CreateEditEvent";
 
-import 'bootstrap/dist/css/bootstrap.css';
-import 'bootstrap-icons/font/bootstrap-icons.css'; // needs additional webpack config!
+//FullCalendar Schema
+export type FCEvent = {
+  title: string;
+  location: string;
+  description: string;
+  wheelchairAccessible: boolean;
+  spanishSpeakingAccommodation: boolean;
+  start: Date;
+  end: Date;
+  startTime: Date;
+  endTime: Date;
+  backgroundColor: string;
+  borderColor: string;
+  textColor: string;
+  volunteerEvent: boolean;
+  groupsAllowed: number[];
+  attendeeIds: Schema.Types.ObjectId[];
+};
 
+export default function Calendar(props: { events: FCEvent[]; admin: Boolean }) {
+  const buttonType = { myCustomButton: {} };
+  const [showModal, setShowModal] = useState(false);
 
-export default function Calendar () {
-
-    return (
-        <div>
-            <div className={style.wrapper}>
-                <FullCalendar
-                    plugins={[ dayGridPlugin, ineractionPlugin, timeGridPlugin, bootstrap5Plugin ]}
-                    headerToolbar={{
-                        left: 'prev,next today',
-                        center: 'title',
-                        right: 'dayGridMonth,timeGridWeek,timeGridDay'
-                    }}
-                    events={{}}
-                    nowIndicator={true}
-                    editable={true}
-                    droppable={true}
-                    selectable={true}
-                    selectMirror={true}
-                    // dateClick={{}}
-                    // drop={}
-                    // eventClick={}
-                    initialView="dayGridMonth"
-                    contentHeight = "600px"
-                    themeSystem='bootstrap5'
-
-                    />
-            </div>
-
-        </div>
-    )
-
-}
+  if (props.admin) {
+    buttonType.myCustomButton = {
+      text: "Add Event",
+      click: function () {
+        setShowModal(true);
+
+      },
+      hint: "Add Event Button",
+    };
+  } else {
+    buttonType.myCustomButton = {
+      text: "Sign Up",
+      click: function () {
+        alert("Sign Up!");
+      },
+      hint: "Sign Up Button",
+    };
+  }
+
+  return (
+    <div>
+      <div className={style.wrapper}>
+        <CreateEditEvent create={false} showModal={showModal} setShowModal={setShowModal}></CreateEditEvent>
+        <FullCalendar
+          customButtons={buttonType}
+          plugins={[
+            dayGridPlugin,
+            ineractionPlugin,
+            timeGridPlugin,
+            bootstrap5Plugin,
+            listPlugin
+          ]}
+          headerToolbar={{
+            left: "prev,next today",
+            center: "title",
+            right: "myCustomButton dayGridMonth,listMonth",
+          }}
+          events={props.events}
+          nowIndicator={true}
+          editable={true}
+          droppable={true}
+          selectable={true}
+          selectMirror={true}
+          // dateClick={{}}
+          // drop={}
+          // eventClick={}
+          initialView="dayGridMonth"
+          contentHeight="650px"
+          themeSystem="bootstrap5"
+          eventDisplay="block"
+        />
+      </div>
+    </div>
+  );
+}