From d709b31d3f9c494f2a35109e6d2b0f0cf6f4ccfe Mon Sep 17 00:00:00 2001
From: da314jones <dwaynejones@pursuit.org>
Date: Fri, 4 Aug 2023 18:49:37 -0400
Subject: [PATCH] completeed

---
 src/App.jsx                     | 205 +++-----------------------------
 src/Components/Attendee.jsx     |  28 ++++-
 src/Components/Attendees.jsx    |  26 +++-
 src/Components/Event.jsx        |  46 ++++++-
 src/Components/Footer.jsx       |  10 +-
 src/Components/Header.jsx       |   4 +-
 src/Components/NewEventForm.jsx |  99 ++++++++++++++-
 7 files changed, 221 insertions(+), 197 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 1e06b57..f5a012b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,78 +1,20 @@
 import { useState } from "react";
 import eventsData from "./data";
-import { v1 as generateUniqueID } from "uuid";
-// import Attendees from "./Attendees";
-// import Event from "./Components/Event";
-// import Footer from "./Components/Footer";
-// import Header from "./Components/Header";
-// import NewEventForm from "./Components/NewEventForm";
+import Event from "./Components/Event";
+import Footer from "./Components/Footer";
+import Header from "./Components/Header";
+import NewEventForm from "./Components/NewEventForm";
 
 function App() {
-  const [events, setEvents] = useState(eventsData);
-
-  const [showAttendees, setShowAttendees] = useState(false);
-
-  const [selectOption, setSelectOption] = useState("");
-
-  const [newEvent, setNewEvent] = useState({
-    id: "",
-    eventType: "",
-    name: "",
-    organizer: "",
-    eventImage: "",
-    date: "",
-    people: [],
-  });
-
-  function addEvent() {
-    const createEvent = {
-      id: generateUniqueID(),
-      eventType: selectOption,
-      name: newEvent.name,
-      organizer: newEvent.organizer,
-      eventImage: newEvent.eventImage || "https://loremflickr.com/640/480/",
-      date: newEvent.date,
-      people: [],
-    };
-    handleAddEvent(createEvent);
-  }
-
-  function handleSelectChange(e) {
-    setSelectOption(e.target.value);
-  }
-
-  function handleSubmit(e) {
-    e.preventDefault();
-    addEvent();
-    resetEventForm();
-  }
-
-  function handleTextChange(e) {
-    setNewEvent({
-      ...newEvent,
-      [e.target.id]: e.target.value,
-    });
-  }
-
-  function resetEventForm() {
-    setNewEvent({
-      id: "",
-      eventType: "",
-      name: "",
-      organizer: "",
-      eventImage: "",
-      date: "",
-    });
-    setSelectOption("");
-  }
+  const [events, setEvents] = useState(eventsData.map((event) => ({ ...event, showAttendees: false }))
+  );
 
+  
   function handleAddEvent(event) {
     setEvents([event, ...events]);
   }
 
-  function toggleEventAttendees() {
-    setShowAttendees(!showAttendees);
-  }
+ 
 
   function updateEventAttendance(eventId, attendeeId) {
     const eventArray = [...events];
@@ -88,133 +30,20 @@ function App() {
     setEvents(eventArray);
   }
 
+function updateEvents(updateEvents) {
+  setEvents(updateEvents);
+}
+
   return (
     <div className="App">
-      <>
-        <header>
-          <h1 className="color-change-5x">RSVP App</h1>
-        </header>
-      </>
+        <Header />
       <main>
         <div className="new-event">
-          <>
-            <form onSubmit={handleSubmit}>
-              <h3>Create a new event</h3>
-              <label htmlFor="name">Event name:</label>
-              <input
-                type="text"
-                id="name"
-                onChange={handleTextChange}
-                value={newEvent.name}
-              />
-
-              <label htmlFor="organizer">Organizer:</label>
-              <input
-                type="text"
-                id="organizer"
-                onChange={handleTextChange}
-                value={newEvent.organizer}
-              />
-
-              <label htmlFor="eventImage">Event image:</label>
-              <input
-                type="text"
-                id="eventImage"
-                onChange={handleTextChange}
-                value={newEvent.eventImage}
-              />
-              <label htmlFor="eventType">Event type:</label>
-              <select id="eventType" onChange={handleSelectChange}>
-                <option value=""></option>
-                <option value="Birthday">Birthday</option>
-                <option value="Anniversary">Anniversary</option>
-                <option value="Intramural Sport">Intramural Sport</option>
-                <option value="Watch Party">Watch Party</option>
-                <option value="wedding">Wedding</option>
-              </select>
-              <br />
-              <input type="submit" />
-            </form>
-          </>
-        </div>
-        <div className="events">
-          <ul>
-            {events.map((event) => {
-              const { people: attendees } = event;
-
-              return (
-                <>
-                  <li key={event.id}>
-                    <img src={event.eventImage} alt={event.name} />
-                    <h5>
-                      {event.name} {event.eventType}
-                    </h5>
-                    <br />
-                    <span>Organized by: {event.organizer} </span>
-                    <br />
-                    <>
-                      <button onClick={toggleEventAttendees}>
-                        {!showAttendees ? "Show Attendees" : "Hide Attendees"}
-                      </button>
-
-                      {showAttendees ? (
-                        <div className="attendees">
-                          {attendees.map((attendee, index) => (
-                            <>
-                              <div key={attendee.id} className="attendee">
-                                <p>
-                                  <img
-                                    src={attendee.avatar}
-                                    alt={attendee.firstName}
-                                  />
-                                  {"   "}
-                                  <span>
-                                    {" "}
-                                    {attendee.firstName} {attendee.lastName}{" "}
-                                  </span>
-                                </p>
-                                <p>
-                                  <button
-                                    className="clickable"
-                                    onClick={() =>
-                                      updateEventAttendance(
-                                        event.id,
-                                        attendee.id
-                                      )
-                                    }
-                                  >
-                                    Attending:
-                                  </button>
-                                  <span>
-                                    {attendee.attendance ? "✅" : "❌"}
-                                  </span>
-                                </p>
-
-                                <p>
-                                  <span>Note:</span> {attendee.note}
-                                </p>
-                              </div>
-                            </>
-                          ))}
-                        </div>
-                      ) : null}
-                    </>
-                  </li>
-                </>
-              );
-            })}
-          </ul>
+          <NewEventForm handleAddEvent={handleAddEvent} />
         </div>
-      </main>
-      <>
-        <footer>
-          <ul>
-            <li>Contact</li>
-            <li>About</li>
-            <li>Legal</li>
-          </ul>
-        </footer>
-      </>
+        <Event events={events} updateEvents={updateEvents} updateEventAttendance={updateEventAttendance} />
+        </main>
+        <Footer />
     </div>
   );
 }
diff --git a/src/Components/Attendee.jsx b/src/Components/Attendee.jsx
index e301743..bce8e0f 100644
--- a/src/Components/Attendee.jsx
+++ b/src/Components/Attendee.jsx
@@ -1,3 +1,27 @@
-export default function Attendee() {
-  return;
+export default function Attendee({ attendee, eventId, updateEventAttendance}) {
+  return (
+    <div key={attendee.id} className="attendee">
+      <p>
+        <img src={attendee.avatar} alt={attendee.firstName} />
+        {"   "}
+        <span>
+          {" "}
+          {attendee.firstName} {attendee.lastName}{" "}
+        </span>
+      </p>
+      <p>
+        <button
+          className="clickable"
+          onClick={() => updateEventAttendance(eventId, attendee.id)}
+        >
+          Attending:
+        </button>
+        <span>{attendee.attendance ? "✅" : "❌"}</span>
+      </p>
+
+      <p>
+        <span>Note:</span> {attendee.note}
+      </p>
+    </div>
+  );
 }
diff --git a/src/Components/Attendees.jsx b/src/Components/Attendees.jsx
index 45ca5cf..a6c5f83 100644
--- a/src/Components/Attendees.jsx
+++ b/src/Components/Attendees.jsx
@@ -1,3 +1,25 @@
-export default function Attendees() {
-  return;
+import Attendee from "./Attendee";
+
+export default function Attendees({
+  updateEventAttendance,
+  showAttendees,
+  attendees,
+  eventId,
+}) {
+  return (
+    <>
+      {showAttendees ? (
+        <div className="attendees">
+          {attendees.map((attendee, index) => (
+            <Attendee
+              key={attendee.id}
+              attendee={attendee}
+              eventId={eventId}
+              updateEventAttendance={updateEventAttendance}
+            />
+          ))}
+        </div>
+      ) : null}
+    </>
+  );
 }
diff --git a/src/Components/Event.jsx b/src/Components/Event.jsx
index 7600e3c..7a24446 100644
--- a/src/Components/Event.jsx
+++ b/src/Components/Event.jsx
@@ -1,3 +1,45 @@
-export default function Event() {
-  return;
+import Attendees from "./Attendees";
+
+export default function Event({ events, updateEvents, updateEventAttendance }) {
+  const toggleEventAttendees = (id) => {
+    const updatedEvents = events.map((event) => {
+      if (event.id === id) {
+        return { ...event, showAttendees: !event.showAttendees };
+      }
+      return event;
+    });
+    updateEvents(updatedEvents);
+  };
+
+  return (
+    <div className="events">
+      <ul>
+        {events.map((event) => {
+
+          return (
+            <li key={event.id}>
+              <img src={event.eventImage} alt={event.name} />
+              <h5>
+                {event.name} {event.eventType}
+              </h5>
+              <br />
+              <span>Organized by: {event.organizer} </span>
+              <br />
+              <button onClick={() => toggleEventAttendees(event.id)}>
+                {!event.showAttendees ? "Show Attendees" : "Hide Attendees"}
+              </button>
+              {event.showAttendees && (
+                <Attendees
+                  attendees={event.people}
+                  updateEventAttendance={updateEventAttendance}
+                  showAttendees={event.showAttendees}
+                  eventId={event.id}
+                />
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
 }
diff --git a/src/Components/Footer.jsx b/src/Components/Footer.jsx
index 42c8222..cf3842f 100644
--- a/src/Components/Footer.jsx
+++ b/src/Components/Footer.jsx
@@ -1,3 +1,11 @@
 export default function Footer() {
-  return;
+  return (
+    <footer>
+          <ul>
+            <li>Contact</li>
+            <li>About</li>
+            <li>Legal</li>
+          </ul>
+        </footer>
+  );
 }
diff --git a/src/Components/Header.jsx b/src/Components/Header.jsx
index 7cfb6f4..a7f8a89 100644
--- a/src/Components/Header.jsx
+++ b/src/Components/Header.jsx
@@ -1,3 +1,5 @@
 export default function Header() {
-  return;
+  return (
+  <h1 className="color-change-5x">RSVP App</h1>
+  );
 }
diff --git a/src/Components/NewEventForm.jsx b/src/Components/NewEventForm.jsx
index 319696a..cf8b318 100644
--- a/src/Components/NewEventForm.jsx
+++ b/src/Components/NewEventForm.jsx
@@ -1,3 +1,100 @@
+import { useState } from "react";
+import { v1 as generateUniqueID } from "uuid";
+
 export default function NewEventForm({ handleAddEvent }) {
-  return;
+  const [selectOption, setSelectOption] = useState("");
+  const [newEvent, setNewEvent] = useState({
+    id: "",
+    eventType: "",
+    name: "",
+    organizer: "",
+    eventImage: "",
+    date: "",
+    people: [],
+  });
+
+  function addEvent() {
+    const createEvent = {
+      id: generateUniqueID(),
+      eventType: selectOption,
+      name: newEvent.name,
+      organizer: newEvent.organizer,
+      eventImage: newEvent.eventImage || "https://loremflickr.com/640/480/",
+      date: newEvent.date,
+      people: [],
+    };
+    handleAddEvent(createEvent);
+  }
+
+  function handleSelectChange(e) {
+    setSelectOption(e.target.value);
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    addEvent();
+    resetEventForm();
+  }
+
+  function handleTextChange(e) {
+    setNewEvent({
+      ...newEvent,
+      [e.target.id]: e.target.value,
+    });
+  }
+  
+  function resetEventForm() {
+    setNewEvent({
+      id: "",
+      eventType: "",
+      name: "",
+      organizer: "",
+      eventImage: "",
+      date: "",
+    });
+    setSelectOption("");
+  }
+  return (
+    <div className="new-event">
+          <>
+            <form onSubmit={handleSubmit}>
+              <h3>Create a new event</h3>
+              <label htmlFor="name">Event name:</label>
+              <input
+                type="text"
+                id="name"
+                onChange={handleTextChange}
+                value={newEvent.name}
+              />
+
+              <label htmlFor="organizer">Organizer:</label>
+              <input
+                type="text"
+                id="organizer"
+                onChange={handleTextChange}
+                value={newEvent.organizer}
+              />
+
+              <label htmlFor="eventImage">Event image:</label>
+              <input
+                type="text"
+                id="eventImage"
+                onChange={handleTextChange}
+                value={newEvent.eventImage}
+              />
+              <label htmlFor="eventType">Event type:</label>
+              <select id="eventType" onChange={handleSelectChange}>
+                <option value=""></option>
+                <option value="Birthday">Birthday</option>
+                <option value="Anniversary">Anniversary</option>
+                <option value="Intramural Sport">Intramural Sport</option>
+                <option value="Watch Party">Watch Party</option>
+                <option value="wedding">Wedding</option>
+              </select>
+              <br />
+              <input type="submit" />
+            </form>
+          </>
+        </div>
+  );
 }