`useFetchReceivedPendingConnections`

Overview

The useFetchReceivedPendingConnections hook fetches the list of connection requests that the current logged-in user has received from other users but hasn’t responded to yet. This is essential for building connection request notification systems and inbox features.

Usage Example

import { useFetchReceivedPendingConnections } from "@replyke/react-js";

function MyInboxConnectionRequests() {
  const fetchReceivedPendingConnections = useFetchReceivedPendingConnections();

  const loadReceivedRequests = async () => {
    try {
      const result = await fetchReceivedPendingConnections({ page: 1, limit: 10 });

      console.log(`Found ${result.pagination.totalCount} pending requests received`);
      result.connections.forEach(connection => {
        console.log(`Request from ${connection.user.username} on ${connection.createdAt}`);
      });
    } catch (error) {
      console.error("Failed to fetch received pending connections:", error.message);
    }
  };

  return <button onClick={loadReceivedRequests}>Load Connection Requests</button>;
}

Advanced Usage with Action Handling

import { useFetchReceivedPendingConnections, PendingConnectionListResponse } from "@replyke/react-js";
import { useState, useEffect } from "react";

function ConnectionRequestsInbox() {
  const fetchReceivedPendingConnections = useFetchReceivedPendingConnections();
  const [receivedRequests, setReceivedRequests] = useState<PendingConnectionListResponse | null>(null);
  const [loading, setLoading] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);

  const loadReceivedRequests = async (page: number) => {
    setLoading(true);
    try {
      const result = await fetchReceivedPendingConnections({ page, limit: 12 });
      setReceivedRequests(result);
    } catch (error) {
      console.error("Failed to load received requests:", error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadReceivedRequests(currentPage);
  }, [currentPage]);

  const handleAcceptRequest = async (connectionId: string) => {
    // This would typically call useAcceptConnection hook
    console.log("Accepting request:", connectionId);
    // After successful acceptance, refresh the list
    loadReceivedRequests(currentPage);
  };

  const handleDeclineRequest = async (connectionId: string) => {
    // This would typically call useDeclineConnection hook
    console.log("Declining request:", connectionId);
    // After successful decline, refresh the list
    loadReceivedRequests(currentPage);
  };

  if (loading && !receivedRequests) {
    return <div>Loading connection requests...</div>;
  }

  return (
    <div className="connection-requests-inbox">
      <h2>Connection Requests ({receivedRequests?.pagination.totalCount || 0})</h2>

      {receivedRequests?.connections.length === 0 ? (
        <div className="empty-inbox">
          <div className="empty-icon">📭</div>
          <h3>No pending requests</h3>
          <p>You're all caught up! No new connection requests at the moment.</p>
        </div>
      ) : (
        <>
          <div className="requests-list">
            {receivedRequests?.connections.map(connection => (
              <div key={connection.id} className="request-card">
                <div className="requester-info">
                  {connection.user.avatar && (
                    <img
                      src={connection.user.avatar}
                      alt={`${connection.user.username} avatar`}
                      className="avatar"
                    />
                  )}
                  <div className="user-details">
                    <h4>{connection.user.displayName || connection.user.username}</h4>
                    <p>@{connection.user.username}</p>
                    <small>
                      Requested: {new Date(connection.createdAt).toLocaleDateString()}
                    </small>
                  </div>
                </div>

                {connection.message && (
                  <div className="request-message">
                    <h5>Message:</h5>
                    <p>"{connection.message}"</p>
                  </div>
                )}

                <div className="request-actions">
                  <button
                    onClick={() => handleAcceptRequest(connection.id)}
                    className="accept-btn primary"
                  >
                    Accept
                  </button>
                  <button
                    onClick={() => handleDeclineRequest(connection.id)}
                    className="decline-btn secondary"
                  >
                    Decline
                  </button>
                </div>
              </div>
            ))}
          </div>

          {receivedRequests && receivedRequests.pagination.totalPages > 1 && (
            <div className="pagination">
              <button
                disabled={!receivedRequests.pagination.hasPreviousPage || loading}
                onClick={() => setCurrentPage(prev => prev - 1)}
              >
                Previous
              </button>

              <span>
                Page {receivedRequests.pagination.currentPage} of {receivedRequests.pagination.totalPages}
              </span>

              <button
                disabled={!receivedRequests.pagination.hasNextPage || loading}
                onClick={() => setCurrentPage(prev => prev + 1)}
              >
                Next
              </button>
            </div>
          )}
        </>
      )}
    </div>
  );
}

