pl-fe: migrate reports management

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-07-10 18:52:49 +02:00
parent 06c65af212
commit 277f2013f1
12 changed files with 141 additions and 113 deletions

View File

@ -5,7 +5,7 @@ import { getClient } from '../api';
import { deleteFromTimelines } from './timelines';
import type { AdminGetReportsParams, AdminReport, PleromaConfig, Status } from 'pl-api';
import type { PleromaConfig } from 'pl-api';
import type { AppDispatch, RootState } from 'pl-fe/store';
const ADMIN_CONFIG_FETCH_SUCCESS = 'ADMIN_CONFIG_FETCH_SUCCESS' as const;
@ -13,10 +13,6 @@ const ADMIN_CONFIG_FETCH_SUCCESS = 'ADMIN_CONFIG_FETCH_SUCCESS' as const;
const ADMIN_CONFIG_UPDATE_REQUEST = 'ADMIN_CONFIG_UPDATE_REQUEST' as const;
const ADMIN_CONFIG_UPDATE_SUCCESS = 'ADMIN_CONFIG_UPDATE_SUCCESS' as const;
const ADMIN_REPORTS_FETCH_SUCCESS = 'ADMIN_REPORTS_FETCH_SUCCESS' as const;
const ADMIN_REPORT_PATCH_SUCCESS = 'ADMIN_REPORT_PATCH_SUCCESS' as const;
const ADMIN_USER_DELETE_SUCCESS = 'ADMIN_USER_DELETE_SUCCESS' as const;
const fetchConfig = () =>
@ -48,23 +44,6 @@ const updatePlFeConfig = (data: Record<string, any>) =>
return dispatch(updateConfig(params));
};
const fetchReports = (params?: AdminGetReportsParams) =>
(dispatch: AppDispatch, getState: () => RootState) =>
getClient(getState).admin.reports.getReports(params)
.then(({ items }) => {
items.forEach((report) => {
dispatch(importEntities({ statuses: report.statuses as Array<Status>, accounts: [report.account?.account, report.target_account?.account] }));
dispatch<AdminActions>({ type: ADMIN_REPORTS_FETCH_SUCCESS, reports: items, params });
});
});
const closeReport = (reportId: string) =>
(dispatch: AppDispatch, getState: () => RootState) =>
getClient(getState).admin.reports.resolveReport(reportId).then((report) => {
dispatch<AdminActions>({ type: ADMIN_REPORT_PATCH_SUCCESS, report, reportId });
return report;
});
const deactivateUser = (accountId: string, report_id?: string) =>
(dispatch: AppDispatch, getState: () => RootState) => {
const state = getState();
@ -145,22 +124,16 @@ type AdminActions =
| { type: typeof ADMIN_CONFIG_FETCH_SUCCESS; configs: PleromaConfig['configs']; needsReboot: boolean }
| { type: typeof ADMIN_CONFIG_UPDATE_REQUEST; configs: PleromaConfig['configs'] }
| { type: typeof ADMIN_CONFIG_UPDATE_SUCCESS; configs: PleromaConfig['configs']; needsReboot: boolean }
| { type: typeof ADMIN_REPORTS_FETCH_SUCCESS; reports: Array<AdminReport>; params?: AdminGetReportsParams }
| { type: typeof ADMIN_REPORT_PATCH_SUCCESS; report: AdminReport; reportId: string }
| { type: typeof ADMIN_USER_DELETE_SUCCESS; accountId: string };
export {
ADMIN_CONFIG_FETCH_SUCCESS,
ADMIN_CONFIG_UPDATE_REQUEST,
ADMIN_CONFIG_UPDATE_SUCCESS,
ADMIN_REPORTS_FETCH_SUCCESS,
ADMIN_REPORT_PATCH_SUCCESS,
ADMIN_USER_DELETE_SUCCESS,
fetchConfig,
updateConfig,
updatePlFeConfig,
fetchReports,
closeReport,
deactivateUser,
deleteUser,
deleteStatus,

View File

@ -6,17 +6,11 @@ import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
import { useInstance } from 'pl-fe/hooks/use-instance';
import { useSettings } from 'pl-fe/hooks/use-settings';
import { usePendingUsersCount } from 'pl-fe/queries/admin/use-accounts';
import { RootState } from 'pl-fe/store';
import { usePendingReportsCount } from 'pl-fe/queries/admin/use-reports';
import FaviconService from 'pl-fe/utils/favicon-service';
FaviconService.initFaviconService();
const getNotifTotals = (state: RootState): number => {
const notifications = state.notifications.unread || 0;
const reports = state.admin.openReports.length;
return notifications + reports;
};
interface IHelmet {
children: React.ReactNode;
}
@ -25,7 +19,8 @@ const Helmet: React.FC<IHelmet> = ({ children }) => {
const instance = useInstance();
const { unreadChatsCount } = useStatContext();
const { data: awaitingApprovalCount = 0 } = usePendingUsersCount();
const unreadCount = useAppSelector((state) => getNotifTotals(state) + unreadChatsCount + awaitingApprovalCount);
const { data: pendingReportsCount = 0 } = usePendingReportsCount();
const unreadCount = useAppSelector((state) => state.notifications.unread || 0 + unreadChatsCount + awaitingApprovalCount + pendingReportsCount);
const { demetricator } = useSettings();
const hasUnreadNotifications = React.useMemo(() => !(unreadCount < 1 || demetricator), [unreadCount, demetricator]);

View File

@ -15,6 +15,7 @@ import { useOwnAccount } from 'pl-fe/hooks/use-own-account';
import { useRegistrationStatus } from 'pl-fe/hooks/use-registration-status';
import { useFollowRequestsCount } from 'pl-fe/queries/accounts/use-follow-requests';
import { usePendingUsersCount } from 'pl-fe/queries/admin/use-accounts';
import { usePendingReportsCount } from 'pl-fe/queries/admin/use-reports';
import { scheduledStatusesCountQueryOptions } from 'pl-fe/queries/statuses/scheduled-statuses';
import { useInteractionRequestsCount } from 'pl-fe/queries/statuses/use-interaction-requests';
@ -63,7 +64,8 @@ const SidebarNavigation: React.FC<ISidebarNavigation> = React.memo(({ shrink })
const followRequestsCount = useFollowRequestsCount().data || 0;
const interactionRequestsCount = useInteractionRequestsCount().data || 0;
const { data: awaitingApprovalCount = 0 } = usePendingUsersCount();
const dashboardCount = useAppSelector((state) => state.admin.openReports.length + awaitingApprovalCount);
const { data: pendingReportsCount = 0 } = usePendingReportsCount();
const dashboardCount = pendingReportsCount + awaitingApprovalCount;
const scheduledStatusCount = useInfiniteQuery(authenticatedScheduledStatusesCountQueryOptions).data || 0;
const draftCount = useAppSelector((state) => Object.keys(state.draft_statuses).length);

View File

@ -3,8 +3,8 @@ import { useIntl, defineMessages } from 'react-intl';
import { useRouteMatch } from 'react-router-dom';
import Tabs from 'pl-fe/components/ui/tabs';
import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
import { usePendingUsersCount } from 'pl-fe/queries/admin/use-accounts';
import { usePendingReportsCount } from 'pl-fe/queries/admin/use-reports';
const messages = defineMessages({
dashboard: { id: 'admin_nav.dashboard', defaultMessage: 'Dashboard' },
@ -17,7 +17,7 @@ const AdminTabs: React.FC = () => {
const match = useRouteMatch();
const { data: awaitingApprovalCount } = usePendingUsersCount();
const reportsCount = useAppSelector(state => state.admin.openReports.length);
const { data: pendingReportsCount = 0 } = usePendingReportsCount();
const tabs = [{
name: '/pl-fe/admin',
@ -27,7 +27,7 @@ const AdminTabs: React.FC = () => {
name: '/pl-fe/admin/reports',
text: intl.formatMessage(messages.reports),
to: '/pl-fe/admin/reports',
count: reportsCount,
count: pendingReportsCount,
}, {
name: '/pl-fe/admin/approval',
text: intl.formatMessage(messages.waitlist),

View File

@ -2,7 +2,6 @@ import React, { useCallback, useState } from 'react';
import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
import { Link } from 'react-router-dom';
import { closeReport } from 'pl-fe/actions/admin';
import { deactivateUserModal, deleteUserModal } from 'pl-fe/actions/moderation';
import DropdownMenu from 'pl-fe/components/dropdown-menu';
import HoverAccountWrapper from 'pl-fe/components/hover-account-wrapper';
@ -14,6 +13,7 @@ import Stack from 'pl-fe/components/ui/stack';
import Text from 'pl-fe/components/ui/text';
import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
import { useReport, useResolveReport } from 'pl-fe/queries/admin/use-reports';
import { makeGetReport } from 'pl-fe/selectors';
import toast from 'pl-fe/toast';
@ -33,9 +33,12 @@ const Report: React.FC<IReport> = ({ id }) => {
const intl = useIntl();
const dispatch = useAppDispatch();
const { data: minifiedReport } = useReport(id);
const { mutate: resolveReport } = useResolveReport(id);
const getReport = useCallback(makeGetReport(), []);
const report = useAppSelector((state) => getReport(state, id));
const report = useAppSelector((state) => getReport(state, minifiedReport));
const [accordionExpanded, setAccordionExpanded] = useState(false);
@ -56,10 +59,12 @@ const Report: React.FC<IReport> = ({ id }) => {
}];
const handleCloseReport = () => {
dispatch(closeReport(report.id)).then(() => {
const message = intl.formatMessage(messages.reportClosed, { name: targetAccount.username as string });
toast.success(message);
}).catch(() => {});
resolveReport(undefined, {
onSuccess: () => {
const message = intl.formatMessage(messages.reportClosed, { name: targetAccount.username as string });
toast.success(message);
},
});
};
const handleDeactivateUser = () => {

View File

@ -5,11 +5,11 @@ import List, { ListItem } from 'pl-fe/components/list';
import { CardTitle } from 'pl-fe/components/ui/card';
import Icon from 'pl-fe/components/ui/icon';
import Stack from 'pl-fe/components/ui/stack';
import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
import { useFeatures } from 'pl-fe/hooks/use-features';
import { useInstance } from 'pl-fe/hooks/use-instance';
import { useOwnAccount } from 'pl-fe/hooks/use-own-account';
import { usePendingUsersCount } from 'pl-fe/queries/admin/use-accounts';
import { usePendingReportsCount } from 'pl-fe/queries/admin/use-reports';
import sourceCode from 'pl-fe/utils/code';
import { Counter } from '../components/counter';
@ -24,9 +24,7 @@ const Dashboard: React.FC = () => {
const { account } = useOwnAccount();
const { data: awaitingApprovalCount = 0 } = usePendingUsersCount();
const { pendingReports } = useAppSelector((state) => ({
pendingReports: state.admin.openReports.length,
}));
const { data: pendingReportsCount = 0 } = usePendingReportsCount();
const v = features.version;
@ -117,7 +115,7 @@ const Dashboard: React.FC = () => {
label={<FormattedMessage id='admin.dashcounters.domain_count_label' defaultMessage='peers' />}
/>
<List>
<ListItem size='sm' to='/pl-fe/admin/reports' label={<FormattedMessage id='admin.links.pending_reports' defaultMessage='{count, plural, one {{formattedCount} pending report} other {{formattedCount} pending reports}}' values={{ count: pendingReports, formattedCount: <strong><FormattedNumber value={pendingReports} /></strong> }} />} />
<ListItem size='sm' to='/pl-fe/admin/reports' label={<FormattedMessage id='admin.links.pending_reports' defaultMessage='{count, plural, one {{formattedCount} pending report} other {{formattedCount} pending reports}}' values={{ count: pendingReportsCount, formattedCount: <strong><FormattedNumber value={pendingReportsCount} /></strong> }} />} />
<ListItem size='sm' to='/pl-fe/admin/users' label={<FormattedMessage id='admin.links.pending_users' defaultMessage='{count, plural, one {{formattedCount} pending user} other {{formattedCount} pending users}}' values={{ count: awaitingApprovalCount, formattedCount: <strong><FormattedNumber value={awaitingApprovalCount} /></strong> }} />} />
{/* <ListItem size='sm' to='/pl-fe/admin' label={<FormattedMessage id='admin.links.pending_tags' defaultMessage='{count} pending tags' values={{ count: <strong>0</strong> }} />} />
<ListItem size='sm' to='/pl-fe/admin' label={<FormattedMessage id='admin.links.pending_appeals' defaultMessage='{count} pending appeals' values={{ count: <strong>0</strong> }} />} /> */}

View File

@ -1,10 +1,8 @@
import React, { useState, useEffect } from 'react';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { fetchReports } from 'pl-fe/actions/admin';
import ScrollableList from 'pl-fe/components/scrollable-list';
import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
import { useReports } from 'pl-fe/queries/admin/use-reports';
import Report from '../components/report';
@ -16,29 +14,20 @@ const messages = defineMessages({
const Reports: React.FC = () => {
const intl = useIntl();
const dispatch = useAppDispatch();
const [isLoading, setLoading] = useState(true);
const reports = useAppSelector(state => state.admin.openReports);
useEffect(() => {
dispatch(fetchReports())
.then(() => setLoading(false))
.catch(() => {});
}, []);
const showLoading = isLoading && reports.length === 0;
const { data: reportIds = [], isPending } = useReports({
resolved: false,
});
return (
<ScrollableList
scrollKey='adminReports'
isLoading={isLoading}
showLoading={showLoading}
isLoading={isPending}
showLoading={isPending}
emptyMessage={intl.formatMessage(messages.emptyMessage)}
listClassName='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
>
{reports.map(report => report && <Report id={report} key={report} />)}
{reportIds.map(report => report && <Report id={report} key={report} />)}
</ScrollableList>
);
};

View File

@ -2,7 +2,7 @@ import clsx from 'clsx';
import React, { Suspense, lazy, useEffect, useRef } from 'react';
import { Redirect, Switch, useHistory, useLocation } from 'react-router-dom';
import { fetchConfig, fetchReports } from 'pl-fe/actions/admin';
import { fetchConfig } from 'pl-fe/actions/admin';
import { fetchDraftStatuses } from 'pl-fe/actions/draft-statuses';
import { fetchFilters } from 'pl-fe/actions/filters';
import { fetchMarker } from 'pl-fe/actions/markers';
@ -42,6 +42,7 @@ import SearchLayout from 'pl-fe/layouts/search-layout';
import StatusLayout from 'pl-fe/layouts/status-layout';
import { prefetchFollowRequests } from 'pl-fe/queries/accounts/use-follow-requests';
import { pendingUsersQuery } from 'pl-fe/queries/admin/use-accounts';
import { pendingReportsQuery } from 'pl-fe/queries/admin/use-reports';
import { queryClient } from 'pl-fe/queries/client';
import { prefetchCustomEmojis } from 'pl-fe/queries/instance/use-custom-emojis';
import { scheduledStatusesQueryOptions } from 'pl-fe/queries/statuses/scheduled-statuses';
@ -418,7 +419,7 @@ const UI: React.FC<IUI> = React.memo(({ children }) => {
.catch(console.error);
if (account.is_admin || account.is_moderator) {
dispatch(fetchReports({ resolved: false }));
queryClient.prefetchInfiniteQuery(pendingReportsQuery);
queryClient.prefetchInfiniteQuery(pendingUsersQuery);
}

View File

@ -0,0 +1,69 @@
import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useClient } from 'pl-fe/hooks/use-client';
import { useOwnAccount } from 'pl-fe/hooks/use-own-account';
import { filterById } from '../utils/filter-id';
import { makePaginatedResponseQuery } from '../utils/make-paginated-response-query';
import { makePaginatedResponseQueryOptions } from '../utils/make-paginated-response-query-options';
import { minifyAdminReport, minifyAdminReportList } from '../utils/minify-list';
import type { AdminGetReportsParams, PaginationParams } from 'pl-api';
const useReports = makePaginatedResponseQuery(
(params: Omit<AdminGetReportsParams, keyof PaginationParams>) => ['admin', 'reportLists', params],
(client, [params]) => client.admin.reports.getReports(params).then(minifyAdminReportList),
undefined,
'isAdmin',
);
const useReport = (reportId: string) => {
const client = useClient();
return useQuery({
queryKey: ['admin', 'reports', reportId],
queryFn: () => client.admin.reports.getReport(reportId).then(minifyAdminReport),
});
};
const pendingReportsQuery = makePaginatedResponseQueryOptions(
['admin', 'reportLists', { resolved: false }],
(client) => client.admin.reports.getReports({ resolved: false }).then(minifyAdminReportList),
)();
const usePendingReportsCount = () => {
const { account } = useOwnAccount();
return useInfiniteQuery({
...pendingReportsQuery,
select: (data) => data.pages.at(-1)?.total || data.pages.map(page => page.items).flat().length || 0,
enabled: account?.is_admin || account?.is_moderator,
});
};
const useResolveReport = (reportId: string) => {
const client = useClient();
const queryClient = useQueryClient();
return useMutation({
mutationKey: ['admin', 'reports', reportId],
mutationFn: (actionTakenComment?: string) => client.admin.reports.resolveReport(reportId, actionTakenComment),
onSuccess: (report) => {
queryClient.setQueryData(['admin', 'reports', reportId], minifyAdminReport(report));
queryClient.setQueriesData({
queryKey: ['admin', 'reportLists', {
resolved: false,
}],
exact: false,
}, filterById(reportId));
queryClient.invalidateQueries({
queryKey: ['admin', 'reportLists', {
resolved: true,
}],
exact: false,
});
},
});
};
export { useReports, useReport, pendingReportsQuery, usePendingReportsCount, useResolveReport };

View File

@ -3,7 +3,7 @@ import { store } from 'pl-fe/store';
import { queryClient } from '../client';
import type { Account, AdminAccount, PaginatedResponse, Status } from 'pl-api';
import type { Account, AdminAccount, AdminReport, PaginatedResponse, Status } from 'pl-api';
const minifyList = <T1, T2>({ previous, next, items, ...response }: PaginatedResponse<T1>, minifier: (value: T1) => T2, importer?: (items: Array<T1>) => void): PaginatedResponse<T2> => {
importer?.(items);
@ -26,6 +26,13 @@ const minifyAccountList = (response: PaginatedResponse<Account>): PaginatedRespo
store.dispatch(importEntities({ accounts }) as any);
});
// const minifyAdminAccount = ({ account, ...adminAccount }: AdminAccount) => {
// store.dispatch(importEntities({ accounts: [account] }) as any);
// queryClient.setQueryData(['admin', 'accounts', adminAccount.id], adminAccount);
// return adminAccount;
// };
const minifyAdminAccountList = (response: PaginatedResponse<AdminAccount>) =>
minifyList(response, (account) => account.id, (accounts) => {
store.dispatch(importEntities({ accounts: accounts.map((account) => account.account) }) as any);
@ -34,4 +41,26 @@ const minifyAdminAccountList = (response: PaginatedResponse<AdminAccount>) =>
}
});
export { minifyList, minifyAccountList, minifyStatusList, minifyAdminAccountList };
const minifyAdminReport = ({ account, action_taken_by_account, assigned_account, target_account, statuses, ...adminReport }: AdminReport) => {
store.dispatch(importEntities({
accounts: [account.account, action_taken_by_account?.account, assigned_account?.account, target_account?.account],
statuses: statuses as any,
}) as any);
return {
account_id: account.id,
action_taken_by_account_id: action_taken_by_account?.id,
assigned_account_id: assigned_account?.id,
target_account_id: target_account?.id,
status_ids: statuses.map(({ id }) => id),
...adminReport,
};
};
const minifyAdminReportList = (response: PaginatedResponse<AdminReport>) =>
minifyList(response, (report) => report.id, (reports) => {
for (const report of reports) {
queryClient.setQueryData(['admin', 'reports', report.id], minifyAdminReport(report));
}
});
export { minifyList, minifyAccountList, minifyStatusList, minifyAdminAccountList, minifyAdminReport, minifyAdminReportList };

View File

@ -3,26 +3,18 @@ import { create } from 'mutative';
import {
ADMIN_CONFIG_FETCH_SUCCESS,
ADMIN_CONFIG_UPDATE_SUCCESS,
ADMIN_REPORTS_FETCH_SUCCESS,
ADMIN_REPORT_PATCH_SUCCESS,
// ADMIN_USER_DELETE_SUCCESS,
type AdminActions,
} from 'pl-fe/actions/admin';
import { normalizeAdminReport, type AdminReport as MinifiedReport } from 'pl-fe/normalizers/admin-report';
import type { AdminReport } from 'pl-api';
import type { Config } from 'pl-fe/utils/config-db';
interface State {
reports: Record<string, MinifiedReport>;
openReports: Array<string>;
configs: Array<Config>;
needsReboot: boolean;
}
const initialState: State = {
reports: {},
openReports: [],
configs: [],
needsReboot: false,
};
@ -38,28 +30,6 @@ const initialState: State = {
// state.users[user.id] = normalizedUser;
// };
const importReports = (state: State, reports: Array<AdminReport>) => {
reports.forEach(report => {
const minifiedReport = normalizeAdminReport(report);
if (!minifiedReport.action_taken) {
state.openReports = [...new Set([...state.openReports, report.id])];
}
state.reports[report.id] = minifiedReport;
});
};
const handleReportDiffs = (state: State, report: AdminReport) => {
// Note: the reports here aren't full report objects
// hence the need for a new function.
switch (report.action_taken) {
case false:
state.openReports = [...new Set([...state.openReports, report.id])];
break;
default:
state.openReports = state.openReports.filter(id => id !== report.id);
}
};
const importConfigs = (state: State, configs: any) => {
state.configs = configs;
};
@ -69,10 +39,6 @@ const admin = (state = initialState, action: AdminActions): State => {
case ADMIN_CONFIG_FETCH_SUCCESS:
case ADMIN_CONFIG_UPDATE_SUCCESS:
return create(state, (draft) => importConfigs(draft, action.configs));
case ADMIN_REPORTS_FETCH_SUCCESS:
return create(state, (draft) => importReports(draft, action.reports));
case ADMIN_REPORT_PATCH_SUCCESS:
return create(state, (draft) => handleReportDiffs(draft, action.report));
// case ADMIN_USER_DELETE_SUCCESS:
// return create(state, (draft) => deleteUser(draft, action.accountId));
default:

View File

@ -12,6 +12,7 @@ import type { Filter, NotificationGroup, Relationship } from 'pl-api';
import type { EntityStore } from 'pl-fe/entity-store/types';
import type { Account } from 'pl-fe/normalizers/account';
import type { Group } from 'pl-fe/normalizers/group';
import type { minifyAdminReport } from 'pl-fe/queries/utils/minify-list';
import type { MinifiedStatus } from 'pl-fe/reducers/statuses';
import type { MRFSimple } from 'pl-fe/schemas/pleroma';
import type { RootState } from 'pl-fe/store';
@ -202,14 +203,14 @@ const makeGetReport = () => {
return createSelector(
[
(state: RootState, reportId: string) => state.admin.reports[reportId],
(state: RootState, reportId: string) => selectAccount(state, state.admin.reports[reportId]?.account_id || ''),
(state: RootState, reportId: string) => selectAccount(state, state.admin.reports[reportId]?.target_account_id || ''),
(state: RootState, reportId: string) => state.admin.reports[reportId]!.status_ids
(state: RootState, report?: ReturnType<typeof minifyAdminReport>) => report,
(state: RootState, report?: ReturnType<typeof minifyAdminReport>) => selectAccount(state, report?.account_id || ''),
(state: RootState, report?: ReturnType<typeof minifyAdminReport>) => selectAccount(state, report?.target_account_id || ''),
(state: RootState, report?: ReturnType<typeof minifyAdminReport>) => report?.status_ids
.map((statusId) => getStatus(state, { id: statusId }))
.filter((status): status is SelectedStatus => status !== null),
],
(report, account, target_account, statuses) => {
(report, account, target_account, statuses = []) => {
if (!report) return null;
return {
...report,