block user/tabs/warning modals/context menu/store fix/mute fix

assets/icons/messages/ban.svg

@@ -1,6 +1,6 @@
 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_4126_37135)">
-<path d="M12.9094 14.502L3.49805 5.09063C2.71055 6.19102 2.25 7.54102 2.25 9C2.25 12.7266 5.27344 15.75 9 15.75C10.459 15.75 11.809 15.2895 12.9094 14.502ZM14.502 12.9094C15.2895 11.809 15.75 10.459 15.75 9C15.75 5.27344 12.7266 2.25 9 2.25C7.54102 2.25 6.19102 2.71055 5.09063 3.49805L14.502 12.9094ZM0 9C0 6.61305 0.948212 4.32387 2.63604 2.63604C4.32387 0.948212 6.61305 0 9 0C11.3869 0 13.6761 0.948212 15.364 2.63604C17.0518 4.32387 18 6.61305 18 9C18 11.3869 17.0518 13.6761 15.364 15.364C13.6761 17.0518 11.3869 18 9 18C6.61305 18 4.32387 17.0518 2.63604 15.364C0.948212 13.6761 0 11.3869 0 9Z" fill="#EF5B5B"/>
+<path d="M12.9094 14.502L3.49805 5.09063C2.71055 6.19102 2.25 7.54102 2.25 9C2.25 12.7266 5.27344 15.75 9 15.75C10.459 15.75 11.809 15.2895 12.9094 14.502ZM14.502 12.9094C15.2895 11.809 15.75 10.459 15.75 9C15.75 5.27344 12.7266 2.25 9 2.25C7.54102 2.25 6.19102 2.71055 5.09063 3.49805L14.502 12.9094ZM0 9C0 6.61305 0.948212 4.32387 2.63604 2.63604C4.32387 0.948212 6.61305 0 9 0C11.3869 0 13.6761 0.948212 15.364 2.63604C17.0518 4.32387 18 6.61305 18 9C18 11.3869 17.0518 13.6761 15.364 15.364C13.6761 17.0518 11.3869 18 9 18C6.61305 18 4.32387 17.0518 2.63604 15.364C0.948212 13.6761 0 11.3869 0 9Z"/>
 </g>
 <defs>
 <clipPath id="clip0_4126_37135">

src/components/HorizontalTabView/index.tsx

@@ -7,6 +7,7 @@ import { Colors } from 'src/theme';
 
 import MarkToUpIcon from '../../../assets/icons/mark-to-up.svg';
 import BlinkingDot from '../BlinkingDot';