Usage with Notification Badge

import { useFetchReceivedPendingConnections } from "@replyke/react-js";
import { useState, useEffect } from "react";

function ConnectionRequestsBadge() {
  const fetchReceivedPendingConnections = useFetchReceivedPendingConnections();
  const [unreadCount, setUnreadCount] = useState<number>(0);

  useEffect(() => {
    const loadUnreadCount = async () => {
      try {
        // Just get the first page to check if there are any requests
        const result = await fetchReceivedPendingConnections({ page: 1, limit: 1 });
        setUnreadCount(result.pagination.totalCount);
      } catch (error) {
        console.error("Failed to load connection requests count:", error);
      }
    };

    loadUnreadCount();

    // Set up periodic refresh (every 30 seconds)
    const interval = setInterval(loadUnreadCount, 30000);
    return () => clearInterval(interval);
  }, [fetchReceivedPendingConnections]);

  if (unreadCount === 0) return null;

  return (
    <div className="connection-requests-badge">
      <span className="badge-count">{unreadCount > 99 ? '99+' : unreadCount}</span>
      <span className="badge-label">Connection Requests</span>
    </div>
  );
}

Usage with Quick Actions

import { useFetchReceivedPendingConnections } from "@replyke/react-js";
import { useState, useEffect } from "react";

function QuickConnectionActions() {
  const fetchReceivedPendingConnections = useFetchReceivedPendingConnections();
  const [recentRequests, setRecentRequests] = useState<any[]>([]);
  const [processing, setProcessing] = useState<Set<string>>(new Set());

  useEffect(() => {
    const loadRecentRequests = async () => {
      try {
        const result = await fetchReceivedPendingConnections({ page: 1, limit: 5 });
        setRecentRequests(result.connections);
      } catch (error) {
        console.error("Failed to load recent requests:", error);
      }
    };

    loadRecentRequests();
  }, [fetchReceivedPendingConnections]);

  const handleQuickAction = async (
    connectionId: string,
    action: 'accept' | 'decline'
  ) => {
    setProcessing(prev => new Set(prev).add(connectionId));

    try {
      if (action === 'accept') {
        // Call useAcceptConnection hook
        console.log("Quick accepting:", connectionId);
      } else {
        // Call useDeclineConnection hook
        console.log("Quick declining:", connectionId);
      }

      // Remove the request from the list
      setRecentRequests(prev => prev.filter(req => req.id !== connectionId));
    } catch (error) {
      console.error(`Failed to ${action} connection:`, error);
    } finally {
      setProcessing(prev => {
        const newSet = new Set(prev);
        newSet.delete(connectionId);
        return newSet;
      });
    }
  };

  if (recentRequests.length === 0) {
    return <div className="no-requests">No pending connection requests</div>;
  }

  return (
    <div className="quick-connection-actions">
      <h3>Recent Connection Requests</h3>

      <div className="quick-actions-list">
        {recentRequests.map(request => (
          <div key={request.id} className="quick-action-item">
            <div className="user-summary">
              <strong>{request.user.displayName || request.user.username}</strong>
              <span className="username">@{request.user.username}</span>
            </div>

            <div className="quick-buttons">
              <button
                onClick={() => handleQuickAction(request.id, 'accept')}
                disabled={processing.has(request.id)}
                className="quick-accept"
                title="Accept connection request"
              >
                {processing.has(request.id) ? '⏳' : '✓'}
              </button>
              <button
                onClick={() => handleQuickAction(request.id, 'decline')}
                disabled={processing.has(request.id)}
                className="quick-decline"
                title="Decline connection request"
              >
                {processing.has(request.id) ? '⏳' : '✗'}
              </button>
            </div>
          </div>
        ))}
      </div>

      <div className="view-all">
        <a href="/connections/requests">View all requests</a>
      </div>
    </div>
  );
}

