dnoulet/go-guess
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: separate components

Browse source
This commit is contained in:
Daniel Noulet 2026-09-20 08:28:57 +02:00
parent 5d7a57fd00
commit 06c708b160
12 changed files with 1295 additions and 1293 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/app/AuthenticatedApp.tsx
View file

@ -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)

6
frontend/src/components/actions/errorMessage.ts
View file

@ -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'
}

2
frontend/src/components/actions/index.ts
View file

@ -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'

1
frontend/src/components/layout/SideBar.tsx
View file

@ -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">

16
frontend/src/components/layout/WorkspaceUtilities.tsx
View file

@ -1,14 +1,18 @@
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 }) {
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>
<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">

1
frontend/src/components/ui/PageHeader.tsx
View file

@ -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}

2
frontend/src/config/navigation.ts
View file

@ -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' },
],

2
frontend/src/features/interviews/index.ts
View file

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

107
frontend/src/features/interviews/pages.tsx
View file

@ -1,16 +1,11 @@
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[]>([])
@ -44,9 +39,9 @@ export function InboxPage() {
<p>Respond to interview invitations assigned to you.</p>
</div>
</header>
{error && <ErrorAlert error={error} />}
{error && <ErrorAlert error={error}/>}
{loading ? (
<Loading />
<Loading/>
) : (
<section className="meeting-list">
{items.map((item) => (
@ -57,14 +52,14 @@ export function InboxPage() {
type="button"
onClick={() => void respond(item.id, 'accepted')}
>
<Check size={17} /> Accept
<Check size={17}/> Accept
</button>
<button
className="button secondary danger"
type="button"
onClick={() => void respond(item.id, 'declined')}
>
<X size={17} /> Decline
<X size={17}/> Decline
</button>
</div>
</InterviewCard>
@ -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)
@ -180,7 +119,7 @@ export function ScheduledInterviewPage() {
if (event.type === 'document.updated') {
setDocument(event.sharedDocument)
setInterview((current) =>
current ? { ...current, sharedDocument: event.sharedDocument } : current,
current ? {...current, sharedDocument: event.sharedDocument} : current,
)
}
},
@ -241,8 +180,8 @@ export function ScheduledInterviewPage() {
}
}
if (!interview && !error) return <Loading />
if (!interview) return <ErrorAlert error={error} />
if (!interview && !error) return <Loading/>
if (!interview) return <ErrorAlert error={error}/>
return (
<>
<Link className="back-link" to="/calendar">
@ -256,8 +195,8 @@ export function ScheduledInterviewPage() {
</div>
<span className={`status status-${interview.status}`}>{interview.status}</span>
</header>
{error && <ErrorAlert error={error} />}
<DateAndPlace interview={interview} />
{error && <ErrorAlert error={error}/>}
<DateAndPlace interview={interview}/>
<div className="session-actions">
<button
className="button secondary"
@ -265,7 +204,7 @@ export function ScheduledInterviewPage() {
onClick={() => void copyParticipantLink(interview.candidateUrl)}
aria-label="Copy participant interview link"
>
{linkCopied ? <Check size={17} /> : <Copy size={17} />}
{linkCopied ? <Check size={17}/> : <Copy size={17}/>}
{linkCopied ? 'Link copied' : 'Copy participant link'}
</button>
{interview.status !== 'started' && interview.status !== 'completed' && (
@ -356,7 +295,7 @@ export function ScheduledInterviewPage() {
<div className="user-list">
{interview.attendees.map((attendee) => (
<article className="user-row" key={attendee.userId}>
<UsersRound />
<UsersRound/>
<div>
<strong>{attendee.displayName}</strong>
<small>{attendee.email}</small>
@ -385,7 +324,7 @@ export function ParticipantMeetingPage() {
if (event.type !== 'document.updated') return
latestDocument = event.sharedDocument
setMeeting((current) =>
current ? { ...current, sharedDocument: event.sharedDocument } : current,
current ? {...current, sharedDocument: event.sharedDocument} : current,
)
},
controller.signal,
@ -427,12 +366,12 @@ export function ParticipantMeetingPage() {
</header>
{!meeting && !error && (
<section className="interview-card">
<Loading />
<Loading/>
</section>
)}
{error && (
<section className="interview-card">
<ErrorAlert error={error} />
<ErrorAlert error={error}/>
</section>
)}
{meeting && (
@ -441,7 +380,7 @@ export function ParticipantMeetingPage() {
<h1>{meeting.jobTitle}</h1>
<p>Welcome, {meeting.participantName}.</p>
<span className={`status status-${meeting.status}`}>{meeting.status}</span>
<DateAndPlace interview={meeting} />
<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>

180
frontend/src/features/jobs/pages.tsx
View file

@ -12,30 +12,22 @@ import {
Trash2,
X,
} from 'lucide-react'
import { type FormEvent, type ReactNode, useEffect, useState } from 'react'
import { Link, useNavigate, useParams } from 'react-router-dom'
import { api } from '../../api/client'
import { ErrorAlert, errorMessage, Loading } from '../../components/actions'
import { FormActions, FormField } from '../../components/form'
import { EmptyState, Fact, Metric, StatusBadge } from '../../components/ui/Display'
import { NotFound } from '../../components/ui/NotFound'
import { PageHeader } from '../../components/ui/PageHeader'
import { useData } from '../../app/useData'
import { CodePanel } from '../assessments/CodeReview'
import { ScheduleInterviewForm } from '../interviews'
import { Avatar, SkillList } from '../participants'
import type {
CandidateMatch,
Interview,
Invitation,
Job,
JobStatus,
Question,
ScheduledInterview,
} from '../../types'
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'
import {FormActions, FormField} from '../../components/form'
import {EmptyState, Fact, Metric, StatusBadge} from '../../components/ui/Display'
import {NotFound} from '../../components/ui/NotFound'
import {PageHeader} from '../../components/ui/PageHeader'
import {useData} from '../../app/useData'
import {CodePanel} from '../assessments/CodeReview'
import {ScheduleInterviewForm} from '../interviews'
import {Avatar, SkillList} from '../participants'
import type {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(' ')}`
@ -50,14 +42,14 @@ export function JobsPage() {
description="Create roles, build assessments, and compare candidate fit."
action={
<Link to="/jobs/new" className="button primary">
<Plus size={18} /> Create job
<Plus size={18}/> Create job
</Link>
}
/>
{error && <ErrorAlert message={error} retry={reload} />}
{error && <ErrorAlert message={error} retry={reload}/>}
<section className="metrics">
<Metric label="Job postings" value={String(jobs.length)} />
<Metric label="Participants" value="—" />
<Metric label="Job postings" value={String(jobs.length)}/>
<Metric label="Participants" value={String(participants.length)}/>
<Metric
label="Assessments"
value={String(jobs.reduce((sum, job) => sum + job.questions.length, 0))}
@ -66,7 +58,7 @@ export function JobsPage() {
<section className="card">
<div className="toolbar">
<label className="search-field">
<Search size={18} />
<Search size={18}/>
<span className="sr-only">Search jobs</span>
<input
value={query}
@ -77,7 +69,7 @@ export function JobsPage() {
<span className="result-count">{filtered.length} jobs</span>
</div>
{loading ? (
<Loading />
<Loading/>
) : (
<div className="table-wrap">
<table>
@ -103,11 +95,11 @@ export function JobsPage() {
<small>{job.labels.join(' · ') || 'No labels'}</small>
</td>
<td>
<StatusBadge value={job.seniority} />
<StatusBadge value={job.seniority}/>
</td>
<td>{job.position}</td>
<td>
<StatusBadge value={job.status} />
<StatusBadge value={job.status}/>
</td>
<td>{job.questions.length}</td>
<td>
@ -116,7 +108,7 @@ export function JobsPage() {
to={`/jobs/${job.id}`}
aria-label={`View ${job.title}`}
>
<ChevronRight />
<ChevronRight/>
</Link>
</td>
</tr>
@ -126,7 +118,7 @@ export function JobsPage() {
</div>
)}
{!loading && !filtered.length && !error && (
<EmptyState title="No jobs found" description="Create a job or adjust your search." />
<EmptyState title="No jobs found" description="Create a job or adjust your search."/>
)}
</section>
</>
@ -191,14 +183,14 @@ export function JobDetailPage() {
active = false
}
}, [id])
if (loading) return <Loading />
if (error) return <ErrorAlert message={error} retry={load} />
if (!job) return <NotFound />
if (loading) return <Loading/>
if (error) return <ErrorAlert message={error} retry={load}/>
if (!job) return <NotFound/>
return (
<>
<Link className="back-link" to="/jobs">
<ArrowLeft size={17} /> All jobs
<ArrowLeft size={17}/> All jobs
</Link>
<PageHeader
eyebrow={`${job.seniority} · ${job.position}`}
@ -230,24 +222,24 @@ export function JobDetailPage() {
<h2>About the role</h2>
<p>{job.description}</p>
<h3>Required skills</h3>
<SkillList skills={job.requiredSkills} />
<SkillList skills={job.requiredSkills}/>
<h3>Additional skills</h3>
<SkillList skills={job.additionalSkills} />
<SkillList skills={job.additionalSkills}/>
</section>
<aside className="card facts">
<h2>Job details</h2>
<Fact label="Seniority" value={job.seniority} />
<Fact label="Position" value={job.position} />
<Fact label="Status" value={job.status} />
<Fact label="Duration" value={`${job.durationMinutes} minutes`} />
<Fact label="Labels" value={job.labels.join(', ') || 'None'} />
<Fact label="Created" value={new Date(job.createdAt).toLocaleDateString()} />
<JobSettings job={job} onUpdated={setJob} />
<Fact label="Seniority" value={job.seniority}/>
<Fact label="Position" value={job.position}/>
<Fact label="Status" value={job.status}/>
<Fact label="Duration" value={`${job.durationMinutes} minutes`}/>
<Fact label="Labels" value={job.labels.join(', ') || 'None'}/>
<Fact label="Created" value={new Date(job.createdAt).toLocaleDateString()}/>
<JobSettings job={job} onUpdated={setJob}/>
</aside>
</div>
)}
{tab === 'questions' && <JobQuestionsView job={job} onUpdated={setJob} />}
{tab === 'candidates' && <CandidateMatchView matches={matches} />}
{tab === 'questions' && <JobQuestionsView job={job} onUpdated={setJob}/>}
{tab === 'candidates' && <CandidateMatchView matches={matches}/>}
{tab === 'invitations' && (
<InvitationsView
job={job}
@ -267,18 +259,18 @@ export function JobDetailPage() {
)
}
function JobSettings({ job, onUpdated }: { job: Job; onUpdated: (job: Job) => void }) {
function JobSettings({job, onUpdated}: { job: Job; onUpdated: (job: Job) => void }) {
const [status, setStatus] = useState<JobStatus>(job.status)
const [durationMinutes, setDurationMinutes] = useState(job.durationMinutes)
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('')
try {
onUpdated(await api.jobs.update(job.id, { status, durationMinutes }))
onUpdated(await api.jobs.update(job.id, {status, durationMinutes}))
} catch (requestError) {
setError(errorMessage(requestError))
} finally {
@ -309,7 +301,7 @@ function JobSettings({ job, onUpdated }: { job: Job; onUpdated: (job: Job) => vo
onChange={(event) => setDurationMinutes(Number(event.target.value))}
/>
</FormField>
{error && <ErrorAlert message={error} />}
{error && <ErrorAlert message={error}/>}
<button className="button secondary wide" type="submit" disabled={saving}>
{saving ? 'Saving…' : 'Save interview settings'}
</button>
@ -317,7 +309,7 @@ function JobSettings({ job, onUpdated }: { job: Job; onUpdated: (job: Job) => vo
)
}
function JobQuestionsView({ job, onUpdated }: { job: Job; onUpdated: (job: Job) => void }) {
function JobQuestionsView({job, onUpdated}: { job: Job; onUpdated: (job: Job) => void }) {
const [query, setQuery] = useState('')
const [results, setResults] = useState<Question[]>([])
const [error, setError] = useState('')
@ -345,7 +337,7 @@ function JobQuestionsView({ job, onUpdated }: { job: Job; onUpdated: (job: Job)
setError('')
try {
await api.jobs.attachQuestion(job.id, question.id)
onUpdated({ ...job, questions: [...job.questions, question] })
onUpdated({...job, questions: [...job.questions, question]})
} catch (requestError) {
setError(errorMessage(requestError))
}
@ -386,7 +378,7 @@ function JobQuestionsView({ job, onUpdated }: { job: Job; onUpdated: (job: Job)
onClick={() => void detach(question)}
aria-label={`Detach ${question.text}`}
>
<Trash2 size={16} /> Detach
<Trash2 size={16}/> Detach
</button>
}
/>
@ -411,7 +403,7 @@ function JobQuestionsView({ job, onUpdated }: { job: Job; onUpdated: (job: Job)
</div>
<div className="panel-padding">
<label className="search-field">
<Search size={18} />
<Search size={18}/>
<span className="sr-only">Search question library</span>
<input
value={query}
@ -419,7 +411,7 @@ function JobQuestionsView({ job, onUpdated }: { job: Job; onUpdated: (job: Job)
placeholder="Search question library…"
/>
</label>
{error && <ErrorAlert message={error} />}
{error && <ErrorAlert message={error}/>}
</div>
<div className="question-list compact">
{results
@ -434,7 +426,7 @@ function JobQuestionsView({ job, onUpdated }: { job: Job; onUpdated: (job: Job)
type="button"
onClick={() => void attach(question)}
>
<Plus size={16} /> Attach
<Plus size={16}/> Attach
</button>
}
/>
@ -453,7 +445,7 @@ function InvitationsView({
onInvited,
onInvitationUpdated,
onScheduled,
}: {
}: {
job: Job
matches: CandidateMatch[]
invitations: Invitation[]
@ -511,9 +503,9 @@ function InvitationsView({
</div>
</div>
<div className="eligible-list">
{eligible.map(({ participant }) => (
{eligible.map(({participant}) => (
<article className="eligible-row" key={participant.id}>
<Avatar person={participant} />
<Avatar person={participant}/>
<div>
<strong>
{participant.firstName} {participant.lastName}
@ -526,14 +518,14 @@ function InvitationsView({
disabled={sendingId === participant.id}
onClick={() => void send(participant.id)}
>
<Send size={16} />{' '}
<Send size={16}/>{' '}
{sendingId === participant.id ? 'Generating…' : 'Generate invitation'}
</button>
</article>
))}
{!eligible.length && <p className="muted">All eligible candidates have been invited.</p>}
</div>
{error && <ErrorAlert message={error} />}
{error && <ErrorAlert message={error}/>}
<div className="invitation-list">
{invitations.map((invitation) => (
<article className="invitation-row" key={invitation.id}>
@ -541,7 +533,7 @@ function InvitationsView({
<strong>{invitation.participantName}</strong>
<small>{invitation.participantEmail}</small>
</div>
<StatusBadge value={invitation.status} />
<StatusBadge value={invitation.status}/>
<code>{invitation.participantUrl}</code>
<button
className="button secondary"
@ -549,7 +541,7 @@ function InvitationsView({
onClick={() => void copy(invitation.participantUrl)}
aria-label={`Copy interview URL for ${invitation.participantName}`}
>
<Copy size={16} /> Copy URL
<Copy size={16}/> Copy URL
</button>
{['accepted', 'completed'].includes(invitation.status) && (
<button
@ -564,7 +556,7 @@ function InvitationsView({
</article>
))}
{!invitations.length && (
<EmptyState title="No invitations" description="Invite a candidate to this interview." />
<EmptyState title="No invitations" description="Invite a candidate to this interview."/>
)}
</div>
{review && (
@ -573,7 +565,7 @@ function InvitationsView({
onClose={() => setReview(undefined)}
onOutcome={(invitation) => {
onInvitationUpdated(invitation)
setReview((current) => current && { ...current, invitation })
setReview((current) => current && {...current, invitation})
}}
/>
)}
@ -604,7 +596,7 @@ function InvitationsView({
key={invitation.id}
onClick={() => setScheduling(invitation)}
>
<CalendarDays size={17} /> Schedule {invitation.participantName}
<CalendarDays size={17}/> Schedule {invitation.participantName}
</button>
))}
{scheduledInterviews.map((interview) => (
@ -619,7 +611,7 @@ function InvitationsView({
{new Date(interview.startsAt).toLocaleString()} · {interview.location}
</small>
</span>
<StatusBadge value={interview.status} />
<StatusBadge value={interview.status}/>
</Link>
))}
</div>
@ -631,7 +623,7 @@ function InvitationAnswerReview({
interview,
onClose,
onOutcome,
}: {
}: {
interview: Interview
onClose: () => void
onOutcome: (invitation: Invitation) => void
@ -677,7 +669,7 @@ function InvitationAnswerReview({
disabled={saving}
onClick={() => void decide('passed')}
>
<Check size={18} /> Pass candidate
<Check size={18}/> Pass candidate
</button>
<button
className="button fail"
@ -685,14 +677,14 @@ function InvitationAnswerReview({
disabled={saving}
onClick={() => void decide('failed')}
>
<X size={18} /> Fail candidate
<X size={18}/> Fail candidate
</button>
{interview.invitation.outcome && <StatusBadge value={interview.invitation.outcome} />}
{interview.invitation.outcome && <StatusBadge value={interview.invitation.outcome}/>}
</div>
)}
{error && <ErrorAlert message={error} />}
{error && <ErrorAlert message={error}/>}
<div className="review-heading-actions">
<StatusBadge value={interview.invitation.status} />
<StatusBadge value={interview.invitation.status}/>
<button className="button ghost" type="button" onClick={onClose}>
Close review
</button>
@ -708,7 +700,7 @@ function InvitationAnswerReview({
<span className="question-type">{question.type.replace('_', ' ')}</span>
<h3>{question.text}</h3>
{question.type === 'code_review' && question.codeSnippet && (
<CodePanel codeSnippet={question.codeSnippet} />
<CodePanel codeSnippet={question.codeSnippet}/>
)}
{(question.type === 'multiple_choice' || question.type === 'radio') &&
question.options.length > 0 && (
@ -741,18 +733,18 @@ export function QuestionRow({
question,
number,
action,
}: {
}: {
question: Question
number?: number
action?: ReactNode
}) {
return (
<article className="question-row">
{number ? <span className="question-number">{number}</span> : <CircleHelp size={22} />}
{number ? <span className="question-number">{number}</span> : <CircleHelp size={22}/>}
<div>
<div className="question-meta">
<h3>{question.type.replace('_', ' ')}</h3>
{question.deprecated && <StatusBadge value="deprecated" />}
{question.deprecated && <StatusBadge value="deprecated"/>}
</div>
<p>{question.text}</p>
{question.options.length > 0 && <small>{question.options.join(' · ')}</small>}
@ -773,7 +765,7 @@ export function QuestionRow({
)
}
function CandidateMatchView({ matches }: { matches: CandidateMatch[] }) {
function CandidateMatchView({matches}: { matches: CandidateMatch[] }) {
return (
<section className="card">
<div className="section-heading">
@ -782,14 +774,14 @@ function CandidateMatchView({ matches }: { matches: CandidateMatch[] }) {
<p>Trait alignment calculated by the API.</p>
</div>
<span className="ai-label">
<Sparkles size={16} /> Match insight
<Sparkles size={16}/> Match insight
</span>
</div>
<div className="match-list">
{matches.map((match, index) => (
<article className="match-card" key={match.participant.id}>
<span className="rank">{index + 1}</span>
<Avatar person={match.participant} />
<Avatar person={match.participant}/>
<div className="match-person">
<Link to={`/participants/${match.participant.id}`}>
{match.participant.firstName} {match.participant.lastName}
@ -802,7 +794,7 @@ function CandidateMatchView({ matches }: { matches: CandidateMatch[] }) {
<strong>{match.matchedTraits.length}</strong>
</div>
<span className="score-track">
<span style={{ width: `${Math.min(match.score, 100)}%` }} />
<span style={{width: `${Math.min(match.score, 100)}%`}}/>
</span>
</div>
<div className="score">
@ -829,12 +821,12 @@ function CandidateMatchView({ matches }: { matches: CandidateMatch[] }) {
}
export function CreateJobPage() {
const { createJob } = useData()
const {createJob} = useData()
const navigate = useNavigate()
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('')
@ -864,7 +856,7 @@ export function CreateJobPage() {
return (
<>
<Link className="back-link" to="/jobs">
<ArrowLeft size={17} /> Cancel
<ArrowLeft size={17}/> Cancel
</Link>
<PageHeader
eyebrow="New posting"
@ -876,33 +868,33 @@ export function CreateJobPage() {
<h2>Role information</h2>
<div className="form-grid">
<FormField label="Job title" htmlFor="title">
<input id="title" name="title" required />
<input id="title" name="title" required/>
</FormField>
<FormField label="Position" htmlFor="position">
<input id="position" name="position" required placeholder="e.g. Backend Engineer" />
<input id="position" name="position" required placeholder="e.g. Backend Engineer"/>
</FormField>
<FormField label="Seniority" htmlFor="seniority">
<input id="seniority" name="seniority" required placeholder="e.g. Senior" />
<input id="seniority" name="seniority" required placeholder="e.g. Senior"/>
</FormField>
<FormField label="Labels" htmlFor="labels" hint="Comma separated">
<input id="labels" name="labels" />
<input id="labels" name="labels"/>
</FormField>
</div>
</div>
<div className="form-section">
<h2>Role profile</h2>
<FormField label="Description" htmlFor="description">
<textarea id="description" name="description" required rows={7} />
<textarea id="description" name="description" required rows={7}/>
</FormField>
<FormField label="Required skills" htmlFor="requiredSkills" hint="Comma separated">
<input id="requiredSkills" name="requiredSkills" required />
<input id="requiredSkills" name="requiredSkills" required/>
</FormField>
<FormField label="Additional skills" htmlFor="additionalSkills" hint="Comma separated">
<input id="additionalSkills" name="additionalSkills" />
<input id="additionalSkills" name="additionalSkills"/>
</FormField>
</div>
{error && <ErrorAlert message={error} />}
<FormActions saving={saving} cancelTo="/jobs" label="Create job" />
{error && <ErrorAlert message={error}/>}
<FormActions saving={saving} cancelTo="/jobs" label="Create job"/>
</form>
</>
)

62
frontend/src/features/users/CalendarPage.tsx Normal file
View file

@ -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>
))
)}
</>
)
}

5
frontend/src/features/users/index.ts
View file

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