From 03fb48c76d9580e0e478e0f89ae73d2dc030d196 Mon Sep 17 00:00:00 2001 From: Lance Tan Date: Fri, 12 Apr 2024 16:15:50 -0700 Subject: [PATCH] Update styling of profile page --- .../components/buttons/EditProfileButton.jsx | 13 ++ frontend/src/pages/ListingsPage.jsx | 41 +++--- frontend/src/pages/ProfilePage.jsx | 127 ++++++------------ 3 files changed, 78 insertions(+), 103 deletions(-) create mode 100644 frontend/src/components/buttons/EditProfileButton.jsx diff --git a/frontend/src/components/buttons/EditProfileButton.jsx b/frontend/src/components/buttons/EditProfileButton.jsx new file mode 100644 index 0000000..e232ad2 --- /dev/null +++ b/frontend/src/components/buttons/EditProfileButton.jsx @@ -0,0 +1,13 @@ +import React from 'react'; + +export default function EditProfileButton({ onClick }) { + return ( + + ); +} diff --git a/frontend/src/pages/ListingsPage.jsx b/frontend/src/pages/ListingsPage.jsx index c82a7c8..9c08efd 100644 --- a/frontend/src/pages/ListingsPage.jsx +++ b/frontend/src/pages/ListingsPage.jsx @@ -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 } }) => { @@ -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); diff --git a/frontend/src/pages/ProfilePage.jsx b/frontend/src/pages/ProfilePage.jsx index 48da506..2141dfa 100644 --- a/frontend/src/pages/ProfilePage.jsx +++ b/frontend/src/pages/ProfilePage.jsx @@ -10,6 +10,7 @@ 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'; export default function ProfilePage() { const user = useUser(); @@ -74,121 +75,81 @@ export default function ProfilePage() { -
-
-
- - {}} - /> -
-
+
+
+
+
-

+

Bidder Number

-

+

{user?.['custom:bidder_number'] ? `#${user?.['custom:bidder_number']}` : 'N/A'}

-
-
-

- Name -

- {}} - /> -
+
+
+
+

+ Name +

-
-
-

- Email -

- {}} - /> -
+
+

+ Email +

-
-
-

- Phone Number -

- {}} - /> -
+
+

+ Phone Number +

-
-
-

- Company Name -

- {}} - /> -
+
+

+ Company Name +

-
-

- Company Address -

- {}} - /> -
+

+ Company Address +

-
- {}} /> +
+ {}} />
-
+

Notification Settings

-
+
setEmailNotificationsEnabled((prev) => !prev)} @@ -197,7 +158,7 @@ export default function ProfilePage() { Turn on email notifications

-
+
@@ -205,10 +166,11 @@ export default function ProfilePage() { } />

- Get notified about upcoming auctions + Get notified about
+ upcoming auctions

-
+
@@ -216,12 +178,11 @@ export default function ProfilePage() { } />

- Receive promotional emails and updates + Receive promotional +
+ emails and updates

-
- {}} /> -