Solved Issue #16: Incorrect users in dropdown while adding a user to the group.

.gitignore

@@ -1,4 +1,4 @@
 /node_modules
 node_modules/
 /frontend/node_modules/
-.env
+/backend/.env

backend/server.js

@@ -11,6 +11,7 @@ dotenv.config();
 connectDB();
 const app = express();
 
+const User = require("../backend/models/userModel");
 app.use(express.json()); // to accept json data
 
 // app.get("/", (req, res) => {
@@ -21,6 +22,30 @@ app.use("/api/user", userRoutes);
 app.use("/api/chat", chatRoutes);
 app.use("/api/message", messageRoutes);
 
+app.post("/api/updatePic", (req,res) => {
+  const {pic,user} = req.body
+  console.log(pic,user.email)
+  const update = async() => {
+    const result = await User.updateOne(
+            {
+                email:user.email,
+            },
+            {
+                $set: {
+                    pic:pic,
+                }
+            }
+        )
+        console.log(result)
+        res.status(200).send("updated Image")
+  }
+  update()
+
+})
+
+
+
+
 // --------------------------deployment------------------------------
 
 const __dirname1 = path.resolve();

frontend/src/Pages/Chatpage.js

@@ -6,7 +6,7 @@ import SideDrawer from "../components/miscellaneous/SideDrawer";
 import { ChatState } from "../Context/ChatProvider";
 
 const Chatpage = () => {
-  const [fetchAgain, setFetchAgain] = useState(false);
+  const [fetchAgain, setFetchAgain] = useState(true);
   const { user } = ChatState();
 
   return (

frontend/src/components/miscellaneous/EditProfile.js

@@ -0,0 +1,176 @@
+import { ViewIcon } from "@chakra-ui/icons";
+import { Button } from "@chakra-ui/button";
+import { FormControl, FormLabel } from "@chakra-ui/form-control";
+import { Input, InputGroup, InputRightElement } from "@chakra-ui/input";
+
+import { useToast } from "@chakra-ui/toast";
+import axios from "axios";
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  useDisclosure,
+  IconButton,
+  Text,
+  Image,
+} from "@chakra-ui/react";
+
+import { useState } from "react";
+import { useHistory } from "react-router";
+
+const EditModal = ({ user, children }) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+   const toast = useToast();
+  const history = useHistory();
+  const [pic, setPic] = useState();
+  const [picLoading, setPicLoading] = useState(false);
+
+  const submitHandler = async () => {
+    console.log("uploading", pic)
+    try {
+      const config = {
+        headers: {
+          "Content-type": "application/json",
+        },
+      };
+      const { data } = await axios.post(
+        "/api/updatePic",
+        {
+          user,
+          pic,
+        },
+        config
+      );
+      console.log(data);
+      toast({
+        title: "Updated Image",
+        status: "success",
+        duration: 5000,
+        isClosable: true,
+        position: "bottom",
+      });
+      var loc = localStorage.getItem('userInfo');
+      const existing = JSON.parse(loc)
+      console.log("l",existing)
+      existing.pic = pic
+      console.log(existing)
+      localStorage.setItem("userInfo", JSON.stringify(existing));
+      setPicLoading(false);
+    } catch (error) {
+      toast({
+        title: "Error Occured!",
+        description: error.response.data.message,
+        status: "error",
+        duration: 5000,
+        isClosable: true,
+        position: "bottom",
+      });
+      setPicLoading(false);
+    }
+  };
+
+  const postDetails = (pics) => {
+    setPicLoading(true);
+    console.log("in details")
+    if (pics === undefined) {
+      toast({
+        title: "Please Select an Image!",
+        status: "warning",
+        duration: 5000,
+        isClosable: true,
+        position: "bottom",
+      });
+      return;
+    }
+    console.log(pics);
+    if (pics.type === "image/jpeg" || pics.type === "image/png") {
+      const data = new FormData();
+      data.append("file", pics);
+      data.append("upload_preset", "chat-app");
+      data.append("cloud_name", "piyushproj");
+      fetch("https://api.cloudinary.com/v1_1/piyushproj/image/upload", {
+        method: "post",
+        body: data,
+      })
+        .then((res) => res.json())
+        .then((data) => {
+          setPic(data.url.toString());
+          console.log(data.url.toString());
+          setPicLoading(false);
+        })
+        .catch((err) => {
+          console.log(err);
+          setPicLoading(false);
+        });
+    } else {
+      toast({
+        title: "Please Select an Image!",
+        status: "warning",
+        duration: 5000,
+        isClosable: true,
+        position: "bottom",
+      });
+      setPicLoading(false);
+      return;
+    }
+  };
+
+
+  return (
+    <>
+      {children ? (
+        <span onClick={onOpen}>{children}</span>
+      ) : (
+        <IconButton d={{ base: "flex" }} icon={<ViewIcon />} onClick={onOpen} />
+      )}
+      <Modal size="lg" onClose={onClose} isOpen={isOpen} isCentered>
+        <ModalOverlay />
+        <ModalContent h="410px">
+          <ModalHeader
+            fontSize="40px"
+            fontFamily="Work sans"
+            d="flex"
+            justifyContent="center"
+          >
+            {user.name}
+          </ModalHeader>
+          <ModalCloseButton />
+          <ModalBody
+            d="flex"
+            flexDir="column"
+            alignItems="center"
+            justifyContent="space-between"
+          >
+            <FormControl id="pic">
+        <FormLabel>Upload your Picture</FormLabel>
+        <Input
+          type="file"
+          p={1.5}
+          accept="image/*"
+          onChange={(e) => postDetails(e.target.files[0])}
+        />
+      </FormControl>
+      <Button
+        colorScheme="blue"
+        width="100%"
+        style={{ marginTop: 15 }}
+        onClick={submitHandler}
+         isLoading={picLoading}
+      >
+        Upload
+      </Button>
+          </ModalBody>
+          <ModalFooter>
+            <Button onClick={onClose}>Close</Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default EditModal;

frontend/src/components/miscellaneous/SideDrawer.js

@@ -26,6 +26,7 @@ import { useToast } from "@chakra-ui/toast";
 import ChatLoading from "../ChatLoading";
 import { Spinner } from "@chakra-ui/spinner";
 import ProfileModal from "./ProfileModal";
+import EditModal from "./EditProfile"
 import NotificationBadge from "react-notification-badge";
 import { Effect } from "react-notification-badge";
 import { getSender } from "../../config/ChatLogics";
@@ -185,6 +186,11 @@ function SideDrawer() {
               </ProfileModal>
               <MenuDivider />
               <MenuItem onClick={logoutHandler}>Logout</MenuItem>
+              <MenuDivider/>
+              <EditModal user={user}>
+                <MenuItem>Edit Profile</MenuItem>
+              </EditModal>
+
             </MenuList>
           </Menu>
         </div>

frontend/src/components/miscellaneous/UpdateGroupChatModal.js

@@ -47,7 +47,6 @@ const UpdateGroupChatModal = ({ fetchMessages, fetchAgain, setFetchAgain }) => {
         },
       };
       const { data } = await axios.get(`/api/user?search=${search}`, config);
-      console.log(data);
       setLoading(false);
       setSearchResult(data);
     } catch (error) {
@@ -62,7 +61,7 @@ const UpdateGroupChatModal = ({ fetchMessages, fetchAgain, setFetchAgain }) => {
       setLoading(false);
     }
   };
-
+  
   const handleRename = async () => {
     if (!groupChatName) return;
 

frontend/src/components/userAvatar/UserListItem.js

@@ -1,9 +1,11 @@
 import { Avatar } from "@chakra-ui/avatar";
 import { Box, Text } from "@chakra-ui/layout";
-import { ChatState } from "../../Context/ChatProvider";
+//import { ChatState } from "../../Context/ChatProvider";
 
-const UserListItem = ({ handleFunction }) => {
-  const { user } = ChatState();
+const UserListItem = (props) => {
+  // const { user } = ChatState();
+  const user = props.user
+  const handleFunction = props.handleFunction
 
   return (
     <Box