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