Add User/Rename group/Remover user Functions

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

 import React, { useState } from "react";
-import { IconButton, useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody,ModalFooter, Button, useToast, Box, FormControl, Input } from "@chakra-ui/react";
+import { IconButton, useDisclosure, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody,ModalFooter, Button, useToast, Box, FormControl, Input, Spinner } from "@chakra-ui/react";
 import { ViewIcon } from "@chakra-ui/icons";
 import { ChatState } from "../../Context/ChatProvider";
 import UserBadgeItem from "../UserAvatar/UserBadgeItem";
+import axios from "axios";
+import UserListItem from "../UserAvatar/UserListItem";
 
 const UpdateGroupChatModal = ({ fetchAgain, setFetchAgain }) => {
 
@@ -17,11 +19,189 @@ const UpdateGroupChatModal = ({ fetchAgain, setFetchAgain }) => {
 
     const { selectedChat, setSelectedChat, user } = ChatState();
 
-    const handleRemove = () => { };
+    const handleAddUser = async (user1) => { 
+        if (selectedChat.users.find((u) => u._id === user1._id)) {
+            toast({
+                title: "Member Already in Organization!",
+                status: "error",
+                duration: 5000,
+                isClosable: true,
+                position: "bottom",
+            });
+            return;
+        }
 
-    const handleRename = () => { };
+        if (selectedChat.groupAdmin._id !== user._id) {
+            toast({
+                title: "Only admins can add someone!",
+                status: "error",
+                duration: 5000,
+                isClosable: true,
+                position: "bottom",
+            });
+            return;
+        }
 
-    const handleSearch = () => { };
+        try {
+            setLoading(true);
+
+            const config = {
+                headers: {
+                    Authorization: `Bearer ${user.token}`,
+                    
+                },
+            };
+
+            const { data } = await axios.put(
+                "/api/chat/groupadd",
+                {
+                chatId: selectedChat._id,
+                userId: user1._id,
+                
+            },
+            config
+            );
+
+            setSelectedChat(data);
+            setFetchAgain(!fetchAgain);
+            setLoading(false);
+
+        } catch (error) {
+            toast({
+                title: "Error Occured!",
+                description: error.response.data.message,
+                status: "error",
+                duration: 5000,
+                isClosable: true,
+                position: "bottom",
+            });
+            setLoading(false);
+        }
+    };
+
+    const handleRemove = async (user1) => {
+        if (selectedChat.groupAdmin._id !== user._id && user1._id !== user._id) {
+            toast({
+                title: "Only admins can remove someone!",
+                status: "error",
+                duration: 5000,
+                isClosable: true,
+                position: "bottom",
+            });
+            return;
+        }
+
+        try {
+            setLoading(true);
+
+            const config = {
+                headers: {
+                    Authorization: `Bearer ${user.token}`,
+                    
+                },
+            };
+
+            const { data } = await axios.put(
+                `/api/chat/groupremove`,
+                {
+                chatId: selectedChat._id,
+                userId: user1._id,
+                
+            },
+            config
+            );
+
+            user1._id === user._id ? setSelectedChat() : setSelectedChat(data);
+            setFetchAgain(!fetchAgain);
+            setLoading(false);
+
+        } catch (error) {
+            toast({
+                title: "Error Occured!",
+                description: error.response.data.message,
+                status: "error",
+                duration: 5000,
+                isClosable: true,
+                position: "bottom",
+            });
+            setLoading(false);
+        }
+
+     };
+
+
+    const handleRename = async() => { 
+        if (!groupChatName) return;
+
+        
+        try {
+            setRenameloading(true);
+
+            const config = {
+                headers: {
+                    Authorization: `Bearer ${user.token}`,
+                    
+                },
+            };
+
+            const { data } = await axios.put(
+                "/api/chat/rename",
+                {
+                chatId: selectedChat._id,
+                chatName:groupChatName,
+            },
+            config
+            );
+
+            setSelectedChat(data);
+            setFetchAgain(!fetchAgain);
+            setRenameloading(false);
+
+        } catch (error) {
+            toast({
+                title: "Error Occured!",
+                description: error.response.data.message,
+                status: "error",
+                duration: 5000,
+                isClosable: true,
+                position: "bottom",
+            });
+            setRenameloading(false);
+        }
+
+        setGroupChatName("");
+    };
+
+    const handleSearch = async (query) => { 
+        setSearch(query);
+        if(!query){
+            return;
+        }
+
+        try {
+            setLoading(true);
+
+            const config = {
+                headers: {
+                    Authorization:`Bearer ${user.token}`,
+                },
+            };
+
+            const { data } = await axios.get(`/api/user?search=${search}`, config);
+            console.log(data);
+            setLoading(false);
+            setSearchResult(data);
+        } catch (error) {
+            toast({
+                title: "Error Occured!",
+                description: "Failed to Load the Search Result",
+                status: "error",
+                duration: 5000,
+                isClosable: true,
+                position:"bottom-left",
+            });
+        }
+    };
 
 
 
@@ -75,6 +255,17 @@ const UpdateGroupChatModal = ({ fetchAgain, setFetchAgain }) => {
                                 onChange={(e)=>handleSearch(e.target.value)}
                             />
                         </FormControl>
+                        {loading ? (
+                            <Spinner size="lg"/>
+                        ): (
+                                searchResult?.map((user) => (
+                                    <UserListItem
+                                        key={user._id}
+                                        user={user}
+                                        handleFunction={() => handleAddUser(user)}
+                                    />
+                            ))    
+                        )}
           </ModalBody>
 
           <ModalFooter>