feat(social): implement social profiles, following system, and activi…

[JoesWalker]

closes #295

Description

Brief description of changes

Related Issue

Closes #

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation update

Checklist

• Code follows project style guidelines

• Self-review completed

• No console errors

• Uses Lucide icons consistently

• Responsive design implemented

• Starknet best practices followed

  Implements the Advanced Social Features milestone, adding a complete social layer to the TeachLink frontend.

  Changes

  Utilities (src/utils/socialUtils.ts)

  • formatFollowerCount — formats large numbers (1200 → "1.2K", 1.5M → "1.5M")
  • getRelativeTime — human-readable timestamps ("2 hours ago")
  • groupActivitiesByDate — groups activity arrays by "Today" / "Yesterday" / date label

  Hooks (src/hooks/useSocialFeatures.tsx)

  • useFollowUser(userId) — follow/unfollow toggle with optimistic state, connected to apiClient
  • useActivityFeed(userId) — cursor-based paginated feed with loadMore / hasMore
  • useSocialInteractions(contentId) — like toggle, comment list, add comment; all via apiClient

  Components (src/components/social/)

  • SocialProfile — avatar, name, bio, follower/following counts, follow button, Posts/Activity/Analytics tab nav
  • FollowingSystem — searchable followers and following lists with per-user follow/unfollow actions
  • ActivityFeed — infinite scroll via IntersectionObserver, date-grouped items, loading skeletons
  • SocialInteractions — like button with count, comment thread, share button (copies link to clipboard)

  Tests (src/components/social/tests/socialFeatures.test.tsx)

  • 33 tests covering all hooks and components with mocked apiClient responses

  Testing

  Test Files 1 passed (1)
  Tests 33 passed (33)

  Notes

  • No new state management libraries introduced — uses React useState/useCallback/useEffect throughout
  • All icons use lucide-react per project convention
  • Fully responsive with Tailwind CSS dark mode support

Implements the Advanced Social Features milestone, adding a complete social interaction layer to the TeachLink frontend. This covers user profiles with
follow/unfollow, a paginated activity feed with infinite scroll, and per-content social interactions (likes, comments, share).

Changes

src/utils/socialUtils.ts

Pure utility functions with no side effects:

• formatFollowerCount(n) — formats large numbers (999 → "999", 1200 → "1.2K", 1_500_000 → "1.5M")
• getRelativeTime(date) — returns human-readable relative timestamps ("just now", "2 hours ago", "3 days ago")
• groupActivitiesByDate(activities) — groups an Activity[] into a Record<string, Activity[]> keyed by "Today", "Yesterday", or a formatted date string
• Activity type exported for shared use across hooks and components

src/hooks/useSocialFeatures.tsx

Three hooks, all connected to the existing apiClient (src/lib/api.ts):

• useFollowUser(userId) — fetches initial follow state on mount, exposes follow() / unfollow() actions with loading guard. Returns { isFollowing,
  follow, unfollow, loading }.
• useActivityFeed(userId) — cursor-based paginated feed. Fetches first page on mount, appends on loadMore(). Returns { activities, loadMore, loading,
  hasMore }.
• useSocialInteractions(contentId) — loads likes count, liked state, and comments on mount. Exposes toggleLike() (optimistic count update) and
  addComment(body). Returns { likes, liked, comments, toggleLike, addComment, loading }.

src/components/social/SocialProfile.tsx

• Displays avatar (falls back to UserCircle icon), name, bio, formatted follower/following counts

• Follow/Unfollow button (hidden on own profile via isOwnProfile prop) using useFollowUser

• Tab navigation: Posts | Activity | Analytics with active indicator

src/components/social/FollowingSystem.tsx

• Tabs to switch between Followers and Following lists, fetched from /api/social/{tab}/{userId}
• Live search input filters the list client-side by name
• Each row renders avatar, name, bio snippet, and a follow/unfollow button via useFollowUser

src/components/social/ActivityFeed.tsx

• Infinite scroll implemented with IntersectionObserver on a sentinel div at the bottom of the list
• Activities grouped by date using groupActivitiesByDate, each item shows actor, action, target, and relative timestamp
• Animated pulse skeleton shown during initial load; inline skeleton shown during subsequent page loads

src/components/social/SocialInteractions.tsx

• Like button — filled heart icon when liked, count formatted with formatFollowerCount, optimistic toggle
• Comment thread — toggled by comment icon; inline form to add a comment, scrollable list of existing comments with author, body, and relative timestamp
• Share button — copies contentUrl (or window.location.href) to clipboard, shows "Copied!" feedback for 2 seconds

src/components/social/tests/socialFeatures.test.tsx

33 tests across 8 suites with apiClient fully mocked via vi.mock:

┌───────────────────────┬───────┐
│ Suite │ Tests │
├───────────────────────┼───────┤
│ formatFollowerCount │ 4 │
├───────────────────────┼───────┤
│ getRelativeTime │ 4 │
├───────────────────────┼───────┤
│ groupActivitiesByDate │ 2 │
├───────────────────────┼───────┤
│ useFollowUser │ 3 │
├───────────────────────┼───────┤
│ useActivityFeed │ 3 │
├───────────────────────┼───────┤
│ useSocialInteractions │ 4 │
├───────────────────────┼───────┤
│ SocialProfile │ 6 │
├───────────────────────┼───────┤
│ ActivityFeed │ 3 │
├───────────────────────┼───────┤
│ SocialInteractions │ 4 │
└───────────────────────┴───────┘

Testing

Test Files 1 passed (1)
Tests 33 passed (33)
Duration 6.17s

Full suite: 562/563 passing (1 pre-existing failure in Toast.test.tsx using jest.fn() instead of vi.fn() — unrelated to this PR).

Checklist

• No new state management libraries — uses React useState / useCallback / useEffect only
• Icons use lucide-react throughout
• Tailwind CSS with responsive design and dark mode support
• All hooks connected to existing apiClient pattern
• Tests cover hooks with mocked API responses and components with user interaction

[drips-wave]

@JoesWalker Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits