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 { GoGuessHeader } from '../components/layout/GoGuessHeader'
import { WorkspaceUtilities } from '../components/layout/WorkspaceUtilities' import { WorkspaceUtilities } from '../components/layout/WorkspaceUtilities'
import { NotFound } from '../components/ui/NotFound' 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 { CreateJobPage, JobDetailPage, JobsPage } from '../features/jobs'
import { import {
CreateParticipantPage, CreateParticipantPage,
@ -13,7 +13,7 @@ import {
ParticipantsPage, ParticipantsPage,
} from '../features/participants' } from '../features/participants'
import { QuestionLibraryPage, QuestionPage } from '../features/questions' 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 }) { export function AuthenticatedApp({ onLogout }: { onLogout: () => void }) {
const [open, setOpen] = useState(false) 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 ? error.message
: 'Something went wrong' : '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 { useAuthSession } from './Account'
export { ErrorAlert } from './ErrorAlert' export { ErrorAlert } from './ErrorAlert'
export { errorMessage } from './errorMessage' export { errorMessage, message } from './errorMessage'
export { Loading } from './Loading' export { Loading } from './Loading'

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

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

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

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

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

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

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

@ -15,13 +15,13 @@ export const footerLinkGroups: FooterLinkGroup[] = [
{ label: 'Jobs', href: '/jobs' }, { label: 'Jobs', href: '/jobs' },
{ label: 'Participants', href: '/participants' }, { label: 'Participants', href: '/participants' },
{ label: 'Question library', href: '/questions' }, { label: 'Question library', href: '/questions' },
{ label: 'Calendar', href: '/calendar' },
], ],
}, },
{ {
title: 'Useful links', title: 'Useful links',
links: [ links: [
{ label: 'Your inbox', href: '/inbox' }, { label: 'Your inbox', href: '/inbox' },
{ label: 'Calendar', href: '/calendar' },
{ label: 'Your profile', href: '/profile' }, { label: 'Your profile', href: '/profile' },
{ label: 'Interview team', href: '/users' }, { 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' export { ScheduleInterviewForm } from './components/ScheduleInterviewForm'

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

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

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

File diff suppressed because it is too large Load diff

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