Skip to content

CONNECTIONS_IMPLEMENTATION.md

Latest commit

 

History

History
110 lines (94 loc) · 3.81 KB

CONNECTIONS_IMPLEMENTATION.md

File metadata and controls

110 lines (94 loc) · 3.81 KB

MyConnections Page Implementation Summary

Overview

Implemented a complete "My Connections" page that displays three types of connection data:

  1. Incoming Connection Requests
  2. Total Connections
  3. Outgoing Connection Requests

Files Created

1. connectionsSlice.js

Redux slice managing connections state with:

  • incomingRequests: Array of pending requests from other users
  • outgoingRequests: Array of requests sent to other users
  • allConnections: Array of established connections
  • currentView: Tracks which view is currently displayed (incoming/outgoing/connections/null)
  • Actions for setting data and removing items after accept/reject

2. MyConnections.jsx

Main dashboard page that:

  • Fetches all three data types on mount using Promise.all()
  • Displays ConnectionsStats cards showing counts
  • Switches to ConnectionsList view when a card is clicked
  • Handles loading and error states

3. ConnectionsStats.jsx

Displays three interactive cards showing:

  • Incoming Requests count (↓ icon, blue gradient)
  • Total Connections count (🔗 icon, green gradient)
  • Outgoing Requests count (↑ icon, purple gradient)
  • Each card is clickable to view the actual users

4. ConnectionsList.jsx

Displays list of users for selected category with:

  • User cards with image, name, education, skills
  • Quick actions (View Profile, Accept, Reject for incoming)
  • Two-level navigation:
    • First level: Card list with quick review
    • Second level: Full profile view with detailed information
  • Auto-fetches user details for outgoing requests if needed

5. RequestCard.jsx

Card component for pending requests showing:

  • User profile photo
  • Name and education
  • Location and skills
  • View Profile button (blue)
  • Quick Accept button (green ✓)
  • Quick Reject button (red ✕)

6. ConnectionCard.jsx

Card component for established connections showing:

  • User profile photo
  • Name and education
  • Location
  • About section preview
  • Skills
  • View Profile button

Features

Smart Data Handling

  • Caches fetched user details to avoid redundant API calls
  • Handles both populated objects and ID strings for user references
  • Pre-fetches user details for outgoing requests in background

User Profile View

When clicking "View Profile":

  • Shows full profile with header background and photo
  • Displays: About, Skills, Interests, Experience sections
  • Shows contact information (Email, Phone, LinkedIn, GitHub, Twitter)
  • For incoming requests: Accept and Reject buttons (green/red)
  • For connections and outgoing: No action buttons (view only)

State Management

  • All data stored in Redux for consistency
  • Automatic removal of requests after accept/reject
  • Proper error handling and loading states

API Integration

Uses existing endpoints:

  • getIncomingRequests() - Fetches pending requests
  • getOutgoingRequests() - Fetches sent requests
  • getAllConnections() - Fetches established connections
  • reviewRequest(id, status) - Accept or reject requests
  • viewProfile(id) - Fetch full user details

UI/UX Features

  • Responsive grid layout (1 col mobile, 2 cols tablet, 3 cols desktop)
  • Smooth transitions and hover effects
  • Loading spinners during data fetch
  • Error handling with retry option
  • Empty state messages
  • Back navigation between views

Folder Structure

src/features/connections/
├── connectionsSlice.js      (Redux state management)
├── MyConnections.jsx         (Main page component)
├── ConnectionsStats.jsx      (Stats cards)
├── ConnectionsList.jsx       (List and profile views)
├── RequestCard.jsx           (Request user card)
└── ConnectionCard.jsx        (Connection user card)

Integration Points

  • Route: /connections (in App.jsx)
  • Store: Added connectionsReducer to Redux store (store.js)
  • Layout: Uses MainLayout with Header and Sidebar