Spaces:
Runtime error
Runtime error
| import { useEffect, useState } from "react"; | |
| import { Link, useParams } from "react-router-dom"; | |
| import { publicApi } from "../api/endpoints"; | |
| import type { PublicInfographicData, PublicReportData } from "../api/types"; | |
| import { InfographicFrame } from "../components/Infographic"; | |
| import Logo from "../components/Logo"; | |
| import { ReportView } from "../components/ReportView"; | |
| import { Loading } from "../components/ui"; | |
| /** What a share link opens: /r/:token. Read only, no sign in, not indexed. */ | |
| export default function PublicReport() { | |
| const { token = "" } = useParams(); | |
| const [shared, setShared] = useState<PublicReportData | PublicInfographicData | null>(null); | |
| const [missing, setMissing] = useState(false); | |
| const [showSources, setShowSources] = useState(false); | |
| useEffect(() => { | |
| // Shared pages stay out of search results. | |
| const meta = document.createElement("meta"); | |
| meta.name = "robots"; | |
| meta.content = "noindex, nofollow"; | |
| document.head.appendChild(meta); | |
| return () => meta.remove(); | |
| }, []); | |
| useEffect(() => { | |
| publicApi.report(token).then( | |
| (r) => { | |
| setShared(r); | |
| document.title = `${r.title} | Notestack`; | |
| }, | |
| () => setMissing(true), | |
| ); | |
| }, [token]); | |
| if (missing) { | |
| return ( | |
| <main className="rp-public rp-public-empty"> | |
| <Logo /> | |
| <h1>This link does not work</h1> | |
| <p className="muted">The page may have been taken down, or the link is wrong.</p> | |
| <Link to="/" className="btn btn-primary">Go to Notestack</Link> | |
| </main> | |
| ); | |
| } | |
| if (!shared) return <main className="rp-public"><Loading label="Opening" /></main>; | |
| if (shared.kind === "infographic") { | |
| return ( | |
| <main className="rp-public ig-public"> | |
| <header className="rp-public-bar"> | |
| <Link to="/" aria-label="Notestack home"><Logo /></Link> | |
| </header> | |
| <div className="rp-public-body"> | |
| <p className="eyebrow">Infographic</p> | |
| <h1>{shared.title}</h1> | |
| <InfographicFrame html={shared.html_landscape || shared.html} title={shared.title} | |
| layout={shared.html_landscape ? "landscape" : "portrait"} /> | |
| </div> | |
| <footer className="rp-public-foot"> | |
| <span className="muted">Made with</span> <Link to="/">Notestack</Link> | |
| </footer> | |
| </main> | |
| ); | |
| } | |
| const report = shared; | |
| const posts = report.sources?.posts ?? []; | |
| return ( | |
| <main className="rp-public"> | |
| <header className="rp-public-bar"> | |
| <Link to="/" aria-label="Notestack home"><Logo /></Link> | |
| {report.show_sources && report.sources && ( | |
| <div className="rp-sources"> | |
| <button type="button" className="btn btn-small" aria-expanded={showSources} onClick={() => setShowSources((o) => !o)}> | |
| Sources | |
| </button> | |
| {showSources && ( | |
| <div className="rp-sources-pop" role="dialog" aria-label="Sources used for this report"> | |
| <p className="eyebrow">Made from</p> | |
| {report.sources.chats > 0 && <p>{report.sources.chats} notebook chat{report.sources.chats === 1 ? "" : "s"}</p>} | |
| <ul> | |
| {posts.map((p, i) => ( | |
| <li key={i}>{p.url ? <a href={p.url} target="_blank" rel="noreferrer noopener">{p.title}</a> : p.title}</li> | |
| ))} | |
| </ul> | |
| </div> | |
| )} | |
| </div> | |
| )} | |
| </header> | |
| <div className="rp-public-body"> | |
| <p className="eyebrow">{report.format === "interactive" ? "Interactive report" : "Report"}</p> | |
| <h1>{report.title}</h1> | |
| <p className="rp-meta"> | |
| {report.created_at ? new Date(report.created_at).toLocaleDateString(undefined, { year: "numeric", month: "long", day: "numeric" }) : ""} | |
| {report.created_at && " · "} | |
| {report.blocks.filter((b) => b.type === "prose").length} sections | |
| </p> | |
| <ReportView | |
| content={{ title: report.title, blocks: report.blocks, citations: [], sources: report.sources?.posts ?? [], | |
| chat_count: report.sources?.chats ?? 0 }} | |
| artifactId={token} /> | |
| </div> | |
| <footer className="rp-public-foot"> | |
| <span className="muted">Made with</span> <Link to="/">Notestack</Link> | |
| </footer> | |
| </main> | |
| ); | |
| } | |