Fix mod reports

backend/api/src/get-mod-reports.ts

@@ -1,11 +1,25 @@
 import { ModReport } from 'common/mod-report'
 import { type APIHandler } from './helpers/endpoint'
 import { createSupabaseDirectClient } from 'shared/supabase/init'
+import { log } from 'node:console'
 
-export const getModReports: APIHandler<'get-mod-reports'> = async () => {
+export const getModReports: APIHandler<'get-mod-reports'> = async (props) => {
  const pg = createSupabaseDirectClient()
+ const { statuses, limit, offset, count } = props
+ log('getModReports', statuses, limit, offset, count)
 
- const reports = await pg.manyOrNone<ModReport>(`
+ if (count) {
+ const total = await pg.one<{ count: number }>(
+ `
+ select count(*) as count from mod_reports mr where mr.status in ($1:list)
+ `,
+ [statuses]
+ )
+ return { status: 'success', count: total.count, reports: [] }
+ }
+
+ const reports = await pg.manyOrNone<ModReport>(
+ `
  select
  mr.*,
  cc.data->'content' as comment_content,
@@ -21,7 +35,13 @@ export const getModReports: APIHandler<'get-mod-reports'> = async () => {
  join contracts c on c.id = mr.contract_id
  join users creator on creator.id = c.creator_id
  join users owner on owner.id = mr.user_id
- `)
+ where mr.status in ($1:list)
+ order by mr.created_time desc
+ limit $2
+ offset $3
+ `,
+ [statuses, limit, offset]
+ )
 
  return { status: 'success', reports }
 }

backend/supabase/mod_reports.sql

@@ -14,3 +14,7 @@ create table if not exists
 drop index if exists mod_reports_pkey;
 
 create unique index mod_reports_pkey on public.mod_reports using btree (report_id);
+
+drop index if exists mod_status;
+
+create index mod_status on mod_reports (status);

common/src/api/schema.ts

@@ -1497,8 +1497,21 @@ export const API = (_apiTypeCheck = {
  method: 'GET',
  visibility: 'public',
  authed: true,
- props: z.object({}).strict(),
- returns: {} as { status: string; reports: ModReport[] },
+ props: z
+ .object({
+ statuses: z.array(
+ z.enum(['new', 'under review', 'resolved', 'needs admin'])
+ ),
+ limit: z.coerce.number().gte(0).lte(100).default(25),
+ offset: z.coerce.number().gte(0).default(0),
+ count: coerceBoolean.optional(),
+ })
+ .strict(),
+ returns: {} as {
+ status: string
+ count?: number
+ reports: ModReport[]
+ },
  },
  'get-txn-summary-stats': {
  method: 'GET',

web/components/reports-icon.tsx

@@ -3,19 +3,18 @@ import { FlagIcon } from '@heroicons/react/outline'
 import { Row } from 'web/components/layout/row'
 import { useEffect, useState } from 'react'
 import { api } from 'web/lib/api/api'
-import { ModReport } from 'common/mod-report'
 
 export function ReportsIcon(props: { className?: string }) {
  const { className } = props
  const [newReportsCount, setNewReportsCount] = useState(0)
 
  const fetchNewReportsCount = async () => {
- const response = await api('get-mod-reports', {})
+ const response = await api('get-mod-reports', {
+ statuses: ['new'],
+ count: true,
+ })
  if (response.status === 'success') {
- const newReports = response.reports.filter(
- (report: ModReport) => report.status === 'new'
- )
- setNewReportsCount(newReports.length)
+ setNewReportsCount(response.count ?? 0)
  } else {
  console.error('Failed to fetch reports:', response)
  }

web/hooks/use-mod-reports.ts

@@ -3,7 +3,9 @@ import { api } from 'web/lib/api/api'
 import { ModReport, ReportStatus } from 'common/mod-report'
 import { keyBy, mapValues } from 'lodash'
 
-export const useModReports = () => {
+export const useModReports = (
+ statuses: ('new' | 'under review' | 'resolved' | 'needs admin')[]
+) => {
  const [reports, setReports] = useState<ModReport[] | undefined>(undefined)
  const [reportStatuses, setReportStatuses] = useState<{
  [key: number]: ReportStatus
@@ -14,7 +16,11 @@ export const useModReports = () => {
 
  const getModReports = async () => {
  try {
- const response = await api('get-mod-reports', {})
+ const response = await api('get-mod-reports', {
+ statuses,
+ limit: statuses.includes('resolved') ? 15 : 50,
+ offset: 0,
+ })
  if (response && response.status === 'success') {
  const newReports = response.reports
 
@@ -42,13 +48,7 @@ export const useModReports = () => {
 
  useEffect(() => {
  getModReports()
-
- const intervalId = setInterval(() => {
- getModReports()
- }, 1000)
-
- return () => clearInterval(intervalId)
- }, [])
+ }, [statuses.length])
 
  return {
  reports,

web/pages/reports.tsx

@@ -1,6 +1,6 @@
 import { Col } from 'web/components/layout/col'
 import { Page } from 'web/components/layout/page'
-import { QueryUncontrolledTabs } from 'web/components/layout/tabs'
+import { ControlledTabs } from 'web/components/layout/tabs'
 import { SEO } from 'web/components/SEO'
 import { useAdminOrMod } from 'web/hooks/use-admin'
 import { ModReport, ReportStatus } from 'common/mod-report'
@@ -9,6 +9,7 @@ import { useModReports } from 'web/hooks/use-mod-reports'
 import ModReportItem from 'web/components/mod-report-item'
 import { Title } from 'web/components/widgets/title'
 import { api } from 'web/lib/api/api'
+import { useState } from 'react'
 
 const updateModReport = async (
  reportId: number,
@@ -25,14 +26,19 @@ const updateModReport = async (
 
 export default function ReportsPage() {
  const isAdminOrMod = useAdminOrMod()
+ const [activeTab, setActiveTab] = useState('unresolved')
  const {
  reports: modReports,
  initialLoading,
  reportStatuses,
  modNotes,
  setReportStatuses,
  setModNotes,
- } = useModReports()
+ } = useModReports(
+ activeTab === 'resolved'
+ ? ['resolved']
+ : ['new', 'under review', 'needs admin']
+ )
 
  const handleStatusChange = async (
  reportId: number,
@@ -133,11 +139,13 @@ export default function ReportsPage() {
  />
  <Col className="p-4">
  <Title>Reports</Title>
- <QueryUncontrolledTabs
+ <ControlledTabs
  tabs={tabs}
- defaultIndex={0}
- scrollToTop={true}
+ activeIndex={activeTab === 'resolved' ? 1 : 0}
  trackingName="mod-reports-tabs"
+ onClick={(title, index) =>
+ setActiveTab(index === 0 ? 'unresolved' : 'resolved')
+ }
  />
  </Col>
  </Page>