All Collaborators Component

Overview

The AllCollaborators component displays a list of collaborators based on search filters and pagination. It integrates semantic search and filtering capabilities to retrieve and display collaborators in a card-based layout.

---

Key Features

1. Collaborator List:
   • Displays a list of collaborators, including their organization name, contact person, email, industry, and country.
2. Semantic Search:
   • Retrieves results using semantic search when a search query is provided.
3. Filtering:
   • Filters collaborators by industry, country, and search queries.
4. Pagination:
   • Allows navigation through multiple pages of collaborators.
5. Invite Collaborators:
   • Includes functionality to invite collaborators using the InviteCollaborator component.
6. Loading and Empty State:
   • Displays a spinner during data loading and a message when no collaborators match the filters.

---

Props

Prop Name	Type	Description
industry	string	The industry filter applied to the collaborators list.
country	string	The country filter applied to the collaborators list.
pageNumber	number	The current page number for pagination.
setPageNumber	Dispatch<SetStateAction<number>>	Function to update the current page number.
semanticSearch	string	Search query for semantic search.
toggleFilters	() => void	Function to adjust or reset the applied filters.
totalCollaborators	number	Total number of collaborators retrieved.
setTotalCollaborators	Dispatch<SetStateAction<number>>	Function to update the total number of collaborators retrieved.

---

State Management

State Variable	Type	Description
collaborators	SupplierProfileInfo[]	List of collaborators fetched from the API.
isLoading	boolean	Indicates whether data is currently being loaded.

---

Data Fetching

1. Filters:

   • The component constructs a query string based on the filters provided (industry, country, pageNumber, semanticSearch).

2. API Endpoints:

   • Default search: /rifbid-collaborate/collaborators
   • Semantic search: /rifbid-collaborate/collaborators/semantic_search

3. Token Authentication:

   • Uses the token retrieved from the useAuth hook to authenticate API requests.

4. Error Handling:

   • Logs errors in the console for debugging purposes.

---

Component Structure

Collaborator Cards

• Details Displayed:
  • Organization Name
  • Contact Person
  • Industry
  • Country
• Footer:
  • Includes the InviteCollaborator component for inviting collaborators.

Pagination

• Uses the Pagination component to navigate through multiple pages of collaborators.

---

Behavior

Loading State

• Displays a spinner while fetching data from the API.

Empty State

• Shows a message with an option to adjust filters when no collaborators match the current filters.

Success State

• Displays collaborators in a grid layout with their respective details and invite functionality.

---

InviteCollaborators Component

Key Features

1. Dialog Interface:
   • Utilizes a dialog-based interface for a smooth user experience.
2. Message Customization:
   • Allows users to write a personalized message before sending the invitation.
3. Email Integration:
   • Sends an email invitation to the selected collaborator via the RifBid API.
4. Loading State:
   • Displays a spinner while the request is being processed.
5. Error Handling:
   • Provides feedback using toast notifications for both success and error scenarios.

---

Props

Prop Name	Type	Description
collaborator	SupplierProfileInfo	Information about the collaborator being invited.

---

State Management

State Variable	Type	Description
assistanceRequested	boolean	Indicates whether the user has opted to send an invitation.
message	string	The custom message written by the user.
isLoading	boolean	Tracks the loading state during the request submission.

---

Invite Flow

1. Initial Dialog:
   • Prompts the user to confirm if they want to invite the collaborator.
2. Message Input:
   • If confirmed, presents a text area for the user to write a custom message.
3. Submit Invitation:
   • Sends the message along with collaborator and supplier details to the API.