useReport

Location: src/hooks/useReport.js

Overview

Provides functionality for submitting reports about content or user behavior. Integrates with the useRateLimit hook to enforce rate limits on report submissions. Includes a predefined list of report reason categories and calls the submit_report Supabase RPC function.

Exports

REPORT_REASONS

A constant array of report reason options:

Value	Label
spam	Spam or misleading content
harassment	Harassment or bullying
hate_speech	Hate speech or discrimination
inappropriate_content	Inappropriate or explicit content
impersonation	Impersonation or fake account
self_harm	Self-harm or suicide content
violence	Violence or threats
privacy_violation	Privacy violation
copyright	Copyright infringement
other	Other

useReport

function useReport(): {
  submitReport: (options: {
    reportedType: string,
    reportedId: string,
    reportedUserId: string,
    reason: string,
    details?: string
  }) => Promise<{ success: boolean, reportId?: string, error?: string, rateLimited?: boolean }>,
  isSubmitting: boolean,
  error: string | null,
  rateLimitError: string | null,
  clearError: () => void,
  REPORT_REASONS: Array<{ value: string, label: string }>
}

Parameters

This hook takes no parameters.

Return Value

Property	Type	Description
submitReport	(options) => Promise<Result>	Submit a report. Checks rate limits, calls submit_report RPC, and records the action.
isSubmitting	boolean	Whether a report is being submitted
error	string | null	Error message if submission failed
rateLimitError	string | null	Rate limit error message if submissions are throttled
clearError	() => void	Clear both error and rate limit error state
REPORT_REASONS	Array	The predefined list of report reasons

Usage

import { useReport, REPORT_REASONS } from '../hooks/useReport';

function ReportDialog({ postId, postUserId, onClose }) {
  const { submitReport, isSubmitting, error, clearError } = useReport();
  const [reason, setReason] = useState('');
  const [details, setDetails] = useState('');

  const handleSubmit = async () => {
    const result = await submitReport({
      reportedType: 'post',
      reportedId: postId,
      reportedUserId: postUserId,
      reason,
      details
    });

    if (result.success) {
      onClose();
    }
  };

  return (
    <div>
      <select value={reason} onChange={(e) => setReason(e.target.value)}>
        {REPORT_REASONS.map(r => (
          <option key={r.value} value={r.value}>{r.label}</option>
        ))}
      </select>
      <textarea value={details} onChange={(e) => setDetails(e.target.value)} />
      {error && <p className="error">{error}</p>}
      <button onClick={handleSubmit} disabled={isSubmitting}>Submit Report</button>
    </div>
  );
}

Notes

• Rate limits are checked before submission and also handled if the server returns a rate limit error.
• Duplicate reports (same user reporting the same content) are detected via a unique constraint (error code 23505).
• Users cannot report their own content.
• The details field is trimmed before submission; empty strings are sent as null.

---

Last updated: 2026-02-07