useConnectionManager

import { useConnectionManager } from "@sublay/react-js";

function ConnectionButton({ userId }: { userId: string }) {
  const {
    connectionStatus,
    isLoading,
    sendConnectionRequest,
    acceptConnectionRequest,
    declineConnectionRequest,
    withdrawConnectionRequest,
    disconnectUser,
  } = useConnectionManager({ userId });

  if (isLoading) return <button disabled>Loading...</button>;

  switch (connectionStatus) {
    case "none":
      return <button onClick={() => sendConnectionRequest()}>Connect</button>;
    case "pending-sent":
      return <button onClick={withdrawConnectionRequest}>Withdraw Request</button>;
    case "pending-received":
      return (
        <>
          <button onClick={acceptConnectionRequest}>Accept</button>
          <button onClick={declineConnectionRequest}>Decline</button>
        </>
      );
    case "connected":
      return <button onClick={disconnectUser}>Disconnect</button>;
    case "declined-sent":
      return <span>Request Declined</span>;
    case "declined-received":
      return <button onClick={() => sendConnectionRequest()}>Connect Again</button>;
  }
}