Create Group Chat Modal Part 2

IT18021080/Telemedicine-Chat-App/frontend/src/components/UserAvatar/UserBadgeItem.js

+import React from "react";
+import { Box } from "@chakra-ui/react";
+import { CloseIcon } from "@chakra-ui/icons";
+
+const UserBadgeItem = ({ user, handleFunction }) => {
+    return (
+        <Box
+            px={2}
+            py={1}
+            borderRadius="lg"
+            m={1}
+            mb={2}
+            variant="solid"
+            fontSize={12}
+            backgroundColor="purple"
+            color="white"
+            cursor="pointer"
+            onClick={handleFunction}
+        >
+          
+            {user.name}
+            <CloseIcon pl={1}/>
+
+        </Box>
+    );
+};
+
+export default UserBadgeItem;
\ No newline at end of file

IT18021080/Telemedicine-Chat-App/frontend/src/components/miscellaneous/GroupChatModal.js

 import React, { useState } from "react";
-import { useDisclosure, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Button, useToast, FormControl, Input } from "@chakra-ui/react";
+import { useDisclosure, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Button, useToast, FormControl, Input, Box } from "@chakra-ui/react";
 import { ChatState } from "../../Context/ChatProvider";
 import axios from "axios";
 import UserListItem from "../UserAvatar/UserListItem";
+import UserBadgeItem from "../UserAvatar/UserBadgeItem";
 
 
 
@@ -50,9 +51,73 @@ const GroupChatModal = ({ children }) => {
         }
     };
 
-    const handleSubmit = () => { };
+    const handleSubmit = async () => {
+        if (!groupChatName || !selectedUsers) {
+            toast({
+                title: "Please fill all the feilds",
+                status: "warning",
+                duration: 5000,
+                isClosable: true,
+                position: "top",
+            });
+            return;
+        }
+
+        try {
+            const config = {
+                headers: {
+                    Authorization: `Bearer ${user.token}`,
+                },
+            };
+
+            const { data } = await axios.post(
+                "/api/chat/group",
+                {
+                name: groupChatName,
+                users: JSON.stringify(selectedUsers.map((u) => u._id)),
+            },
+            config    
+            );
+
+            setChats([data, ...chats]);
+            onClose();
+            toast({
+                title: "New Organization Chat Created!",
+                status: "success",
+                duration: 5000,
+                isClosable: true,
+                position:"bottom",
+            });
+        } catch (error) {
+            toast({
+                title: "Failed to Create the Organization Chat!",
+                description: error.response.data,
+                status: "error",
+                duration: 5000,
+                isClosable: true,
+                position:"bottom",
+            });
+        }
+    };
+
+    const handleDelete = (delUser) => {
+        setSelectedUsers(selectedUsers.filter((sel) => sel._id !== delUser._id));
+     };
 
-    const handleGroup = () => { };
+    const handleGroup = (userToAdd) => { 
+        if (selectedUsers.includes(userToAdd)) {
+            toast({
+                title: "User already added",
+                status: "warning",
+                duration: 5000,
+                isClosable: true,
+                position: "top",
+            });
+            return;
+        }
+
+        setSelectedUsers([...selectedUsers, userToAdd]);
+    };
 
     return (
         <>
@@ -85,7 +150,16 @@ const GroupChatModal = ({ children }) => {
                                 onChange={(e) => handleSearch(e.target.value)}
                             />       
             </FormControl>
-                        {/* selected users */} 
+            <Box w="100%" display="flex" flexWrap="wrap">                  
+                        {selectedUsers.map((u) => (
+                            <UserBadgeItem
+                                key={user._id}
+                                user={u}
+                                handleFunction={() => handleDelete(u)}
+                            />
+                        ))}
+            </Box>
+
                         {loading ? (
                             <div>loading</div>
                         ) : (