Edit Group Remove Api

akshay2742 · Mar 28, 2023 · 151c969 · 151c969
1 parent 15e23a7
commit 151c969
Show file tree

Hide file tree

Showing 11 changed files with 445 additions and 65 deletions.
diff --git a/backend/controllers/chatControllers.js b/backend/controllers/chatControllers.js
@@ -103,7 +103,7 @@ const createGroupChat = asyncHandler(async (req, res) => {
 const renameGroup = asyncHandler(async (req, res) => {
   const { chatId, chatName } = req.body;
 
-  const updatedChat = await Chat.findOneAndUpdate(
+  const updatedChat = await Chat.findByIdAndUpdate(
     chatId,
     {
       chatName: chatName,
@@ -124,7 +124,7 @@ const renameGroup = asyncHandler(async (req, res) => {
 const addToGroup = asyncHandler(async (req, res) => {
   const { chatId, userId } = req.body;
 
-  const addUser = await Chat.findOneAndUpdate(
+  const addUser = await Chat.findByIdAndUpdate(
     chatId,
     {
       $push: { users: userId },
@@ -144,8 +144,9 @@ const addToGroup = asyncHandler(async (req, res) => {
 
 const removeFromGroup = asyncHandler(async (req, res) => {
   const { chatId, userId } = req.body;
+  console.log(req.body);
 
-  const removeUser = await Chat.findOneAndUpdate(
+  const removeUser = await Chat.findByIdAndUpdate(
     chatId,
     {
       $pull: { users: userId },
@@ -154,12 +155,21 @@ const removeFromGroup = asyncHandler(async (req, res) => {
   )
     .populate("users", "-password")
     .populate("groupAdmin", "-password");
-
-  if (!removeUser) {
-    res.status(400);
-    throw new Error("Chat Not Found");
+  if (removeUser.users.length == 1) {
+    await Chat.findByIdAndDelete(chatId);
+    return;
   } else {
-    res.json(removeUser);
+    if (removeUser.groupAdmin._id == userId) {
+      removeUser.groupAdmin = removeUser.users[0];
+      await removeUser.save();
+    }
+
+    if (!removeUser) {
+      res.status(400);
+      throw new Error("Chat Not Found");
+    } else {
+      res.json(removeUser);
+    }
   }
 });
 

diff --git a/backend/controllers/userControllers.js b/backend/controllers/userControllers.js
@@ -41,7 +41,9 @@ const registerUser = asyncHandler(async (req, res) => {
     country,
     email,
     phonenumber,
-    pic: pic,
+    pic:
+      pic ||
+      "https://icon-library.com/images/anonymous-avatar-icon/anonymous-avatar-icon-25.jpg",
     password,
   });
 

diff --git a/frontend/src/Components/SingleChat.js b/frontend/src/Components/SingleChat.js
@@ -12,6 +12,7 @@ import Icon from "../Images/Chatpage.svg";
 import { BsFillArrowLeftCircleFill } from "react-icons/bs";
 import { getSender, getSenderFull } from "../config/ChatLogics";
 import ProfileModal from "./miscellaneous/ProfileModal";
+import UpdateGroupChat from "./miscellaneous/UpdateGroupChat";
 
 const SingleChat = ({ fetchAgain, setFetchAgain }) => {
   const { user, selectedChat, setSelectedChat } = ChatState();
@@ -55,31 +56,29 @@ const SingleChat = ({ fetchAgain, setFetchAgain }) => {
                   <Text fontSize={{ base: "20px", md: "25px" }}>
                     {getSender(user, selectedChat.users).toUpperCase()}
                   </Text>
-                  {/* <UpdateGroupChat
-                  fetchAgain={fetchAgain}
-                  setFetchAgain={setFetchAgain}
-                /> */}
                 </Box>
                 <ProfileModal user={getSenderFull(user, selectedChat.users)} />
               </>
             ) : (
               <>
                 <Box display="flex" justifyContent="center" alignItems="center">
-                  <Avatar
-                    size="sm"
-                    cursor="pointer"
-                    name={selectedChat.chatName}
-                    bg="#4FB2E5"
-                    mr={1}
-                  />
+                  <UpdateGroupChat>
+                    <Avatar
+                      size="sm"
+                      cursor="pointer"
+                      name={selectedChat.chatName}
+                      bg="#4FB2E5"
+                      mr={1}
+                    />
+                  </UpdateGroupChat>
                   <Text fontSize={{ base: "20px", md: "25px" }}>
                     {selectedChat.chatName.toUpperCase()}
                   </Text>
-                  {/* <UpdateGroupChat
+                </Box>
+                <UpdateGroupChat
                   fetchAgain={fetchAgain}
                   setFetchAgain={setFetchAgain}
-                /> */}
-                </Box>
+                />
               </>
             )}
           </Box>

diff --git a/frontend/src/Components/UserAvatar/UserBatchItem.js b/frontend/src/Components/UserAvatar/UserBatchItem.js
@@ -6,7 +6,12 @@ import { IoCloseSharp } from "react-icons/io5";
 const CrossIcon = styled(IoCloseSharp)`
   padding-left: 5px;
 `;
-const UserBatchItem = ({ user, handleFunction }) => {
+const UserBatchItem = ({
+  color = "#4FB2E5",
+  hover = "#298bbd",
+  user,
+  handleFunction,
+}) => {
   return (
     <Box
       display="flex"
@@ -19,11 +24,11 @@ const UserBatchItem = ({ user, handleFunction }) => {
       mb={2}
       variant="solid"
       fontSize={12}
-      backgroundColor="#4FB2E5"
+      backgroundColor={color}
       color="black"
       cursor="pointer"
       _hover={{
-        background: "#298bbd",
+        background: { hover },
         color: "white",
       }}
       onClick={handleFunction}

diff --git a/frontend/src/Components/miscellaneous/GroupChatModal.js b/frontend/src/Components/miscellaneous/GroupChatModal.js
@@ -45,12 +45,13 @@ const GroupChatModal = ({ children }) => {
           Authorization: `Bearer ${user.token}`,
         },
       };
-      const { data } = await axios.get(`/api/user?search=${search}`, config);
+
+      const { data } = await axios.get(`/api/user?search=${query}`, config);
       setLoading(false);
       setSearchResults(data);
     } catch (error) {
       setToastShow(true);
-      setToastText(error.response.data.message);
+      setToastText("Failed Loading Users");
       setToastIcon("failed");
 
       setTimeout(() => {
@@ -89,10 +90,13 @@ const GroupChatModal = ({ children }) => {
         config
       );
       setChats([data, ...chats]);
+      setSelectedUsers([]);
+      setGroupChatName("");
+      setSearch("");
       onClose();
     } catch (error) {
       setToastShow(true);
-      setToastText("Failed Creating Group");
+      setToastText(error.response.data.message);
       setToastIcon("failed");
       setTimeout(() => {
         setToastShow(false);
@@ -111,9 +115,14 @@ const GroupChatModal = ({ children }) => {
         setToastText("");
         setToastIcon("");
       }, 1500);
+      setSearch("");
+      setSearchResults([]);
       return;
+    } else {
+      setSelectedUsers([...selectedUsers, userToAdd]);
+      setSearch("");
+      setSearchResults([]);
     }
-    setSelectedUsers([...selectedUsers, userToAdd]);
   };
   const handleDelete = (delUser) => {
     setSelectedUsers(selectedUsers.filter((u) => u._id !== delUser._id));
@@ -122,35 +131,43 @@ const GroupChatModal = ({ children }) => {
     <>
       <span onClick={onOpen}>{children}</span>
 
-      <Modal closeOnOverlayClick={false} isOpen={isOpen} onClose={onClose}>
+      <Modal
+        closeOnOverlayClick={false}
+        isOpen={isOpen}
+        onClose={onClose}
+        isCentered
+      >
         <ModalOverlay />
         <ModalContent>
-          <ModalHeader display="flex" fontSize="38px" justifyContent="center">
-            Create Group Chat{" "}
+          <ModalHeader display="flex" fontSize="30px" justifyContent="center">
+            Create Group Chat
           </ModalHeader>
           <ModalCloseButton />
           <ModalBody display="flex" flexDir="column" alignItems="center">
             <FormControl>
               <Input
                 placeholder="Group Chat Name"
                 mb={3}
+                value={groupChatName}
                 onChange={(e) => setGroupChatName(e.target.value)}
               />
             </FormControl>
             <FormControl>
               <Input
                 placeholder="Add Users eg: Akshay, Yash, Vaniya"
                 mb={1}
+                value={search}
                 onChange={(e) => handleSearch(e.target.value)}
               />
             </FormControl>
             <Box display="flex" w="100%" flexWrap="wrap">
               {selectedUsers.map((u) => (
-                <UserBatchItem
-                  key={user._id}
-                  user={u}
-                  handleFunction={() => handleDelete(u)}
-                />
+                <Box key={u._id}>
+                  <UserBatchItem
+                    user={u}
+                    handleFunction={() => handleDelete(u)}
+                  />
+                </Box>
               ))}
             </Box>
             {loading ? (

diff --git a/frontend/src/Components/miscellaneous/ProfileModal.js b/frontend/src/Components/miscellaneous/ProfileModal.js
@@ -37,7 +37,7 @@ const ProfileModal = ({ user, children }) => {
       <Modal size="lg" isOpen={isOpen} onClose={onClose} isCentered>
         <ModalOverlay />
         <ModalContent>
-          <ModalHeader display="flex" fontSize="40px" justifyContent="center">
+          <ModalHeader display="flex" fontSize="35px" justifyContent="center">
             {user.firstname + " " + user.lastname}
           </ModalHeader>
           <ModalCloseButton />
@@ -56,7 +56,7 @@ const ProfileModal = ({ user, children }) => {
               bg="teal.500"
               mb="20px"
             />
-            <Text fontSize={{ base: "20px", md: "25px" }}>
+            <Text fontSize={{ base: "20px", md: "20px" }}>
               Email: {user.email}
             </Text>
           </ModalBody>

diff --git a/frontend/src/Components/miscellaneous/SideDrawer.js b/frontend/src/Components/miscellaneous/SideDrawer.js
@@ -55,6 +55,7 @@ const SideDrawer = () => {
   const navigate = useNavigate();
   const logoutHandler = () => {
     localStorage.removeItem("userInfo");
+    setSelectedChat();
     navigate("/auth");
   };