From 8681b5eb76af3e682f959e7a6a9cd18de5e91056 Mon Sep 17 00:00:00 2001 From: paoAracena Date: Sun, 30 Apr 2023 08:08:57 -0400 Subject: [PATCH] done --- package-lock.json | 126 +++++++++++++++++++-------------- package.json | 2 +- src/App.js | 92 ++++-------------------- src/Components/Attendee.js | 30 +++++++- src/Components/Attendees.js | 24 ++++++- src/Components/Event.js | 32 ++++++++- src/Components/Footer.js | 12 +++- src/Components/Header.js | 8 ++- src/Components/NewEventForm.js | 44 +++++++++++- 9 files changed, 226 insertions(+), 144 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2662c00..00fac10 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,16 +9,16 @@ "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", + "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" @@ -3690,20 +3690,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 +4154,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 +4176,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 +4184,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 +4208,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", @@ -6659,7 +6664,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 +15011,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 +15156,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 +15807,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": { @@ -20638,13 +20647,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 +21041,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 +21063,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 +21071,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 +21095,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", @@ -22856,7 +22870,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 +28735,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 +28843,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 +29314,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..dde248c 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,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..6578c74 100644 --- a/src/App.js +++ b/src/App.js @@ -2,11 +2,10 @@ 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); @@ -90,14 +89,11 @@ function App() { return (
- <> -
-

RSVP App

-
- +
<> +

Create a new event

@@ -143,78 +139,20 @@ function App() { 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} - -
    • - + + ); })}
    - <> -
    -
      -
    • Contact
      • -
    • About
      • -
    • Legal
      • -
    -
    - +
    ); } diff --git a/src/Components/Attendee.js b/src/Components/Attendee.js index e301743..0109dee 100644 --- a/src/Components/Attendee.js +++ b/src/Components/Attendee.js @@ -1,3 +1,29 @@ -export default function Attendee() { - return; +export default function Attendee({attendee, updateEventAttendance, eventId}) { + return ( + <> +
    +

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

    +

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

    + +

    + Note: {attendee.note} +

    +
    + + ); } diff --git a/src/Components/Attendees.js b/src/Components/Attendees.js index 45ca5cf..be2d845 100644 --- a/src/Components/Attendees.js +++ b/src/Components/Attendees.js @@ -1,3 +1,21 @@ -export default function Attendees() { - return; -} +import Attendee from "./Attendee.js" + +export default function Attendees({toggleEventAttendees, showAttendees, attendees, updateEventAttendance, eventId}) { + return ( + <> + + + {showAttendees ? ( +
    + {attendees.map((attendee, index) => ( + + ))} +
    + ) : null} + + ); +} \ No newline at end of file diff --git a/src/Components/Event.js b/src/Components/Event.js index 7600e3c..5bd25a1 100644 --- a/src/Components/Event.js +++ b/src/Components/Event.js @@ -1,3 +1,29 @@ -export default function Event() { - return; -} +import Attendees from "./Attendees.js" +import { useState } from "react"; + +export default function Event({event, attendees, updateEventAttendance}) { + const [showAttendees, setShowAttendees] = useState(false); + + function toggleEventAttendees() { + setShowAttendees(!showAttendees); + } + + return ( +<> +
  • + {event.name} +
    + {event.name} {event.eventType} +
    +
    + Organized by: {event.organizer} +
    + +
    • + + ) +} \ No newline at end of file diff --git a/src/Components/Footer.js b/src/Components/Footer.js index 42c8222..fbcc02a 100644 --- a/src/Components/Footer.js +++ b/src/Components/Footer.js @@ -1,3 +1,13 @@ export default function Footer() { - return; + return( + <> + + + ) } diff --git a/src/Components/Header.js b/src/Components/Header.js index 7cfb6f4..b6245c6 100644 --- a/src/Components/Header.js +++ b/src/Components/Header.js @@ -1,3 +1,9 @@ export default function Header() { - return; + return( + <> +
    +

    RSVP App

    +
    + + ) } diff --git a/src/Components/NewEventForm.js b/src/Components/NewEventForm.js index 319696a..56c2ada 100644 --- a/src/Components/NewEventForm.js +++ b/src/Components/NewEventForm.js @@ -1,3 +1,43 @@ -export default function NewEventForm({ handleAddEvent }) { - return; +export default function NewEventForm({handleSubmit, handleTextChange, newEvent, handleSelectChange}) { + return ( + <> + +

    Create a new event

    + + + + + + + + + + +
    + + + + ); }