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