Remove Chat Silence feature from web

app/soapbox/features/chats/components/chat-list-item.tsx

@@ -3,17 +3,15 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
 import RelativeTimestamp from 'soapbox/components/relative-timestamp';
-import { Avatar, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
+import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification_badge';
 import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
 import { useAppDispatch } from 'soapbox/hooks';
-import { IChat, IChatSilence, useChatActions, useChatSilence } from 'soapbox/queries/chats';
+import { IChat, useChatActions } from 'soapbox/queries/chats';
 
 import type { Menu } from 'soapbox/components/dropdown_menu';
 
 const messages = defineMessages({
-  silenceNotifications: { id: 'chat_settings.silence_notifications', defaultMessage: 'Silence notifications' },
-  unsilenceNotifications: { id: 'chat_settings.unsilence_notifications', defaultMessage: 'Unsilence notifications' },
   leaveMessage: { id: 'chat_settings.leave.message', defaultMessage: 'Are you sure you want to leave this chat? Messages will be deleted for you and this chat will be removed from your inbox.' },
   leaveHeading: { id: 'chat_settings.leave.heading', defaultMessage: 'Leave Chat' },
   leaveConfirm: { id: 'chat_settings.leave.confirm', defaultMessage: 'Leave Chat' },
@@ -23,57 +21,29 @@ const messages = defineMessages({
 interface IChatListItemInterface {
   chat: IChat,
   onClick: (chat: any) => void,
-  chatSilence?: IChatSilence
 }
 
-const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, chatSilence, onClick }) => {
+const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
 
-  const { handleSilence } = useChatSilence(chat);
   const { deleteChat } = useChatActions(chat?.id as string);
 
-  const menu = useMemo((): Menu => {
+  const menu = useMemo((): Menu => [{
-    const menu: Menu = [];
+    text: intl.formatMessage(messages.leaveChat),
+    action: (event) => {
+      event.stopPropagation();
 
-    if (chatSilence) {
+      dispatch(openModal('CONFIRM', {
-      menu.push({
+        heading: intl.formatMessage(messages.leaveHeading),
-        text: intl.formatMessage(messages.unsilenceNotifications),
+        message: intl.formatMessage(messages.leaveMessage),
-        action: (event) => {
+        confirm: intl.formatMessage(messages.leaveConfirm),
-          event.stopPropagation();
+        confirmationTheme: 'primary',
-          handleSilence();
+        onConfirm: () => deleteChat.mutate(),
-        },
+      }));
-        icon: require('@tabler/icons/bell.svg'),
+    },
-      });
+    icon: require('@tabler/icons/logout.svg'),
-    } else {
+  }], []);
-      menu.push({
-        text: intl.formatMessage(messages.silenceNotifications),
-        action: (event) => {
-          event.stopPropagation();
-          handleSilence();
-        },
-        icon: require('@tabler/icons/bell-off.svg'),
-      });
-    }
-
-    menu.push({
-      text: intl.formatMessage(messages.leaveChat),
-      action: (event) => {
-        event.stopPropagation();
-
-        dispatch(openModal('CONFIRM', {
-          heading: intl.formatMessage(messages.leaveHeading),
-          message: intl.formatMessage(messages.leaveMessage),
-          confirm: intl.formatMessage(messages.leaveConfirm),
-          confirmationTheme: 'primary',
-          onConfirm: () => deleteChat.mutate(),
-        }));
-      },
-      icon: require('@tabler/icons/logout.svg'),
-    });
-
-    return menu;
-  }, [chatSilence]);
 
   return (
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
@@ -119,11 +89,6 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, chatSilence, onC
             />
           </div>
 
-
-          {chatSilence ? (
-            <Icon src={require('icons/bell-filled.svg')} className='w-5 h-5 text-gray-600' />
-          ) : null}
-
           {chat.last_message && (
             <>
               {chat.last_message.unread && (

app/soapbox/features/chats/components/chat-list.tsx

@@ -8,7 +8,7 @@ import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import { Spinner, Stack, Text } from 'soapbox/components/ui';
 import PlaceholderChat from 'soapbox/features/placeholder/components/placeholder-chat';
 import { useAppDispatch } from 'soapbox/hooks';
-import { useChats, useChatSilences } from 'soapbox/queries/chats';
+import { useChats } from 'soapbox/queries/chats';
 
 import ChatListItem from './chat-list-item';
 
@@ -25,8 +25,6 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, s
 
   const { chatsQuery: { data: chats, isFetching, hasNextPage, fetchNextPage } } = useChats(searchValue);
 
-  const { data: chatSilences } = useChatSilences();
-
   const [isNearBottom, setNearBottom] = useState<boolean>(false);
   const [isNearTop, setNearTop] = useState<boolean>(true);
 
@@ -78,14 +76,12 @@ const ChatList: React.FC<IChatList> = ({ 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);
+            <div className='px-2'>
-            return (
+              <ChatListItem chat={chat} onClick={onClickChat} />
-              <div className='px-2'>
+            </div>
-                <ChatListItem chat={chat} onClick={onClickChat} chatSilence={chatSilence} />
+          )
-              </div>
+          }
-            );
-          }}
           components={{
             ScrollSeekPlaceholder: () => <PlaceholderChat />,
             Footer: () => hasNextPage ? <Spinner withText={false} /> : null,

app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx

@@ -1,14 +1,13 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { blockAccount } from 'soapbox/actions/accounts';
 import { openModal } from 'soapbox/actions/modals';
-import List, { ListItem } from 'soapbox/components/list';
+import { Avatar, Divider, HStack, Icon, IconButton, Menu, MenuButton, MenuItem, MenuList, Stack, Text } from 'soapbox/components/ui';
-import { Avatar, 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, useOwnAccount } from 'soapbox/hooks';
-import { useChatActions, useChatSilence } from 'soapbox/queries/chats';
+import { useChatActions } from 'soapbox/queries/chats';
 
 import Chat from '../../chat';
 
@@ -32,10 +31,9 @@ const ChatPageMain = () => {
   const intl = useIntl();
   const account = useOwnAccount();
 
-  const inputRef = useRef<HTMLTextAreaElement| null>(null);
+  const inputRef = useRef<HTMLTextAreaElement | null>(null);
 
   const { chat, setChat } = useChatContext();
-  const { isSilenced, handleSilence, fetchChatSilence } = useChatSilence(chat);
   const { deleteChat } = useChatActions(chat?.id as string);
 
   const handleBlockUser = () => {
@@ -58,12 +56,6 @@ const ChatPageMain = () => {
     }));
   };
 
-  useEffect(() => {
-    if (chat?.id) {
-      fetchChatSilence();
-    }
-  }, [chat?.id]);
-
   if (!chat && !account?.chats_onboarded) {
     return (
       <Welcome />
@@ -127,14 +119,6 @@ const ChatPageMain = () => {
 
               <Divider />
 
-              <List>
-                <ListItem label='Silence notifications'>
-                  <Toggle checked={isSilenced} onChange={handleSilence} />
-                </ListItem>
-              </List>
-
-              <Divider />
-
               <Stack space={2}>
                 <MenuItem
                   as='button'

app/soapbox/features/chats/components/chat-widget/chat-settings.tsx

@@ -1,13 +1,12 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { blockAccount } from 'soapbox/actions/accounts';
 import { openModal } from 'soapbox/actions/modals';
-import List, { ListItem } from 'soapbox/components/list';
+import { Avatar, Divider, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
-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 { useChatActions, useChatSilence } from 'soapbox/queries/chats';
+import { useChatActions } from 'soapbox/queries/chats';
 
 import ChatPaneHeader from './chat-pane-header';
 
@@ -28,8 +27,6 @@ const ChatSettings = () => {
   const intl = useIntl();
 
   const { chat, setEditing, toggleChatPane } = useChatContext();
-  const { isSilenced, handleSilence, fetchChatSilence } = useChatSilence(chat);
-
   const { deleteChat } = useChatActions(chat?.id as string);
 
   const closeSettings = () => setEditing(false);
@@ -59,12 +56,6 @@ const ChatSettings = () => {
     }));
   };
 
-  useEffect(() => {
-    if (chat?.id) {
-      fetchChatSilence();
-    }
-  }, [chat?.id]);
-
   if (!chat) {
     return null;
   }
@@ -102,14 +93,6 @@ const ChatSettings = () => {
 
         <Divider />
 
-        <List>
-          <ListItem label='Silence notifications'>
-            <Toggle checked={isSilenced} onChange={handleSilence} />
-          </ListItem>
-        </List>
-
-        <Divider />
-
         <Stack space={5}>
           <button onClick={handleBlockUser} className='w-full flex items-center space-x-2 font-bold text-sm text-primary-600 dark:text-accent-blue'>
             <Icon src={require('@tabler/icons/ban.svg')} className='w-5 h-5' />

app/soapbox/queries/chats.ts

@@ -1,10 +1,8 @@
 import { useInfiniteQuery, useMutation, useQuery } from '@tanstack/react-query';
 import sumBy from 'lodash/sumBy';
-import { useState } from 'react';
 
 import { fetchRelationships } from 'soapbox/actions/accounts';
 import { importFetchedAccount, importFetchedAccounts } from 'soapbox/actions/importer';
-import snackbar from 'soapbox/actions/snackbar';
 import { getNextLink } from 'soapbox/api';
 import compareId from 'soapbox/compare_id';
 import { useChatContext } from 'soapbox/contexts/chat-context';
@@ -46,17 +44,10 @@ export interface IChatMessage {
   pending?: boolean
 }
 
-export interface IChatSilence {
-  id: number
-  account_id: number
-  target_account_id: number
-}
-
 const ChatKeys = {
   chat: (chatId?: string) => ['chats', 'chat', chatId] as const,
   chatMessages: (chatId: string) => ['chats', 'messages', chatId] as const,
   chatSearch: (searchQuery?: string) => searchQuery ? ['chats', 'search', searchQuery] : ['chats', 'search'] as const,
-  chatSilences: ['chatSilences'] as const,
 };
 
 const reverseOrder = (a: IChat, b: IChat): number => compareId(a.id, b.id);
@@ -212,77 +203,4 @@ const useChatActions = (chatId: string) => {
   return { createChatMessage, markChatAsRead, deleteChatMessage, acceptChat, deleteChat };
 };
 
-const useChatSilences = () => {
+export { ChatKeys, useChat, useChatActions, useChats, useChatMessages };
-  const api = useApi();
-
-  const getChatSilences = async () => {
-    const { data } = await api.get<IChatSilence[]>('/api/v1/pleroma/chats/silences');
-
-    return data;
-  };
-
-  return useQuery<IChatSilence[]>(ChatKeys.chatSilences, getChatSilences, {
-    placeholderData: [],
-  });
-};
-
-const useChatSilence = (chat: IChat | null) => {
-  const api = useApi();
-  const dispatch = useAppDispatch();
-
-  const [isSilenced, setSilenced] = useState<boolean>(false);
-
-  const getChatSilences = async () => {
-    const { data } = await api.get(`api/v1/pleroma/chats/silence?account_id=${chat?.account.id}`);
-    return data;
-  };
-
-  const fetchChatSilence = async () => {
-    const data = await getChatSilences();
-    if (data) {
-      setSilenced(true);
-    } else {
-      setSilenced(false);
-    }
-  };
-
-  const handleSilence = () => {
-    if (isSilenced) {
-      deleteSilence();
-    } else {
-      createSilence();
-    }
-  };
-
-  const createSilence = () => {
-    setSilenced(true);
-
-    api.post(`api/v1/pleroma/chats/silence?account_id=${chat?.account.id}`)
-      .then(() => {
-        dispatch(snackbar.success('Successfully silenced this chat.'));
-        queryClient.invalidateQueries(ChatKeys.chatSilences);
-      })
-      .catch(() => {
-        dispatch(snackbar.error('Something went wrong trying to silence this chat. Please try again.'));
-        setSilenced(false);
-      });
-  };
-
-  const deleteSilence = () => {
-    setSilenced(false);
-
-    api.delete(`api/v1/pleroma/chats/silence?account_id=${chat?.account.id}`)
-      .then(() => {
-        dispatch(snackbar.success('Successfully unsilenced this chat.'));
-        queryClient.invalidateQueries(ChatKeys.chatSilences);
-      })
-      .catch(() => {
-        dispatch(snackbar.error('Something went wrong trying to unsilence this chat. Please try again.'));
-        setSilenced(true);
-      });
-  };
-
-  return { isSilenced, handleSilence, fetchChatSilence };
-};
-
-export { ChatKeys, useChat, useChatActions, useChats, useChatMessages, useChatSilences, useChatSilence };