Update Group Modal UI

IT18021080/Telemedicine-Chat-App/frontend/src/components/SingleChat.js

@@ -4,6 +4,7 @@ import { ChatState } from "../Context/ChatProvider";
 import { ArrowBackIcon } from "@chakra-ui/icons";
 import { getSender, getSenderFull } from "../config/ChatLogics";
 import ProfileModal from "./miscellaneous/ProfileModal";
+import UpdateGroupChatModal from "./miscellaneous/UpdateGroupChatModal";
 
 
 const SingleChat = ({ fetchAgain, setFetchAgain }) => {
@@ -37,13 +38,26 @@ const SingleChat = ({ fetchAgain, setFetchAgain }) => {
                         ) : (
                                 <>
                                     {selectedChat.chatName.toUpperCase()}
-                                   {/* <UpdateGroupChatModal
+                                   <UpdateGroupChatModal
                                         fetchAgain={fetchAgain}
-                                        setFetchAgain={setSelectedChat}
-                                    />*/ }
+                                        setFetchAgain={setFetchAgain}
+                                    />
                                 </>
                         )}
                     </Text>
+                    <Box
+                        display="flex"
+                        flexDir="column"
+                        justifyContent="flex-end"
+                        padding={3}
+                        bg="#E8E8E8 " //#7CB9E8
+                        width="100%"
+                        height="100%"
+                        borderRadius="lg"
+                        overflowY="hidden"
+                    >
+                        {/* Messages Here */}
+                    </Box>
                 </>
         ) : (
                 <Box display="flex" alignItems="center" justifyContent="center" height="100%">

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

@@ -74,6 +74,7 @@ const GroupChatModal = ({ children }) => {
                 "/api/chat/group",
                 {
                     name:groupChatName,
+                    
                     users:JSON.stringify(selectedUsers.map((u) => u._id)),
                 },
                 config

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 { ViewIcon } from "@chakra-ui/icons";
+import { ChatState } from "../../Context/ChatProvider";
+import UserBadgeItem from "../UserAvatar/UserBadgeItem";
+
+const UpdateGroupChatModal = ({ fetchAgain, setFetchAgain }) => {
+
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const [groupChatName, setGroupChatName] = useState();
+    const [search, setSearch] = useState("");
+    const [searchResult, setSearchResult] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [renameloading, setRenameloading] = useState(false);
+
+    const toast = useToast();
+
+    const { selectedChat, setSelectedChat, user } = ChatState();
+
+    const handleRemove = () => { };
+
+    const handleRename = () => { };
+
+    const handleSearch = () => { };
+
+
+
+    return (
+        <>
+      <IconButton display={{base:"flex"}} icon={<ViewIcon/>} onClick={onOpen}/>
+    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+        <ModalOverlay />
+        <ModalContent>
+                    <ModalHeader
+                        fontSize="35px"
+                        fontFamily="Work sans"
+                        display="flex"
+                        justifyContent="center"
+                    >
+                        {selectedChat.chatName.toUpperCase()}
+                    </ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+                        <Box width="100%" display="flex" flexWrap="wrap" pb={3}>
+                            {selectedChat.users.map((u) => (
+                                 <UserBadgeItem
+                                key={user._id}
+                                user={u}
+                                handleFunction={() => handleRemove(u)}
+                            />
+                            ))}
+                        </Box>
+                        <FormControl display="flex">
+                            <Input
+                                placeholder="Organization Name" //chat name
+                                mb={3}
+                                value={groupChatName}
+                                onChange={(e)=>setGroupChatName(e.target.value)}
+                            />
+                            <Button
+                                variant="solid"
+                                colorScheme="teal"
+                                ml={1}
+                                isLoading={renameloading}
+                                onClick={handleRename}
+                            >
+                                Update
+                            </Button>
+
+                        </FormControl>
+                        <FormControl>
+                            <Input
+                                placeholder="Add User to Organization"
+                                mb={1}
+                                onChange={(e)=>handleSearch(e.target.value)}
+                            />
+                        </FormControl>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button onClick={() => handleRemove(user)} colorScheme="red">
+                Leave Group
+            </Button>
+            
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+    );
+};
+    
+export default UpdateGroupChatModal;
\ No newline at end of file