Spaces:
Runtime error
Runtime error
| import { useEffect, useState } from "react"; | |
| import { Link } from "react-router-dom"; | |
| import { shareApi } from "../api/endpoints"; | |
| import type { ShareInfo } from "../api/types"; | |
| import { errorMessage, Loading, Modal } from "./ui"; | |
| /** Share a report or an infographic by link: turn the link on or off, copy it, and choose whether the page shows its sources. */ | |
| export function ShareDialog({ artifactId, onClose, what = "report" }: { artifactId: string; onClose: () => void; what?: "report" | "infographic" }) { | |
| const [info, setInfo] = useState<ShareInfo | null>(null); | |
| const [error, setError] = useState<string | null>(null); | |
| const [busy, setBusy] = useState(false); | |
| const [copied, setCopied] = useState(false); | |
| useEffect(() => { | |
| shareApi.get(artifactId).then(setInfo).catch((e) => setError(errorMessage(e))); | |
| }, [artifactId]); | |
| const run = async (act: () => Promise<ShareInfo>) => { | |
| setBusy(true); | |
| setError(null); | |
| try { | |
| setInfo(await act()); | |
| } catch (e) { | |
| setError(errorMessage(e)); | |
| } finally { | |
| setBusy(false); | |
| } | |
| }; | |
| const copy = async () => { | |
| if (!info?.url) return; | |
| try { | |
| await navigator.clipboard.writeText(info.url); | |
| setCopied(true); | |
| setTimeout(() => setCopied(false), 1800); | |
| } catch { | |
| setError("Could not copy. Select the link and copy it by hand."); | |
| } | |
| }; | |
| return ( | |
| <Modal title={`Share ${what}`} onClose={onClose}> | |
| <div className="rp-add-options"> | |
| {!info && !error && <Loading label="Loading" />} | |
| {info && !info.shared && ( | |
| <> | |
| <p className="muted"> | |
| Make a link anyone can open to see this {what}. They don't need an account, and they can't edit or see your | |
| posts, only the {what}. | |
| </p> | |
| <div className="row end"> | |
| <button type="button" className="btn btn-primary" disabled={busy} onClick={() => run(() => shareApi.create(artifactId))}> | |
| {busy ? "Making the link..." : "Create share link"} | |
| </button> | |
| </div> | |
| </> | |
| )} | |
| {info?.shared && info.url && ( | |
| <> | |
| <div className="rp-share-link"> | |
| <input className="input input-sm" readOnly value={info.url} aria-label="Share link" onFocus={(e) => e.currentTarget.select()} /> | |
| <button type="button" className="btn btn-small btn-primary" onClick={copy}>{copied ? "Copied" : "Copy link"}</button> | |
| </div> | |
| {what === "report" && ( | |
| <label className="vw-option"> | |
| <input type="checkbox" checked={info.show_sources} disabled={busy} | |
| onChange={(e) => run(() => shareApi.update(artifactId, e.target.checked))} /> | |
| Show which sources were used | |
| </label> | |
| )} | |
| <small className="muted"> | |
| The page shows the {what} only: no source text, no quotes and no name. Stopping ends the link for good, and | |
| sharing again makes a new one. | |
| </small> | |
| <div className="row"> | |
| <a className="btn btn-small" href={info.url} target="_blank" rel="noreferrer">Open the page</a> | |
| <button type="button" className="btn btn-small btn-danger" disabled={busy} onClick={() => run(() => shareApi.remove(artifactId))}> | |
| Stop sharing | |
| </button> | |
| </div> | |
| </> | |
| )} | |
| {error && ( | |
| <p className="error-text"> | |
| {error} <Link to="/app/settings">Settings</Link> | |
| </p> | |
| )} | |
| <div className="row end"> | |
| <button type="button" className="btn" onClick={onClose}>Done</button> | |
| </div> | |
| </div> | |
| </Modal> | |
| ); | |
| } | |