The Coline design system: accessible React components for Coline Apps, themed live by the host workspace, and for Coline Sites in light and dark. Tailwind v4 stylesheet included. MIT.
| 5 | import { useColine } from "../provider"; |
| 6 |
| 7 | // Every useConnection for a key shares what any of them learns: connecting |
| 8 | // through a ConnectButton must update the page's own useConnection too. |
| 9 | const subscribers = new Map<string, Set<(status: ColineConnectionStatus) => void>>(); |
| 10 | // Bumped on every publish: a status read that started before a newer |
| 11 | // publish (connect, disconnect) is stale and must not overwrite it. |
| 12 | const generations = new Map<string, number>(); |
| 13 |
| 14 | function publish(key: string, status: ColineConnectionStatus) { |
| 15 | generations.set(key, (generations.get(key) ?? 0) + 1); |
| 16 | for (const listener of subscribers.get(key) ?? []) listener(status); |
| 17 | } |
| 18 |
| 19 | /** Read the status; returns null when something newer was published meanwhile. */ |
| 20 | async function readStatus( |
| 21 | coline: ReturnType<typeof useColine>, |
| 22 | key: string, |
| 23 | ): Promise<ColineConnectionStatus | null> { |
| 24 | const started = generations.get(key) ?? 0; |
| 25 | const status = await coline.connections.get(key); |
| 26 | return (generations.get(key) ?? 0) === started ? status : null; |
| 27 | } |
| 28 |
| 29 | /** An account connection's status, with connect and disconnect actions. */ |
| 30 | export function useConnection(key: string) { |
| 31 | const coline = useColine(); |
| 32 | const [status, setStatus] = React.useState<ColineConnectionStatus | null>(null); |
| 33 | const [isLoading, setLoading] = React.useState(true); |
| 34 | const [isConnecting, setConnecting] = React.useState(false); |
| 35 | const [error, setError] = React.useState<string | null>(null); |
| 36 |
| 37 | React.useEffect(() => { |
| 38 | const listener = (next: ColineConnectionStatus) => { |
| 39 | setStatus(next); |
| 40 | setError(null); |
| 41 | setLoading(false); |
| 42 | }; |
| 43 | let set = subscribers.get(key); |
| 44 | if (!set) subscribers.set(key, (set = new Set())); |
| 45 | set.add(listener); |
| 46 | return () => { |
| 47 | set.delete(listener); |
| 48 | if (set.size === 0) subscribers.delete(key); |
| 49 | }; |
| 50 | }, [key]); |
| 51 |
| 52 | const refresh = React.useCallback(async () => { |
| 53 | try { |
| 54 | const next = await readStatus(coline, key); |
| 55 | if (next) publish(key, next); |
| 56 | } catch (cause) { |
| 57 | setError(cause instanceof Error ? cause.message : String(cause)); |
| 58 | } finally { |
| 59 | setLoading(false); |
| 60 | } |
| 61 | }, [coline, key]); |
| 62 |
| 63 | React.useEffect(() => { |
| 64 | let cancelled = false; |
| 65 | readStatus(coline, key) |
| 66 | .then((next) => { |
| 67 | // null: a connect or disconnect landed first and already set the status. |
| 68 | if (cancelled || !next) return; |
| 69 | setStatus(next); |
| 70 | setError(null); |
| 71 | }) |
| 72 | .catch((cause: unknown) => { |
| 73 | if (!cancelled) setError(cause instanceof Error ? cause.message : String(cause)); |
| 74 | }) |
| 75 | .finally(() => { |
| 76 | if (!cancelled) setLoading(false); |
| 77 | }); |
| 78 | return () => { |
| 79 | cancelled = true; |
| 80 | }; |
| 81 | }, [coline, key]); |
| 82 |
| 83 | const connect = React.useCallback(async () => { |
| 84 | setConnecting(true); |
| 85 | try { |
| 86 | const next = await coline.connections.connect(key); |
| 87 | publish(key, next); |
| 88 | return next.connected; |
| 89 | } catch (cause) { |
| 90 | setError(cause instanceof Error ? cause.message : String(cause)); |
| 91 | return false; |
| 92 | } finally { |
| 93 | setConnecting(false); |
| 94 | } |
| 95 | }, [coline, key]); |
| 96 |
| 97 | const disconnect = React.useCallback(async () => { |
| 98 | await coline.connections.disconnect(key); |
| 99 | await refresh(); |
| 100 | }, [coline, key, refresh]); |
| 101 |
| 102 | return { status, isLoading, isConnecting, error, connect, disconnect, refresh }; |
| 103 | } |
| 104 |
| 105 | /** A value that settles `delayMs` after it stops changing. */ |
| 106 | export function useDebouncedValue<T>(value: T, delayMs = 250): T { |
| 107 | const [settled, setSettled] = React.useState(value); |
| 108 | React.useEffect(() => { |
| 109 | const timer = setTimeout(() => setSettled(value), delayMs); |
| 110 | return () => clearTimeout(timer); |
| 111 | }, [value, delayMs]); |
| 112 | return settled; |
| 113 | } |
| 114 |
