Refactor Group Chats

import.sql

@@ -156,6 +156,7 @@ CREATE TABLE `npwd_messages_conversations`
     `createdAt`         TIMESTAMP    NOT NULL DEFAULT current_timestamp(),
     `updatedAt`         TIMESTAMP    NOT NULL DEFAULT current_timestamp(),
     `last_message_id`   INT(11)      NULL     DEFAULT NULL,
+    `createdBy`         varchar(48)  NOT NULL DEFAULT ''
     `is_group_chat`     TINYINT(4)   NOT NULL DEFAULT '0',
     PRIMARY KEY (`id`) USING BTREE
 );

phone/src/apps/messages/components/form/NewMessageGroupForm.tsx

@@ -31,6 +31,7 @@ const NewMessageGroupForm = ({ phoneNumber }: { phoneNumber?: string }) => {
       conversationLabel: isGroupChat ? conversationLabel : '',
       participants: [myPhoneNumber, ...selectedParticipants],
       isGroupChat,
+      createdBy: myPhoneNumber,
     };
 
     addConversation(dto);

phone/src/apps/messages/components/modal/GroupDetailsModal.tsx

@@ -3,6 +3,7 @@ import Modal from '@ui/components/Modal';
 import { Box, Button, Stack, Typography } from '@mui/material';
 import PersonIcon from '@mui/icons-material/Person';
 import PersonAddIcon from '@mui/icons-material/PersonAdd';
+import PersonRemoveIcon from '@mui/icons-material/PersonRemove';
 import { findParticipants } from '../../utils/helpers';
 import { useMyPhoneNumber } from '@os/simcard/hooks/useMyPhoneNumber';
 import { useContactActions } from '../../../contacts/hooks/useContactActions';
