| 1 | /** |
| 2 | * How Docs pages change things: a JSON request to `-/docs/api`, then the |
| 3 | * sidebar and page load again so they show it. Returns the service's |
| 4 | * `{ ok, value }` or `{ ok: false, error }`. |
| 5 | */ |
| 6 | import type { Result } from "@g1t/contracts"; |
| 7 | import { useCallback, useState } from "react"; |
| 8 | import { useRevalidator, useRouteLoaderData } from "react-router"; |
| 9 | |
| 10 | import type { DocsLayoutData } from "../../routes/workspace/docs/layout"; |
| 11 | |
| 12 | export function useDocsData(): DocsLayoutData | undefined { |
| 13 | return useRouteLoaderData("routes/workspace/docs/layout") as DocsLayoutData | undefined; |
| 14 | } |
| 15 | |
| 16 | /** How long a Docs request may take before the page says so instead of waiting on. */ |
| 17 | export const DOCS_TIMEOUT_MS = 20_000; |
| 18 | |
| 19 | /** What a request that failed or took too long says. */ |
| 20 | export function docsFailure<T>(error: unknown): Result<T> { |
| 21 | const late = error instanceof DOMException && (error.name === "TimeoutError" || error.name === "AbortError"); |
| 22 | const message = late ? "Docs took too long to answer. Try again in a moment." : "Docs didn't answer. Check your connection and try again."; |
| 23 | return { ok: false, error: { code: "conflict", message } }; |
| 24 | } |
| 25 | |
| 26 | export async function docsRequest<T>(slug: string, intent: string, body: Record<string, unknown> = {}): Promise<Result<T>> { |
| 27 | try { |
| 28 | const response = await fetch(`/${slug}/-/docs/api`, { |
| 29 | method: "POST", |
| 30 | headers: { "content-type": "application/json", accept: "application/json" }, |
| 31 | body: JSON.stringify({ intent, ...body }), |
| 32 | signal: AbortSignal.timeout(DOCS_TIMEOUT_MS), |
| 33 | }); |
| 34 | return (await response.json()) as Result<T>; |
| 35 | } catch (error) { |
| 36 | return docsFailure(error); |
| 37 | } |
| 38 | } |
| 39 | |
| 40 | export async function docsQuery<T>(slug: string, query: Record<string, string>): Promise<Result<T>> { |
| 41 | try { |
| 42 | const response = await fetch(`/${slug}/-/docs/api?${new URLSearchParams(query)}`, { |
| 43 | headers: { accept: "application/json" }, |
| 44 | signal: AbortSignal.timeout(DOCS_TIMEOUT_MS), |
| 45 | }); |
| 46 | return (await response.json()) as Result<T>; |
| 47 | } catch (error) { |
| 48 | return docsFailure(error); |
| 49 | } |
| 50 | } |
| 51 | |
| 52 | /** `send(intent, body)`: makes the change, then reloads what shows it. `busy` while it works; `error` when it failed. */ |
| 53 | export function useDocsAction(slug: string) { |
| 54 | const revalidator = useRevalidator(); |
| 55 | const [busy, setBusy] = useState(false); |
| 56 | const [error, setError] = useState<string | null>(null); |
| 57 | const send = useCallback( |
| 58 | async <T>(intent: string, body: Record<string, unknown> = {}, options: { reload?: boolean } = {}): Promise<Result<T>> => { |
| 59 | setBusy(true); |
| 60 | setError(null); |
| 61 | const result = await docsRequest<T>(slug, intent, body); |
| 62 | setBusy(false); |
| 63 | if (!result.ok) setError(result.error.message); |
| 64 | else if (options.reload !== false) void revalidator.revalidate(); |
| 65 | return result; |
| 66 | }, |
| 67 | [slug, revalidator], |
| 68 | ); |
| 69 | return { send, busy, error, setError }; |
| 70 | } |