diff --git a/packages/pl-fe/src/features/admin/components/report.tsx b/packages/pl-fe/src/features/admin/components/report.tsx index 4fc3a6ca6..a4fdd005c 100644 --- a/packages/pl-fe/src/features/admin/components/report.tsx +++ b/packages/pl-fe/src/features/admin/components/report.tsx @@ -1,171 +1,99 @@ -import React, { useCallback, useState } from 'react'; -import { useIntl, FormattedMessage, defineMessages } from 'react-intl'; +import React, { useCallback } from 'react'; +import { FormattedMessage } from 'react-intl'; import { Link } from 'react-router-dom'; -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'; -import Accordion from 'pl-fe/components/ui/accordion'; import Avatar from 'pl-fe/components/ui/avatar'; -import Button from 'pl-fe/components/ui/button'; import HStack from 'pl-fe/components/ui/hstack'; 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 Emojify from 'pl-fe/features/emoji/emojify'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; -import { useReport, useResolveReport } from 'pl-fe/queries/admin/use-reports'; +import { useReport } from 'pl-fe/queries/admin/use-reports'; import { makeGetReport } from 'pl-fe/selectors'; -import toast from 'pl-fe/toast'; - -import ReportStatus from './report-status'; - -const messages = defineMessages({ - reportClosed: { id: 'admin.reports.report_closed_message', defaultMessage: 'Report on @{name} was closed' }, - deactivateUser: { id: 'admin.users.actions.deactivate_user', defaultMessage: 'Deactivate @{name}' }, - deleteUser: { id: 'admin.users.actions.delete_user', defaultMessage: 'Delete @{name}' }, -}); interface IReport { id: string; } const Report: React.FC = ({ 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, minifiedReport)); - const [accordionExpanded, setAccordionExpanded] = useState(false); - if (!report) return null; const account = report.account; const targetAccount = report.target_account!; - const makeMenu = () => [{ - text: intl.formatMessage(messages.deactivateUser, { name: targetAccount.username }), - action: handleDeactivateUser, - icon: require('@tabler/icons/outline/hourglass-empty.svg'), - }, { - text: intl.formatMessage(messages.deleteUser, { name: targetAccount.username }), - action: handleDeleteUser, - icon: require('@tabler/icons/outline/trash.svg'), - destructive: true, - }]; - - const handleCloseReport = () => { - resolveReport(undefined, { - onSuccess: () => { - const message = intl.formatMessage(messages.reportClosed, { name: targetAccount.username as string }); - toast.success(message); - }, - }); - }; - - const handleDeactivateUser = () => { - const accountId = targetAccount.id; - dispatch(deactivateUserModal(intl, accountId!, () => handleCloseReport())); - }; - - const handleDeleteUser = () => { - const accountId = targetAccount.id as string; - dispatch(deleteUserModal(intl, accountId!, () => handleCloseReport())); - }; - - const handleAccordionToggle = (setting: boolean) => { - setAccordionExpanded(setting); - }; - - const menu = makeMenu(); const statuses = report.statuses; const statusCount = statuses.length; - const acct = targetAccount.acct; const reporterAcct = account?.acct; return ( - - + + - - - - - - - - - @{acct} - - - ) }} - /> - - - {statusCount > 0 && ( - - - {statuses.map(status => ( - - ))} + + + + + + + + @{targetAccount.fqn} + - + + + + {!!account && ( + + + + + + @{reporterAcct} + + )} - - {!!report.comment && report.comment.length > 0 && ( - - {report.comment} + {!!report.comment && report.comment.length > 0 && ( + + + - )} + {report.comment} + + )} - {!!account && ( - - - - - - @{reporterAcct} - - - - )} - + {statusCount > 0 && ( + + + + + {statusCount} + + )} - - - - - - - + ); }; diff --git a/packages/pl-fe/src/features/ui/index.tsx b/packages/pl-fe/src/features/ui/index.tsx index 638d046e3..653059127 100644 --- a/packages/pl-fe/src/features/ui/index.tsx +++ b/packages/pl-fe/src/features/ui/index.tsx @@ -135,6 +135,7 @@ import { RegistrationPage, Relays, RemoteTimeline, + Report, Rules, ScheduledStatuses, Search, @@ -330,6 +331,7 @@ const SwitchingColumnsArea: React.FC = React.memo(({ chil + diff --git a/packages/pl-fe/src/features/ui/util/async-components.ts b/packages/pl-fe/src/features/ui/util/async-components.ts index 4c70e4c8d..c14c938f2 100644 --- a/packages/pl-fe/src/features/ui/util/async-components.ts +++ b/packages/pl-fe/src/features/ui/util/async-components.ts @@ -78,6 +78,7 @@ export const PinnedStatuses = lazy(() => import('pl-fe/pages/status-lists/pinned export const PlFeConfig = lazy(() => import('pl-fe/pages/dashboard/pl-fe-config')); export const PublicTimeline = lazy(() => import('pl-fe/pages/timelines/public-timeline')); export const Quotes = lazy(() => import('pl-fe/pages/status-lists/quotes')); +export const Report = lazy(() => import('pl-fe/pages/dashboard/report')); export const RegisterInvite = lazy(() => import('pl-fe/pages/auth/register-with-invite')); export const RegistrationPage = lazy(() => import('pl-fe/pages/auth/registration')); export const Relays = lazy(() => import('pl-fe/pages/dashboard/relays')); diff --git a/packages/pl-fe/src/hooks/use-features.ts b/packages/pl-fe/src/hooks/use-features.ts index 2b7759143..bec4b9c90 100644 --- a/packages/pl-fe/src/hooks/use-features.ts +++ b/packages/pl-fe/src/hooks/use-features.ts @@ -1,8 +1,13 @@ -import { Features } from 'pl-api'; +import * as plapi from 'pl-api'; +import { type Features } from 'pl-api'; +import * as v from 'valibot'; import { useAppSelector } from './use-app-selector'; +(window as any).v = v; +(window as any).plapi = plapi; + /** Get features for the current instance. */ -const useFeatures = (): Features => useAppSelector(state => state.auth.client.features); +const useFeatures = (): Features => ({ ...useAppSelector(state => state.auth.client.features), emojiReacts: true, emojiReactsList: true }); export { useFeatures }; diff --git a/packages/pl-fe/src/locales/en.json b/packages/pl-fe/src/locales/en.json index 0a821a6d6..59d0b30b0 100644 --- a/packages/pl-fe/src/locales/en.json +++ b/packages/pl-fe/src/locales/en.json @@ -188,11 +188,11 @@ "admin.relays.new.url_placeholder": "Instance relay URL", "admin.relays.unfollow": "Unfollow", "admin.relays.url": "Instance URL:", - "admin.reports.actions.close": "Close", + "admin.reports.account": "Reported by:", "admin.reports.actions.view_status": "View post", + "admin.reports.comment": "Comment:", "admin.reports.empty_message": "There are no open reports. If a user gets reported, they will show up here.", - "admin.reports.report_closed_message": "Report on @{name} was closed", - "admin.reports.report_title": "Report on {acct}", + "admin.reports.statuses": "Reported posts:", "admin.rule.priority": "Priority:", "admin.rules.action": "Create rule", "admin.rules.delete": "Delete", @@ -459,6 +459,7 @@ "column.reactions": "Reactions", "column.reblogs": "Reposts", "column.registration": "Sign up", + "column.report": "Report #{id}", "column.scheduled_statuses": "Scheduled posts", "column.search": "Search", "column.settings_store": "Settings store", diff --git a/packages/pl-fe/src/pages/dashboard/report.tsx b/packages/pl-fe/src/pages/dashboard/report.tsx new file mode 100644 index 000000000..2c77323a9 --- /dev/null +++ b/packages/pl-fe/src/pages/dashboard/report.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { defineMessages, useIntl } from 'react-intl'; + +import Column from 'pl-fe/components/ui/column'; +import { useReport } from 'pl-fe/queries/admin/use-reports'; + +const messages = defineMessages({ + columnHeading: { id: 'column.report', defaultMessage: 'Report #{id}' }, +}); + +type RouteParams = { reportId: string }; + +interface IReportPage { + params: RouteParams; +} + +const ReportPage: React.FC = ({ params }) => { + const intl = useIntl(); + const { data: report } = useReport(params.reportId); + + return ( + + {report?.category} + + ); +}; + +export { ReportPage as default }; diff --git a/packages/pl-fe/src/reducers/list-editor.ts b/packages/pl-fe/src/reducers/list-editor.ts index bacf378ef..9f150b91f 100644 --- a/packages/pl-fe/src/reducers/list-editor.ts +++ b/packages/pl-fe/src/reducers/list-editor.ts @@ -63,6 +63,7 @@ const listEditorReducer = (state: State = initialState, action: ListsAction): St case LIST_EDITOR_RESET: return initialState; case LIST_EDITOR_SETUP: + console.log(action.list); return create(state, (draft) => { draft.listId = action.list.id; draft.title = action.list.title;