Merge pull request #108 from agiledev-students-fall2023/Event_main

Event Schema
agiledev-students-fall2023 · Nov 26, 2023 · 8eabe17 · 8eabe17
2 parents 97c39fa + fcb7afd
commit 8eabe17
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 5 deletions.
diff --git a/back-end/Models/Event.js b/back-end/Models/Event.js
@@ -0,0 +1,29 @@
+const mongoose = reuqire('mongoose')
+const Schema = mongoose.Schema;
+
+const eventSchema = new Schema({
+    name: {
+        type: String,
+        required: true
+    },
+    description: {
+        type: String,
+        required: true
+    },
+    date: {
+        type: Date,
+        required: true
+    },
+    participants: [{
+        type: Schema.Types.ObjectId,
+        ref: 'User'
+    }],
+    expenses: [{
+        type: Schema.Types.ObjectId,
+        ref: 'Expense'
+    }]
+});
+
+const Event = mongoose.model('Event', eventSchema);
+
+module.exports = Event;
diff --git a/front-end/src/components/AddEvent.jsx b/front-end/src/components/AddEvent.jsx
@@ -86,6 +86,10 @@ function AddEvent({addEvent, onClose}){
         }
     }
 
+    const handleDeleteMember = (memberId) =>{
+
+    }
+
     useEffect(()=>{
         seteventData(prev => ({
             ...prev,

diff --git a/front-end/src/components/Events.jsx b/front-end/src/components/Events.jsx
@@ -13,6 +13,17 @@ function Events({ isDarkMode }) {
     const[selectedFilter, setSelectedFilter] = useState('all');
     const[filteredEvents, setFilteredEvents] = useState([]);
 
+    function reformatDate(dateStr) {
+        const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+        const date = new Date(dateStr);
+
+        const monthName = months[date.getMonth()];
+        const day = date.getDate();
+        const year = date.getFullYear();
+
+        return `${monthName} ${day} ${year}`;
+    }
+
     const backupData_events = 
     {
         "id":1, 
@@ -69,7 +80,7 @@ function Events({ isDarkMode }) {
             },
             {"id":6,
             "EventName":"Krajan",
-            "Date":"4/25/2023",
+            "Date":"04/25/2023",
             "balance":"$37.27",
             "description":"Vestibulum ac est lacinia nisi venenatis tristique. Fusce congue, diam id ornare imperdiet, sapien urna pretium nisl, ut volutpat sapien arcu sed augue. Aliquam erat volutpat.",
             "members":[{"names":"Kevina Birth"},
@@ -78,8 +89,8 @@ function Events({ isDarkMode }) {
         }]
     }
 
-    useEffect(() => {
         // Toggle the 'body-dark-mode' class on the body element
+    useEffect(() => {
         if (isDarkMode) {
             document.body.classList.add('body-dark-mode');
         } else {
@@ -218,12 +229,12 @@ function Events({ isDarkMode }) {
                 <ul>
                     {filteredEvents.map(event =>(
                         <li key = {event.id} className="event-list">
+                            <div className="Event-date">
+                                {reformatDate(event.Date)}
+                            </div>
                             <div className="Event-name" style={{ marginBottom: '5px' }}>
                                 <span>{event.EventName}</span>
                             </div>
-                            <div className="Event-date">
-                                <span>{event.Date}</span>
-                            </div>
                             <Link to='/event'>
                             <button onClick={() => EventClick(event.id)}>View Event</button>
                             </Link>

diff --git a/front-end/src/styles/Events.css b/front-end/src/styles/Events.css
@@ -64,6 +64,11 @@
     @apply mt-6
 }
 
+.Event-date {
+    @apply inline-block;
+    @apply w-12 p-1 rounded-2xl bg-slate-100 break-words text-center opacity-60;
+}
+
 .event-list button {
     @apply w-28 h-8 rounded-lg bg-cyan-100 hover:bg-orange-100 active:bg-orange-200;
 }