@brdgapp/ui 0.1.0

package/src/types.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react"
+
+export type NetworkContact = {
+  id: string
+  name: string
+  email: string | null
+  shareLink: string | null
+  profilePicUrl: string | null
+  position: string | null
+  company: string | null
+  username: string | null
+  isMember: boolean
+}
+
+export type NetworkPersonAction = {
+  id: string
+  label: string
+  description?: string
+  icon?: ReactNode
+  onSelect: (contact: NetworkContact) => void
+}
+
+export type HelperPlacement = "bottom-end" | "bottom-start" | "top-end" | "top-start"
+
+export type BridgeClientConfig = {
+  apiBaseUrl: string
+  getAccessToken: () => Promise<string | null> | string | null
+  introInboxUrl: string
+  profileUrlForUsername: (username: string) => string
+}

package/src/use-network-people-list.ts

@@ -0,0 +1,122 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react"
+import { fetchNetworkPage, PAGE_SIZE } from "./api"
+import { cleanDomain } from "./domain"
+import { useBridgeUI } from "./provider"
+import type { NetworkContact } from "./types"
+
+type Options = {
+  domain: string
+  enabled: boolean
+  search: string
+  previewContacts: NetworkContact[]
+  totalCount: number
+}
+
+export function useNetworkPeopleList({
+  domain,
+  enabled,
+  search,
+  previewContacts,
+  totalCount,
+}: Options) {
+  const config = useBridgeUI()
+  const cleaned = cleanDomain(domain)
+  const searchTerm = search.trim()
+  const previewKey = previewContacts.map((contact) => contact.id).join("\n")
+  const [pages, setPages] = useState<NetworkContact[][]>([])
+  const [hasNextPage, setHasNextPage] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [isFetchingNextPage, setIsFetchingNextPage] = useState(false)
+  const [isError, setIsError] = useState(false)
+  const requestRef = useRef(0)
+  const pagesRef = useRef(pages)
+  pagesRef.current = pages
+  const previewRef = useRef(previewContacts)
+  previewRef.current = previewContacts
+
+  const load = useCallback(
+    async (offset: number, append: boolean, requestId: number) => {
+      if (!config || !cleaned) return
+      if (append) setIsFetchingNextPage(true)
+      else setIsLoading(true)
+      try {
+        const contacts = await fetchNetworkPage(config, cleaned, { offset, search: searchTerm })
+        if (requestRef.current !== requestId) return
+        const base = append ? pagesRef.current.reduce((total, page) => total + page.length, 0) : 0
+        const nextPages = append ? [...pagesRef.current, contacts] : [contacts]
+        pagesRef.current = nextPages
+        setPages(nextPages)
+        const loaded = base + contacts.length
+        const reachedEnd = !searchTerm && totalCount > 0 && loaded >= totalCount
+        setHasNextPage(!reachedEnd && contacts.length >= PAGE_SIZE)
+        setIsError(false)
+      } catch {
+        if (requestRef.current !== requestId) return
+        if (!append) {
+          pagesRef.current = []
+          setPages([])
+          setIsError(true)
+        }
+        setHasNextPage(false)
+      } finally {
+        if (requestRef.current === requestId) {
+          setIsLoading(false)
+          setIsFetchingNextPage(false)
+        }
+      }
+    },
+    [config, cleaned, searchTerm, totalCount],
+  )
+
+  useEffect(() => {
+    if (!enabled || !config || !cleaned) {
+      pagesRef.current = []
+      setPages([])
+      setHasNextPage(false)
+      setIsLoading(false)
+      setIsFetchingNextPage(false)
+      setIsError(false)
+      return
+    }
+
+    const requestId = ++requestRef.current
+    const seeded = !searchTerm ? previewRef.current : []
+    if (seeded.length > 0) {
+      pagesRef.current = [seeded]
+      setPages([seeded])
+      setIsError(false)
+      setIsLoading(false)
+      if (totalCount > 0 && seeded.length >= totalCount) {
+        setHasNextPage(false)
+      } else {
+        setHasNextPage(true)
+        void load(seeded.length, true, requestId)
+      }
+    } else {
+      pagesRef.current = []
+      setPages([])
+      void load(0, false, requestId)
+    }
+
+    return () => {
+      requestRef.current += 1
+    }
+  }, [enabled, config, cleaned, searchTerm, previewKey, totalCount, load])
+
+  const fetchNextPage = useCallback(() => {
+    if (!hasNextPage || isFetchingNextPage || isLoading) return
+    const loaded = pagesRef.current.reduce((total, page) => total + page.length, 0)
+    void load(loaded, true, requestRef.current)
+  }, [hasNextPage, isFetchingNextPage, isLoading, load])
+
+  return {
+    people: pages.flat(),
+    isLoading,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage,
+    isError,
+  }
+}

package/src/use-network-preview.ts

@@ -0,0 +1,43 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { fetchNetworkPreview } from "./api"
+import { cleanDomain } from "./domain"
+import { useBridgeUI } from "./provider"
+import type { NetworkContact } from "./types"
+
+export type NetworkPreviewState = {
+  status: "idle" | "loading" | "ready" | "error"
+  count: number
+  contacts: NetworkContact[]
+}
+
+const IDLE: NetworkPreviewState = { status: "idle", count: 0, contacts: [] }
+
+export function useNetworkPreview(domain: string, enabled: boolean): NetworkPreviewState {
+  const config = useBridgeUI()
+  const cleaned = cleanDomain(domain)
+  const [state, setState] = useState<NetworkPreviewState & { domain: string }>({
+    ...IDLE,
+    domain: cleaned,
+  })
+
+  useEffect(() => {
+    if (!enabled || !config || !cleaned) return
+    let cancelled = false
+    setState({ status: "loading", count: 0, contacts: [], domain: cleaned })
+    fetchNetworkPreview(config, cleaned)
+      .then((data) => {
+        if (!cancelled) setState({ status: "ready", domain: cleaned, ...data })
+      })
+      .catch(() => {
+        if (!cancelled) setState({ status: "error", count: 0, contacts: [], domain: cleaned })
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [enabled, config, cleaned])
+
+  if (state.domain !== cleaned) return IDLE
+  return state
+}