+import BanIcon from 'assets/icons/messages/ban.svg';
 
 export const HorizontalTabView = ({
   index,
@@ -37,7 +38,13 @@ export const HorizontalTabView = ({
       renderLabel={({ route, focused }) => (
         <>
           <View style={[styles.tabLabelContainer, focused ? styles.tabLabelFocused : null]}>
-            <Text style={[styles.label, focused ? styles.labelFocused : null]}>{route.title}</Text>
+            {route.icon ? (
+              <BanIcon width={15} height={15} fill={focused ? Colors.WHITE : Colors.DARK_BLUE} />
+            ) : (
+              <Text style={[styles.label, focused ? styles.labelFocused : null]}>
+                {route.title}
+              </Text>
+            )}
             {withMark ? (
               <MarkToUpIcon
                 height={16}

src/components/WarningModal/index.tsx

@@ -19,7 +19,8 @@ export const WarningModal = ({
   message,
   title,
   action,
-  onModalHide
+  onModalHide,
+  buttonTitle
 }: {
   isVisible: boolean;
   onClose: () => void;
@@ -28,6 +29,7 @@ export const WarningModal = ({
   title?: string;
   action?: () => void;
   onModalHide?: () => void;
+  buttonTitle?: string;
 }) => {
   const navigation = useNavigation();
 
@@ -84,7 +86,7 @@ export const WarningModal = ({
           borderColor: Colors.DARK_BLUE
         },
         {
-          text: 'Delete',
+          text: buttonTitle ?? 'Delete',
           textColor: Colors.WHITE,
           color: Colors.RED,
           action: () => {

src/screens/InAppScreens/MessagesScreen/ChatScreen/index.tsx

@@ -224,8 +224,8 @@ const ChatScreen = ({ route }: { route: any }) => {
           return;
         }
 
-        if (spaceBelow < 210) {
-          const extraShift = 210 - spaceBelow;
+        if (spaceBelow < 160) {
+          const extraShift = 160 - spaceBelow;
           finalY -= extraShift;
         }
 
@@ -234,7 +234,7 @@ const ChatScreen = ({ route }: { route: any }) => {
           finalY += extraShift;
         }
 
-        if (spaceBelow < 210 || spaceAbove < 50) {
+        if (spaceBelow < 160 || spaceAbove < 50) {
           const targetY = screenHeight / 2 - height / 2;
           scrollY.value = withTiming(finalY - finalY);
         }
@@ -290,16 +290,16 @@ const ChatScreen = ({ route }: { route: any }) => {
       case 'copy':
         Clipboard.setString(selectedMessage?.currentMessage?.text ?? '');
         setIsModalVisible(false);
-        Alert.alert('copied');
+        Alert.alert('Copied');
         break;
       case 'delete':
         handleDeleteMessage(selectedMessage.currentMessage?._id);
         setIsModalVisible(false);
         break;
-      case 'pin':
-        setIsModalVisible(false);
-        Alert.alert(option);
-        break;
+      // case 'pin':
+      //   setIsModalVisible(false);
+      //   Alert.alert(option);
+      //   break;
       default:
         break;
     }
@@ -999,7 +999,7 @@ const ChatScreen = ({ route }: { route: any }) => {
               onPress: (url: string) => Linking.openURL(url),
               onLongPress: (url: string) => {
                 Clipboard.setString(url ?? '');
-                Alert.alert('copied');
+                Alert.alert('Link copied');
               }
             }
           ]}

src/screens/InAppScreens/MessagesScreen/Components/MoreModal.tsx

@@ -5,10 +5,14 @@ import { Colors } from 'src/theme';
 import { API_HOST } from 'src/constants';
 import { getFontSize } from 'src/utils';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { ChatProps } from '../types';
+import { ChatProps, WarningProps } from '../types';
 import { useNavigation } from '@react-navigation/native';
 import { NAVIGATION_PAGES } from 'src/types';
-import { usePostSetBlockMutation, usePostSetMuteMutation } from '@api/chat';
+import {
+  usePostDeleteChatMutation,
+  usePostSetBlockMutation,
+  usePostSetMuteMutation
+} from '@api/chat';
 import { useChatStore } from 'src/stores/chatStore';
 import TrashIcon from 'assets/icons/travels-screens/trash-solid.svg';
 import BanIcon from 'assets/icons/messages/ban.svg';
@@ -28,7 +32,9 @@ const MoreModal = () => {
   >(null);
   const { mutateAsync: muteUser } = usePostSetMuteMutation();
   const { mutateAsync: blockUser } = usePostSetBlockMutation();
-  const [shouldOpenWarningModal, setShouldOpenWarningModal] = useState(false);
+  const { mutateAsync: deleteChat } = usePostDeleteChatMutation();
+
+  const [shouldOpenWarningModal, setShouldOpenWarningModal] = useState<WarningProps | null>(null);
 
   const handleSheetOpen = (
     payload:
@@ -60,19 +66,48 @@ const MoreModal = () => {
   };
 
   const handleBlock = async () => {
-    // if (!chatData) return;
-    // await blockUser({
-    //   value: chatData.blocked === 1 ? 0 : 1,
-    //   conversation_with_user: chatData.uid
-    // });
+    if (!chatData) return;
+
+    setShouldOpenWarningModal({
+      title: 'Block user',
+      buttonTitle: 'Block',
+      message: `Are you sure you want to block ${chatData?.name}?\nThis user will be blocked and you will not be able to send or receive messages from him/her.`,
+      action: async () => {
+        await blockUser({
+          token: chatData.token,
+          value: 1,
+          conversation_with_user: chatData.uid
+        });
+
+        chatData.refetch();
+      }
+    });
+
+    setTimeout(() => {
+      SheetManager.hide('more-modal');
+      setShouldOpenWarningModal(null);
+    }, 300);
   };
 
   const handleDelete = async () => {
-    setShouldOpenWarningModal(true);
+    if (!chatData) return;
+
+    setShouldOpenWarningModal({
+      title: 'Delete conversation',
+      message: `Are you sure you want to delete conversation with ${chatData?.name}?\nThis conversation will be deleted for both sides.`,
+      action: async () => {
+        await deleteChat({
+          token: chatData.token,
+          conversation_with_user: chatData.uid
+        });
+
+        chatData.refetch();
+      }
+    });
 
     setTimeout(() => {
       SheetManager.hide('more-modal');
-      setShouldOpenWarningModal(false);
+      setShouldOpenWarningModal(null);
     }, 300);
   };
 
@@ -86,7 +121,7 @@ const MoreModal = () => {
       }}
       onClose={() => {
         if (shouldOpenWarningModal) {
-          setIsWarningModalVisible(true);
+          setIsWarningModalVisible(shouldOpenWarningModal);
         }
       }}
       containerStyle={styles.sheetContainer}
@@ -116,7 +151,7 @@ const MoreModal = () => {
           </View>
 
           <View style={[styles.optionsContainer, { paddingVertical: 0, gap: 0 }]}>
-            <TouchableOpacity style={[styles.option, styles.dangerOption]}>
+            <TouchableOpacity style={[styles.option, styles.dangerOption]} onPress={handleBlock}>
               <Text style={[styles.optionText, styles.dangerText]}>Block {chatData.name}</Text>
               <BanIcon fill={Colors.RED} />
             </TouchableOpacity>

src/screens/InAppScreens/MessagesScreen/Components/OptionsMenu.tsx

@@ -50,10 +50,10 @@ const OptionsMenu: React.FC<OptionsMenuProps> = ({
         <Text style={styles.optionText}>Delete</Text>
         <MaterialCommunityIcons name="delete" size={20} color={Colors.DARK_BLUE} />
       </TouchableOpacity>
-      <TouchableOpacity style={styles.optionButton} onPress={() => handleOptionPress('pin')}>
+      {/* <TouchableOpacity style={styles.optionButton} onPress={() => handleOptionPress('pin')}>
         <Text style={styles.optionText}>Pin message</Text>
         <MaterialCommunityIcons name="pin" size={20} color={Colors.DARK_BLUE} />
-      </TouchableOpacity>
+      </TouchableOpacity> */}
     </Animated.View>
   );
 

src/screens/InAppScreens/MessagesScreen/Components/SwipeableRow.tsx

@@ -57,7 +57,7 @@ const SwipeableRow: React.FC<AppleStyleSwipeableRowProps> = ({
             uid: chat.uid,
             name: chat.name,
             avatar: chat.avatar,
-            mute: chat.muted,
+            muted: chat.muted,
             token: token,
             refetch,
           } as any

src/screens/InAppScreens/MessagesScreen/constants.ts

@@ -1,7 +1,12 @@
-import { Routes } from "./types";
+import { Routes } from './types';
 
 export const routes: Routes[] = [
   { key: 'all', title: 'All' },
   { key: 'unread', title: 'Unread' },
-  { key: 'archived', title: 'Archived' }
+  { key: 'archived', title: 'Archived' },
+  {
+    key: 'blocked',
+    title: 'Blocked',
+    icon: 'ban'
+  }
 ];

src/screens/InAppScreens/MessagesScreen/index.tsx

@@ -17,7 +17,7 @@ import { SheetManager } from 'react-native-actions-sheet';
 import MoreModal from './Components/MoreModal';
 import SearchIcon from 'assets/icons/search.svg';
 import { storage, StoreType } from 'src/storage';
-import { usePostDeleteChatMutation, usePostGetChatsListQuery } from '@api/chat';
+import { usePostGetChatsListQuery } from '@api/chat';
 import { Chat } from './types';
 
 import PinIcon from 'assets/icons/messages/pin.svg';
@@ -40,10 +40,8 @@ const MessagesScreen = () => {
     archived: Chat[];
   }>({ all: [], unread: [], archived: [] });
   const [search, setSearch] = useState('');
-  const { mutateAsync: deleteChat } = usePostDeleteChatMutation();
   const openRowRef = useRef<any>(null);
-  const { isWarningModalVisible, setIsWarningModalVisible, selectedChat, setSelectedChat } =
-    useChatStore();
+  const { isWarningModalVisible, setIsWarningModalVisible } = useChatStore();
 
   const handleRowOpen = (ref: any) => {
     if (openRowRef.current && openRowRef.current !== ref) {
@@ -92,18 +90,6 @@ const MessagesScreen = () => {
     filterChatsByTab();
   }, [chats, index]);
 
-  const handleDeleteChat = async () => {
-    if (!selectedChat) return;
-
-    await deleteChat({
-      token: token,
-      conversation_with_user: selectedChat.uid
-    });
-
-    refetch();
-    setSelectedChat(null);
-  };
-
   const searchFilter = (text: string) => {
     if (text) {
       const newData =
@@ -239,11 +225,12 @@ const MessagesScreen = () => {
       <MoreModal />
       <WarningModal
         type={'delete'}
-        isVisible={isWarningModalVisible}
-        onClose={() => setIsWarningModalVisible(false)}
-        title="Delete conversation"
-        message={`Are you sure you want to delete conversation with ${selectedChat?.name}?\nThis conversation will be deleted for both sides.`}
-        action={handleDeleteChat}
+        buttonTitle={isWarningModalVisible?.buttonTitle ?? 'Delete'}
+        isVisible={!!isWarningModalVisible}
+        onClose={() => setIsWarningModalVisible(null)}
+        title={isWarningModalVisible?.title}
+        message={isWarningModalVisible?.message}
+        action={isWarningModalVisible?.action}
       />
     </PageWrapper>
   );

src/screens/InAppScreens/MessagesScreen/types.ts

@@ -67,6 +67,14 @@ export type Reaction = {
 };
 
 export type Routes = {
-  key: 'all' | 'unread' | 'archived';
+  key: 'all' | 'unread' | 'archived' | 'blocked';
   title: string;
+  icon?: string;
+};
+
+export type WarningProps = {
+  title: string;
+  buttonTitle?: string;
+  message: string;
+  action: () => void;
 };

src/stores/chatStore.ts

@@ -1,16 +1,16 @@
 import { create } from 'zustand';
-import { ChatProps } from 'src/screens/InAppScreens/MessagesScreen/types';
+import { ChatProps, WarningProps } from 'src/screens/InAppScreens/MessagesScreen/types';
 
 interface ChatStore {
   selectedChat: ChatProps | null;
   setSelectedChat: (chat: ChatProps | null) => void;
-  isWarningModalVisible: boolean;
-  setIsWarningModalVisible: (value: boolean) => void;
+  isWarningModalVisible: WarningProps | null;
+  setIsWarningModalVisible: (value: WarningProps | null) => void;
 }
 
 export const useChatStore = create<ChatStore>((set) => ({
   selectedChat: null,
   setSelectedChat: (chat) => set({ selectedChat: chat }),
-  isWarningModalVisible: false,
+  isWarningModalVisible: null,
   setIsWarningModalVisible: (value) => set({ isWarningModalVisible: value })
 }));