Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Shanice, Jeff and Kanique #6

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Shanice, Jeff and Kanique #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2fe0162
header and footer comp.
Aug 3, 2023
f6416ce
fixed form
Aug 4, 2023
552bf0e
working on event and attendee(s)
Aug 4, 2023
0ec9880
fixed attendee list toggle
Aug 4, 2023
c7d8194
added attendee to component
Aug 5, 2023
3752f88
minor change
Aug 6, 2023
fc12a7b
fixed component flow
Aug 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
193 changes: 15 additions & 178 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,77 +1,24 @@
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("");
}

function handleAddEvent(event) {
setEvents([event, ...events]);
}

function toggleEventAttendees() {
setShowAttendees(!showAttendees);
function toggleEventAttendees(eventId) {
const eventArray = [...events];
const eventIndex = eventArray.findIndex((event) => eventId === event.id);
const event = { ...eventArray[eventIndex] };
event.showAttendees = !event.showAttendees;
eventArray[eventIndex] = event;
setEvents(eventArray);
}

function updateEventAttendance(eventId, attendeeId) {
Expand All @@ -90,131 +37,21 @@ function App() {

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>
</>
<NewEventForm handleAddEvent={handleAddEvent} />
</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>
</>
);
<Event key={event.id} showAttendees={event.showAttendees} attendees={event.people} event={event} updateEventAttendance={updateEventAttendance} toggleEventAttendees={toggleEventAttendees} />)
})}
</ul>
</div>
</main>
<>
<footer>
<ul>
<li>Contact</li>
<li>About</li>
<li>Legal</li>
</ul>
</footer>
</>
<Footer />
</div>
);
}
Expand Down
19 changes: 17 additions & 2 deletions src/Components/Attendee.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,18 @@
export default function Attendee() {
return;
export default function Attendee({ event, attendee, 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(event.id, attendee.id)} > Attending: {attendee.attendance ? "✅" : "❌"} </button>
</p>
<p>
<span>Note:</span> {attendee.note}
</p>
</div>
)
}
18 changes: 16 additions & 2 deletions src/Components/Attendees.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,17 @@
export default function Attendees() {
return;
import Attendee from "./Attendee"
export default function Attendees({event, attendees, toggleEventAttendees, updateEventAttendance, showAttendees}) {
return (
<>
<button onClick={() => toggleEventAttendees(event.id)}>
{!showAttendees ? "Show Attendees" : "Hide Attendees"}
</button>
{showAttendees && (
<div className="attendees">
{attendees.map((attendee) => (
<Attendee event = {event} attendee={attendee} updateEventAttendance = {updateEventAttendance} />
))}
</div>
)}
</>
)
}
20 changes: 18 additions & 2 deletions src/Components/Event.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,19 @@
export default function Event() {
return;
import Attendees from "./Attendees";

export default function Event({event, attendees, showAttendees, updateEventAttendance, toggleEventAttendees}) {

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 />
<Attendees event = {event} attendees = {attendees} updateEventAttendance = {updateEventAttendance} toggleEventAttendees = {toggleEventAttendees} showAttendees = {showAttendees} />
</li>
</>
);
}
12 changes: 11 additions & 1 deletion src/Components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
export default function Footer() {
return;
return (
<>
<footer>
<ul>
<li>Contact</li>
<li>About</li>
<li>Legal</li>
</ul>
</footer>
</>
)
}
8 changes: 7 additions & 1 deletion src/Components/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
export default function Header() {
return;
return (
<>
<header>
<h1 className="color-change-5x">RSVP App</h1>
</header>
</>
)
}
Loading