useSharedCircles

Location: src/hooks/useSharedCircles.js

Overview

This file exports two hooks for managing circle-level social context:

• useSharedCircles -- finds circles that both the current user and another user belong to. Used primarily in the block confirmation dialog to warn users about the impact of blocking someone they share circles with.
• useCircleBlockStatus -- checks which members within a specific circle have blocked or been blocked by the current user. Used to filter content visibility within circle views.

---

useSharedCircles

Signature

function useSharedCircles(
  otherUserId: string
): {
  loading: boolean,
  error: string | null,
  sharedCircles: SharedCircleRow[],
  hasSharedCircles: boolean,
  sharedCircleCount: number,
  refetch: () => Promise<void>
}

Parameters

Parameter	Type	Required	Description
otherUserId	string	Yes	The user ID of the other person to check shared circles with.

Return Value

Property	Type	Description
loading	boolean	true while the fetch is in progress.
error	string | null	Error message if the fetch failed.
sharedCircles	SharedCircleRow[]	Array of circles both users belong to. Fetched via the get_shared_circles RPC function.
hasSharedCircles	boolean	Convenience boolean: true if there is at least one shared circle.
sharedCircleCount	number	The number of shared circles.
refetch	() => Promise<void>	Re-fetch the shared circles data.

Usage

function BlockConfirmation({ targetUserId, onConfirm }) {
  const { sharedCircles, hasSharedCircles, loading } = useSharedCircles(targetUserId);

  return (
    <div>
      <p>Are you sure you want to block this user?</p>
      {hasSharedCircles && (
        <div className="warning">
          You share {sharedCircles.length} circle(s) with this person.
          Their posts will be hidden from you in those circles.
        </div>
      )}
      <button onClick={onConfirm} disabled={loading}>Confirm Block</button>
    </div>
  );
}

---

useCircleBlockStatus

Signature

function useCircleBlockStatus(
  circleId: string
): {
  loading: boolean,
  error: string | null,
  blockedByMe: Set<string>,
  blockedMe: Set<string>,
  getMemberBlockStatus: (memberId: string) => { iBlockedThem: boolean, theyBlockedMe: boolean, isBlocked: boolean },
  refetch: () => Promise<void>
}

Parameters

Parameter	Type	Required	Description
circleId	string	Yes	The circle ID to check block status within.

Return Value

Property	Type	Description
loading	boolean	true while the fetch is in progress.
error	string | null	Error message if the fetch failed.
blockedByMe	Set<string>	Set of user IDs that the current user has blocked within this circle.
blockedMe	Set<string>	Set of user IDs that have blocked the current user within this circle.
getMemberBlockStatus	(memberId: string) => object	Returns the block relationship for a specific member: iBlockedThem, theyBlockedMe, and isBlocked (either direction).
refetch	() => Promise<void>	Re-fetch block status data.

Usage

function CircleMemberList({ circleId, members }) {
  const { getMemberBlockStatus, loading } = useCircleBlockStatus(circleId);

  return (
    <ul>
      {members.map(member => {
        const blockStatus = getMemberBlockStatus(member.id);
        return (
          <li key={member.id} className={blockStatus.isBlocked ? 'blocked' : ''}>
            {member.display_name}
            {blockStatus.iBlockedThem && <span>(blocked)</span>}
          </li>
        );
      })}
    </ul>
  );
}

---

Last updated: 2026-02-07