pl-fe: migrate reports management

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/features/admin/components/admin-tabs.tsx

@@ -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),

packages/pl-fe/src/features/admin/components/report.tsx

@@ -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 = () => {

packages/pl-fe/src/features/admin/tabs/dashboard.tsx

@@ -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> }} />} /> */}

packages/pl-fe/src/features/admin/tabs/reports.tsx

@@ -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>
   );
 };