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,4 +1,4 @@
-import { Inbox } from 'lucide-react'
+import {CalendarDays, Inbox, Mail} from 'lucide-react'
 import {NavLink} from 'react-router-dom'
 import type {User} from '../../types'
 
@@ -7,8 +7,12 @@ export function WorkspaceUtilities({ user }: { user: User | null }) {
     return (
         <nav className="workspace-utilities" aria-label="Account navigation">
             <NavLink className="utility-link" to="/inbox">
-        <Inbox size={18} aria-hidden="true" />
+                <Mail size={18} aria-hidden="true"/>
-        <span>Inbox</span>
+                <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">

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,16 +1,11 @@
 import {Check, Copy, UsersRound, X} from 'lucide-react'
-import { type FormEvent, useEffect, useMemo, useState } from 'react'
+import {type FormEvent, useEffect, useState} from 'react'
 import {Link, useParams} from 'react-router-dom'
-import { api, ApiError } from '../../api/client'
+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";
-function message(error: unknown) {
-  return error instanceof ApiError || error instanceof Error
-    ? error.message
-    : 'Something went wrong'
-}
 
 export function InboxPage() {
     const [items, setItems] = useState<ScheduledInterview[]>([])
@@ -81,62 +76,6 @@ export function InboxPage() {
     )
 }
 
-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)

frontend/src/features/jobs/pages.tsx

@@ -12,7 +12,7 @@ import {
     Trash2,
     X,
 } from 'lucide-react'
-import { type FormEvent, type ReactNode, useEffect, useState } from 'react'
+import {type ReactNode, SyntheticEvent, useEffect, useState} from 'react'
 import {Link, useNavigate, useParams} from 'react-router-dom'
 import {api} from '../../api/client'
 import {ErrorAlert, errorMessage, Loading} from '../../components/actions'
@@ -24,18 +24,10 @@ import { useData } from '../../app/useData'
 import {CodePanel} from '../assessments/CodeReview'
 import {ScheduleInterviewForm} from '../interviews'
 import {Avatar, SkillList} from '../participants'
-import type {
+import type {CandidateMatch, Interview, Invitation, Job, JobStatus, Question, ScheduledInterview,} from '../../types'
-  CandidateMatch,
-  Interview,
-  Invitation,
-  Job,
-  JobStatus,
-  Question,
-  ScheduledInterview,
-} from '../../types'
 
 export function JobsPage() {
-  const { jobs, loading, error, reload } = useData()
+    const {jobs, loading, error, reload, participants} = useData()
     const [query, setQuery] = useState('')
     const filtered = jobs.filter((job) =>
         `${job.title} ${job.position} ${job.seniority} ${job.labels.join(' ')}`
@@ -57,7 +49,7 @@ export function JobsPage() {
             {error && <ErrorAlert message={error} retry={reload}/>}
             <section className="metrics">
                 <Metric label="Job postings" value={String(jobs.length)}/>
-        <Metric label="Participants" value="—" />
+                <Metric label="Participants" value={String(participants.length)}/>
                 <Metric
                     label="Assessments"
                     value={String(jobs.reduce((sum, job) => sum + job.questions.length, 0))}
@@ -273,7 +265,7 @@ function JobSettings({ job, onUpdated }: { job: Job; onUpdated: (job: Job) => vo
     const [saving, setSaving] = useState(false)
     const [error, setError] = useState('')
 
-  async function save(event: FormEvent) {
+    async function save(event: SyntheticEvent<HTMLFormElement>) {
         event.preventDefault()
         setSaving(true)
         setError('')
@@ -834,7 +826,7 @@ export function CreateJobPage() {
     const [saving, setSaving] = useState(false)
     const [error, setError] = useState('')
 
-  async function submit(event: FormEvent<HTMLFormElement>) {
+    async function submit(event: SyntheticEvent<HTMLFormElement>) {
         event.preventDefault()
         setSaving(true)
         setError('')

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 {ProfilePage} from './ProfilePage';
-export { UsersPage } from './UsersPage'
+export {UsersPage} from './UsersPage';
+export {CalendarPage} from './CalendarPage';