From 45afb665b9efcd28f54d28df2515f91eda5d0d09 Mon Sep 17 00:00:00 2001 From: Justin Date: Tue, 13 Sep 2022 14:11:22 -0400 Subject: [PATCH] Add chat settings to chat main page --- app/soapbox/components/ui/menu/menu.css | 2 +- app/soapbox/components/ui/menu/menu.tsx | 30 ++-- .../features/account/components/header.tsx | 24 ++-- .../features/chats/components/chat-page.tsx | 132 +++++++++++++++++- .../ui/components/profile-dropdown.tsx | 2 +- 5 files changed, 159 insertions(+), 31 deletions(-) diff --git a/app/soapbox/components/ui/menu/menu.css b/app/soapbox/components/ui/menu/menu.css index d1b9d1a0e..aac50c147 100644 --- a/app/soapbox/components/ui/menu/menu.css +++ b/app/soapbox/components/ui/menu/menu.css @@ -1,5 +1,5 @@ [data-reach-menu-popover] { - @apply origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-900 dark:ring-2 dark:ring-primary-700 focus:outline-none; + @apply origin-top-right absolute mt-2 rounded-md shadow-lg bg-white dark:bg-gray-900 dark:ring-2 dark:ring-primary-700 focus:outline-none; z-index: 1003; } diff --git a/app/soapbox/components/ui/menu/menu.tsx b/app/soapbox/components/ui/menu/menu.tsx index 91f3369a7..7965039ef 100644 --- a/app/soapbox/components/ui/menu/menu.tsx +++ b/app/soapbox/components/ui/menu/menu.tsx @@ -5,28 +5,36 @@ import { MenuItems, MenuPopover, MenuLink, - MenuPopoverProps, + MenuListProps, } from '@reach/menu-button'; import { positionDefault, positionRight } from '@reach/popover'; +import classNames from 'clsx'; import React from 'react'; import './menu.css'; -interface IMenuList extends Omit { +interface IMenuList extends Omit { /** Position of the dropdown menu. */ position?: 'left' | 'right' + className?: string } /** Renders children as a dropdown menu. */ -const MenuList: React.FC = (props) => ( - - event.nativeEvent.stopImmediatePropagation()} - className='py-1 bg-white dark:bg-primary-900 rounded-lg shadow-menu' - {...props} - /> - -); +const MenuList: React.FC = (props) => { + const { position, className, ...filteredProps } = props; + + return ( + + event.nativeEvent.stopImmediatePropagation()} + className={ + classNames(className, 'py-1 bg-white dark:bg-primary-900 rounded-lg shadow-menu') + } + {...filteredProps} + /> + + ); +}; /** Divides menu items. */ const MenuDivider = () =>
; diff --git a/app/soapbox/features/account/components/header.tsx b/app/soapbox/features/account/components/header.tsx index 3f4d239bf..e1a573dde 100644 --- a/app/soapbox/features/account/components/header.tsx +++ b/app/soapbox/features/account/components/header.tsx @@ -165,11 +165,11 @@ const Header: React.FC = ({ account }) => { if (account.relationship?.endorsed) { dispatch(unpinAccount(account.id)) .then(() => dispatch(snackbar.success(intl.formatMessage(messages.userUnendorsed, { acct: account.acct })))) - .catch(() => {}); + .catch(() => { }); } else { dispatch(pinAccount(account.id)) .then(() => dispatch(snackbar.success(intl.formatMessage(messages.userEndorsed, { acct: account.acct })))) - .catch(() => {}); + .catch(() => { }); } }; @@ -218,7 +218,7 @@ const Header: React.FC = ({ account }) => { dispatch(verifyUser(account.id)) .then(() => dispatch(snackbar.success(message))) - .catch(() => {}); + .catch(() => { }); }; const onUnverifyUser = () => { @@ -226,7 +226,7 @@ const Header: React.FC = ({ account }) => { dispatch(unverifyUser(account.id)) .then(() => dispatch(snackbar.success(message))) - .catch(() => {}); + .catch(() => { }); }; const onSetDonor = () => { @@ -234,7 +234,7 @@ const Header: React.FC = ({ account }) => { dispatch(setDonor(account.id)) .then(() => dispatch(snackbar.success(message))) - .catch(() => {}); + .catch(() => { }); }; const onRemoveDonor = () => { @@ -242,7 +242,7 @@ const Header: React.FC = ({ account }) => { dispatch(removeDonor(account.id)) .then(() => dispatch(snackbar.success(message))) - .catch(() => {}); + .catch(() => { }); }; const onPromoteToAdmin = () => { @@ -250,7 +250,7 @@ const Header: React.FC = ({ account }) => { dispatch(promoteToAdmin(account.id)) .then(() => dispatch(snackbar.success(message))) - .catch(() => {}); + .catch(() => { }); }; const onPromoteToModerator = () => { @@ -259,7 +259,7 @@ const Header: React.FC = ({ account }) => { dispatch(promoteToModerator(account.id)) .then(() => dispatch(snackbar.success(message))) - .catch(() => {}); + .catch(() => { }); }; const onDemoteToUser = () => { @@ -267,7 +267,7 @@ const Header: React.FC = ({ account }) => { dispatch(demoteToUser(account.id)) .then(() => dispatch(snackbar.success(message))) - .catch(() => {}); + .catch(() => { }); }; const onSuggestUser = () => { @@ -275,7 +275,7 @@ const Header: React.FC = ({ account }) => { dispatch(suggestUsers([account.id])) .then(() => dispatch(snackbar.success(message))) - .catch(() => {}); + .catch(() => { }); }; const onUnsuggestUser = () => { @@ -283,7 +283,7 @@ const Header: React.FC = ({ account }) => { dispatch(unsuggestUsers([account.id])) .then(() => dispatch(snackbar.success(message))) - .catch(() => {}); + .catch(() => { }); }; const onRemoveFromFollowers = () => { @@ -778,7 +778,7 @@ const Header: React.FC = ({ account }) => { children={null} /> - + {menu.map((menuItem, idx) => { if (typeof menuItem?.text === 'undefined') { return ; diff --git a/app/soapbox/features/chats/components/chat-page.tsx b/app/soapbox/features/chats/components/chat-page.tsx index 86cc15f94..1ca49ed80 100644 --- a/app/soapbox/features/chats/components/chat-page.tsx +++ b/app/soapbox/features/chats/components/chat-page.tsx @@ -2,29 +2,34 @@ import React from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { useHistory } from 'react-router-dom'; +import { blockAccount } from 'soapbox/actions/accounts'; import { launchChat } from 'soapbox/actions/chats'; +import { openModal } from 'soapbox/actions/modals'; +import { initReport } from 'soapbox/actions/reports'; import AccountSearch from 'soapbox/components/account_search'; -import { Card, CardTitle, Stack } from 'soapbox/components/ui'; +import List, { ListItem } from 'soapbox/components/list'; +import { Avatar, Card, CardTitle, Divider, HStack, Icon, IconButton, Menu, MenuButton, MenuItem, MenuList, Stack, Text, Toggle } from 'soapbox/components/ui'; +import VerificationBadge from 'soapbox/components/verification_badge'; import { useChatContext } from 'soapbox/contexts/chat-context'; import { useAppDispatch } from 'soapbox/hooks'; +import { useChat, useChatSilences } from 'soapbox/queries/chats'; import Chat from './chat'; import ChatList from './chat-list'; -import ChatListItem from './chat-list-item'; - const messages = defineMessages({ title: { id: 'column.chats', defaultMessage: 'Messages' }, searchPlaceholder: { id: 'chats.search_placeholder', defaultMessage: 'Start a chat with…' }, }); - const ChatPage = () => { const intl = useIntl(); const dispatch = useAppDispatch(); const history = useHistory(); + const { isSilenced, handleSilence } = useChatSilences(); const { chat, setChat } = useChatContext(); + const { deleteChat } = useChat(chat?.id as string); const handleSuggestion = (accountId: string) => { dispatch(launchChat(accountId, history, true)); @@ -35,6 +40,32 @@ const ChatPage = () => { setChat(chat); }; + const handleBlockUser = () => { + dispatch(openModal('CONFIRM', { + heading: `Block @${chat?.account.acct}`, + message: 'Blocking will prevent this profile from direct messaging you and viewing your content. You can unblock later.', + confirm: 'Block', + confirmationTheme: 'primary', + onConfirm: () => dispatch(blockAccount(chat?.account.id as string)), + })); + }; + + const handleLeaveChat = () => { + dispatch(openModal('CONFIRM', { + heading: 'Leave Chat', + message: 'Are you sure you want to leave this chat? This conversation will be removed from your inbox.', + confirm: 'Leave Chat', + confirmationTheme: 'primary', + onConfirm: () => { + deleteChat.mutate(); + }, + })); + }; + + const handleReportChat = () => { + dispatch(initReport(chat?.account as any)); + }; + return (
@@ -57,7 +88,96 @@ const ChatPage = () => { {chat && ( - { }} /> + + + + + +
+ {chat.account?.display_name || `@${chat.account.username}`} + {!chat.account?.verified && } +
+ + + {chat.account.acct} + + + + + + + + + + + + + {chat.account.display_name} + @{chat.account.acct} + + + + + + + + + + + + + + + +
+ + Block @{chat.account.acct} +
+ + + +
+ + Report @{chat.account.acct} +
+ + + +
+ + Leave chat +
+ + + + + + +
@@ -69,4 +189,4 @@ const ChatPage = () => { ); }; -export default ChatPage; \ No newline at end of file +export default ChatPage; diff --git a/app/soapbox/features/ui/components/profile-dropdown.tsx b/app/soapbox/features/ui/components/profile-dropdown.tsx index 0a9a3f297..04d535add 100644 --- a/app/soapbox/features/ui/components/profile-dropdown.tsx +++ b/app/soapbox/features/ui/components/profile-dropdown.tsx @@ -110,7 +110,7 @@ const ProfileDropdown: React.FC = ({ account, children }) => { {menu.map((menuItem, idx) => { if (menuItem.toggle) { return ( -
+
{menuItem.text} {menuItem.toggle}