Description
Currently, when a user clicks the "Report" flag button on the stories feed page, it attempts to write a basic record directly to Firestore which fails with a "failed to report story" toast notification.
Additionally, the current reporting flow is too simple (one-click with no explanation) and the Admin Dashboard doesn't load or display report details. We should implement a complete, robust reporting flow:
- Let users specify the reason and additional details of their report.
- Create an admin moderation section in the dashboard to review and manage reported stories.
Proposed Solution
1. Add Route for Report Details Page
Register a new /report/:id route in App.tsx that renders a new page ReportInfo.tsx.
2. Redirect Report Button to the Form Page
In Stories.tsx, instead of submitting a background call on the flag icon click, navigate the user to /report/${story.id}.
3. Create src/pages/ReportInfo.tsx [NEW]
A page containing a user-friendly report form:
- Show a preview of the story title.
- A selection field with standardized categories (Harassment, Hate Speech, Inappropriate Media, Spam, Doxxing).
- An optional "Additional Details" text area.
- Saves the report to a new
reports collection in Firestore with fields:
{
story_id: string,
story_title: string,
reason: string,
details: string,
reported_at: Timestamp,
user_id: string,
status: 'pending'
}
- Display a success toast and navigate back.
4. Add Report Moderation Panel to Admin Dashboard
Modify AdminDashboard.tsx:
- Fetch pending reports from the
reports collection.
- Under a new "Reported Stories" section, render the details of each report (reason, explanation, story title).
- Provide two actions for admins:
- Delete Story: Deletes the story document and all corresponding reports/reactions.
- Dismiss Report: Deletes the report document, marking the story as safe/reviewed.
Impact
- Resolves the failing write bug.
- Elevates platform security and content moderation to professional, abuse-resistant standards.
- Low-complexity implementation using the existing React/Firestore architecture.
Description
Currently, when a user clicks the "Report" flag button on the stories feed page, it attempts to write a basic record directly to Firestore which fails with a "failed to report story" toast notification.
Additionally, the current reporting flow is too simple (one-click with no explanation) and the Admin Dashboard doesn't load or display report details. We should implement a complete, robust reporting flow:
Proposed Solution
1. Add Route for Report Details Page
Register a new
/report/:idroute in App.tsx that renders a new pageReportInfo.tsx.2. Redirect Report Button to the Form Page
In Stories.tsx, instead of submitting a background call on the flag icon click, navigate the user to
/report/${story.id}.3. Create
src/pages/ReportInfo.tsx[NEW]A page containing a user-friendly report form:
reportscollection in Firestore with fields:4. Add Report Moderation Panel to Admin Dashboard
Modify AdminDashboard.tsx:
reportscollection.Impact