From 23423221b68d8e56efcda73b835e59dc693508c7 Mon Sep 17 00:00:00 2001 From: IMightBeAce Date: Thu, 18 Jan 2024 10:38:26 -0500 Subject: [PATCH 1/4] Started the design and layout of the profile page. --- views/js/evently/src/App.js | 4 + views/js/evently/src/HostProfilePage.css | 89 +++++++++++++++ views/js/evently/src/HostProfilePage.jsx | 133 +++++++++++++++++++++++ 3 files changed, 226 insertions(+) create mode 100644 views/js/evently/src/HostProfilePage.css create mode 100644 views/js/evently/src/HostProfilePage.jsx diff --git a/views/js/evently/src/App.js b/views/js/evently/src/App.js index 46c3c0a..d84993f 100644 --- a/views/js/evently/src/App.js +++ b/views/js/evently/src/App.js @@ -12,6 +12,7 @@ import CommunityPage from './CommunityPage.jsx'; import AboutUs from './AboutUs.jsx'; import RSVPForm from "./RSVPForm.jsx"; import RSVPButton from "./RSVPButton.jsx"; +import HostProfilePage from "./HostProfilePage"; function App() { return ( @@ -24,6 +25,9 @@ function App() { } /> } /> } /> + } /> + } /> + ); diff --git a/views/js/evently/src/HostProfilePage.css b/views/js/evently/src/HostProfilePage.css new file mode 100644 index 0000000..b7a1118 --- /dev/null +++ b/views/js/evently/src/HostProfilePage.css @@ -0,0 +1,89 @@ +.row{ + display:flex; + margin:auto; + justify-content: left; + padding: 2rem; +} + +.prof-header{ +display:flex; +background-color: #ff6116; +padding: 1.5rem; +padding-right: 2rem; +} +.prof-img-container { + width: 25rem; + height: 25rem; + overflow: hidden; + border-radius: 50%; +} + +.img-container{ + width: 450px; + height: 300px; + overflow:hidden; + margin-left: 9rem; +} + +.pin-img-container{ + box-sizing: border-box; + width: 800px; + height:600px; + overflow:hidden; + margin-left: 2rem; +} + +img{ + width: 100%; + height: 100%; + object-fit: cover; + border-radius: inherit; +} + +.host-info{ + font-size: 2rem; + margin-left:4rem; +} + +.list-events{ + padding: 5rem; + font-size: 3rem; + background-color: #ffeadf; +} + +.list-events ol { + list-style-type: none; + counter-reset: custom-counter; +} + +.list-events li { + align-items: center; + counter-increment: custom-counter; + margin-bottom: 10px; +} + +.list-events li::before { + content: counter(custom-counter); + display: inline-block; + width: 2rem; + font-size: 3rem; + margin-right: 1.75rem; + font-weight: bold; +} +.event-info{ + text-align: left; + line-height: 0; + margin: 1rem; + font-size: 1rem; +} + +.pin-event-info{ + text-align: left; + line-height: 0; + margin: 1rem; + font-size: 2rem; +} + +.pin-header{ +font-size: 3rem; +} diff --git a/views/js/evently/src/HostProfilePage.jsx b/views/js/evently/src/HostProfilePage.jsx new file mode 100644 index 0000000..13172b3 --- /dev/null +++ b/views/js/evently/src/HostProfilePage.jsx @@ -0,0 +1,133 @@ +import React, {useState, useEffect} from 'react'; +import './HostProfilePage.css'; +import profileImage1 from './profile_img.jpg'; + +function HostProfilePage() { + const [eventData, setEventDetails]= useState([]); + const getEvent = async (e) => { + + try { + let res = await fetch("http://localhost:3000/api/event/6", { + method: "GET", + mode: "cors", + }); + if (res.status === 200) { + let data = await res.json() + setEventDetails(data) + + } + } + catch (err){ + console.log(err); + } + } + useEffect(()=>{ + getEvent() + }, []) + console.log(eventData) + + return( +
+
+
+
+ Description of the host. +
+
+

{eventData.host_name}

+

{eventData.contact_info}

+
+
+ +
+
+
+
+
+ Description of party. +
+
+
+

{eventData.event_title} in X days! Don't miss it!

+
+

Description: {eventData.description}

+

Date: {eventData.date}

+

Time: {eventData.time}

+
+
+
+
+ +
+

Upcoming Events!

+
    +
  1. +
    + Description of party. +
    +
    +

    Description: {eventData.description}

    +

    Date: {eventData.date}

    +

    Time: {eventData.time}

    +
    +
    2. +
  2. +
    + Description of party. +
    +
    +

    Description: {eventData.description}

    +

    Date: {eventData.date}

    +

    Time: {eventData.time}

    +
    +
    3. +
  3. +
    + Description of party. +
    +
    +

    Description: {eventData.description}

    +

    Date: {eventData.date}

    +

    Time: {eventData.time}

    +
    +
    4. +
+ +
+ + + + + + + + +
+ + + + + + + + + + + ) +}; +export default HostProfilePage; From 7fb8ab132858f520577a70891c984c38c8ff9715 Mon Sep 17 00:00:00 2001 From: IMightBeAce Date: Fri, 19 Jan 2024 14:36:24 -0500 Subject: [PATCH 2/4] now shows the list of all events in the database --- views/js/evently/src/HostProfilePage.jsx | 153 +++++++++-------------- 1 file changed, 58 insertions(+), 95 deletions(-) diff --git a/views/js/evently/src/HostProfilePage.jsx b/views/js/evently/src/HostProfilePage.jsx index 13172b3..a14b9d9 100644 --- a/views/js/evently/src/HostProfilePage.jsx +++ b/views/js/evently/src/HostProfilePage.jsx @@ -1,30 +1,35 @@ import React, {useState, useEffect} from 'react'; import './HostProfilePage.css'; import profileImage1 from './profile_img.jpg'; +import axios from 'axios'; function HostProfilePage() { const [eventData, setEventDetails]= useState([]); - const getEvent = async (e) => { - - try { - let res = await fetch("http://localhost:3000/api/event/6", { - method: "GET", - mode: "cors", - }); - if (res.status === 200) { - let data = await res.json() - setEventDetails(data) - - } - } - catch (err){ - console.log(err); - } - } - useEffect(()=>{ - getEvent() - }, []) - console.log(eventData) + const [isLoading, setIsLoading] = useState(false); + const [error, setError] = useState(''); + + + + useEffect(() => { + const getEvents = async () => { + try { + setIsLoading(true); + const response = await axios.get('http://localhost:3000/api/public-events'); + if (response.status === 200) { + setEventDetails(response.data); + } + setIsLoading(false); + } catch (err) { + setError('Error fetching events. Please try again.'); + setIsLoading(false); + console.error(err); + } + }; + + getEvents(); + }, []); + + const pinnedEvent = eventData.length > 0 ? eventData[0] : null; return(
@@ -46,88 +51,46 @@ function HostProfilePage() {
-
- Description of party. -
+ {pinnedEvent && ( +
+ Description of pinned event. +
+ )}
-
-

{eventData.event_title} in X days! Don't miss it!

-
-

Description: {eventData.description}

-

Date: {eventData.date}

-

Time: {eventData.time}

-
+
+

{eventData.event_title} in X days! Don't miss it!

+
+

Description: {eventData.description}

+

Date: {eventData.date}

+

Time: {eventData.time}

+
+
-

Upcoming Events!

    -
  1. -
    - Description of party. -
    -
    -

    Description: {eventData.description}

    -

    Date: {eventData.date}

    -

    Time: {eventData.time}

    -
    -
    2. -
  2. -
    - Description of party. -
    -
    -

    Description: {eventData.description}

    -

    Date: {eventData.date}

    -

    Time: {eventData.time}

    -
    -
    3. -
  3. -
    - Description of party. -
    -
    -

    Description: {eventData.description}

    -

    Date: {eventData.date}

    -

    Time: {eventData.time}

    -
    -
    4. + {eventData.map((event) => ( +
  4. +
    +
    + Description of party. +
    +
    +

    Description: {event.description}

    +

    Date: {event.date}

    +

    Time: {event.time}

    +
    +
    +
    5. + ))}
-
- - - - - - - - - - - - - - - - - - - ) -}; + ); +} export default HostProfilePage; From d703520fd3d0aa004417c68f86c2010d146ea5de Mon Sep 17 00:00:00 2001 From: IMightBeAce Date: Fri, 19 Jan 2024 15:37:18 -0500 Subject: [PATCH 3/4] edited the layout --- views/js/evently/src/HostProfilePage.css | 27 ++++++++++++---- views/js/evently/src/HostProfilePage.jsx | 40 ++++++++++++++---------- 2 files changed, 45 insertions(+), 22 deletions(-) diff --git a/views/js/evently/src/HostProfilePage.css b/views/js/evently/src/HostProfilePage.css index b7a1118..4cb48c3 100644 --- a/views/js/evently/src/HostProfilePage.css +++ b/views/js/evently/src/HostProfilePage.css @@ -1,3 +1,7 @@ +.profile-page { + margin: 6rem; +} + .row{ display:flex; margin:auto; @@ -19,8 +23,8 @@ padding-right: 2rem; } .img-container{ - width: 450px; - height: 300px; + width: 34.375rem; + height:25rem; overflow:hidden; margin-left: 9rem; } @@ -48,12 +52,13 @@ img{ .list-events{ padding: 5rem; font-size: 3rem; - background-color: #ffeadf; + /* background-color: #ffeadf; */ } .list-events ol { list-style-type: none; counter-reset: custom-counter; + padding: 2rem; } .list-events li { @@ -70,16 +75,26 @@ img{ margin-right: 1.75rem; font-weight: bold; } + +.list-events li:nth-child(odd) { + padding: 2rem; + background-color: #ffbc95; +} + +.list-events li:nth-child(even) { + padding: 2rem; +} + .event-info{ text-align: left; - line-height: 0; + line-height: 3rem; margin: 1rem; - font-size: 1rem; + font-size: 1.75rem; } .pin-event-info{ text-align: left; - line-height: 0; + line-height: 3rem; margin: 1rem; font-size: 2rem; } diff --git a/views/js/evently/src/HostProfilePage.jsx b/views/js/evently/src/HostProfilePage.jsx index a14b9d9..d3fd982 100644 --- a/views/js/evently/src/HostProfilePage.jsx +++ b/views/js/evently/src/HostProfilePage.jsx @@ -8,8 +8,6 @@ function HostProfilePage() { const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(''); - - useEffect(() => { const getEvents = async () => { try { @@ -30,6 +28,10 @@ function HostProfilePage() { }, []); const pinnedEvent = eventData.length > 0 ? eventData[0] : null; + const hostInfo = { + host_name: 'Name of the Host', + contact_info: 'Contact info of host', + } return(
@@ -42,8 +44,8 @@ function HostProfilePage() { />
-

{eventData.host_name}

-

{eventData.contact_info}

+

{hostInfo.host_name}

+

{hostInfo.contact_info}

@@ -51,21 +53,27 @@ function HostProfilePage() {
- {pinnedEvent && ( -
- Description of pinned event. -
- )} -
-
-

{eventData.event_title} in X days! Don't miss it!

+ {pinnedEvent && ( +
+ Description of pinned event.
-

Description: {eventData.description}

-

Date: {eventData.date}

-

Time: {eventData.time}

+ )} +
+ {pinnedEvent ? ( +
+
+

{pinnedEvent.event_title} in X days! Don't miss it!

+
+

Description: {pinnedEvent.description}

+

Date: {pinnedEvent.date}

+

Time: {pinnedEvent.time}

+ ) : ( +

Event couldn't load sorry!

+ )}
+
@@ -85,7 +93,7 @@ function HostProfilePage() {

Date: {event.date}

Time: {event.time}

-
+
))} From e2a5c0948e1df126e56731ed9dfc466a20e3177c Mon Sep 17 00:00:00 2001 From: IMightBeAce Date: Fri, 19 Jan 2024 15:51:24 -0500 Subject: [PATCH 4/4] need to switch branches --- views/js/evently/src/HostProfilePage.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/views/js/evently/src/HostProfilePage.jsx b/views/js/evently/src/HostProfilePage.jsx index d3fd982..3892a0c 100644 --- a/views/js/evently/src/HostProfilePage.jsx +++ b/views/js/evently/src/HostProfilePage.jsx @@ -78,7 +78,7 @@ function HostProfilePage() {

Upcoming Events!

-
    +
      {eventData.map((event) => (