feat(reviews): add review sorting and filtering controls with dynamic empty states (#233)

[OluwapelumiElisha]

Description

Resolves #233.

This PR adds comprehensive sorting and filtering controls for community reviews across both the Global Reviews Page (/reviews) and Project Detail Page (/projects/[id]). It also enhances ReviewList with dynamic empty state banners that reflect active filter criteria.

---

Changes Made

1. Components

• ReviewList (dongle/components/reviews/ReviewList.tsx):
  • Added optional emptyMessage?: string and emptyTitle?: string props to ReviewListProps.
  • Display customized title and message when zero reviews match the active filter criteria.

2. Global Reviews Page (/reviews)

• app/reviews/page.tsx:
  • Added Sort Controls: Newest First (recent), Oldest First (oldest), Highest Rating (highest), Lowest Rating (lowest), and Most Helpful (helpfulness).
  • Added Filter Controls: Filter by Project, Filter by Rating (1–5 Stars), and Filter by Ownership ("My Reviews").
  • Dynamically compute contextual empty state messages (e.g. No reviews found matching project "Project Alpha" and 5-star rating. Try adjusting your filters.).

3. Project Detail Page (/projects/[id])

• app/projects/[id]/page.tsx:
  • Extended sorting to include Oldest First alongside Newest First, Highest Rating, and Lowest Rating.
  • Added Rating Filter dropdown (1–5 Stars) and My Reviews ownership filter.
  • Passed contextual empty state messages to ReviewList.

4. Tests

• dongle/__tests__/components/ReviewSortingFiltering.test.tsx:
  • Added tests verifying ReviewList custom empty state rendering.
  • Added tests for project, rating, user ownership filtering, date/rating sorting, and dynamic empty state message generation.

---

Acceptance Criteria Checklist

• Project detail reviews can be sorted by date and rating.
• Global reviews page can filter by project, rating, user ownership, and sort by date/rating/helpfulness.
• Empty states dynamically reflect the active filter selection.

---

Verification & Testing

• TypeScript Compilation: npx tsc --noEmit passed with 0 errors.
• Production Build: npm run build completed successfully, generating static and dynamic routes.
• Unit Tests: Verified with Vitest test suite.

[drips-wave]

@OluwapelumiElisha 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