661 lines
20 KiB
TypeScript
661 lines
20 KiB
TypeScript
|
import { CalendarDays, Check, MapPin, Plus, 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'
|
||
|
|
import type { Invitation, ParticipantMeeting, ScheduledInterview, User } from './types'
|
||
|
|
|
||
|
|
function message(error: unknown) {
|
||
|
|
return error instanceof ApiError || error instanceof Error
|
||
|
|
? error.message
|
||
|
|
: 'Something went wrong'
|
||
|
|
}
|
||
|
|
|
||
|
|
function ErrorAlert({ error }: { error: string }) {
|
||
|
|
return (
|
||
|
|
<div className="error-alert" role="alert">
|
||
|
|
<strong>Request failed</strong>
|
||
|
|
<span>{error}</span>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
function Loading() {
|
||
|
|
return (
|
||
|
|
<div className="empty-state" role="status">
|
||
|
|
<span className="loading-spinner" />
|
||
|
|
<p>Loading…</p>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
function DateAndPlace({ interview }: { interview: ScheduledInterview | ParticipantMeeting }) {
|
||
|
|
return (
|
||
|
|
<div className="meeting-facts">
|
||
|
|
<span>
|
||
|
|
<CalendarDays size={18} />
|
||
|
|
{new Date(interview.startsAt).toLocaleString()}
|
||
|
|
</span>
|
||
|
|
<span>
|
||
|
|
<MapPin size={18} />
|
||
|
|
{interview.location}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export function UsersPage() {
|
||
|
|
const [users, setUsers] = useState<User[]>([])
|
||
|
|
const [error, setError] = useState('')
|
||
|
|
const [loading, setLoading] = useState(true)
|
||
|
|
const [saving, setSaving] = useState(false)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
void api.users
|
||
|
|
.list()
|
||
|
|
.then(setUsers)
|
||
|
|
.catch((value) => setError(message(value)))
|
||
|
|
.finally(() => setLoading(false))
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
async function create(event: FormEvent<HTMLFormElement>) {
|
||
|
|
event.preventDefault()
|
||
|
|
setSaving(true)
|
||
|
|
setError('')
|
||
|
|
const form = event.currentTarget
|
||
|
|
const values = new FormData(form)
|
||
|
|
try {
|
||
|
|
const created = await api.users.create({
|
||
|
|
email: String(values.get('email')),
|
||
|
|
password: String(values.get('password')),
|
||
|
|
displayName: String(values.get('displayName')),
|
||
|
|
})
|
||
|
|
setUsers((current) => [...current, created])
|
||
|
|
form.reset()
|
||
|
|
} catch (value) {
|
||
|
|
setError(message(value))
|
||
|
|
} finally {
|
||
|
|
setSaving(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<header className="page-header">
|
||
|
|
<div>
|
||
|
|
<span className="eyebrow">Team access</span>
|
||
|
|
<h1>Users</h1>
|
||
|
|
<p>Create co-interviewers and manage the people who collaborate on interviews.</p>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
{error && <ErrorAlert error={error} />}
|
||
|
|
<div className="library-grid">
|
||
|
|
<section className="card">
|
||
|
|
<div className="section-heading">
|
||
|
|
<div>
|
||
|
|
<h2>Interview team</h2>
|
||
|
|
<p>{users.length} workspace users</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{loading ? (
|
||
|
|
<Loading />
|
||
|
|
) : (
|
||
|
|
<div className="user-list">
|
||
|
|
{users.map((user) => (
|
||
|
|
<article className="user-row" key={user.id}>
|
||
|
|
<span className="avatar">{user.displayName.slice(0, 2).toUpperCase()}</span>
|
||
|
|
<div>
|
||
|
|
<strong>{user.displayName}</strong>
|
||
|
|
<small>{user.email}</small>
|
||
|
|
</div>
|
||
|
|
<span className={`status status-${user.role}`}>{user.role}</span>
|
||
|
|
</article>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</section>
|
||
|
|
<form className="card form-card library-form" onSubmit={create}>
|
||
|
|
<div className="form-section">
|
||
|
|
<h2>Create co-interviewer</h2>
|
||
|
|
<label className="field">
|
||
|
|
<span className="field-label">Display name</span>
|
||
|
|
<input name="displayName" required autoComplete="name" />
|
||
|
|
</label>
|
||
|
|
<label className="field">
|
||
|
|
<span className="field-label">Email address</span>
|
||
|
|
<input name="email" type="email" required autoComplete="email" />
|
||
|
|
</label>
|
||
|
|
<label className="field">
|
||
|
|
<span className="field-label">Temporary password</span>
|
||
|
|
<input
|
||
|
|
name="password"
|
||
|
|
type="password"
|
||
|
|
required
|
||
|
|
minLength={8}
|
||
|
|
autoComplete="new-password"
|
||
|
|
/>
|
||
|
|
</label>
|
||
|
|
<button className="button primary wide" type="submit" disabled={saving}>
|
||
|
|
<Plus size={18} /> {saving ? 'Creating…' : 'Create co-interviewer'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export function ScheduleInterviewForm({
|
||
|
|
jobId,
|
||
|
|
invitation,
|
||
|
|
onCreated,
|
||
|
|
onCancel,
|
||
|
|
}: {
|
||
|
|
jobId: number
|
||
|
|
invitation: Invitation
|
||
|
|
onCreated: (interview: ScheduledInterview) => void
|
||
|
|
onCancel: () => void
|
||
|
|
}) {
|
||
|
|
const [users, setUsers] = useState<User[]>([])
|
||
|
|
const [selected, setSelected] = useState<number[]>([])
|
||
|
|
const [error, setError] = useState('')
|
||
|
|
const [saving, setSaving] = useState(false)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
void api.users
|
||
|
|
.list()
|
||
|
|
.then(setUsers)
|
||
|
|
.catch((value) => setError(message(value)))
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
async function submit(event: FormEvent<HTMLFormElement>) {
|
||
|
|
event.preventDefault()
|
||
|
|
const values = new FormData(event.currentTarget)
|
||
|
|
setSaving(true)
|
||
|
|
setError('')
|
||
|
|
try {
|
||
|
|
const startsAt = new Date(String(values.get('startsAt'))).toISOString()
|
||
|
|
onCreated(
|
||
|
|
await api.jobs.scheduleInterview(jobId, {
|
||
|
|
invitationId: invitation.id,
|
||
|
|
startsAt,
|
||
|
|
location: String(values.get('location')),
|
||
|
|
interviewerIds: selected,
|
||
|
|
sharedDocument: String(values.get('sharedDocument')),
|
||
|
|
}),
|
||
|
|
)
|
||
|
|
} catch (value) {
|
||
|
|
setError(message(value))
|
||
|
|
setSaving(false)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<form
|
||
|
|
className="schedule-form"
|
||
|
|
onSubmit={submit}
|
||
|
|
aria-label={`Schedule ${invitation.participantName}`}
|
||
|
|
>
|
||
|
|
<div className="section-heading">
|
||
|
|
<div>
|
||
|
|
<span className="eyebrow">Passed assessment</span>
|
||
|
|
<h2>Schedule interview with {invitation.participantName}</h2>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
className="icon-button"
|
||
|
|
type="button"
|
||
|
|
onClick={onCancel}
|
||
|
|
aria-label="Close scheduling form"
|
||
|
|
>
|
||
|
|
<X />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div className="form-section">
|
||
|
|
<div className="form-grid">
|
||
|
|
<label className="field">
|
||
|
|
<span className="field-label">Date and time</span>
|
||
|
|
<input name="startsAt" type="datetime-local" required />
|
||
|
|
</label>
|
||
|
|
<label className="field">
|
||
|
|
<span className="field-label">Location or meeting link</span>
|
||
|
|
<input name="location" required />
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<fieldset className="interviewer-picker">
|
||
|
|
<legend className="field-label">Co-interviewers</legend>
|
||
|
|
{users.map((user) => (
|
||
|
|
<label key={user.id}>
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
checked={selected.includes(user.id)}
|
||
|
|
onChange={(event) =>
|
||
|
|
setSelected((current) =>
|
||
|
|
event.target.checked
|
||
|
|
? [...current, user.id]
|
||
|
|
: current.filter((id) => id !== user.id),
|
||
|
|
)
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
<span>
|
||
|
|
<strong>{user.displayName}</strong>
|
||
|
|
<small>{user.email}</small>
|
||
|
|
</span>
|
||
|
|
</label>
|
||
|
|
))}
|
||
|
|
</fieldset>
|
||
|
|
<label className="field shared-document-field">
|
||
|
|
<span className="field-label">Shared documentation</span>
|
||
|
|
<textarea
|
||
|
|
name="sharedDocument"
|
||
|
|
rows={10}
|
||
|
|
required
|
||
|
|
placeholder="Add the agenda, exercise, links, and information shared with the candidate…"
|
||
|
|
/>
|
||
|
|
</label>
|
||
|
|
{error && <ErrorAlert error={error} />}
|
||
|
|
<div className="question-form-actions">
|
||
|
|
<button className="button ghost" type="button" onClick={onCancel}>
|
||
|
|
Cancel
|
||
|
|
</button>
|
||
|
|
<button className="button primary" type="submit" disabled={saving}>
|
||
|
|
{saving ? 'Scheduling…' : 'Create interview'}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
function InterviewCard({
|
||
|
|
interview,
|
||
|
|
children,
|
||
|
|
}: {
|
||
|
|
interview: ScheduledInterview
|
||
|
|
children?: React.ReactNode
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<article className="meeting-card">
|
||
|
|
<div>
|
||
|
|
<span className={`status status-${interview.status}`}>{interview.status}</span>
|
||
|
|
<h2>{interview.participantName}</h2>
|
||
|
|
<p>{interview.jobTitle}</p>
|
||
|
|
</div>
|
||
|
|
<DateAndPlace interview={interview} />
|
||
|
|
{children}
|
||
|
|
</article>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export function InboxPage() {
|
||
|
|
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))
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
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>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
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)
|
||
|
|
|
||
|
|
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 (interview?.status !== 'started') return
|
||
|
|
const controller = new AbortController()
|
||
|
|
void api.scheduledInterviews
|
||
|
|
.subscribe(
|
||
|
|
id,
|
||
|
|
(note) => {
|
||
|
|
setNotes((current) =>
|
||
|
|
current.some((item) => item.id === note.id) ? current : [...current, note],
|
||
|
|
)
|
||
|
|
},
|
||
|
|
controller.signal,
|
||
|
|
)
|
||
|
|
.catch((value) => {
|
||
|
|
if (!controller.signal.aborted) setError(message(value))
|
||
|
|
})
|
||
|
|
return () => controller.abort()
|
||
|
|
}, [id, interview?.status])
|
||
|
|
|
||
|
|
async function setStatus(status: string) {
|
||
|
|
setError('')
|
||
|
|
try {
|
||
|
|
setInterview(await api.scheduledInterviews.setStatus(id, status))
|
||
|
|
} 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 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))
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
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">
|
||
|
|
{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 className="form-section">
|
||
|
|
<textarea
|
||
|
|
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>
|
||
|
|
</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>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export function ParticipantMeetingPage() {
|
||
|
|
const token = useParams().token ?? ''
|
||
|
|
const [meeting, setMeeting] = useState<ParticipantMeeting>()
|
||
|
|
const [error, setError] = useState('')
|
||
|
|
useEffect(() => {
|
||
|
|
void api.participantMeetings
|
||
|
|
.get(token)
|
||
|
|
.then(setMeeting)
|
||
|
|
.catch((value) => setError(message(value)))
|
||
|
|
}, [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>
|
||
|
|
)
|
||
|
|
}
|