From 5449b284cb89b98d7295e807ef7ba69ce51cd9c7 Mon Sep 17 00:00:00 2001 From: Aaron Po Date: Sat, 12 Sep 2026 18:04:11 -0400 Subject: [PATCH] Link commenter and following names to their user profile pages --- docs/web/architecture.md | 3 +++ .../detail/comments/CommentItem.stories.tsx | 1 + .../components/detail/comments/CommentItem.tsx | 5 ++++- .../app/features/breweries/routes/brewery-detail.tsx | 4 +++- .../breweries/utils/filler-brewery-detail.ts | 4 ++++ .../users/components/profile/tabs/FollowingTab.tsx | 12 +++++++++++- .../app/features/users/utils/filler-user-profile.ts | 5 +++-- 7 files changed, 29 insertions(+), 5 deletions(-) diff --git a/docs/web/architecture.md b/docs/web/architecture.md index c7e5291c..2999afc5 100644 --- a/docs/web/architecture.md +++ b/docs/web/architecture.md @@ -379,6 +379,7 @@ web/frontend/ │ │ - catalog beers, beer styles │ │ - home landing page │ │ - theme theme switcher/guide +│ │ - users public user profile page (/users/:id) │ ├── hooks/ Shared hooks not tied to one feature, for example useMediaQuery │ ├── routes.ts Route table (React Router 8 config-based routing) │ ├── root.tsx App shell and global providers @@ -395,6 +396,8 @@ web/frontend/ `/breweries/:id`) with Leaflet-powered maps and geolocation-based "nearby" search - Render the auth demo, account dashboard, and theme guide routes +- Render the public user profile route (`/users/:id`), including a user's + following list and (via brewery comments) links back to commenter profiles - Manage cookie-backed website session state - Call the .NET API for login, registration, token refresh, confirmation, and brewery/location data diff --git a/web/frontend/app/features/breweries/components/detail/comments/CommentItem.stories.tsx b/web/frontend/app/features/breweries/components/detail/comments/CommentItem.stories.tsx index 539c4354..ce47e50f 100644 --- a/web/frontend/app/features/breweries/components/detail/comments/CommentItem.stories.tsx +++ b/web/frontend/app/features/breweries/components/detail/comments/CommentItem.stories.tsx @@ -8,6 +8,7 @@ const commentItemDescription = `A single comment row on the brewery detail page: const comment: FillerComment = { id: '1', user: 'malt_kettle', + userAccountId: 'malt_kettle', initials: 'MK', rating: 5, time: '2 days ago', diff --git a/web/frontend/app/features/breweries/components/detail/comments/CommentItem.tsx b/web/frontend/app/features/breweries/components/detail/comments/CommentItem.tsx index 370b502d..1f49ef56 100644 --- a/web/frontend/app/features/breweries/components/detail/comments/CommentItem.tsx +++ b/web/frontend/app/features/breweries/components/detail/comments/CommentItem.tsx @@ -1,4 +1,5 @@ import { Heart, HeartSolid } from 'iconoir-react'; +import { Link } from 'react-router'; import StarRating from '../../shared/StarRating'; import type { FillerComment } from '../../../utils/filler-brewery-detail'; @@ -19,7 +20,9 @@ const CommentItem = ({ comment, onToggleLike }: CommentItemProps) => {
- {comment.user} + + {comment.user} + {comment.time}
diff --git a/web/frontend/app/features/breweries/routes/brewery-detail.tsx b/web/frontend/app/features/breweries/routes/brewery-detail.tsx index e715c2f2..eae5ef02 100644 --- a/web/frontend/app/features/breweries/routes/brewery-detail.tsx +++ b/web/frontend/app/features/breweries/routes/brewery-detail.tsx @@ -28,13 +28,14 @@ export const loader = async ({ request, params }: Route.LoaderArgs) => { brewery, loggedIn: auth !== null, username: auth?.username ?? null, + userAccountId: auth?.userAccountId ?? null, }; }; const initials = (username: string) => username.slice(0, 2).toUpperCase(); const BreweryDetail = ({ loaderData }: Route.ComponentProps) => { - const { brewery, loggedIn, username } = loaderData; + const { brewery, loggedIn, username, userAccountId } = loaderData; const [liked, setLiked] = useState(false); const [likeCount, setLikeCount] = useState(FILLER_BREWERY_META.likeCount); @@ -57,6 +58,7 @@ const BreweryDetail = ({ loaderData }: Route.ComponentProps) => { { id: crypto.randomUUID(), user: username ?? 'you', + userAccountId: userAccountId ?? '', initials: username ? initials(username) : 'YO', rating: yourRating, time: 'just now', diff --git a/web/frontend/app/features/breweries/utils/filler-brewery-detail.ts b/web/frontend/app/features/breweries/utils/filler-brewery-detail.ts index 554900a3..690aa184 100644 --- a/web/frontend/app/features/breweries/utils/filler-brewery-detail.ts +++ b/web/frontend/app/features/breweries/utils/filler-brewery-detail.ts @@ -88,6 +88,7 @@ export const FILLER_BEERS: FillerBeer[] = [ export interface FillerComment { id: string; user: string; + userAccountId: string; initials: string; rating: number; time: string; @@ -100,6 +101,7 @@ export const FILLER_COMMENTS: FillerComment[] = [ { id: '1', user: 'malt_kettle', + userAccountId: 'malt_kettle', initials: 'MK', rating: 5, time: '2 days ago', @@ -110,6 +112,7 @@ export const FILLER_COMMENTS: FillerComment[] = [ { id: '2', user: 'stoutfan_88', + userAccountId: 'stoutfan_88', initials: 'SB', rating: 4, time: '1 week ago', @@ -120,6 +123,7 @@ export const FILLER_COMMENTS: FillerComment[] = [ { id: '3', user: 'ale_annie', + userAccountId: 'ale_annie', initials: 'AL', rating: 4, time: '3 weeks ago', diff --git a/web/frontend/app/features/users/components/profile/tabs/FollowingTab.tsx b/web/frontend/app/features/users/components/profile/tabs/FollowingTab.tsx index 53552452..6d60e4ae 100644 --- a/web/frontend/app/features/users/components/profile/tabs/FollowingTab.tsx +++ b/web/frontend/app/features/users/components/profile/tabs/FollowingTab.tsx @@ -1,3 +1,4 @@ +import { Link } from 'react-router'; import EmptyState from '../EmptyState'; import type { FillerFollowing } from '../../../utils/filler-user-profile'; @@ -31,7 +32,16 @@ const FollowingTab = ({ following, onToggleFollow }: FollowingTabProps) => {
-

{f.name}

+ {f.userAccountId ? ( + + {f.name} + + ) : ( +

{f.name}

+ )}

{f.meta}