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

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

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

67
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 {type FormEvent, useEffect, useState} from 'react'
import {Link, useParams} from 'react-router-dom'
import { api, ApiError } from '../../api/client'
import {api} from '../../api/client'
import type {ParticipantMeeting, ScheduledInterview} from '../../types'
import {ErrorAlert, Loading} from '../../components/ui/AsyncState'
import {DateAndPlace, InterviewCard} from './components/InterviewCard'
function message(error: unknown) {
return error instanceof ApiError || error instanceof Error
? error.message
: 'Something went wrong'
}
import {message} from "../../components/actions";
export function InboxPage() {
const [items, setItems] = useState<ScheduledInterview[]>([])
@ -81,62 +76,6 @@ export function InboxPage() {
)
}
export function CalendarPage() {
const [items, setItems] = useState<ScheduledInterview[]>([])
const [error, setError] = useState('')
const [loading, setLoading] = useState(true)
useEffect(() => {
void api
.calendar()
.then(setItems)
.catch((value) => setError(message(value)))
.finally(() => setLoading(false))
}, [])
const groups = useMemo(() => {
return [...items]
.sort((a, b) => a.startsAt.localeCompare(b.startsAt))
.reduce<Record<string, ScheduledInterview[]>>((result, item) => {
const key = new Date(item.startsAt).toLocaleDateString(undefined, {
weekday: 'long',
month: 'long',
day: 'numeric',
year: 'numeric',
})
;(result[key] ??= []).push(item)
return result
}, {})
}, [items])
return (
<>
<header className="page-header">
<div>
<span className="eyebrow">Schedule</span>
<h1>Calendar</h1>
<p>Your accepted and organized interviews, grouped by date.</p>
</div>
</header>
{error && <ErrorAlert error={error} />}
{loading ? (
<Loading />
) : (
Object.entries(groups).map(([date, interviews]) => (
<section className="calendar-day" key={date}>
<h2>{date}</h2>
<div className="meeting-list">
{interviews.map((item) => (
<InterviewCard interview={item} key={item.id}>
<Link className="button secondary" to={`/scheduled-interviews/${item.id}`}>
Open session
</Link>
</InterviewCard>
))}
</div>
</section>
))
)}
</>
)
}
export function ScheduledInterviewPage() {
const id = Number(useParams().id)

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

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

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