From 9bf7c7dfe3c431b24750f23c7a2923ab003425db Mon Sep 17 00:00:00 2001 From: Jeffchua96 Date: Sun, 30 Apr 2023 08:12:45 -0400 Subject: [PATCH] Lab-react-not done --- cypress/support/commands.js | 44 ++++----- package-lock.json | 167 ++++++++++++++++++++++----------- package.json | 3 +- src/App.js | 109 ++++++--------------- src/Components/Attendee.js | 4 +- src/Components/Attendees.js | 6 +- src/Components/Event.js | 129 ++++++++++++++++++++++++- src/Components/Footer.js | 4 +- src/Components/Header.js | 4 +- src/Components/NewEventForm.js | 22 ++++- src/index.js | 1 + 11 files changed, 326 insertions(+), 167 deletions(-) diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 22cb80a..c5463ee 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -1,30 +1,30 @@ -// *********************************************** -// This example commands.js shows you how to -// create various custom commands and overwrite -// existing commands. -// -// For more comprehensive examples of custom -// commands please read more here: -// https://on.cypress.io/custom-commands -// *********************************************** -// -// +// // *********************************************** +// // This example commands.js shows you how to +// // create various custom commands and overwrite +// // existing commands. + +// // For more comprehensive examples of custom +// // commands please read more here: +// // https://on.cypress.io/custom-commands +// // *********************************************** + + // -- This is a parent command -- // Cypress.Commands.add('login', (email, password) => { ... }) -// -// + + // -- This is a child command -- // Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... }) -// -// + + // -- This is a dual command -- // Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... }) -// -// + + // -- This will overwrite an existing command -- // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... }) -before(() => { - const { PORT = 3000 } = process.env; - cy.visit(`http://localhost:${PORT}`); - cy.waitForReact(); -}); +// before(() => { +// const { PORT = 3000 } = process.env; +// cy.visit(`http://localhost:${PORT}`); +// cy.waitForReact(); +// }); diff --git a/package-lock.json b/package-lock.json index 2662c00..11bd126 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,16 +9,17 @@ "version": "0.1.0", "dependencies": { "@testing-library/jest-dom": "^5.16.5", - "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "bootstrap": "^5.2.3", + "react": "^17.0.2", + "react-dom": "^17.0.2", "react-scripts": "5.0.1", "uuid": "^8.3.2", "web-vitals": "^2.1.4" }, "devDependencies": { "@cypress/react": "^6.1.1", + "@testing-library/react": "^12.1.5", "cypress": "^9.7.0", "cypress-react-selector": "^3.0.0", "cypress-watch-and-reload": "^1.10.3" @@ -3191,6 +3192,16 @@ } } }, + "node_modules/@popperjs/core": { + "version": "2.11.7", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz", + "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==", + "peer": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -3690,20 +3701,21 @@ } }, "node_modules/@testing-library/react": { - "version": "13.3.0", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.3.0.tgz", - "integrity": "sha512-DB79aA426+deFgGSjnf5grczDPiL4taK3hFaa+M5q7q20Kcve9eQottOG5kZ74KEr55v0tU2CQormSSDK87zYQ==", + "version": "12.1.5", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-12.1.5.tgz", + "integrity": "sha512-OfTXCJUFgjd/digLUuPxa0+/3ZxsQmE7ub9kcbW/wi96Bh3o/p5vrETcBGfP17NWPGqeYYl5LTRpwyGoMC4ysg==", + "dev": true, "dependencies": { "@babel/runtime": "^7.12.5", - "@testing-library/dom": "^8.5.0", - "@types/react-dom": "^18.0.0" + "@testing-library/dom": "^8.0.0", + "@types/react-dom": "<18.0.0" }, "engines": { "node": ">=12" }, "peerDependencies": { - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": "<18.0.0", + "react-dom": "<18.0.0" } }, "node_modules/@testing-library/user-event": { @@ -4153,7 +4165,8 @@ "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", - "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", + "dev": true }, "node_modules/@types/q": { "version": "1.5.5", @@ -4174,6 +4187,7 @@ "version": "17.0.48", "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.48.tgz", "integrity": "sha512-zJ6IYlJ8cYYxiJfUaZOQee4lh99mFihBoqkOSEGV+dFi9leROW6+PgstzQ+w3gWTnUfskALtQPGHK6dYmPj+2A==", + "dev": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -4181,11 +4195,12 @@ } }, "node_modules/@types/react-dom": { - "version": "18.0.6", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz", - "integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==", + "version": "17.0.20", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.20.tgz", + "integrity": "sha512-4pzIjSxDueZZ90F52mU3aPoogkHIoSIDG+oQ+wQK7Cy2B9S+MvOqY0uEA/qawKz381qrEDkvpwyt8Bm31I8sbA==", + "dev": true, "dependencies": { - "@types/react": "*" + "@types/react": "^17" } }, "node_modules/@types/resolve": { @@ -4204,7 +4219,8 @@ "node_modules/@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", + "dev": true }, "node_modules/@types/serve-index": { "version": "1.9.1", @@ -5600,6 +5616,24 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" }, + "node_modules/bootstrap": { + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz", + "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "peerDependencies": { + "@popperjs/core": "^2.11.6" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -6659,7 +6693,8 @@ "node_modules/csstype": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", - "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==" + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==", + "dev": true }, "node_modules/cypress": { "version": "9.7.0", @@ -15005,11 +15040,12 @@ } }, "node_modules/react": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", - "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", + "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", "dependencies": { - "loose-envify": "^1.1.0" + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" }, "engines": { "node": ">=0.10.0" @@ -15149,15 +15185,16 @@ } }, "node_modules/react-dom": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", - "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", + "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", "dependencies": { "loose-envify": "^1.1.0", - "scheduler": "^0.23.0" + "object-assign": "^4.1.1", + "scheduler": "^0.20.2" }, "peerDependencies": { - "react": "^18.2.0" + "react": "17.0.2" } }, "node_modules/react-error-overlay": { @@ -15799,11 +15836,12 @@ } }, "node_modules/scheduler": { - "version": "0.23.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", - "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", + "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", "dependencies": { - "loose-envify": "^1.1.0" + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" } }, "node_modules/schema-utils": { @@ -20312,6 +20350,12 @@ "source-map": "^0.7.3" } }, + "@popperjs/core": { + "version": "2.11.7", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz", + "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==", + "peer": true + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -20638,13 +20682,14 @@ } }, "@testing-library/react": { - "version": "13.3.0", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-13.3.0.tgz", - "integrity": "sha512-DB79aA426+deFgGSjnf5grczDPiL4taK3hFaa+M5q7q20Kcve9eQottOG5kZ74KEr55v0tU2CQormSSDK87zYQ==", + "version": "12.1.5", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-12.1.5.tgz", + "integrity": "sha512-OfTXCJUFgjd/digLUuPxa0+/3ZxsQmE7ub9kcbW/wi96Bh3o/p5vrETcBGfP17NWPGqeYYl5LTRpwyGoMC4ysg==", + "dev": true, "requires": { "@babel/runtime": "^7.12.5", - "@testing-library/dom": "^8.5.0", - "@types/react-dom": "^18.0.0" + "@testing-library/dom": "^8.0.0", + "@types/react-dom": "<18.0.0" } }, "@testing-library/user-event": { @@ -21031,7 +21076,8 @@ "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", - "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==" + "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==", + "dev": true }, "@types/q": { "version": "1.5.5", @@ -21052,6 +21098,7 @@ "version": "17.0.48", "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.48.tgz", "integrity": "sha512-zJ6IYlJ8cYYxiJfUaZOQee4lh99mFihBoqkOSEGV+dFi9leROW6+PgstzQ+w3gWTnUfskALtQPGHK6dYmPj+2A==", + "dev": true, "requires": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -21059,11 +21106,12 @@ } }, "@types/react-dom": { - "version": "18.0.6", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.6.tgz", - "integrity": "sha512-/5OFZgfIPSwy+YuIBP/FgJnQnsxhZhjjrnxudMddeblOouIodEQ75X14Rr4wGSG/bknL+Omy9iWlLo1u/9GzAA==", + "version": "17.0.20", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.20.tgz", + "integrity": "sha512-4pzIjSxDueZZ90F52mU3aPoogkHIoSIDG+oQ+wQK7Cy2B9S+MvOqY0uEA/qawKz381qrEDkvpwyt8Bm31I8sbA==", + "dev": true, "requires": { - "@types/react": "*" + "@types/react": "^17" } }, "@types/resolve": { @@ -21082,7 +21130,8 @@ "@types/scheduler": { "version": "0.16.2", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz", - "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==" + "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", + "dev": true }, "@types/serve-index": { "version": "1.9.1", @@ -22118,6 +22167,12 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" }, + "bootstrap": { + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz", + "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==", + "requires": {} + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -22856,7 +22911,8 @@ "csstype": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", - "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==" + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==", + "dev": true }, "cypress": { "version": "9.7.0", @@ -28720,11 +28776,12 @@ } }, "react": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", - "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", + "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", "requires": { - "loose-envify": "^1.1.0" + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" } }, "react-app-polyfill": { @@ -28827,12 +28884,13 @@ } }, "react-dom": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", - "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", + "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", "requires": { "loose-envify": "^1.1.0", - "scheduler": "^0.23.0" + "object-assign": "^4.1.1", + "scheduler": "^0.20.2" } }, "react-error-overlay": { @@ -29297,11 +29355,12 @@ } }, "scheduler": { - "version": "0.23.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", - "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", + "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", "requires": { - "loose-envify": "^1.1.0" + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" } }, "schema-utils": { diff --git a/package.json b/package.json index 6c3e905..9ebef0f 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/user-event": "^13.5.0", + "bootstrap": "^5.2.3", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.1", @@ -12,7 +13,7 @@ "web-vitals": "^2.1.4" }, "scripts": { - "start": "react-scripts --openssl-legacy-provider start", + "start": "react-scripts start", "build": "react-scripts build", "test": "cypress open", "eject": "react-scripts eject" diff --git a/src/App.js b/src/App.js index 1e06b57..ddccfa1 100644 --- a/src/App.js +++ b/src/App.js @@ -1,11 +1,18 @@ import { useState } from "react"; import eventsData from "./data"; import { v1 as generateUniqueID } from "uuid"; -// import Attendees from "./Attendees"; +// import Attendees from "./Components/Attendees"; // import Event from "./Components/Event"; // import Footer from "./Components/Footer"; // import Header from "./Components/Header"; -// import NewEventForm from "./Components/NewEventForm"; +import NewEventForm from "./Components/NewEventForm"; +// import showAttendees from "./showAttendees" +import React from 'react'; +import './App.css'; +import { interfaces } from "mocha"; + + +interface Props{} function App() { const [events, setEvents] = useState(eventsData); @@ -24,19 +31,8 @@ function App() { 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); } @@ -54,7 +50,7 @@ function App() { }); } - function resetEventForm() { + function resetEventForm(e) { setNewEvent({ id: "", eventType: "", @@ -87,9 +83,10 @@ function App() { eventArray[eventIndex] = event; setEvents(eventArray); } - - return ( -
+ function listGroup() { + let items = { header, main, } + return ( +
<>

RSVP App

@@ -137,73 +134,23 @@ function App() {
-
-
    +
    +
      {events.map((event) => { const { people: attendees } = event; - + return ( - <> -
    • - {event.name} -
      - {event.name} {event.eventType} -
      -
      - Organized by: {event.organizer} -
      - <> - - - {showAttendees ? ( -
      - {attendees.map((attendee, index) => ( - <> -
      -

      - {attendee.firstName} - {" "} - - {" "} - {attendee.firstName} {attendee.lastName}{" "} - -

      -

      - - - {attendee.attendance ? "✅" : "❌"} - -

      - -

      - Note: {attendee.note} -

      -
      - - ))} -
      - ) : null} - -
      • - + + event = {event} + attendees = {attendeesID} + updateEventAttendance ={updateEventAttendance} + showAttendees = {showAttendees} + toggleEventAttendees = { toggleEventAttendees} + ); })} -
    +
+
<> diff --git a/src/Components/Attendee.js b/src/Components/Attendee.js index e301743..56f4b9b 100644 --- a/src/Components/Attendee.js +++ b/src/Components/Attendee.js @@ -1,3 +1,5 @@ export default function Attendee() { - return; + return( + <> + ) } diff --git a/src/Components/Attendees.js b/src/Components/Attendees.js index 45ca5cf..bb7cac8 100644 --- a/src/Components/Attendees.js +++ b/src/Components/Attendees.js @@ -1,3 +1,5 @@ export default function Attendees() { - return; -} + return( + <> + ) + } \ No newline at end of file diff --git a/src/Components/Event.js b/src/Components/Event.js index 7600e3c..c330a13 100644 --- a/src/Components/Event.js +++ b/src/Components/Event.js @@ -1,3 +1,126 @@ -export default function Event() { - return; -} + +// export default function Event ({event, attendees, showAttendees, toggleEventAttendees }) { +// return ( +// <> +//
  • +// {event.name} +//
    +// {event.name} {event.eventType} +//
    +//
    +// Organized by: {event.organizer} +//
    +// <> +// + +// {showAttendees ? ( +//
    +// {attendees.map((attendee, index) => ( +// <> +//
    +//

    +// {attendee.firstName} +// {" "} +// +// {" "} +// {attendee.firstName} {attendee.lastName}{" "} +// +//

    +//

    +// +// +// {attendee.attendance ? "✅" : "❌"} +// +//

    + +//

    +// Note: {attendee.note} +//

    +//
    +// +// ))} +//
    +// ) : null} +// +//
    • +// +// ); +// } + + +export default function Event({event, attendees, showAttendees, toggleEventAttendees, updateEventAttendance}) { + return ( + <> +
  • + {event.name} +
    + {event.name} {event.eventType} +
    +
    + Organized by: {event.organizer} +
    + <> + + + {showAttendees ? ( +
    + {attendees.map((attendee, index) => ( + <> +
    +

    + {attendee.firstName} + {" "} + + {" "} + {attendee.firstName} {attendee.lastName}{" "} + +

    +

    + + + {attendee.attendance ? "✅" : "❌"} + +

    + +

    + Note: {attendee.note} +

    +
    + + ))} +
    + ) : null} + +
    • + + ); +} \ No newline at end of file diff --git a/src/Components/Footer.js b/src/Components/Footer.js index 42c8222..3a9b491 100644 --- a/src/Components/Footer.js +++ b/src/Components/Footer.js @@ -1,3 +1,5 @@ export default function Footer() { - return; + return( + <> + ) } diff --git a/src/Components/Header.js b/src/Components/Header.js index 7cfb6f4..9ac0c3a 100644 --- a/src/Components/Header.js +++ b/src/Components/Header.js @@ -1,3 +1,5 @@ export default function Header() { - return; + return( + <> + ) } diff --git a/src/Components/NewEventForm.js b/src/Components/NewEventForm.js index 319696a..c63af89 100644 --- a/src/Components/NewEventForm.js +++ b/src/Components/NewEventForm.js @@ -1,3 +1,23 @@ +import { MouseEvent } from "react"; +import + + export default function NewEventForm({ handleAddEvent }) { - return; + return( + + + 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: [], + }; + } + + + diff --git a/src/index.js b/src/index.js index 846ed2c..200628d 100644 --- a/src/index.js +++ b/src/index.js @@ -2,6 +2,7 @@ import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; +import 'bootstrap/dist/css/bootstrap.css' ReactDOM.render(