Fix Story Reporting & Implemented Detailed Report Page with Admin Panel #153

[dhruvpatel16120]

🛠️ Pull Request

🏷️ PR Type

Select the type of PR (check one):

• ✨ Feature
• 🛠️ Improvement / Refactor
• 🔗 Related Issue

Closes #153

---

📝 Rationale / Motivation

This PR resolves the Firestore permission/write bug when users report a story from the stories feed page. Previously, the button attempted to write directly to Firestore, which failed due to database write constraints.

To address this and elevate content moderation standards, this PR implements a complete, robust reporting flow:

1. User-Friendly Report Form: Users are redirected to a dedicated report details page where they can specify a standardized category (Harassment, Hate Speech, Inappropriate Media, Spam, Doxxing) and provide optional context.
2. Admin Moderation Panel: Admins can now view detailed, pending reports inside the Admin Dashboard, enabling them to dismiss false reports or delete offending stories along with their associated reactions and reports.

---

✨ Description of Changes

🌍 Route Configuration

• Registered the new /report/:id route in App.tsx rendering the new page ReportInfo.tsx.

🔄 Redirect Handler

• Updated the flag click behavior in Stories.tsx to redirect authenticated users to the report form page (/report/${storyId}) instead of attempting a direct Firestore background write.

📁 Detailed Report Page (New)

• Created src/pages/ReportInfo.tsx to display:
  • A preview of the story's title and contents.
  • A dropdown of standardized categories (Harassment, Hate Speech, Inappropriate Media, Spam, Doxxing).
  • An optional "Additional Details" text area.
  • Integration to write the report into the reports collection in Firestore with fields:

    {
      story_id: string,
      story_title: string,
      reason: string,
      details: string,
      reported_at: Timestamp,
      user_id: string,
      status: 'pending'
    }

🧠 Admin Dashboard Updates

• Modified AdminDashboard.tsx to:
  • Fetch pending reports from the reports Firestore collection.
  • Calculate report counts per story in-memory (fixing the previously unpopulated reportCount order logic).
  • Add a Reported Stories section displaying the specific details of each report (category reason, additional details, and the associated story title).
  • Implement two administrative actions:
    • Delete Story: Performs a batch deletion of the story document, its reactions, and its reports.
    • Dismiss Report: Deletes the specific report document, allowing the story to remain.

---

🧪 Testing Instructions

Run the project locally:

npm install
npm run dev

1. File Reporting Flow

1. Sign in to the application.
2. Go to the Stories feed page.
3. Click the Report (Flag) button on a story.
4. Verify you are redirected to /report/:storyId.
5. Select a category (e.g. Hate Speech), enter additional details, and click Submit Report.
6. Verify a success toast notification appears and you are navigated back to the feed.

2. Admin Moderation Flow

1. Sign in with an authorized admin account (e.g., safevoiceforwomen@gmail.com).
2. Navigate to the Admin Dashboard (/admin).
3. Under the new Reported Stories section, verify:
   • The list shows the report reason and details.
   • Clicking Dismiss Report deletes the report document.
   • Clicking Delete Story deletes the story along with all reactions and reports.

---

⚡ Checklist

• App routing for /report/:id configured properly
• Redirects from card and popup report flags implemented
• Detailed ReportInfo.tsx page built with dark-mode compatibility
• Reports saved to Firestore with correct fields and status pending
• Admin Dashboard fetches and displays pending reports list
• Admin actions Delete Story and Dismiss Report work correctly
• Tested all flows and verified no TypeScript or console errors are introduced

[netlify]

👷 Deploy request for safevoiceforwomen pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	125cbae