@@ -11,14 +12,20 @@ interface GroupDetailsModalProps {
   open: boolean;
   onClose: () => void;
   conversationList: string;
+  createdBy: string;
   addContact: (number: any) => void;
+  removeMember: (number: any) => void;
+  leaveGroup: () => void;
 }
 
 const GroupDetailsModal: React.FC<GroupDetailsModalProps> = ({
   open,
   onClose,
   conversationList,
+  createdBy,
   addContact,
+  removeMember,
+  leaveGroup,
 }) => {
   const myPhoneNumber = useMyPhoneNumber();
   const { getContactByNumber } = useContactActions();
@@ -33,13 +40,14 @@ const GroupDetailsModal: React.FC<GroupDetailsModalProps> = ({
     addContact(participant);
   };
 
+  const handleGroupRemove = (participant: string) => {
+    removeMember(participant);
+  };
+
   return (
     <Modal visible={open} handleClose={onClose}>
       <Box>
-        <Stack direction="row" spacing={4}>
-          <Typography fontSize={20}>Details</Typography>
-          {/*<Button size="small">Add participant</Button>*/}
-        </Stack>
+        <Typography fontSize={20}>Details</Typography>
       </Box>
       {participants.map((participant) => {
         const contact = findContact(participant);
@@ -51,15 +59,36 @@ const GroupDetailsModal: React.FC<GroupDetailsModalProps> = ({
                 <PersonIcon fontSize="medium" />
                 <Typography fontSize={18}>{contact?.display ?? participant}</Typography>
               </Stack>
-              {!contact && (
-                <Button onClick={() => handleAddContact(participant)}>
-                  <PersonAddIcon fontSize="medium" />
-                </Button>
-              )}
+              <Box>
+                {!contact && (
+                  <Button onClick={() => handleAddContact(participant)}>
+                    <PersonAddIcon fontSize="medium" />
+                  </Button>
+                )}
+                {myPhoneNumber === createdBy && (
+                  <Button onClick={() => handleGroupRemove(participant)}>
+                    <PersonRemoveIcon fontSize="medium" />
+                  </Button>
+                )}
+              </Box>
             </Box>
           </Box>
         );
       })}
+      <Box
+        sx={{
+          mt: 2,
+          display: 'flex',
+          justifyContent: 'space-evenly',
+        }}
+      >
+        <Button size="medium" onClick={leaveGroup}>
+          Leave Group
+        </Button>
+        {/* {myPhoneNumber === createdBy && (
+            <Button size="medium">Add participant</Button>
+          )} */}
+      </Box>
     </Modal>
   );
 };

phone/src/apps/messages/components/modal/MessageModal.tsx

@@ -67,6 +67,7 @@ export const MessageModal = () => {
   const { fetchMessages } = useMessageAPI();
   const { getLabelOrContact, getConversationParticipant } = useMessageActions();
   const { initializeCall } = useCall();
+  const { removeGroupMember, leaveGroup } = useMessageAPI();
 
   const { getContactByNumber } = useContactActions();
   const [messages, setMessages] = useMessagesState();
@@ -143,6 +144,22 @@ export const MessageModal = () => {
     return history.push(`/contacts/-1/?addNumber=${number}&referal=${referal}`);
   };
 
+  const handleGroupRemove = (number: string) => {
+    removeGroupMember(
+      activeMessageConversation.conversationList,
+      activeMessageConversation.id,
+      number,
+    );
+  };
+
+  const handleLeaveGroup = () => {
+    leaveGroup(
+      activeMessageConversation.conversationList,
+      activeMessageConversation.id,
+      myPhoneNumber,
+    );
+  };
+
   // This only gets used for 1 on 1 conversations
   let conversationList = activeMessageConversation.conversationList.split('+');
   conversationList = conversationList.filter((targetNumber) => targetNumber !== myPhoneNumber);
@@ -168,7 +185,10 @@ export const MessageModal = () => {
           open={isGroupModalOpen}
           onClose={closeGroupModal}
           conversationList={activeMessageConversation.conversationList}
+          createdBy={activeMessageConversation.createdBy}
           addContact={handleAddContact}
+          removeMember={handleGroupRemove}
+          leaveGroup={handleLeaveGroup}
         />
         {isGroupModalOpen && <Backdrop />}
         <Box

phone/src/apps/messages/hooks/useMessageAPI.ts

@@ -16,6 +16,7 @@ import { messageState, useSetMessages } from './state';
 import { useRecoilValueLoadable } from 'recoil';
 import { MockConversationServerResp } from '../utils/constants';
 import { useMyPhoneNumber } from '@os/simcard/hooks/useMyPhoneNumber';
+import Conversation from '../components/modal/Conversation';
 
 type UseMessageAPIProps = {
   sendMessage: ({ conversationId, message, tgtPhoneNumber }: PreDBMessage) => void;
@@ -25,6 +26,12 @@ type UseMessageAPIProps = {
   deleteConversation: (conversationIds: number[]) => void;
   fetchMessages: (conversationId: string, page: number) => void;
   setMessageRead: (conversationId: number) => void;
+  removeGroupMember: (
+    conversationList: string,
+    conversationId: number,
+    phoneNumber: string,
+  ) => void;
+  leaveGroup: (conversationList: string, conversationId: number, phoneNumber: string) => void;
 };
 
 export const useMessageAPI = (): UseMessageAPIProps => {
@@ -35,6 +42,7 @@ export const useMessageAPI = (): UseMessageAPIProps => {
     deleteLocalMessage,
     updateLocalConversations,
     removeLocalConversation,
+    removeLocalGroupMember,
     setMessageReadState,
   } = useMessageActions();
   const history = useHistory();
@@ -136,6 +144,7 @@ export const useMessageAPI = (): UseMessageAPIProps => {
           conversationLabel: conversation.conversationLabel,
           participants: conversation.participants,
           isGroupChat: conversation.isGroupChat,
+          createdBy: conversation.createdBy,
         },
       ).then((resp) => {
         if (resp.status !== 'ok') {
@@ -178,6 +187,7 @@ export const useMessageAPI = (): UseMessageAPIProps => {
           isGroupChat: resp.data.isGroupChat,
           unread: 0,
           unreadCount: 0,
+          createdBy: resp.data.createdBy,
         });
 
         history.push(`/messages`);
@@ -236,6 +246,47 @@ export const useMessageAPI = (): UseMessageAPIProps => {
     [setMessages, addAlert, t, history],
   );
 
+  const removeGroupMember = useCallback(
+    (conversationList: string, conversationId: number, phoneNumber: string) => {
+      fetchNui<ServerPromiseResp<void>>(MessageEvents.REMOVE_GROUP_MEMBER, {
+        conversationList,
+        conversationId,
+        phoneNumber,
+        leaveGroup: false,
+      }).then((resp) => {
+        if (resp.status !== 'ok') {
+          return addAlert({
+            message: t('MESSAGES.FEEDBACK.REMOVE_GROUP_MEMBER_FAILED'),
+            type: 'error',
+          });
+        }
+        removeLocalGroupMember(conversationId, phoneNumber);
+      });
+    },
+    [addAlert, removeLocalGroupMember, t],
+  );
+
+  const leaveGroup = useCallback(
+    (conversationList: string, conversationId: number, phoneNumber: string) => {
+      fetchNui<ServerPromiseResp<void>>(MessageEvents.REMOVE_GROUP_MEMBER, {
+        conversationList,
+        conversationId,
+        phoneNumber,
+        leaveGroup: true,
+      }).then((resp) => {
+        if (resp.status !== 'ok') {
+          return addAlert({
+            message: t('MESSAGES.FEEDBACK.LEAVE_GROUP_FAILED'),
+            type: 'error',
+          });
+        }
+        removeLocalConversation([conversationId]);
+        return history.push('/messages');
+      });
+    },
+    [addAlert, history, removeLocalConversation, t],
+  );
+
   return {
     sendMessage,
     deleteMessage,
@@ -244,5 +295,7 @@ export const useMessageAPI = (): UseMessageAPIProps => {
     fetchMessages,
     sendEmbedMessage,
     setMessageRead,
+    removeGroupMember,
+    leaveGroup,
   };
 };

phone/src/apps/messages/hooks/useMessageActions.ts

@@ -3,6 +3,7 @@ import {
   useConversationId,
   useSetMessageConversations,
   useSetMessages,
+  useMessageConversationsValue,
 } from './state';
 import { useCallback } from 'react';
 import { Message, MessageConversation } from '@typings/messages';
@@ -19,6 +20,7 @@ interface MessageActionProps {
   setMessageReadState: (conversationId: number, unreadCount: number) => void;
   getLabelOrContact: (messageConversation: MessageConversation) => string;
   getConversationParticipant: (conversationList: string) => Contact | null;
+  removeLocalGroupMember: (conversationId: number, phoneNumber: string) => void;
 }
 
 export const useMessageActions = (): MessageActionProps => {
@@ -91,6 +93,27 @@ export const useMessageActions = (): MessageActionProps => {
     [setMessageConversation, conversationLoading, conversations],
   );
 
+  const removeLocalGroupMember = useCallback(
+    (conversationsId: number, phoneNumber: string) => {
+      setMessageConversation((curVal) =>
+        curVal.map((conversation) => {
+          if (conversation.id === conversationsId) {
+            const conversationListRemove = conversation.conversationList
+              .split('+')
+              .filter((number) => number !== phoneNumber)
+              .join('+');
+            return {
+              ...conversation,
+              conversationList: conversationListRemove,
+            };
+          }
+          return conversation;
+        }),
+      );
+    },
+    [setMessageConversation],
+  );
+
   const updateLocalMessages = useCallback(
     (messageDto: Message) => {
       if (messageLoading !== 'hasValue') return;
@@ -136,5 +159,6 @@ export const useMessageActions = (): MessageActionProps => {
     setMessageReadState,
     getLabelOrContact,
     getConversationParticipant,
+    removeLocalGroupMember,
   };
 };

phone/src/apps/messages/hooks/useMessageService.ts

@@ -1,14 +1,24 @@
 import { useNuiEvent } from 'fivem-nui-react-lib';
-import { Message, MessageConversation, MessageEvents } from '@typings/messages';
+import {
+  Message,
+  MessageConversation,
+  MessageEvents,
+  RemoveGroupMemberResponse,
+} from '@typings/messages';
 import { useMessageActions } from './useMessageActions';
 import { useCallback } from 'react';
 import { useMessageNotifications } from './useMessageNotifications';
 import { useLocation } from 'react-router';
 import { useActiveMessageConversation } from './state';
 
 export const useMessagesService = () => {
-  const { updateLocalMessages, updateLocalConversations, setMessageReadState } =
-    useMessageActions();
+  const {
+    updateLocalMessages,
+    updateLocalConversations,
+    setMessageReadState,
+    removeLocalConversation,
+    removeLocalGroupMember,
+  } = useMessageActions();
   const { setNotification } = useMessageNotifications();
   const { pathname } = useLocation();
   const activeConversation = useActiveMessageConversation();
@@ -42,12 +52,29 @@ export const useMessagesService = () => {
         conversationList: conversation.conversationList,
         label: conversation.label,
         unread: 0,
+        createdBy: conversation.createdBy,
       });
     },
     [updateLocalConversations],
   );
 
+  const handleDeleteConversation = useCallback(
+    (conversationId: number[]) => {
+      removeLocalConversation(conversationId);
+    },
+    [removeLocalConversation],
+  );
+
+  const handleRemoveGroupMember = useCallback(
+    (conversation: RemoveGroupMemberResponse) => {
+      removeLocalGroupMember(conversation.conversationId, conversation.phoneNumber);
+    },
+    [removeLocalGroupMember],
+  );
+
   useNuiEvent('MESSAGES', MessageEvents.CREATE_MESSAGE_BROADCAST, handleMessageBroadcast);
   useNuiEvent('MESSAGES', MessageEvents.SEND_MESSAGE_SUCCESS, handleUpdateMessages);
   useNuiEvent('MESSAGES', MessageEvents.CREATE_MESSAGE_CONVERSATION_SUCCESS, handleAddConversation);
+  useNuiEvent('MESSAGES', MessageEvents.REMOVE_GROUP_MEMBER_CONVERSATION, handleDeleteConversation);
+  useNuiEvent('MESSAGES', MessageEvents.REMOVE_GROUP_MEMBER_LIST, handleRemoveGroupMember);
 };

phone/src/apps/messages/utils/constants.ts

@@ -10,6 +10,7 @@ export const MockMessageConversations: MessageConversation[] = [
     label: '',
     updatedAt: 5,
     isGroupChat: false,
+    createdBy: '111-1134',
   },
   {
     id: 2,
@@ -19,6 +20,7 @@ export const MockMessageConversations: MessageConversation[] = [
     label: 'Secret Project Error chat',
     updatedAt: 5,
     isGroupChat: true,
+    createdBy: '111-1134',
   },
 ];
 

phone/src/locale/en.json

@@ -219,7 +219,9 @@
         "FETCHED_MESSAGES_FAILED": "Failed to retrieve messages",
         "DELETE_MESSAGE": "Delete message",
         "DELETE_MESSAGE_FAILED": "Failed to delete message",
-        "DELETE_CONVERSATION_FAILED": "Failed to delete conversation"
+        "DELETE_CONVERSATION_FAILED": "Failed to delete conversation",
+        "REMOVE_GROUP_MEMBER_FAILED": "Failed to remove member",
+        "LEAVE_GROUP_FAILED": "Failed to leave group"
       },
       "SEARCH_PLACEHOLDER": "Search messages...",
       "DELETE_CONVERSATION": "Delete conversation",