refactor: separate components

frontend/src/app/AuthenticatedApp.tsx

@@ -5,7 +5,7 @@ import { AppFooter } from '../components/layout/AppFooter'
 import { GoGuessHeader } from '../components/layout/GoGuessHeader'
 import { WorkspaceUtilities } from '../components/layout/WorkspaceUtilities'
 import { NotFound } from '../components/ui/NotFound'
-import { CalendarPage, InboxPage, ScheduledInterviewPage } from '../features/interviews'
+import { InboxPage, ScheduledInterviewPage } from '../features/interviews'
 import { CreateJobPage, JobDetailPage, JobsPage } from '../features/jobs'
 import {
   CreateParticipantPage,
@@ -13,7 +13,7 @@ import {
   ParticipantsPage,
 } from '../features/participants'
 import { QuestionLibraryPage, QuestionPage } from '../features/questions'
-import { ProfilePage, UsersPage } from '../features/users'
+import {CalendarPage, ProfilePage, UsersPage} from '../features/users'
 
 export function AuthenticatedApp({ onLogout }: { onLogout: () => void }) {
   const [open, setOpen] = useState(false)

frontend/src/components/actions/errorMessage.ts

@@ -5,3 +5,9 @@ export function errorMessage(error: unknown) {
     ? error.message
     : 'Something went wrong'
 }
+
+export function message(error: unknown) {
+  return error instanceof ApiError || error instanceof Error
+      ? error.message
+      : 'Something went wrong'
+}

frontend/src/components/actions/index.ts

@@ -1,4 +1,4 @@
 export { useAuthSession } from './Account'
 export { ErrorAlert } from './ErrorAlert'
-export { errorMessage } from './errorMessage'
+export { errorMessage, message } from './errorMessage'
 export { Loading } from './Loading'

frontend/src/components/layout/SideBar.tsx

@@ -43,7 +43,6 @@ export function SideBar({
           icon={<CircleHelp size={20} />}
           close={close}
         />
-        <NavItem to="/calendar" label="Calendar" icon={<CalendarDays size={20} />} close={close} />
         <NavItem to="/users" label="Users" icon={<UserRound size={20} />} close={close} />
       </nav>
       <div className="sidebar-bottom">

frontend/src/components/layout/WorkspaceUtilities.tsx

@@ -1,21 +1,25 @@
-import { Inbox } from 'lucide-react'
-import { NavLink } from 'react-router-dom'
-import type { User } from '../../types'
+import {CalendarDays, Inbox, Mail} from 'lucide-react'
+import {NavLink} from 'react-router-dom'
+import type {User} from '../../types'
 
-export function WorkspaceUtilities({ user }: { user: User | null }) {
-  const profileLabel = user?.displayName || user?.email || 'Profile'
-  return (
-    <nav className="workspace-utilities" aria-label="Account navigation">
-      <NavLink className="utility-link" to="/inbox">
-        <Inbox size={18} aria-hidden="true" />
-        <span>Inbox</span>
-      </NavLink>
-      <NavLink className="utility-link profile-utility" to="/profile">
-        <span className="avatar tiny" aria-hidden="true">
-          {profileLabel.slice(0, 2).toUpperCase()}
-        </span>
-        <span>{profileLabel}</span>
-      </NavLink>
-    </nav>
-  )
+export function WorkspaceUtilities({user}: { user: User | null }) {
+    const profileLabel = user?.displayName || user?.email || 'Profile'
+    return (
+        <nav className="workspace-utilities" aria-label="Account navigation">
+            <NavLink className="utility-link" to="/inbox">
+                <Mail size={18} aria-hidden="true"/>
+                <span>Invitations</span>
+            </NavLink>
+            <NavLink className="utility-link" to="/calendar">
+                <CalendarDays size={18} aria-hidden="true"/>
+                <span>Calendar</span>
+            </NavLink>
+            <NavLink className="utility-link profile-utility" to="/profile">
+                <span className="avatar tiny" aria-hidden="true">
+                  {profileLabel.slice(0, 2).toUpperCase()}
+                </span>
+                <span>{profileLabel}</span>
+            </NavLink>
+        </nav>
+    )
 }

frontend/src/components/ui/PageHeader.tsx

@@ -15,7 +15,6 @@ export function PageHeader({
     <header className="page-header">
       <div>
         <span className="eyebrow">{eyebrow}</span>
-        <h1>{title}</h1>
         {description && <p>{description}</p>}
       </div>
       {action}

frontend/src/config/navigation.ts

@@ -15,13 +15,13 @@ export const footerLinkGroups: FooterLinkGroup[] = [
       { label: 'Jobs', href: '/jobs' },
       { label: 'Participants', href: '/participants' },
       { label: 'Question library', href: '/questions' },
-      { label: 'Calendar', href: '/calendar' },
     ],
   },
   {
     title: 'Useful links',
     links: [
       { label: 'Your inbox', href: '/inbox' },
+      { label: 'Calendar', href: '/calendar' },
       { label: 'Your profile', href: '/profile' },
       { label: 'Interview team', href: '/users' },
     ],

frontend/src/features/interviews/index.ts

@@ -1,2 +1,2 @@
-export { CalendarPage, InboxPage, ParticipantMeetingPage, ScheduledInterviewPage } from './pages'
+export { InboxPage, ParticipantMeetingPage, ScheduledInterviewPage } from './pages'
 export { ScheduleInterviewForm } from './components/ScheduleInterviewForm'

frontend/src/features/interviews/pages.tsx

@@ -1,453 +1,392 @@
-import { Check, Copy, UsersRound, X } from 'lucide-react'
-import { type FormEvent, useEffect, useMemo, useState } from 'react'
-import { Link, useParams } from 'react-router-dom'
-import { api, ApiError } from '../../api/client'
-import type { ParticipantMeeting, ScheduledInterview } from '../../types'
-import { ErrorAlert, Loading } from '../../components/ui/AsyncState'
-import { DateAndPlace, InterviewCard } from './components/InterviewCard'
-
-function message(error: unknown) {
-  return error instanceof ApiError || error instanceof Error
-    ? error.message
-    : 'Something went wrong'
-}
+import {Check, Copy, UsersRound, X} from 'lucide-react'
+import {type FormEvent, useEffect, useState} from 'react'
+import {Link, useParams} from 'react-router-dom'
+import {api} from '../../api/client'
+import type {ParticipantMeeting, ScheduledInterview} from '../../types'
+import {ErrorAlert, Loading} from '../../components/ui/AsyncState'
+import {DateAndPlace, InterviewCard} from './components/InterviewCard'
+import {message} from "../../components/actions";
 
 export function InboxPage() {
-  const [items, setItems] = useState<ScheduledInterview[]>([])
-  const [error, setError] = useState('')
-  const [loading, setLoading] = useState(true)
+    const [items, setItems] = useState<ScheduledInterview[]>([])
+    const [error, setError] = useState('')
+    const [loading, setLoading] = useState(true)
 
-  useEffect(() => {
-    void api.inbox
-      .list()
-      .then(setItems)
-      .catch((value) => setError(message(value)))
-      .finally(() => setLoading(false))
-  }, [])
+    useEffect(() => {
+        void api.inbox
+            .list()
+            .then(setItems)
+            .catch((value) => setError(message(value)))
+            .finally(() => setLoading(false))
+    }, [])
 
-  async function respond(id: number, status: 'accepted' | 'declined') {
-    setError('')
-    try {
-      const updated = await api.inbox.respond(id, status)
-      setItems((current) => current.map((item) => (item.id === id ? updated : item)))
-    } catch (value) {
-      setError(message(value))
+    async function respond(id: number, status: 'accepted' | 'declined') {
+        setError('')
+        try {
+            const updated = await api.inbox.respond(id, status)
+            setItems((current) => current.map((item) => (item.id === id ? updated : item)))
+        } catch (value) {
+            setError(message(value))
+        }
     }
-  }
 
-  return (
-    <>
-      <header className="page-header">
-        <div>
-          <span className="eyebrow">Invitations</span>
-          <h1>Inbox</h1>
-          <p>Respond to interview invitations assigned to you.</p>
-        </div>
-      </header>
-      {error && <ErrorAlert error={error} />}
-      {loading ? (
-        <Loading />
-      ) : (
-        <section className="meeting-list">
-          {items.map((item) => (
-            <InterviewCard interview={item} key={item.id}>
-              <div className="meeting-actions">
-                <button
-                  className="button primary"
-                  type="button"
-                  onClick={() => void respond(item.id, 'accepted')}
-                >
-                  <Check size={17} /> Accept
-                </button>
-                <button
-                  className="button secondary danger"
-                  type="button"
-                  onClick={() => void respond(item.id, 'declined')}
-                >
-                  <X size={17} /> Decline
-                </button>
-              </div>
-            </InterviewCard>
-          ))}
-          {!items.length && (
-            <div className="card empty-state">
-              <h3>Inbox zero</h3>
-              <p>You have no interview invitations.</p>
-            </div>
-          )}
-        </section>
-      )}
-    </>
-  )
+    return (
+        <>
+            <header className="page-header">
+                <div>
+                    <span className="eyebrow">Invitations</span>
+                    <h1>Inbox</h1>
+                    <p>Respond to interview invitations assigned to you.</p>
+                </div>
+            </header>
+            {error && <ErrorAlert error={error}/>}
+            {loading ? (
+                <Loading/>
+            ) : (
+                <section className="meeting-list">
+                    {items.map((item) => (
+                        <InterviewCard interview={item} key={item.id}>
+                            <div className="meeting-actions">
+                                <button
+                                    className="button primary"
+                                    type="button"
+                                    onClick={() => void respond(item.id, 'accepted')}
+                                >
+                                    <Check size={17}/> Accept
+                                </button>
+                                <button
+                                    className="button secondary danger"
+                                    type="button"
+                                    onClick={() => void respond(item.id, 'declined')}
+                                >
+                                    <X size={17}/> Decline
+                                </button>
+                            </div>
+                        </InterviewCard>
+                    ))}
+                    {!items.length && (
+                        <div className="card empty-state">
+                            <h3>Inbox zero</h3>
+                            <p>You have no interview invitations.</p>
+                        </div>
+                    )}
+                </section>
+            )}
+        </>
+    )
 }
 
-export function CalendarPage() {
-  const [items, setItems] = useState<ScheduledInterview[]>([])
-  const [error, setError] = useState('')
-  const [loading, setLoading] = useState(true)
-  useEffect(() => {
-    void api
-      .calendar()
-      .then(setItems)
-      .catch((value) => setError(message(value)))
-      .finally(() => setLoading(false))
-  }, [])
-  const groups = useMemo(() => {
-    return [...items]
-      .sort((a, b) => a.startsAt.localeCompare(b.startsAt))
-      .reduce<Record<string, ScheduledInterview[]>>((result, item) => {
-        const key = new Date(item.startsAt).toLocaleDateString(undefined, {
-          weekday: 'long',
-          month: 'long',
-          day: 'numeric',
-          year: 'numeric',
-        })
-        ;(result[key] ??= []).push(item)
-        return result
-      }, {})
-  }, [items])
-  return (
-    <>
-      <header className="page-header">
-        <div>
-          <span className="eyebrow">Schedule</span>
-          <h1>Calendar</h1>
-          <p>Your accepted and organized interviews, grouped by date.</p>
-        </div>
-      </header>
-      {error && <ErrorAlert error={error} />}
-      {loading ? (
-        <Loading />
-      ) : (
-        Object.entries(groups).map(([date, interviews]) => (
-          <section className="calendar-day" key={date}>
-            <h2>{date}</h2>
-            <div className="meeting-list">
-              {interviews.map((item) => (
-                <InterviewCard interview={item} key={item.id}>
-                  <Link className="button secondary" to={`/scheduled-interviews/${item.id}`}>
-                    Open session
-                  </Link>
-                </InterviewCard>
-              ))}
-            </div>
-          </section>
-        ))
-      )}
-    </>
-  )
-}
 
 export function ScheduledInterviewPage() {
-  const id = Number(useParams().id)
-  const [interview, setInterview] = useState<ScheduledInterview>()
-  const [document, setDocument] = useState('')
-  const [notes, setNotes] = useState<ScheduledInterview['notes']>([])
-  const [error, setError] = useState('')
-  const [saving, setSaving] = useState(false)
-  const [linkCopied, setLinkCopied] = useState(false)
-  const loadedInterviewID = interview?.id
+    const id = Number(useParams().id)
+    const [interview, setInterview] = useState<ScheduledInterview>()
+    const [document, setDocument] = useState('')
+    const [notes, setNotes] = useState<ScheduledInterview['notes']>([])
+    const [error, setError] = useState('')
+    const [saving, setSaving] = useState(false)
+    const [linkCopied, setLinkCopied] = useState(false)
+    const loadedInterviewID = interview?.id
 
-  useEffect(() => {
-    let active = true
-    void Promise.all([api.scheduledInterviews.get(id), api.scheduledInterviews.notes(id)])
-      .then(([item, loadedNotes]) => {
-        if (!active) return
-        setInterview(item)
-        setDocument(item.sharedDocument)
-        setNotes(loadedNotes)
-      })
-      .catch((value) => active && setError(message(value)))
-    return () => {
-      active = false
+    useEffect(() => {
+        let active = true
+        void Promise.all([api.scheduledInterviews.get(id), api.scheduledInterviews.notes(id)])
+            .then(([item, loadedNotes]) => {
+                if (!active) return
+                setInterview(item)
+                setDocument(item.sharedDocument)
+                setNotes(loadedNotes)
+            })
+            .catch((value) => active && setError(message(value)))
+        return () => {
+            active = false
+        }
+    }, [id])
+
+    useEffect(() => {
+        if (!loadedInterviewID) return
+        const controller = new AbortController()
+        void api.scheduledInterviews
+            .subscribe(
+                id,
+                (event) => {
+                    if (event.type === 'note.created') {
+                        setNotes((current) =>
+                            current.some((item) => item.id === event.note.id)
+                                ? current
+                                : [...current, event.note],
+                        )
+                    }
+                    if (event.type === 'document.updated') {
+                        setDocument(event.sharedDocument)
+                        setInterview((current) =>
+                            current ? {...current, sharedDocument: event.sharedDocument} : current,
+                        )
+                    }
+                },
+                controller.signal,
+                (value) => setError(message(value)),
+            )
+            .catch((value) => {
+                if (!controller.signal.aborted) setError(message(value))
+            })
+        return () => controller.abort()
+    }, [id, loadedInterviewID])
+
+    async function setStatus(status: string) {
+        setError('')
+        try {
+            setInterview(await api.scheduledInterviews.setStatus(id, status))
+        } catch (value) {
+            setError(message(value))
+        }
     }
-  }, [id])
 
-  useEffect(() => {
-    if (!loadedInterviewID) return
-    const controller = new AbortController()
-    void api.scheduledInterviews
-      .subscribe(
-        id,
-        (event) => {
-          if (event.type === 'note.created') {
+    async function saveDocument(event: FormEvent) {
+        event.preventDefault()
+        setSaving(true)
+        setError('')
+        try {
+            setInterview(await api.scheduledInterviews.updateDocument(id, document))
+        } catch (value) {
+            setError(message(value))
+        } finally {
+            setSaving(false)
+        }
+    }
+
+    async function addNote(event: FormEvent<HTMLFormElement>) {
+        event.preventDefault()
+        const form = event.currentTarget
+        const body = String(new FormData(form).get('body')).trim()
+        if (!body) return
+        try {
+            const note = await api.scheduledInterviews.addNote(id, body)
             setNotes((current) =>
-              current.some((item) => item.id === event.note.id)
-                ? current
-                : [...current, event.note],
+                current.some((item) => item.id === note.id) ? current : [...current, note],
             )
-          }
-          if (event.type === 'document.updated') {
-            setDocument(event.sharedDocument)
-            setInterview((current) =>
-              current ? { ...current, sharedDocument: event.sharedDocument } : current,
-            )
-          }
-        },
-        controller.signal,
-        (value) => setError(message(value)),
-      )
-      .catch((value) => {
-        if (!controller.signal.aborted) setError(message(value))
-      })
-    return () => controller.abort()
-  }, [id, loadedInterviewID])
-
-  async function setStatus(status: string) {
-    setError('')
-    try {
-      setInterview(await api.scheduledInterviews.setStatus(id, status))
-    } catch (value) {
-      setError(message(value))
+            form.reset()
+        } catch (value) {
+            setError(message(value))
+        }
     }
-  }
 
-  async function saveDocument(event: FormEvent) {
-    event.preventDefault()
-    setSaving(true)
-    setError('')
-    try {
-      setInterview(await api.scheduledInterviews.updateDocument(id, document))
-    } catch (value) {
-      setError(message(value))
-    } finally {
-      setSaving(false)
+    async function copyParticipantLink(url: string) {
+        setError('')
+        try {
+            await navigator.clipboard.writeText(url)
+            setLinkCopied(true)
+        } catch {
+            setError('Could not copy the participant interview link')
+        }
     }
-  }
 
-  async function addNote(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault()
-    const form = event.currentTarget
-    const body = String(new FormData(form).get('body')).trim()
-    if (!body) return
-    try {
-      const note = await api.scheduledInterviews.addNote(id, body)
-      setNotes((current) =>
-        current.some((item) => item.id === note.id) ? current : [...current, note],
-      )
-      form.reset()
-    } catch (value) {
-      setError(message(value))
-    }
-  }
-
-  async function copyParticipantLink(url: string) {
-    setError('')
-    try {
-      await navigator.clipboard.writeText(url)
-      setLinkCopied(true)
-    } catch {
-      setError('Could not copy the participant interview link')
-    }
-  }
-
-  if (!interview && !error) return <Loading />
-  if (!interview) return <ErrorAlert error={error} />
-  return (
-    <>
-      <Link className="back-link" to="/calendar">
-        ← Calendar
-      </Link>
-      <header className="page-header">
-        <div>
-          <span className="eyebrow">Interviewer session</span>
-          <h1>{interview.participantName}</h1>
-          <p>{interview.jobTitle}</p>
-        </div>
-        <span className={`status status-${interview.status}`}>{interview.status}</span>
-      </header>
-      {error && <ErrorAlert error={error} />}
-      <DateAndPlace interview={interview} />
-      <div className="session-actions">
-        <button
-          className="button secondary"
-          type="button"
-          onClick={() => void copyParticipantLink(interview.candidateUrl)}
-          aria-label="Copy participant interview link"
-        >
-          {linkCopied ? <Check size={17} /> : <Copy size={17} />}
-          {linkCopied ? 'Link copied' : 'Copy participant link'}
-        </button>
-        {interview.status !== 'started' && interview.status !== 'completed' && (
-          <button
-            className="button primary"
-            type="button"
-            onClick={() => void setStatus('started')}
-          >
-            Start interview
-          </button>
-        )}
-        {interview.status === 'started' && (
-          <button
-            className="button primary"
-            type="button"
-            onClick={() => void setStatus('completed')}
-          >
-            Complete interview
-          </button>
-        )}
-      </div>
-      <div className="session-grid">
-        <form className="card shared-document" onSubmit={saveDocument}>
-          <div className="section-heading">
-            <div>
-              <span className="eyebrow">Visible to candidate</span>
-              <h2>Shared documentation</h2>
+    if (!interview && !error) return <Loading/>
+    if (!interview) return <ErrorAlert error={error}/>
+    return (
+        <>
+            <Link className="back-link" to="/calendar">
+                ← Calendar
+            </Link>
+            <header className="page-header">
+                <div>
+                    <span className="eyebrow">Interviewer session</span>
+                    <h1>{interview.participantName}</h1>
+                    <p>{interview.jobTitle}</p>
+                </div>
+                <span className={`status status-${interview.status}`}>{interview.status}</span>
+            </header>
+            {error && <ErrorAlert error={error}/>}
+            <DateAndPlace interview={interview}/>
+            <div className="session-actions">
+                <button
+                    className="button secondary"
+                    type="button"
+                    onClick={() => void copyParticipantLink(interview.candidateUrl)}
+                    aria-label="Copy participant interview link"
+                >
+                    {linkCopied ? <Check size={17}/> : <Copy size={17}/>}
+                    {linkCopied ? 'Link copied' : 'Copy participant link'}
+                </button>
+                {interview.status !== 'started' && interview.status !== 'completed' && (
+                    <button
+                        className="button primary"
+                        type="button"
+                        onClick={() => void setStatus('started')}
+                    >
+                        Start interview
+                    </button>
+                )}
+                {interview.status === 'started' && (
+                    <button
+                        className="button primary"
+                        type="button"
+                        onClick={() => void setStatus('completed')}
+                    >
+                        Complete interview
+                    </button>
+                )}
             </div>
-          </div>
-          <div className="form-section">
+            <div className="session-grid">
+                <form className="card shared-document" onSubmit={saveDocument}>
+                    <div className="section-heading">
+                        <div>
+                            <span className="eyebrow">Visible to candidate</span>
+                            <h2>Shared documentation</h2>
+                        </div>
+                    </div>
+                    <div className="form-section">
             <textarea
-              aria-label="Shared documentation"
-              rows={18}
-              value={document}
-              onChange={(event) => setDocument(event.target.value)}
+                aria-label="Shared documentation"
+                rows={18}
+                value={document}
+                onChange={(event) => setDocument(event.target.value)}
             />
-            <button className="button primary" type="submit" disabled={saving}>
-              {saving ? 'Saving…' : 'Save shared documentation'}
-            </button>
-          </div>
-        </form>
-        <section className="card notes-panel">
-          <div className="section-heading">
-            <div>
-              <span className="eyebrow">Interviewers only</span>
-              <h2>Live notes</h2>
+                        <button className="button primary" type="submit" disabled={saving}>
+                            {saving ? 'Saving…' : 'Save shared documentation'}
+                        </button>
+                    </div>
+                </form>
+                <section className="card notes-panel">
+                    <div className="section-heading">
+                        <div>
+                            <span className="eyebrow">Interviewers only</span>
+                            <h2>Live notes</h2>
+                        </div>
+                    </div>
+                    <div className="notes-list" aria-live="polite">
+                        {notes.map((note) => (
+                            <article className="note" key={note.id}>
+                                <strong>{note.authorName}</strong>
+                                <time>{new Date(note.createdAt).toLocaleTimeString()}</time>
+                                <p>{note.body}</p>
+                            </article>
+                        ))}
+                    </div>
+                    {interview.status === 'started' ? (
+                        <form className="note-form" onSubmit={addNote}>
+                            <label className="sr-only" htmlFor="interview-note">
+                                Add a note
+                            </label>
+                            <textarea
+                                id="interview-note"
+                                name="body"
+                                rows={3}
+                                required
+                                placeholder="Add a private interviewer note…"
+                            />
+                            <button className="button primary" type="submit">
+                                Post note
+                            </button>
+                        </form>
+                    ) : (
+                        <p className="panel-padding muted">
+                            Notes can be added while the interview is started.
+                        </p>
+                    )}
+                </section>
             </div>
-          </div>
-          <div className="notes-list" aria-live="polite">
-            {notes.map((note) => (
-              <article className="note" key={note.id}>
-                <strong>{note.authorName}</strong>
-                <time>{new Date(note.createdAt).toLocaleTimeString()}</time>
-                <p>{note.body}</p>
-              </article>
-            ))}
-          </div>
-          {interview.status === 'started' ? (
-            <form className="note-form" onSubmit={addNote}>
-              <label className="sr-only" htmlFor="interview-note">
-                Add a note
-              </label>
-              <textarea
-                id="interview-note"
-                name="body"
-                rows={3}
-                required
-                placeholder="Add a private interviewer note…"
-              />
-              <button className="button primary" type="submit">
-                Post note
-              </button>
-            </form>
-          ) : (
-            <p className="panel-padding muted">
-              Notes can be added while the interview is started.
-            </p>
-          )}
-        </section>
-      </div>
-      <section className="card attendee-section">
-        <div className="section-heading">
-          <div>
-            <h2>Attendees</h2>
-            <p>Interview team and response status.</p>
-          </div>
-        </div>
-        <div className="user-list">
-          {interview.attendees.map((attendee) => (
-            <article className="user-row" key={attendee.userId}>
-              <UsersRound />
-              <div>
-                <strong>{attendee.displayName}</strong>
-                <small>{attendee.email}</small>
-              </div>
-              <span className={`status status-${attendee.status}`}>{attendee.status}</span>
-            </article>
-          ))}
-        </div>
-      </section>
-    </>
-  )
+            <section className="card attendee-section">
+                <div className="section-heading">
+                    <div>
+                        <h2>Attendees</h2>
+                        <p>Interview team and response status.</p>
+                    </div>
+                </div>
+                <div className="user-list">
+                    {interview.attendees.map((attendee) => (
+                        <article className="user-row" key={attendee.userId}>
+                            <UsersRound/>
+                            <div>
+                                <strong>{attendee.displayName}</strong>
+                                <small>{attendee.email}</small>
+                            </div>
+                            <span className={`status status-${attendee.status}`}>{attendee.status}</span>
+                        </article>
+                    ))}
+                </div>
+            </section>
+        </>
+    )
 }
 
 export function ParticipantMeetingPage() {
-  const token = useParams().token ?? ''
-  const [meeting, setMeeting] = useState<ParticipantMeeting>()
-  const [error, setError] = useState('')
-  useEffect(() => {
-    let active = true
-    let latestDocument: string | undefined
-    const controller = new AbortController()
-    void api.participantMeetings
-      .subscribe(
-        token,
-        (event) => {
-          if (event.type !== 'document.updated') return
-          latestDocument = event.sharedDocument
-          setMeeting((current) =>
-            current ? { ...current, sharedDocument: event.sharedDocument } : current,
-          )
-        },
-        controller.signal,
-        (value) => {
-          if (active) setError(message(value))
-        },
-      )
-      .catch((value) => {
-        if (active && !controller.signal.aborted) setError(message(value))
-      })
-    void api.participantMeetings
-      .get(token)
-      .then((value) => {
-        if (active) {
-          setMeeting({
-            ...value,
-            sharedDocument: latestDocument ?? value.sharedDocument,
-          })
+    const token = useParams().token ?? ''
+    const [meeting, setMeeting] = useState<ParticipantMeeting>()
+    const [error, setError] = useState('')
+    useEffect(() => {
+        let active = true
+        let latestDocument: string | undefined
+        const controller = new AbortController()
+        void api.participantMeetings
+            .subscribe(
+                token,
+                (event) => {
+                    if (event.type !== 'document.updated') return
+                    latestDocument = event.sharedDocument
+                    setMeeting((current) =>
+                        current ? {...current, sharedDocument: event.sharedDocument} : current,
+                    )
+                },
+                controller.signal,
+                (value) => {
+                    if (active) setError(message(value))
+                },
+            )
+            .catch((value) => {
+                if (active && !controller.signal.aborted) setError(message(value))
+            })
+        void api.participantMeetings
+            .get(token)
+            .then((value) => {
+                if (active) {
+                    setMeeting({
+                        ...value,
+                        sharedDocument: latestDocument ?? value.sharedDocument,
+                    })
+                }
+            })
+            .catch((value) => {
+                if (active) setError(message(value))
+            })
+        return () => {
+            active = false
+            controller.abort()
         }
-      })
-      .catch((value) => {
-        if (active) setError(message(value))
-      })
-    return () => {
-      active = false
-      controller.abort()
-    }
-  }, [token])
-  return (
-    <main className="public-interview">
-      <header>
-        <Link className="logo" to="/" aria-label="Go Guess home">
-          <span className="logo-mark">G</span>
-          <span>
+    }, [token])
+    return (
+        <main className="public-interview">
+            <header>
+                <Link className="logo" to="/" aria-label="Go Guess home">
+                    <span className="logo-mark">G</span>
+                    <span>
             <strong>GO GUESS</strong>
             <small>Talent workspace</small>
           </span>
-        </Link>
-      </header>
-      {!meeting && !error && (
-        <section className="interview-card">
-          <Loading />
-        </section>
-      )}
-      {error && (
-        <section className="interview-card">
-          <ErrorAlert error={error} />
-        </section>
-      )}
-      {meeting && (
-        <section className="interview-card meeting-public-card">
-          <span className="eyebrow">Your scheduled interview</span>
-          <h1>{meeting.jobTitle}</h1>
-          <p>Welcome, {meeting.participantName}.</p>
-          <span className={`status status-${meeting.status}`}>{meeting.status}</span>
-          <DateAndPlace interview={meeting} />
-          <section className="public-document" aria-labelledby="shared-document-title">
-            <h2 id="shared-document-title">Shared documentation</h2>
-            <div>{meeting.sharedDocument || 'No shared documentation has been added yet.'}</div>
-          </section>
-        </section>
-      )}
-    </main>
-  )
+                </Link>
+            </header>
+            {!meeting && !error && (
+                <section className="interview-card">
+                    <Loading/>
+                </section>
+            )}
+            {error && (
+                <section className="interview-card">
+                    <ErrorAlert error={error}/>
+                </section>
+            )}
+            {meeting && (
+                <section className="interview-card meeting-public-card">
+                    <span className="eyebrow">Your scheduled interview</span>
+                    <h1>{meeting.jobTitle}</h1>
+                    <p>Welcome, {meeting.participantName}.</p>
+                    <span className={`status status-${meeting.status}`}>{meeting.status}</span>
+                    <DateAndPlace interview={meeting}/>
+                    <section className="public-document" aria-labelledby="shared-document-title">
+                        <h2 id="shared-document-title">Shared documentation</h2>
+                        <div>{meeting.sharedDocument || 'No shared documentation has been added yet.'}</div>
+                    </section>
+                </section>
+            )}
+        </main>
+    )
 }

frontend/src/features/users/CalendarPage.tsx

@@ -0,0 +1,62 @@
+import {ScheduledInterview} from "../../types";
+import {useEffect, useMemo, useState} from "react";
+import {message} from "../../components/actions";
+import {api} from "../../api/client";
+import {ErrorAlert, Loading} from "../../components/ui/AsyncState";
+import {InterviewCard} from "../interviews/components/InterviewCard";
+import {Link} from "react-router-dom";
+
+export function CalendarPage() {
+    const [items, setItems] = useState<ScheduledInterview[]>([])
+    const [error, setError] = useState('')
+    const [loading, setLoading] = useState(true)
+    useEffect(() => {
+        void api
+            .calendar()
+            .then(setItems)
+            .catch((value) => setError(message(value)))
+            .finally(() => setLoading(false))
+    }, [])
+    const groups = useMemo(() => {
+        return [...items]
+            .sort((a, b) => a.startsAt.localeCompare(b.startsAt))
+            .reduce<Record<string, ScheduledInterview[]>>((result, item) => {
+                const key = new Date(item.startsAt).toLocaleDateString(undefined, {
+                        weekday: 'long',
+                        month: 'long',
+                        day: 'numeric',
+                        year: 'numeric',
+                    })
+                ;(result[key] ??= []).push(item)
+                return result
+            }, {})
+    }, [items])
+    return (
+        <>
+            <header className="page-header">
+                <div>
+                    <span className="eyebrow">Schedule</span>
+                </div>
+            </header>
+            {error && <ErrorAlert error={error}/>}
+            {loading ? (
+                <Loading/>
+            ) : (
+                Object.entries(groups).map(([date, interviews]) => (
+                    <section className="calendar-day" key={date}>
+                        <h2>{date}</h2>
+                        <div className="meeting-list">
+                            {interviews.map((item) => (
+                                <InterviewCard interview={item} key={item.id}>
+                                    <Link className="button secondary" to={`/scheduled-interviews/${item.id}`}>
+                                        Open session
+                                    </Link>
+                                </InterviewCard>
+                            ))}
+                        </div>
+                    </section>
+                ))
+            )}
+        </>
+    )
+}

frontend/src/features/users/index.ts

@@ -1,2 +1,3 @@
-export { ProfilePage } from './ProfilePage'
-export { UsersPage } from './UsersPage'
+export {ProfilePage} from './ProfilePage';
+export {UsersPage} from './UsersPage';
+export {CalendarPage} from './CalendarPage';