Skip to content

Frontend profile UI#168

Open
Zainu04 wants to merge 15 commits into
codepath:mainfrom
ramblrorg:FrontendProfileUI
Open

Frontend profile UI#168
Zainu04 wants to merge 15 commits into
codepath:mainfrom
ramblrorg:FrontendProfileUI

Conversation

@Zainu04

@Zainu04 Zainu04 commented Jul 26, 2026

Copy link
Copy Markdown

Summary
Implements the Profile page frontend, consuming the Users endpoint from #1. Loads the current user via GET /api/users/me and lets them update display_name and home_currency via PATCH /api/users/me, with loading/success/error states and client-side validation.

New files

  • client/src/pages/Profile.jsx — page component: loads current user on mount, renders view mode and an inline edit form
  • client/src/pages/Profile.css — page styles (sand/beige palette)
  • client/src/components/Sidebar.jsx — shared left nav shell matching the wireframes, reusable by future pages
  • client/src/components/Sidebar.css — sidebar styles
  • client/src/services/users.js — thin fetch wrapper around GET/PATCH /api/users/me
  • client/src/helpers/currencies.js — curated {code, label} list for the home-currency select

Changes to existing files

  • client/src/App.jsx — registered the /profile route
  • client/src/index.css — added shared sand/beige color palette as CSS variables (--sand-*), used by Profile.css and Sidebar.css so future pages can match

Acceptance criteria

  • Current user's display name and home currency appear on the Profile page
  • User can update display name
  • User can update home currency
  • Home currency defaults to USD when no other value is set
  • Submission is blocked when display name is empty/whitespace
  • Save button disabled and shows "Saving…" while the PATCH request is in flight
  • On update failure, existing profile info stays visible and an error message is shown
  • Updated profile info appears immediately after save, no manual refresh required

Dev Notes

  • No auth yet, so this consumes /me as-is per T1 — nothing here assumes a real logged-in user.
  • Save intentionally updates local state from the PATCH response (not by re-fetching), so a failed save can never clobber the last-known-good profile shown on screen.
  • The wireframe's stats row (Trips Completed / Upcoming Trips / Countries Visited) and the Notifications/Help & Support settings rows aren't backed by any endpoint yet — left as static "Coming soon" rows rather than faking functionality. Those depend on the Trips/Users tickets adding more fields.
  • Sidebar.jsx links to routes for other pages (/dashboard, /trips, /itinerary, /budget, /packing-list) that don't exist yet — intentional, so nav is consistent once those pages land.

Testing

  • Loaded /profile — confirmed seeded user (Jane Doe, USD) renders correctly
Screenshot 2026-07-26 at 1 14 53 PM - Updated display name + home currency — confirmed `PATCH /api/users/me` returns 200, page updates without refresh, and values persist on reload Screenshot 2026-07-26 at 1 14 53 PM
  • Submitted empty display name — confirmed inline validation blocks the request (no network call fires)
  • Simulated a failed update (stopped server mid-request) — confirmed error banner shows and previous profile data stays visible

nuaq2005 and others added 15 commits July 5, 2026 22:21
Added user stories for trip management, budgeting, packing, weather, and countdown features.
Updated project name, team members, and feature descriptions in README.
Updated checklist to reflect completed tasks and added reflections on group progress and challenges.
Expanded the entity relationship diagram with detailed table structures for Users, Trips, Destinations, Activities, Expenses, and Packing List.
Marked completed tasks in the milestone checklist.
… really a patch) and setting up the routes to call the /me user endpoints.Also did some maintenance in renaming some files to follow other codepath projects' convention, and removing some filler gitkeeps
…validation and to getCurrentUser(most important). Also added comments to help easily undestand whhich methods use what endpoints
User and Trips Seed/Routes/Endpoints for Ticket#1 and #2
…rs to verify input params, and a tripOwnership helper to further verify that a user can only see the trips and destinations they created. Reformatted how dates are handled so that it is auto formatted to year day month
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants