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 |
| 11 | function publish(key: string, status: ColineConnectionStatus) { |
| 12 | for (const listener of subscribers.get(key) ?? []) listener(status); |
| 13 | } |
| 14 |
| 15 | /** An account connection's status, with connect and disconnect actions. */ |
| 16 | export function useConnection(key: string) { |
| 17 | const coline = useColine(); |
| 18 | const [status, setStatus] = React.useState<ColineConnectionStatus | null>(null); |
| 19 | const [isLoading, setLoading] = React.useState(true); |
| 20 | const [isConnecting, setConnecting] = React.useState(false); |
| 21 | const [error, setError] = React.useState<string | null>(null); |
| 22 |
| 23 | React.useEffect(() => { |
| 24 | const listener = (next: ColineConnectionStatus) => { |
| 25 | setStatus(next); |
| 26 | setError(null); |
| 27 | setLoading(false); |
| 28 | }; |
| 29 | let set = subscribers.get(key); |
| 30 | if (!set) subscribers.set(key, (set = new Set())); |
| 31 | set.add(listener); |
| 32 | return () => { |
| 33 | set.delete(listener); |
| 34 | if (set.size === 0) subscribers.delete(key); |
| 35 | }; |
| 36 | }, [key]); |
| 37 |
| 38 | const refresh = React.useCallback(async () => { |
| 39 | try { |
| 40 | publish(key, await coline.connections.get(key)); |
| 41 | } catch (cause) { |
| 42 | setError(cause instanceof Error ? cause.message : String(cause)); |
| 43 | } finally { |
| 44 | setLoading(false); |
| 45 | } |
| 46 | }, [coline, key]); |
| 47 |
| 48 | React.useEffect(() => { |
| 49 | let cancelled = false; |
| 50 | coline.connections |
| 51 | .get(key) |
| 52 | .then((next) => { |
| 53 | if (cancelled) return; |
| 54 | setStatus(next); |
| 55 | setError(null); |
| 56 | }) |
| 57 | .catch((cause: unknown) => { |
| 58 | if (!cancelled) setError(cause instanceof Error ? cause.message : String(cause)); |
| 59 | }) |
| 60 | .finally(() => { |
| 61 | if (!cancelled) setLoading(false); |
| 62 | }); |
| 63 | return () => { |
| 64 | cancelled = true; |
| 65 | }; |
| 66 | }, [coline, key]); |
| 67 |
| 68 | const connect = React.useCallback(async () => { |
| 69 | setConnecting(true); |
| 70 | try { |
| 71 | const next = await coline.connections.connect(key); |
| 72 | publish(key, next); |
| 73 | return next.connected; |
| 74 | } catch (cause) { |
| 75 | setError(cause instanceof Error ? cause.message : String(cause)); |
| 76 | return false; |
| 77 | } finally { |
| 78 | setConnecting(false); |
| 79 | } |
| 80 | }, [coline, key]); |
| 81 |
| 82 | const disconnect = React.useCallback(async () => { |
| 83 | await coline.connections.disconnect(key); |
| 84 | await refresh(); |
| 85 | }, [coline, key, refresh]); |
| 86 |
| 87 | return { status, isLoading, isConnecting, error, connect, disconnect, refresh }; |
| 88 | } |
| 89 |
| 90 | /** A value that settles `delayMs` after it stops changing. */ |
| 91 | export function useDebouncedValue<T>(value: T, delayMs = 250): T { |
| 92 | const [settled, setSettled] = React.useState(value); |
| 93 | React.useEffect(() => { |
| 94 | const timer = setTimeout(() => setSettled(value), delayMs); |
| 95 | return () => clearTimeout(timer); |
| 96 | }, [value, delayMs]); |
| 97 | return settled; |
| 98 | } |
| 99 |
