diff --git a/web/components/profile/report-user.tsx b/web/components/profile/report-user.tsx index cb2ca7f7..3ec5e1d3 100644 --- a/web/components/profile/report-user.tsx +++ b/web/components/profile/report-user.tsx @@ -10,7 +10,7 @@ import {Checkbox} from 'web/components/widgets/checkbox' import {api} from 'web/lib/api' import {useT} from 'web/lib/locale' -export const ReportUser = (props: {user: User; closeModal: () => void}) => { +export const ReportUser = (props: {user: Pick; closeModal: () => void}) => { const {user, closeModal} = props const t = useT() const reportTypes = [ diff --git a/web/pages/messages/[channelId].tsx b/web/pages/messages/[channelId].tsx index 2bc0d5db..69aad601 100644 --- a/web/pages/messages/[channelId].tsx +++ b/web/pages/messages/[channelId].tsx @@ -1,5 +1,6 @@ import {EllipsisVerticalIcon} from '@heroicons/react/24/solid' import clsx from 'clsx' +import {DisplayUser} from 'common/api/user-types' import {ChatMessage} from 'common/chat-message' import {PrivateMessageChannel} from 'common/supabase/private-messages' import {User} from 'common/user' @@ -10,7 +11,7 @@ import {uniq} from 'lodash' import {useRouter} from 'next/router' import {useCallback, useEffect, useState} from 'react' import toast from 'react-hot-toast' -import {FaUserFriends, FaUserMinus} from 'react-icons/fa' +import {FaFlag, FaUserFriends, FaUserMinus} from 'react-icons/fa' import {GiSpeakerOff} from 'react-icons/gi' import {BackButton} from 'web/components/back-button' import {ChatMessageItem, SystemChatMessageItem} from 'web/components/chat/chat-message' @@ -21,6 +22,7 @@ import {Modal, MODAL_CLASS} from 'web/components/layout/modal' import {Row} from 'web/components/layout/row' import {MultipleOrSingleAvatars} from 'web/components/multiple-or-single-avatars' import {PageBase} from 'web/components/page-base' +import {ReportUser} from 'web/components/profile/report-user' import {SEO} from 'web/components/SEO' import {Avatar} from 'web/components/widgets/avatar' import {useTextEditor} from 'web/components/widgets/editor' @@ -143,6 +145,8 @@ export const PrivateChat = (props: { ) const [showUsers, setShowUsers] = useState(false) + const [showReport, setShowReport] = useState(false) + const [reportTarget, setReportTarget] = useState(null) const maxUsersToGet = 100 const messageUserIds = uniq( (messages ?? []) @@ -355,6 +359,14 @@ export const PrivateChat = (props: { ) }, }, + { + icon: , + name: t('messages.menu.report', 'Report'), + onClick: () => { + setReportTarget(members.length === 1 ? members[0] : null) + setShowReport(true) + }, + }, { icon: , name: t('messages.menu.leave_chat', 'Leave chat'), @@ -384,6 +396,44 @@ export const PrivateChat = (props: { )} + {showReport && ( + { + setShowReport(open) + if (!open) setReportTarget(null) + }} + > + + {reportTarget ? ( + { + setShowReport(false) + setReportTarget(null) + }} + /> + ) : members && members.length > 0 ? ( + <> +

+ {t('messages.report.select_user', 'Select a user to report')} +

+ {members.map((user) => ( + + ))} + + ) : ( + {t('messages.report.no_users', 'No users to report')} + )} + +
+ )}