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

Host profile layout #33

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

Host profile layout #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2342322
Started the design and layout of the profile page.
vidiyadawah Jan 18, 2024
7fb8ab1
now shows the list of all events in the database
vidiyadawah Jan 19, 2024
d703520
edited the layout
vidiyadawah Jan 19, 2024
e2a5c09
need to switch branches
vidiyadawah Jan 19, 2024
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
4 changes: 4 additions & 0 deletions views/js/evently/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -24,6 +25,9 @@ function App() {
<Route path="/RSVP/:eventId" element={<RSVPButton />} />
<Route path="/" element={<HomePage />} />
<Route path="/rsvp-form/:eventTitle" element={<RSVPForm/>} />
<Route path="/rsvp-form" element={<RSVPForm/>} />
<Route path="/host-profile" element={<HostProfilePage/>} />

</Routes>
</div>
);
Expand Down
104 changes: 104 additions & 0 deletions views/js/evently/src/HostProfilePage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
.profile-page {
margin: 6rem;
}

.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: 34.375rem;
height:25rem;
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; */
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can be removed

}

.list-events ol {
list-style-type: none;
counter-reset: custom-counter;
padding: 2rem;
}

.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;
}

.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: 3rem;
margin: 1rem;
font-size: 1.75rem;
}

.pin-event-info{
text-align: left;
line-height: 3rem;
margin: 1rem;
font-size: 2rem;
}

.pin-header{
font-size: 3rem;
}
104 changes: 104 additions & 0 deletions views/js/evently/src/HostProfilePage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
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 [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);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can be removed

}
};

getEvents();
}, []);

const pinnedEvent = eventData.length > 0 ? eventData[0] : null;
const hostInfo = {
host_name: 'Name of the Host',
contact_info: 'Contact info of host',
}

return(
<div className="profile-page">
<div className="row">
<div className="prof-header">
<div className="prof-img-container">
<img
src={profileImage1}
alt="Description of the host."
/>
</div>
<div className="host-info">
<h3> {hostInfo.host_name}</h3>
<h3> {hostInfo.contact_info}</h3>
</div>
</div>

</div>
<div className="row">
<div className="pin-event">
<div className="row">
{pinnedEvent && (
<div key={pinnedEvent.event_id} className="pin-img-container">
<img src={pinnedEvent.image_url} alt="Description of pinned event." />
</div>
)}
<div className="pin-event-info">
{pinnedEvent ? (
<div>
<div className="pin-header">
<h3>{pinnedEvent.event_title} in X days! Don't miss it!</h3>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this supposed to show an actual number?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes but I couldn't figure out how to subtract the date of the event from the current date.

Copy link
Collaborator

@mclausen792 mclausen792 Jan 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you want to see if this works? And if not we can look at it a little bit next week!

function days_between(date1, date2) {

    // The number of milliseconds in one day
    const ONE_DAY = 1000 * 60 * 60 * 24;

    // Calculate the difference in milliseconds
    const differenceMs = Math.abs(date1 - date2);

    // Convert back to days and return
    return Math.round(differenceMs / ONE_DAY);

}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah it would be helpful if we could go over this next week. I was having some issues with the backend so I couldn't see the changes I was making on the layout.

</div>
<h3>Description: {pinnedEvent.description}</h3>
<h3>Date: {pinnedEvent.date}</h3>
<h3>Time: {pinnedEvent.time}</h3>
</div>
) : (
<p> Event couldn't load sorry!</p>
)}
</div>
</div>
</div>
</div>

<div className="list-events">
<h2> Upcoming Events!</h2>
<ol className="list-events">
{eventData.map((event) => (
<li key={event.event_id}>
<div className="row">
<div className="img-container">
<img
src={event.image_url}
alt="Description of party."
/>
</div>
<div className="event-info">
<h3>Description: {event.description}</h3>
<h3>Date: {event.date}</h3>
<h3>Time: {event.time}</h3>
</div>
</div>
</li>
))}
</ol>
</div>
</div>
);
}
export default HostProfilePage;