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

Lance/update profile page #81

Merged
merged 2 commits into from
Apr 12, 2024
Merged

Lance/update profile page #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
03fb48c
Update styling of profile page
ltan02 Apr 12, 2024
7f866b7
Add footer to profile page
ltan02 Apr 12, 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
13 changes: 13 additions & 0 deletions frontend/src/components/buttons/EditProfileButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react';

export default function EditProfileButton({ onClick }) {
return (
<button
type="button"
className="flex items-center justify-center rounded-[10px] border-solid border-[2px] border-mv-black py-2.5 px-[68.5px]"
onClick={onClick}
>
<p className="text-mv-black font-medium text-sm">Edit profile</p>
</button>
);
}
41 changes: 21 additions & 20 deletions frontend/src/pages/ListingsPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,10 @@ export default function ListingsPage() {
const [selectedMinPrice, setSelectedMinPrice] = useState(0);
const [selectedMaxPrice, setSelectedMaxPrice] = useState(0);
const { fetchData } = useAxios();
const wsURL = process.env.REACT_APP_NODE_ENV === 'dev'
? process.env.REACT_APP_DEV_BACKEND_WS_BASE_URL
: process.env.REACT_APP_PROD_BACKEND_WS_BASE_URL
const wsURL =
process.env.REACT_APP_NODE_ENV === 'dev'
? process.env.REACT_APP_DEV_BACKEND_WS_BASE_URL
: process.env.REACT_APP_PROD_BACKEND_WS_BASE_URL;
const sortByItems = ['All', 'Trucks', 'Equipment', 'Trailers'];

const updateMinPrice = ({ target: { value } }) => {
Expand All @@ -54,26 +55,26 @@ export default function ListingsPage() {

useEffect(() => {
const chatSocket = new WebSocket(wsURL);

chatSocket.onmessage = (event) => {
const message = JSON.parse(event.data);
if (message.bid_data) {
const bidData = message.bid_data;
setUnits(prevUnits =>
prevUnits.map(unit =>
unit.id === bidData.object_id
? { ...unit, current_price: bidData.amount }
: unit
)
);
}
const message = JSON.parse(event.data);

if (message.bid_data) {
const bidData = message.bid_data;

setUnits((prevUnits) =>
prevUnits.map((unit) =>
unit.id === bidData.object_id
? { ...unit, current_price: bidData.amount }
: unit
)
);
}
};

return () => chatSocket.close();
}, []);
}, []);

const updateMaxPrice = ({ target: { value } }) => {
if (value === '') {
setSelectedMaxPrice(0);
Expand Down
134 changes: 49 additions & 85 deletions frontend/src/pages/ProfilePage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import React, { useState, useEffect, useRef } from 'react';
import { ScrollRestoration } from 'react-router-dom';
import { Avatar } from '@mui/material';
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
import NavBar from '../components/navBars/NavBar';
import { useUser } from '../providers/UserProvider';
import SaveChangesButton from '../components/buttons/SaveChangesButton';
import Checkbox from '../components/inputs/Checkbox';
import SortByDropdown from '../components/dropdowns/SortByDropdown';
import BiddedItemCard from '../components/cards/BiddedItemCard';
import vehicleImage from '../assets/truck.png';
import SavedItemCard from '../components/cards/SavedItemCard';
import EditProfileButton from '../components/buttons/EditProfileButton';
import Footer from '../components/footers/Footer';

export default function ProfilePage() {
const user = useUser();
Expand Down Expand Up @@ -74,121 +74,81 @@ export default function ProfilePage() {
<ScrollRestoration />
<NavBar />

<div className="w-[90%] flex mt-[43.94px] items-start gap-x-[52px] mb-[282px]">
<div className="w-[25%] flex flex-col items-start">
<div className="flex items-start gap-x-[13px] mb-[30px]">
<Avatar sx={{ width: '200px', height: '200px' }} />
<EditOutlinedIcon
sx={{ fontSize: 18 }}
className="hover:cursor-pointer"
onClick={() => {}}
/>
</div>
<div className="flex flex-col gap-y-[19.1px] items-start w-full">
<div className="w-[90%] flex mt-[43px] items-start gap-x-[52px]">
<div className="w-[22.5%] flex flex-col items-start">
<div className="flex items-center gap-x-[16.5px] mb-[25px]">
<Avatar sx={{ width: '93px', height: '93px' }} />
<div className="flex flex-col gap-y-[10px]">
<p className="text-sm text-mv-black font-normal leading-4">
<p className="text-sm text-mv-black font-normal leading-[120%]">
Bidder Number
</p>
<p className="text-base text-mv-black font-normal leading-4">
<p className="text-base text-mv-black font-normal leading-[120%]">
{user?.['custom:bidder_number']
? `#${user?.['custom:bidder_number']}`
: 'N/A'}
</p>
</div>
<div className="flex flex-col gap-y-[11.9px] w-[80%]">
<div className="flex items-center gap-x-[8.8px]">
<p className="text-sm text-mv-black font-normal leading-4">
Name
</p>
<EditOutlinedIcon
sx={{ fontSize: 18 }}
className="hover:cursor-pointer"
onClick={() => {}}
/>
</div>
</div>
<div className="flex flex-col gap-y-[17px] items-start w-full">
<div className="flex flex-col gap-y-[5px] w-[80%]">
<p className="text-sm text-mv-black font-normal leading-[120%]">
Name
</p>
<input
className=" rounded-[5px] bg-light-grey w-full px-5 py-[10.5px] items-center text-sm font-base leading-4 text-mv-black placeholder:text-dark-grey"
className=" rounded-[5px] bg-light-grey w-full px-5 py-[10.5px] items-center text-sm font-base leading-[120%] text-mv-black placeholder:text-dark-grey"
placeholder={`${user?.given_name} ${user?.family_name}`}
disabled
/>
</div>
<div className="flex flex-col gap-y-[11.9px] w-[80%]">
<div className="flex items-center gap-x-[8.8px]">
<p className="text-sm text-mv-black font-normal leading-4">
Email
</p>
<EditOutlinedIcon
sx={{ fontSize: 18 }}
className="hover:cursor-pointer"
onClick={() => {}}
/>
</div>
<div className="flex flex-col gap-y-[5px] w-[80%]">
<p className="text-sm text-mv-black font-normal leading-[120%]">
Email
</p>
<input
className="rounded-[5px] bg-light-grey w-full px-5 py-[10.5px] items-center text-sm font-base leading-4 text-mv-black placeholder:text-dark-grey"
className="rounded-[5px] bg-light-grey w-full px-5 py-[10.5px] items-center text-sm font-base leading-[120%] text-mv-black placeholder:text-dark-grey"
placeholder={user?.email}
disabled
/>
</div>
<div className="flex flex-col gap-y-[11.9px] w-[80%]">
<div className="flex items-center gap-x-[8.8px]">
<p className="text-sm text-mv-black font-normal leading-4">
Phone Number
</p>
<EditOutlinedIcon
sx={{ fontSize: 18 }}
className="hover:cursor-pointer"
onClick={() => {}}
/>
</div>
<div className="flex flex-col gap-y-[5px] w-[80%]">
<p className="text-sm text-mv-black font-normal leading-[120%]">
Phone Number
</p>
<input
className="rounded-[5px] bg-light-grey w-full px-5 py-[10.5px] items-center text-sm font-base leading-4 text-mv-black placeholder:text-dark-grey"
className="rounded-[5px] bg-light-grey w-full px-5 py-[10.5px] items-center text-sm font-base leading-[120%] text-mv-black placeholder:text-dark-grey"
placeholder={user?.phone_number}
disabled
/>
</div>
<div className="flex flex-col gap-y-[11.9px] w-[80%]">
<div className="flex items-center gap-x-[8.8px]">
<p className="text-sm text-mv-black font-normal leading-4">
Company Name
</p>
<EditOutlinedIcon
sx={{ fontSize: 18 }}
className="hover:cursor-pointer"
onClick={() => {}}
/>
</div>
<div className="flex flex-col gap-y-[5px] w-[80%]">
<p className="text-sm text-mv-black font-normal leading-[120%]">
Company Name
</p>
<input
className="rounded-[5px] bg-light-grey w-full px-5 py-[10.5px] items-center text-sm font-base leading-4 text-mv-black placeholder:text-dark-grey"
className="rounded-[5px] bg-light-grey w-full px-5 py-[10.5px] items-center text-sm font-base leading-[120%] text-mv-black placeholder:text-dark-grey"
placeholder={user?.['custom:company_name']}
disabled
/>
</div>
<div className="flex flex-col gap-y-[11.9px] w-[80%]">
<div className="flex items-center gap-x-[8.8px]">
<p className="text-sm text-mv-black font-normal leading-4">
Company Address
</p>
<EditOutlinedIcon
sx={{ fontSize: 18 }}
className="hover:cursor-pointer"
onClick={() => {}}
/>
</div>
<p className="text-sm text-mv-black font-normal leading-[120%]">
Company Address
</p>
<input
className="rounded-[5px] bg-light-grey w-full px-5 py-[10.5px] items-center text-sm font-base leading-4 text-mv-black placeholder:text-dark-grey"
className="rounded-[5px] bg-light-grey w-full px-5 py-[10.5px] items-center text-sm font-base leading-[120%] text-mv-black placeholder:text-dark-grey"
placeholder={user?.['custom:company_address']}
disabled
/>
</div>
</div>
<div className="mt-[20px]">
<SaveChangesButton onClick={() => {}} />
<div className="mt-[25px]">
<EditProfileButton onClick={() => {}} />
</div>
<div className="mt-[70px] w-full flex flex-col items-start">
<div className="mt-[40px] w-full flex flex-col items-start">
<h2 className="text-mv-black text-xl font-medium">
Notification Settings
</h2>
<div className="mt-[30px] flex items-center justify-start gap-x-[20px]">
<div className="mt-[20px] flex items-center justify-start gap-x-[20px]">
<Checkbox
checked={emailNotificationsEnabled}
onChange={() => setEmailNotificationsEnabled((prev) => !prev)}
Expand All @@ -197,31 +157,31 @@ export default function ProfilePage() {
Turn on email notifications
</p>
</div>
<div className="mt-[26px] flex items-center justify-start gap-x-[20px]">
<div className="mt-[23.5px] flex items-center justify-start gap-x-[20px]">
<Checkbox
checked={upcomingAuctionNotificationsEnabled}
onChange={() =>
setUpcomingAuctionNotificationsEnabled((prev) => !prev)
}
/>
<p className="text-mv-black text-sm font-normal leading-[120%]">
Get notified about upcoming auctions
Get notified about <br />
upcoming auctions
</p>
</div>
<div className="mt-[26px] flex items-center justify-start gap-x-[20px]">
<div className="mt-[19.25px] flex items-center justify-start gap-x-[20px]">
<Checkbox
checked={promotionNotificationsEnabled}
onChange={() =>
setPromotionNotificationsEnabled((prev) => !prev)
}
/>
<p className="text-mv-black text-sm font-normal leading-[120%]">
Receive promotional emails and updates
Receive promotional
<br />
emails and updates
</p>
</div>
<div className="mt-[30px]">
<SaveChangesButton onClick={() => {}} />
</div>
</div>
</div>
<div className="flex-1 flex flex-col">
Expand Down Expand Up @@ -323,6 +283,10 @@ export default function ProfilePage() {
)}
</div>
</div>

<div className="w-full mt-[105px]">
<Footer />
</div>
</div>
);
}
Loading