Usage with Bulk Actions

import { useFetchReceivedPendingConnections } from "@replyke/react-js";
import { useState, useEffect } from "react";

function BulkConnectionRequestsManager() {
  const fetchReceivedPendingConnections = useFetchReceivedPendingConnections();
  const [allRequests, setAllRequests] = useState<any[]>([]);
  const [selectedRequests, setSelectedRequests] = useState<Set<string>>(new Set());
  const [loading, setLoading] = useState(false);
  const [bulkProcessing, setBulkProcessing] = useState(false);

  const loadAllRequests = async () => {
    setLoading(true);
    try {
      let allRequests: any[] = [];
      let currentPage = 1;
      let hasMore = true;

      while (hasMore) {
        const result = await fetchReceivedPendingConnections({ page: currentPage, limit: 50 });
        allRequests = [...allRequests, ...result.connections];
        hasMore = result.pagination.hasNextPage;
        currentPage++;
      }

      setAllRequests(allRequests);
    } catch (error) {
      console.error("Failed to load all requests:", error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadAllRequests();
  }, []);

  const handleSelectRequest = (connectionId: string) => {
    const newSelected = new Set(selectedRequests);
    if (newSelected.has(connectionId)) {
      newSelected.delete(connectionId);
    } else {
      newSelected.add(connectionId);
    }
    setSelectedRequests(newSelected);
  };

  const handleSelectAll = () => {
    if (selectedRequests.size === allRequests.length) {
      setSelectedRequests(new Set());
    } else {
      setSelectedRequests(new Set(allRequests.map(req => req.id)));
    }
  };

  const handleBulkAction = async (action: 'accept' | 'decline') => {
    if (selectedRequests.size === 0) return;

    const confirmed = window.confirm(
      `Are you sure you want to ${action} ${selectedRequests.size} connection requests?`
    );
    if (!confirmed) return;

    setBulkProcessing(true);

    try {
      for (const connectionId of selectedRequests) {
        if (action === 'accept') {
          // Call useAcceptConnection hook
          console.log("Bulk accepting:", connectionId);
        } else {
          // Call useDeclineConnection hook
          console.log("Bulk declining:", connectionId);
        }

        // Brief delay between operations
        await new Promise(resolve => setTimeout(resolve, 500));
      }

      // Refresh the list after bulk action
      setSelectedRequests(new Set());
      await loadAllRequests();
    } catch (error) {
      console.error(`Failed to bulk ${action} connections:`, error);
    } finally {
      setBulkProcessing(false);
    }
  };

  return (
    <div className="bulk-requests-manager">
      <div className="header">
        <h2>Connection Requests ({allRequests.length})</h2>

        <div className="bulk-controls">
          <label className="select-all">
            <input
              type="checkbox"
              checked={selectedRequests.size === allRequests.length && allRequests.length > 0}
              onChange={handleSelectAll}
            />
            Select All
          </label>

          {selectedRequests.size > 0 && (
            <div className="bulk-actions">
              <button
                onClick={() => handleBulkAction('accept')}
                disabled={bulkProcessing}
                className="bulk-accept-btn"
              >
                Accept Selected ({selectedRequests.size})
              </button>
              <button
                onClick={() => handleBulkAction('decline')}
                disabled={bulkProcessing}
                className="bulk-decline-btn"
              >
                Decline Selected ({selectedRequests.size})
              </button>
            </div>
          )}
        </div>
      </div>

      {bulkProcessing && (
        <div className="bulk-processing">
          <p>Processing {selectedRequests.size} requests...</p>
        </div>
      )}

      {loading ? (
        <div>Loading connection requests...</div>
      ) : (
        <div className="requests-grid">
          {allRequests.map(request => (
            <div key={request.id} className="request-card">
              <label className="request-selector">
                <input
                  type="checkbox"
                  checked={selectedRequests.has(request.id)}
                  onChange={() => handleSelectRequest(request.id)}
                />
              </label>

              <div className="request-content">
                <div className="user-info">
                  <h4>{request.user.displayName || request.user.username}</h4>
                  <p>@{request.user.username}</p>
                </div>

                <div className="request-meta">
                  <small>Received: {new Date(request.createdAt).toLocaleDateString()}</small>
                  {request.message && (
                    <p className="message">"{request.message}"</p>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

Parameters & Returns

Parameters

The hook returns a function that accepts an optional object with the following fields:

page

number

limit

number

Returns

The function returns a Promise that resolves to a PendingConnectionListResponse object containing:

`PendingConnectionListResponse`

connections

PendingConnection[]

Array of pending connection information

pagination

PaginationInfo

Pagination metadata

`PendingConnection`

Field	Type	Description
`id`	`string`	Unique ID of the connection request
`user`	`User`	User object containing requester information
`message`	`string?`	Optional message sent with the connection request
`createdAt`	`string`	ISO date string of when the request was received

`PaginationInfo`

Field	Type	Description
`currentPage`	`number`	Current page number
`totalPages`	`number`	Total number of pages available
`totalCount`	`number`	Total number of received pending requests
`hasNextPage`	`boolean`	Whether there are more pages after current page
`hasPreviousPage`	`boolean`	Whether there are pages before current page
`limit`	`number`	Number of items per page used in this request

Error Handling

The hook will throw errors in the following cases:

No project is specified
No user is logged in
Network connection issues

Use Cases

This hook is essential for: Notification Systems:

Connection request inbox
Real-time notification badges
Push notification triggers

User Engagement:

Dashboard widgets showing pending requests
Quick action interfaces
Bulk request management

Professional Networking:

LinkedIn-style connection management
Business networking platforms
Professional community features

Best Practices

Real-time Updates: Implement periodic polling or websocket connections for live updates
Notification Badges: Show unread count in navigation
Quick Actions: Provide fast accept/decline options
Bulk Operations: Allow bulk acceptance/decline for power users
Message Display: Show personal messages to encourage connections
Empty States: Design helpful empty states when no requests exist

useFetchSentPendingConnections - Get outgoing connection requests
useAcceptConnection - Accept received connection requests
useDeclineConnection - Decline received connection requests
useConnectionManager - Comprehensive connection state management

Overview

Crypto Hooks

User Hooks

Follow Hooks

Connection Hooks

Entity Hooks

Comment Hooks

Storage Hooks

Moderation Hooks

Use Fetch Received Pending Connections

`useFetchReceivedPendingConnections`

Overview

Usage Example

Advanced Usage with Action Handling

Usage with Notification Badge

Usage with Quick Actions

Usage with Bulk Actions

Parameters & Returns

Parameters

Returns

`PendingConnectionListResponse`

`PendingConnection`

`PaginationInfo`

Error Handling

Use Cases

Best Practices

​useFetchReceivedPendingConnections

​Overview

​Usage Example

​Advanced Usage with Action Handling

​Usage with Notification Badge

​Usage with Quick Actions

​Usage with Bulk Actions

​Parameters & Returns

​Parameters

​Returns

​PendingConnectionListResponse

​PendingConnection

​PaginationInfo

​Error Handling

​Use Cases

​Best Practices

​Related Hooks

`useFetchReceivedPendingConnections`

Overview

Usage Example

Advanced Usage with Action Handling

Usage with Notification Badge

Usage with Quick Actions

Usage with Bulk Actions

Parameters & Returns

Parameters

Returns

`PendingConnectionListResponse`

`PendingConnection`

`PaginationInfo`

Error Handling

Use Cases

Best Practices

Related Hooks