Search for meee - User pages and avatars

src/app/App.tsx

@@ -7,6 +7,7 @@ import {AdminPage} from './routes/AdminPage';
 import {EditProjectPage, NewProjectPage} from './routes/ProjectEditorPage';
 import {ProjectDetailsPage} from './routes/ProjectDetailsPage';
 import {ProjectsPage} from './routes/ProjectsPage';
+import {UserPage} from './routes/UserPage';
 import {YearAdministrationPage} from './routes/YearAdministrationPage';
 import {ProjectVideoWatchPage, VideoWatchPage, WatchPage} from './routes/WatchPage';
 import {YearsPage} from './routes/YearsPage';
@@ -54,6 +55,7 @@ export function App() {
     <AppLayout user={session.user} onViewModeChange={session.setViewMode}>
       <Switch>
         <Route path="/years" component={YearsPage} />
+        <Route path="/users/:userId" component={UserPage} />
         <Route path="/admin/analytics">
           {session.user.role === 'admin' ? (
             <AdminAnalyticsPage />

src/app/components/AppLayout.tsx

@@ -3,6 +3,7 @@ import {Link, useRoute} from 'wouter';
 
 import type {SessionUser, SessionViewMode} from '../../shared/api';
 import sentrySymbol from '../../assets/logos/logo-sentry-symbol.svg';
+import {UserAvatar} from './UserAvatar';
 
 export function AppLayout({
   user,
@@ -66,13 +67,17 @@ export function AppLayout({
               {viewModeError && <small role="status">{viewModeError}</small>}
             </div>
           )}
-          <div
+          <Link
             className="identity"
+            href={`/users/${user.id}`}
             aria-label={`signed in as ${user.displayName}, ${user.role}`}
           >
-            <span>{user.displayName}</span>
-            <small>{user.role}</small>
-          </div>
+            <UserAvatar user={user} />
+            <span className="identityCopy">
+              <span>{user.displayName}</span>
+              <small>{user.role}</small>
+            </span>
+          </Link>
           <form action="/api/auth/logout" method="post">
             <button className="textButton" type="submit">
               sign out

src/app/components/ProjectCard.tsx

@@ -1,8 +1,8 @@
 import {Link} from 'wouter';
 
 import type {ProjectSummary} from '../../shared/projects';
-import {Avatar} from './Avatar';
 import {Markdown} from './Markdown';
+import {UserAvatar} from './UserAvatar';
 
 interface ProjectListMember {
   id: string;
@@ -152,11 +152,14 @@ export function MemberStack({
       aria-label={members.map(({displayName}) => displayName).join(', ')}
     >
       {members.slice(0, 4).map((member) => (
-        <Avatar
+        <Link
+          href={`/users/${member.id}`}
           key={member.id}
-          displayName={member.displayName}
-          avatarUrl={member.avatarUrl}
-        />
+          title={member.displayName}
+          aria-label={`View ${member.displayName}'s Hackweek profile`}
+        >
+          <UserAvatar user={member} />
+        </Link>
       ))}
       {members.length > 4 && <span>+{members.length - 4}</span>}
     </span>

src/app/components/ProjectForm.tsx

@@ -3,6 +3,7 @@ import {useEffect, useId, useState, type FormEvent, type KeyboardEvent} from 're
 import type {ProjectDetail, ProjectWriteRequest} from '../../shared/projects';
 import {getAwardCategoryDescription} from '../awardCategories';
 import {useProjectOptions} from '../queries/projects';
+import {UserAvatar} from './UserAvatar';
 
 export function ProjectForm({
   yearId,
@@ -263,6 +264,7 @@ export function ProjectForm({
               <ul className="selectedTeam" aria-label="Selected team members">
                 {selectedMembers.map((member) => (
                   <li className="teamMemberChip" key={member.id}>
+                    <UserAvatar user={member} />
                     <span>
                       <strong>{member.displayName}</strong>
                       <small>{member.email}</small>
@@ -335,8 +337,11 @@ export function ProjectForm({
                           onMouseEnter={() => setHighlightedMember(index)}
                           onClick={() => addMember(member.id)}
                         >
-                          <strong>{member.displayName}</strong>
-                          <small>{member.email}</small>
+                          <UserAvatar user={member} />
+                          <span>
+                            <strong>{member.displayName}</strong>
+                            <small>{member.email}</small>
+                          </span>
                         </button>
                       </li>
                     ))}

src/app/components/UserAvatar.tsx

@@ -0,0 +1,44 @@
+import {useEffect, useState} from 'react';
+
+export function UserAvatar({
+  user,
+  className = '',
+}: {
+  user: {id: string; displayName: string; avatarUrl?: string | null};
+  className?: string;
+}) {
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => setFailed(false), [user.id, user.avatarUrl]);
+
+  const classes = `userAvatar${className ? ` ${className}` : ''}`;
+  if (!user.avatarUrl || failed) {
+    return (
+      <span className={`${classes} userAvatar--fallback`} aria-hidden="true">
+        {initials(user.displayName)}
+      </span>
+    );
+  }
+
+  return (
+    <img
+      className={classes}
+      src={`/api/users/${encodeURIComponent(user.id)}/avatar`}
+      alt=""
+      loading="lazy"
+      decoding="async"
+      width={64}
+      height={64}
+      onError={() => setFailed(true)}
+    />
+  );
+}
+
+function initials(value: string) {
+  return value
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((part) => part[0])
+    .join('')
+    .toUpperCase();
+}

src/app/queries/projects.ts

@@ -13,6 +13,7 @@ import type {
   ProjectResponse,
   ProjectsResponse,
   ProjectWriteRequest,
+  UserProfileResponse,
   YearResponse,
   YearsResponse,
 } from '../../shared/projects';
@@ -77,6 +78,14 @@ export function useProject(projectId: string) {
   });
 }
 
+export function useUserProfile(userId: string) {
+  return useQuery({
+    queryKey: ['user', userId],
+    queryFn: () =>
+      apiRequest<UserProfileResponse>(`/users/${encodeURIComponent(userId)}`),
+  });
+}
+
 export function useGroupMutations(yearId: string) {
   const cache = useQueryClient();
   const refresh = () => {

src/app/routes/ProjectDetailsPage.tsx

@@ -5,9 +5,9 @@ import {Link, useLocation, useParams, useSearchParams} from 'wouter';
 import {formatBytes} from '../../shared/format';
 import {MAX_MEDIA_BYTES} from '../../shared/projects';
 import {QueryState} from '../components/AppLayout';
-import {Avatar} from '../components/Avatar';
 import {Markdown} from '../components/Markdown';
 import {ProjectVoting} from '../components/ProjectVoting';
+import {UserAvatar} from '../components/UserAvatar';
 import {useBallotStatus} from '../queries/administration';
 import {getPlayback, useProjectVideo} from '../queries/videos';
 import {ProjectVideoPanel} from '../video/ProjectVideoPanel';
@@ -74,7 +74,12 @@ export function ProjectDetailsPage() {
                 {project.data.project.needsHelp && <span>Looking for help</span>}
               </div>
               <h1>{project.data.project.name}</h1>
-              <p>created by {project.data.project.creator.displayName}</p>
+              <p>
+                created by{' '}
+                <Link href={`/users/${project.data.project.creator.id}`}>
+                  {project.data.project.creator.displayName}
+                </Link>
+              </p>
             </div>
             <div className="detailActions">
               {project.data.project.permissions.canClaim && (
@@ -116,6 +121,29 @@ export function ProjectDetailsPage() {
               {actionError}
             </p>
           )}
+          {project.data.project.awards.length > 0 && (
+            <section className="projectAwards" aria-labelledby="project-awards-title">
+              <header>
+                <p className="kicker">Hackweek honors</p>
+                <h2 id="project-awards-title">
+                  {project.data.project.awards.length === 1
+                    ? 'award winner'
+                    : 'award winners'}
+                </h2>
+              </header>
+              <ul>
+                {project.data.project.awards.map((award) => (
+                  <li key={award.id}>
+                    <span aria-hidden="true">🏆</span>
+                    <div>
+                      <strong>{award.name}</strong>
+                      <small>{award.categoryName}</small>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          )}
           <div className="detailLayout">
             <article className="projectNarrative">
               <p className="kicker">project summary</p>
@@ -151,14 +179,17 @@ export function ProjectDetailsPage() {
               <ul>
                 {project.data.project.members.map((member) => (
                   <li key={member.id}>
-                    <Avatar
-                      displayName={member.displayName}
-                      avatarUrl={member.avatarUrl}
-                    />
-                    <a href={`mailto:${member.email}`}>
+                    <Link
+                      className="teamAvatarLink"
+                      href={`/users/${member.id}`}
+                      aria-label={`View ${member.displayName}'s Hackweek profile`}
+                    >
+                      <UserAvatar user={member} />
+                    </Link>
+                    <Link href={`/users/${member.id}`}>
                       <strong>{member.displayName}</strong>
                       <small>{member.email}</small>
-                    </a>
+                    </Link>
                   </li>
                 ))}
               </ul>

src/app/routes/ProjectsPage.tsx

@@ -175,7 +175,7 @@ export function ProjectsPage({isAdmin = false}: {isAdmin?: boolean}) {
                 type="search"
                 value={searchInput}
                 maxLength={100}
-                placeholder="Search titles and descriptions"
+                placeholder="Search titles, descriptions, and people"
                 onChange={(event) => {
                   paginationRequestPending.current = false;
                   setSearchInput(event.target.value);

src/app/routes/UserPage.tsx

@@ -0,0 +1,104 @@
+import {Link, useParams} from 'wouter';
+
+import {PageState, QueryState} from '../components/AppLayout';
+import {ProjectCard} from '../components/ProjectCard';
+import {UserAvatar} from '../components/UserAvatar';
+import {useUserProfile} from '../queries/projects';
+
+export function UserPage() {
+  const {userId} = useParams<{userId: string}>();
+  const profile = useUserProfile(userId);
+
+  return (
+    <QueryState loading={profile.isLoading} error={profile.error}>
+      {profile.data && (
+        <main className="userPage">
+          <header className="userHero">
+            <Link className="backLink" href="/years">
+              ← hackweek archive
+            </Link>
+            <div className="userIdentity">
+              <UserAvatar user={profile.data.user} />
+              <div>
+                <p className="kicker">Hackweek maker</p>
+                <h1>{profile.data.user.displayName}</h1>
+                <a href={`mailto:${profile.data.user.email}`}>
+                  {profile.data.user.email}
+                </a>
+              </div>
+            </div>
+            <dl className="userHighlights" aria-label="Hackweek highlights">
+              <Highlight
+                value={profile.data.highlights.hackweekCount}
+                label="Hackweeks"
+              />
+              <Highlight value={profile.data.highlights.projectCount} label="Projects" />
+              <Highlight value={profile.data.highlights.ideaCount} label="Ideas opened" />
+              <Highlight value={profile.data.highlights.awardCount} label="Awards" />
+            </dl>
+          </header>
+
+          {profile.data.awards.length > 0 && (
+            <section className="userAwards" aria-labelledby="user-awards-title">
+              <header>
+                <p className="kicker">Highlights</p>
+                <h2 id="user-awards-title">award shelf</h2>
+              </header>
+              <div>
+                {profile.data.awards.map((award) => (
+                  <Link
+                    key={award.id}
+                    href={`/years/${award.yearId}/projects/${award.projectId}`}
+                  >
+                    <span>{award.yearId}</span>
+                    <strong>{award.name || award.categoryName}</strong>
+                    <small>{award.projectName}</small>
+                  </Link>
+                ))}
+              </div>
+            </section>
+          )}
+
+          {!profile.data.years.length ? (
+            <PageState
+              title="No Hackweek history yet"
+              detail={`${profile.data.user.displayName} has not joined or opened a project yet.`}
+            />
+          ) : (
+            <div className="userTimeline">
+              {profile.data.years.map((year) => (
+                <section
+                  className="userYear"
+                  aria-labelledby={`user-year-${year.yearId}`}
+                  key={year.yearId}
+                >
+                  <header>
+                    <div>
+                      <p className="kicker">Hackweek</p>
+                      <h2 id={`user-year-${year.yearId}`}>{year.yearId}</h2>
+                    </div>
+                    <Link href={`/years/${year.yearId}/projects`}>view year →</Link>
+                  </header>
+                  <div className="projectGrid">
+                    {year.projects.map((project) => (
+                      <ProjectCard project={project} key={project.id} />
+                    ))}
+                  </div>
+                </section>
+              ))}
+            </div>
+          )}
+        </main>
+      )}
+    </QueryState>
+  );
+}
+
+function Highlight({value, label}: {value: number; label: string}) {
+  return (
+    <div>
+      <dt>{label}</dt>
+      <dd>{value}</dd>
+    </div>
+  );
+}