Appeal/Report/Ban Table Bug fixes

frontend/src/api/bans.ts

@@ -6,7 +6,6 @@ import {
     BanCIDRQueryFilter,
     BanGroupQueryFilter,
     BanSteamQueryFilter,
-    QueryFilter,
     TimeStamped,
     transformTimeStampedDates,
     transformTimeStampedDatesList
@@ -267,21 +266,13 @@ export const apiGetBanSteam = async (ban_id: number, deleted = false, abortContr
     return resp ? transformTimeStampedDates(resp) : undefined;
 };
 
-export interface AppealQueryFilter extends QueryFilter<SteamBanRecord> {
-    source_id?: string;
-    target_id?: string;
-    appeal_state: AppealState;
+export interface AppealQueryFilter {
+    deleted?: boolean;
 }
 
 export const apiGetAppeals = async (opts: AppealQueryFilter, abortController?: AbortController) => {
-    const appeals = await apiCall<LazyResult<SteamBanRecord>, AppealQueryFilter>(
-        `/api/appeals`,
-        'POST',
-        opts,
-        abortController
-    );
-    appeals.data = appeals.data.map(applyDateTime);
-    return appeals;
+    const appeals = await apiCall<SteamBanRecord[], AppealQueryFilter>(`/api/appeals`, 'POST', opts, abortController);
+    return appeals.map(applyDateTime);
 };
 
 export const apiCreateBanSteam = async (p: BanPayloadSteam) =>

frontend/src/api/common.ts

@@ -7,7 +7,6 @@ import { emptyOrNullString } from '../util/types';
 import { isTokenExpired, refreshToken } from './auth';
 import { AppealState, ASNBanRecord, CIDRBanRecord, GroupBanRecord, SteamBanRecord } from './bans';
 import { MatchResult } from './match';
-import { ReportStatus, ReportWithAuthor } from './report';
 
 export enum PermissionLevel {
     Banned = 0,
@@ -238,8 +237,7 @@ export interface BanASNQueryFilter extends BanQueryCommon<ASNBanRecord> {
     as_num?: number;
 }
 
-export interface ReportQueryFilter extends QueryFilter<ReportWithAuthor> {
-    report_status?: ReportStatus;
+export interface ReportQueryFilter {
+    deleted?: boolean;
     source_id?: string;
-    target_id?: string;
 }

frontend/src/api/report.ts

@@ -1,5 +1,4 @@
 import { Theme } from '@mui/material';
-import { LazyResult } from '../util/table.ts';
 import { BanReason } from './bans';
 import {
     apiCall,
@@ -114,14 +113,8 @@ export const apiGetReport = async (report_id: number, abortController?: AbortCon
     await apiCall<ReportWithAuthor>(`/api/report/${report_id}`, 'GET', abortController);
 
 export const apiGetReports = async (opts?: ReportQueryFilter, abortController?: AbortController) => {
-    const resp = await apiCall<LazyResult<ReportWithAuthor>, ReportQueryFilter>(
-        `/api/reports`,
-        'POST',
-        opts,
-        abortController
-    );
-    resp.data = resp.data.map(transformTimeStampedDates);
-    return resp;
+    const resp = await apiCall<ReportWithAuthor[], ReportQueryFilter>(`/api/reports`, 'POST', opts, abortController);
+    return resp.map(transformTimeStampedDates);
 };
 
 export const apiGetReportMessages = async (report_id: number, abortController?: AbortController) =>

frontend/src/component/modal/BanSteamModal.tsx

@@ -52,7 +52,7 @@ export const BanSteamModal = NiceModal.create(({ existing }: { existing?: SteamB
         mutationKey: ['banSteam'],
         mutationFn: async (values: BanSteamFormValues) => {
             if (existing?.ban_id) {
-                const ban_record = apiUpdateBanSteam(existing.ban_id, {
+                return await apiUpdateBanSteam(existing.ban_id, {
                     note: values.note,
                     ban_type: values.ban_type,
                     reason: values.reason,
@@ -61,10 +61,8 @@ export const BanSteamModal = NiceModal.create(({ existing }: { existing?: SteamB
                     evade_ok: values.evade_ok,
                     valid_until: values.duration_custom ? parseISO(values.duration_custom) : undefined
                 });
-                sendFlash('success', 'Updated ban successfully');
-                modal.resolve(ban_record);
             } else {
-                const ban_record = await apiCreateBanSteam({
+                return await apiCreateBanSteam({
                     note: values.note,
                     ban_type: values.ban_type,
                     duration: values.duration,
@@ -76,10 +74,19 @@ export const BanSteamModal = NiceModal.create(({ existing }: { existing?: SteamB
                     include_friends: values.include_friends,
                     evade_ok: values.evade_ok
                 });
+            }
+        },
+        onSuccess: async (banRecord) => {
+            if (existing?.ban_id) {
+                sendFlash('success', 'Updated ban successfully');
+            } else {
                 sendFlash('success', 'Created ban successfully');
-                modal.resolve(ban_record);
             }
+            modal.resolve(banRecord);
             await modal.hide();
+        },
+        onError: (error) => {
+            sendFlash('error', `Failed to create ban: ${error}`);
         }
     });
 

frontend/src/routes/_auth.report.index.tsx

@@ -24,7 +24,7 @@ import Grid from '@mui/material/Unstable_Grid2';
 import { useForm } from '@tanstack/react-form';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { createFileRoute, useNavigate, useRouteContext } from '@tanstack/react-router';
-import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+import { createColumnHelper, getCoreRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
 import { zodValidator } from '@tanstack/zod-form-adapter';
 import { z } from 'zod';
 import {
@@ -42,7 +42,7 @@ import {
 import { ContainerWithHeader } from '../component/ContainerWithHeader.tsx';
 import { DataTable } from '../component/DataTable.tsx';
 import { LoadingPlaceholder } from '../component/LoadingPlaceholder.tsx';
-import { Paginator } from '../component/Paginator.tsx';
+import { PaginatorLocal } from '../component/PaginatorLocal.tsx';
 import { PersonCell } from '../component/PersonCell.tsx';
 import { PlayerMessageContext } from '../component/PlayerMessageContext.tsx';
 import { ReportStatusIcon } from '../component/ReportStatusIcon.tsx';
@@ -51,7 +51,8 @@ import { TableHeadingCell } from '../component/TableHeadingCell.tsx';
 import { Buttons } from '../component/field/Buttons.tsx';
 import { MarkdownField } from '../component/field/MarkdownField.tsx';
 import { SteamIDField } from '../component/field/SteamIDField.tsx';
-import { commonTableSearchSchema, LazyResult, RowsPerPage } from '../util/table.ts';
+import { initPagination } from '../types/table.ts';
+import { commonTableSearchSchema, RowsPerPage } from '../util/table.ts';
 import { makeSteamidValidators } from '../util/validator/makeSteamidValidators.ts';
 
 const reportSchema = z.object({
@@ -70,25 +71,18 @@ export const Route = createFileRoute('/_auth/report/')({
 });
 
 function ReportCreate() {
-    const defaultRows = RowsPerPage.Ten;
     const { profile, userSteamID } = useRouteContext({ from: '/_auth/report/' });
-    const { page, sortColumn, report_status, rows, sortOrder } = Route.useSearch();
 
     const canReport = useMemo(() => {
         const user = profile();
         return user.steam_id && user.ban_id == 0;
     }, [profile]);
 
     const { data: logs, isLoading } = useQuery({
-        queryKey: ['history', { page, userSteamID }],
+        queryKey: ['history', { userSteamID }],
         queryFn: async () => {
             return await apiGetReports({
-                source_id: userSteamID,
-                limit: rows ?? defaultRows,
-                offset: (page ?? 0) * (rows ?? defaultRows),
-                order_by: sortColumn ?? 'created_on',
-                desc: (sortOrder ?? 'desc') == 'desc',
-                report_status: report_status ?? ReportStatus.Any
+                source_id: userSteamID
             });
         }
     });
@@ -119,9 +113,8 @@ function ReportCreate() {
                         {isLoading ? (
                             <LoadingPlaceholder />
                         ) : (
-                            <UserReportHistory history={logs ?? { data: [], count: 0 }} isLoading={isLoading} />
+                            <UserReportHistory history={logs ?? []} isLoading={isLoading} />
                         )}
-                        <Paginator page={page ?? 0} rows={rows ?? defaultRows} data={logs} path={'/report'} />
                     </ContainerWithHeader>
                 </Stack>
             </Grid>
@@ -169,7 +162,9 @@ function ReportCreate() {
 
 const columnHelper = createColumnHelper<ReportWithAuthor>();
 
-const UserReportHistory = ({ history, isLoading }: { history: LazyResult<ReportWithAuthor>; isLoading: boolean }) => {
+const UserReportHistory = ({ history, isLoading }: { history: ReportWithAuthor[]; isLoading: boolean }) => {
+    const [pagination, setPagination] = useState(initPagination(0, RowsPerPage.Ten));
+
     const columns = [
         columnHelper.accessor('report_status', {
             header: () => <TableHeadingCell name={'Status'} />,
@@ -187,9 +182,9 @@ const UserReportHistory = ({ history, isLoading }: { history: LazyResult<ReportW
             header: () => <TableHeadingCell name={'Player'} />,
             cell: (info) => (
                 <PersonCell
-                    steam_id={history.data[info.row.index].subject.steam_id}
-                    personaname={history.data[info.row.index].subject.personaname}
-                    avatar_hash={history.data[info.row.index].subject.avatarhash}
+                    steam_id={info.row.original.subject.steam_id}
+                    personaname={info.row.original.subject.personaname}
+                    avatar_hash={info.row.original.subject.avatarhash}
                 />
             ),
             footer: () => <TableHeadingCell name={'Created'} />
@@ -215,14 +210,38 @@ const UserReportHistory = ({ history, isLoading }: { history: LazyResult<ReportW
     ];
 
     const table = useReactTable({
-        data: history.data,
+        data: history,
         columns: columns,
         getCoreRowModel: getCoreRowModel(),
-        manualPagination: true,
-        autoResetPageIndex: true
+        manualPagination: false,
+        autoResetPageIndex: true,
+        getPaginationRowModel: getPaginationRowModel(),
+        onPaginationChange: setPagination,
+        state: {
+            pagination
+        }
     });
 
-    return <DataTable table={table} isLoading={isLoading} />;
+    return (
+        <>
+            <DataTable table={table} isLoading={isLoading} />
+            <PaginatorLocal
+                onRowsChange={(rows) => {
+                    setPagination((prev) => {
+                        return { ...prev, pageSize: rows };
+                    });
+                }}
+                onPageChange={(page) => {
+                    setPagination((prev) => {
+                        return { ...prev, pageIndex: page };
+                    });
+                }}
+                count={history?.length ?? 0}
+                rows={pagination.pageSize}
+                page={pagination.pageIndex}
+            />
+        </>
+    );
 };
 
 const validationSchema = z.object({

frontend/src/routes/_guest.stv.tsx

@@ -115,7 +115,7 @@ function STV() {
                               : steam_id
                 })
             );
-            await navigate({ to: '/stv', search: (prev: any) => ({ ...prev, ...value }) });
+            await navigate({ to: '/stv', search: (prev) => ({ ...prev, ...value }) });
         },
         validatorAdapter: zodValidator,
         validators: {