270 lines
8.6 KiB
TypeScript
270 lines
8.6 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { useParams, useNavigate, Link } from 'react-router-dom'
|
|
import { Globe, Users, ShieldAlert, FileX, Clock } from 'lucide-react'
|
|
import { isAxiosError } from 'axios'
|
|
import { sessionsApi } from '@/api/sessions'
|
|
import { Spinner } from '@/components/common/Spinner'
|
|
import { BrandLogo } from '@/components/common/BrandLogo'
|
|
import { PageMeta } from '@/components/common/PageMeta'
|
|
import { SessionTimeline } from '@/components/session/SessionTimeline'
|
|
import { SharedSessionTreePreview } from '@/components/session/SharedSessionTreePreview'
|
|
import type { SharedSessionView } from '@/types'
|
|
|
|
function formatDate(dateString: string) {
|
|
return new Date(dateString).toLocaleDateString(undefined, {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
})
|
|
}
|
|
|
|
function formatDuration(startedAt: string, completedAt: string): string {
|
|
const start = new Date(startedAt).getTime()
|
|
const end = new Date(completedAt).getTime()
|
|
const totalSeconds = Math.floor((end - start) / 1000)
|
|
if (totalSeconds < 0) return '0s'
|
|
if (totalSeconds < 60) return `${totalSeconds}s`
|
|
const hours = Math.floor(totalSeconds / 3600)
|
|
const minutes = Math.floor((totalSeconds % 3600) / 60)
|
|
const seconds = totalSeconds % 60
|
|
if (hours > 0) {
|
|
return seconds > 0 ? `${hours}h ${minutes}m ${seconds}s` : `${hours}h ${minutes}m`
|
|
}
|
|
return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`
|
|
}
|
|
|
|
type ErrorState = {
|
|
type: 'access_denied' | 'not_found' | 'expired' | 'generic'
|
|
message: string
|
|
}
|
|
|
|
function ErrorCard({ error }: { error: ErrorState }) {
|
|
const iconMap = {
|
|
access_denied: ShieldAlert,
|
|
not_found: FileX,
|
|
expired: Clock,
|
|
generic: FileX,
|
|
}
|
|
const titleMap = {
|
|
access_denied: 'Access Denied',
|
|
not_found: 'Not Found',
|
|
expired: 'Link Expired',
|
|
generic: 'Error',
|
|
}
|
|
|
|
const Icon = iconMap[error.type]
|
|
|
|
return (
|
|
<div className="flex min-h-screen items-center justify-center bg-[#0c0d10] px-4">
|
|
<div className="bg-[#14161d] border border-[#1e2130] w-full max-w-md rounded-xl p-8 text-center">
|
|
<div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-accent">
|
|
<Icon className="h-8 w-8 text-[#848b9b]" />
|
|
</div>
|
|
<h1 className="mb-2 text-xl font-heading font-semibold text-[#e2e5eb]">{titleMap[error.type]}</h1>
|
|
<p className="mb-6 text-sm text-[#848b9b]">{error.message}</p>
|
|
<Link
|
|
to="/"
|
|
className="inline-block rounded-lg bg-[#22d3ee] px-6 py-2.5 text-sm font-medium text-white hover:brightness-110"
|
|
>
|
|
Go to ResolutionFlow
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function SharedSessionPage() {
|
|
const { shareToken } = useParams<{ shareToken: string }>()
|
|
const navigate = useNavigate()
|
|
const [data, setData] = useState<SharedSessionView | null>(null)
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState<ErrorState | null>(null)
|
|
|
|
useEffect(() => {
|
|
if (!shareToken) return
|
|
|
|
let cancelled = false
|
|
|
|
async function fetchSharedSession() {
|
|
try {
|
|
const result = await sessionsApi.getSharedSession(shareToken!)
|
|
if (!cancelled) {
|
|
setData(result)
|
|
setLoading(false)
|
|
}
|
|
} catch (err) {
|
|
if (cancelled) return
|
|
|
|
if (isAxiosError(err)) {
|
|
const status = err.response?.status
|
|
if (status === 401) {
|
|
navigate('/login', {
|
|
state: { from: { pathname: `/share/${shareToken}` } },
|
|
replace: true,
|
|
})
|
|
return
|
|
}
|
|
if (status === 403) {
|
|
setError({
|
|
type: 'access_denied',
|
|
message:
|
|
'This session is private to the account. You need to be a member of the account to view it.',
|
|
})
|
|
} else if (status === 404) {
|
|
setError({
|
|
type: 'not_found',
|
|
message: 'This share link was not found or has been revoked.',
|
|
})
|
|
} else if (status === 410) {
|
|
setError({
|
|
type: 'expired',
|
|
message: 'This share link has expired.',
|
|
})
|
|
} else {
|
|
setError({
|
|
type: 'generic',
|
|
message: 'Failed to load shared session. Please try again.',
|
|
})
|
|
}
|
|
} else {
|
|
setError({
|
|
type: 'generic',
|
|
message: 'Failed to load shared session. Please try again.',
|
|
})
|
|
}
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
fetchSharedSession()
|
|
return () => {
|
|
cancelled = true
|
|
}
|
|
}, [shareToken, navigate])
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex min-h-screen items-center justify-center bg-[#0c0d10]">
|
|
<div className="flex flex-col items-center gap-4">
|
|
<Spinner />
|
|
<p className="text-sm text-[#848b9b]">Loading shared session...</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (error) {
|
|
return <ErrorCard error={error} />
|
|
}
|
|
|
|
if (!data) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#0c0d10]">
|
|
<PageMeta
|
|
title={data ? `Shared Session - ${data.tree_name}` : 'Shared Session'}
|
|
description="View a shared troubleshooting session on ResolutionFlow"
|
|
/>
|
|
{/* Minimal header */}
|
|
<header className="border-b border-[#1e2130] px-6 py-4">
|
|
<div className="mx-auto flex max-w-7xl items-center justify-between">
|
|
<Link to="/" className="flex items-center gap-2">
|
|
<BrandLogo size="sm" />
|
|
<span className="text-lg font-heading font-semibold text-[#e2e5eb]">ResolutionFlow</span>
|
|
</Link>
|
|
<Link
|
|
to="/login"
|
|
className="rounded-lg border border-[#1e2130] px-4 py-2 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
|
|
>
|
|
Sign In
|
|
</Link>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Content */}
|
|
<main className="container mx-auto max-w-7xl px-4 py-8">
|
|
{/* Metadata section */}
|
|
<div className="mb-8">
|
|
{data.share_name && (
|
|
<h1 className="mb-2 text-2xl font-heading font-bold text-[#e2e5eb]">{data.share_name}</h1>
|
|
)}
|
|
<p className="text-lg text-[#848b9b]">
|
|
<span className="text-[#848b9b]">Tree:</span> {data.tree_name}
|
|
</p>
|
|
|
|
{(data.ticket_number || data.client_name) && (
|
|
<p className="mt-1 text-sm text-[#848b9b]">
|
|
{data.ticket_number && (
|
|
<span>Ticket: #{data.ticket_number}</span>
|
|
)}
|
|
{data.ticket_number && data.client_name && (
|
|
<span className="mx-1.5">·</span>
|
|
)}
|
|
{data.client_name && (
|
|
<span>Client: {data.client_name}</span>
|
|
)}
|
|
</p>
|
|
)}
|
|
|
|
<div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-[#848b9b]">
|
|
<span>Started: {formatDate(data.started_at)}</span>
|
|
{data.completed_at && (
|
|
<>
|
|
<span>Completed: {formatDate(data.completed_at)}</span>
|
|
<span>Duration: {formatDuration(data.started_at, data.completed_at)}</span>
|
|
</>
|
|
)}
|
|
<span className="inline-flex items-center gap-1">
|
|
{data.visibility === 'public' ? (
|
|
<>
|
|
<Globe className="h-3.5 w-3.5" />
|
|
Public
|
|
</>
|
|
) : (
|
|
<>
|
|
<Users className="h-3.5 w-3.5" />
|
|
Account
|
|
</>
|
|
)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Two-column layout */}
|
|
<div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
|
{/* Decision Timeline (2 cols) */}
|
|
<div className="lg:col-span-2">
|
|
<SessionTimeline
|
|
decisions={data.decisions}
|
|
treeType={data.tree_structure?.tree_type as string | undefined}
|
|
startedAt={data.started_at}
|
|
completedAt={data.completed_at}
|
|
showCopyButtons={false}
|
|
/>
|
|
</div>
|
|
|
|
{/* Tree Preview (1 col) */}
|
|
<div className="lg:col-span-1">
|
|
<SharedSessionTreePreview
|
|
treeStructure={data.tree_structure}
|
|
pathTaken={data.path_taken}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{/* Footer */}
|
|
<footer className="py-8 text-center text-sm text-[#848b9b]">
|
|
Powered by{' '}
|
|
<Link to="/" className="underline hover:text-[#e2e5eb]">
|
|
ResolutionFlow
|
|
</Link>
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SharedSessionPage
|