diff --git a/app/soapbox/features/chats/components/chat-list-item.tsx b/app/soapbox/features/chats/components/chat-list-item.tsx index 93ef61c9f3..2a58b57330 100644 --- a/app/soapbox/features/chats/components/chat-list-item.tsx +++ b/app/soapbox/features/chats/components/chat-list-item.tsx @@ -1,17 +1,18 @@ import React from 'react'; import RelativeTimestamp from 'soapbox/components/relative-timestamp'; -import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui'; +import { Avatar, HStack, Icon, Stack, Text } from 'soapbox/components/ui'; import VerificationBadge from 'soapbox/components/verification_badge'; -import type { IChat } from 'soapbox/queries/chats'; +import type { IChat, IChatSilence } from 'soapbox/queries/chats'; interface IChatListItemInterface { chat: IChat, onClick: (chat: any) => void, + chatSilence?: IChatSilence } -const ChatListItem: React.FC = ({ chat, onClick }) => { +const ChatListItem: React.FC = ({ chat, chatSilence, onClick }) => { return ( ); diff --git a/app/soapbox/features/chats/components/chat-list.tsx b/app/soapbox/features/chats/components/chat-list.tsx index b25e54bbd8..1b74f583dc 100644 --- a/app/soapbox/features/chats/components/chat-list.tsx +++ b/app/soapbox/features/chats/components/chat-list.tsx @@ -7,7 +7,7 @@ import PullToRefresh from 'soapbox/components/pull-to-refresh'; import { Stack } from 'soapbox/components/ui'; import PlaceholderChat from 'soapbox/features/placeholder/components/placeholder-chat'; import { useAppDispatch } from 'soapbox/hooks'; -import { useChats } from 'soapbox/queries/chats'; +import { useChats, useChatSilences } from 'soapbox/queries/chats'; import ChatListItem from './chat-list-item'; @@ -25,6 +25,8 @@ const ChatList: React.FC = ({ onClickChat, useWindowScroll = false, s const { chatsQuery: { data: chats, isFetching, hasNextPage, fetchNextPage } } = useChats(searchValue); + const { data: chatSilences } = useChatSilences(); + const [isNearBottom, setNearBottom] = useState(false); const [isNearTop, setNearTop] = useState(true); @@ -57,7 +59,10 @@ const ChatList: React.FC = ({ onClickChat, useWindowScroll = false, s useWindowScroll={useWindowScroll} data={chats} endReached={handleLoadMore} - itemContent={(_index, chat) => } + itemContent={(_index, chat) => { + const chatSilence = chatSilences?.find((chatSilence) => String(chatSilence.target_account_id) === chat.account.id); + return ; + }} components={{ ScrollSeekPlaceholder: () => , // Footer: () => hasNextPage ? : null, diff --git a/app/soapbox/features/chats/components/chat-page.tsx b/app/soapbox/features/chats/components/chat-page.tsx index 40f5361d7b..0794104b55 100644 --- a/app/soapbox/features/chats/components/chat-page.tsx +++ b/app/soapbox/features/chats/components/chat-page.tsx @@ -12,7 +12,7 @@ import { Avatar, Card, CardTitle, Divider, HStack, Icon, IconButton, Menu, MenuB 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 { useChat, useChatSilence } from 'soapbox/queries/chats'; import Chat from './chat'; import ChatList from './chat-list'; @@ -36,8 +36,8 @@ const ChatPage = () => { const dispatch = useAppDispatch(); const history = useHistory(); - const { isSilenced, handleSilence } = useChatSilences(); const { chat, setChat } = useChatContext(); + const { isSilenced, handleSilence } = useChatSilence(chat); const { deleteChat } = useChat(chat?.id as string); const handleSuggestion = (accountId: string) => { diff --git a/app/soapbox/features/chats/components/chat-settings.tsx b/app/soapbox/features/chats/components/chat-settings.tsx index 80e5c8e43a..870b08ba2c 100644 --- a/app/soapbox/features/chats/components/chat-settings.tsx +++ b/app/soapbox/features/chats/components/chat-settings.tsx @@ -8,7 +8,7 @@ import List, { ListItem } from 'soapbox/components/list'; import { Avatar, Divider, HStack, Icon, Stack, Text, Toggle } from 'soapbox/components/ui'; import { useChatContext } from 'soapbox/contexts/chat-context'; import { useAppDispatch } from 'soapbox/hooks'; -import { useChat, useChatSilences } from 'soapbox/queries/chats'; +import { useChat, useChatSilence } from 'soapbox/queries/chats'; import ChatPaneHeader from './chat-pane-header'; @@ -29,9 +29,9 @@ const ChatSettings = () => { const dispatch = useAppDispatch(); const intl = useIntl(); - const { isSilenced, handleSilence } = useChatSilences(); - const { chat, setEditing, toggleChatPane } = useChatContext(); + const { isSilenced, handleSilence } = useChatSilence(chat); + const { deleteChat } = useChat(chat?.id as string); const closeSettings = () => setEditing(false); diff --git a/app/soapbox/queries/chats.ts b/app/soapbox/queries/chats.ts index f7de10c2a4..154463aaf3 100644 --- a/app/soapbox/queries/chats.ts +++ b/app/soapbox/queries/chats.ts @@ -1,4 +1,4 @@ -import { useInfiniteQuery, useMutation } from '@tanstack/react-query'; +import { useInfiniteQuery, useMutation, useQuery } from '@tanstack/react-query'; import { useEffect, useState } from 'react'; import { fetchRelationships } from 'soapbox/actions/accounts'; @@ -43,6 +43,12 @@ export interface IChatMessage { pending?: boolean } +export interface IChatSilence { + id: number + account_id: number + target_account_id: number +} + const reverseOrder = (a: IChat, b: IChat): number => compareId(a.id, b.id); const useChatMessages = (chatId: string) => { @@ -178,9 +184,22 @@ const useChat = (chatId: string) => { const useChatSilences = () => { const api = useApi(); + + const getChatSilences = async() => { + const { data } = await api.get('/api/v1/pleroma/chats/silences'); + + return data; + }; + + return useQuery(['chatSilences'], getChatSilences, { + placeholderData: [], + }); +}; + +const useChatSilence = (chat: IChat | null) => { + const api = useApi(); const dispatch = useAppDispatch(); - const { chat } = useChatContext(); const [isSilenced, setSilenced] = useState(false); const getChatSilences = async() => { @@ -235,9 +254,9 @@ const useChatSilences = () => { if (chat?.id) { fetchChatSilence(); } - }, [chat]); + }, [chat?.id]); return { isSilenced, handleSilence }; }; -export { useChat, useChats, useChatMessages, useChatSilences }; +export { useChat, useChats, useChatMessages, useChatSilences, useChatSilence }; diff --git a/app/styles/application.scss b/app/styles/application.scss index 1b70c69827..1d8fd3739c 100644 --- a/app/styles/application.scss +++ b/app/styles/application.scss @@ -87,6 +87,10 @@ box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%); } + .truncate-child > * { + @apply truncate; + } + .d-screen { height: 100vh; // Backwards compatibility /* stylelint-disable-next-line unit-no-unknown */