piyush-eon · quantau · May 9, 2023 · May 9, 2023 · May 9, 2023 · May 10, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "githubPullRequests.ignoredPullRequestBranches": ["master"]
+}
diff --git a/README.md b/README.md
@@ -1,21 +1,22 @@
+# Surmai and Harshit
 
-# Talk-A-Tive
-
-Talk-a-tive is a Full Stack Chatting App.
+Surmai and Harshit is a Full Stack Chatting App.
 Uses Socket.io for real time communication and stores user details in encrypted format in Mongo DB Database.
+
 ## Tech Stack
 
 **Client:** React JS
 
 **Server:** Node JS, Express JS
 
 **Database:** Mongo DB
-  
+
 ## Demo
 
-https://talk-a-tive.herokuapp.com/
+https://Surmai and Harshit.herokuapp.com/
 
 ![](https://github.com/piyush-eon/mern-chat-app/blob/master/screenshots/group%20%2B%20notif.PNG)
+
 ## Run Locally
 
 Clone the project
@@ -46,6 +47,7 @@ Start the server
 ```bash
   npm run start
 ```
+
 Start the Client
 
 ```bash
@@ -54,28 +56,35 @@ Start the Client
   npm start
 ```
 
-
 # Features
 
 ### Authenticaton
+
 ![](https://github.com/piyush-eon/mern-chat-app/blob/master/screenshots/login.PNG)
 ![](https://github.com/piyush-eon/mern-chat-app/blob/master/screenshots/signup.PNG)
+
 ### Real Time Chatting with Typing indicators
+
 ![](https://github.com/piyush-eon/mern-chat-app/blob/master/screenshots/real-time.PNG)
+
 ### One to One chat
+
 ![](https://github.com/piyush-eon/mern-chat-app/blob/master/screenshots/mainscreen.PNG)
+
 ### Search Users
+
 ![](https://github.com/piyush-eon/mern-chat-app/blob/master/screenshots/search.PNG)
+
 ### Create Group Chats
+
 ![](https://github.com/piyush-eon/mern-chat-app/blob/master/screenshots/new%20grp.PNG)
-### Notifications 
+
+### Notifications
+
 ![](https://github.com/piyush-eon/mern-chat-app/blob/master/screenshots/group%20%2B%20notif.PNG)
+
 ### Add or Remove users from group
+
 ![](https://github.com/piyush-eon/mern-chat-app/blob/master/screenshots/add%20rem.PNG)
-### View Other user Profile
-![](https://github.com/piyush-eon/mern-chat-app/blob/master/screenshots/profile.PNG)
-## Made By
 
-- [@Piyush-eon](https://github.com/piyush-eon)
 
-
diff --git a/backend/server.js b/backend/server.js
@@ -80,7 +80,7 @@ io.on("connection", (socket) => {
     chat.users.forEach((user) => {
       if (user._id == newMessageRecieved.sender._id) return;
 
-      socket.in(user._id).emit("message recieved", newMessageRecieved);
+      io.to(user._id).emit("message recieved", newMessageRecieved);
     });
   });
 

diff --git a/frontend/public/image1.jpg b/frontend/public/image1.jpg
diff --git a/frontend/public/image2.jpg b/frontend/public/image2.jpg
diff --git a/frontend/public/image3.jpg b/frontend/public/image3.jpg
diff --git a/frontend/public/image4.jpg b/frontend/public/image4.jpg
diff --git a/frontend/public/image5.jpg b/frontend/public/image5.jpg
diff --git a/frontend/public/image6.jpg b/frontend/public/image6.jpg
diff --git a/frontend/public/image7.jpg b/frontend/public/image7.jpg
diff --git a/frontend/public/image8.jpg b/frontend/public/image8.jpg
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -31,7 +31,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Talk-a-tive</title>
+    <title>Surmai and Harshit</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -2,14 +2,29 @@ import "./App.css";
 import Homepage from "./Pages/Homepage";
 import { Route } from "react-router-dom";
 import Chatpage from "./Pages/Chatpage";
+import { useState, useEffect } from "react";
 
 function App() {
+
+  const [backgroundImage, setBackgroundImage] = useState('');
+
+  useEffect(() => {
+    let randomNumber = 1;
+    for (let i = 0; i < 10; i++) {
+      randomNumber = Math.floor(Math.random() * 8) + 1;
+    }
+    const imageUrl = `image${randomNumber}.jpg`;
+    console.log(imageUrl);
+    setBackgroundImage(`url(${imageUrl})`);
+  }, []);
+
   return (
-    <div className="App">
+    <div className="App" style={{ backgroundImage: backgroundImage }}>
       <Route path="/" component={Homepage} exact />
       <Route path="/chats" component={Chatpage} />
     </div>
   );
 }
 
 export default App;
+
diff --git a/frontend/src/Pages/Chatpage.js b/frontend/src/Pages/Chatpage.js
@@ -4,18 +4,22 @@ import Chatbox from "../components/Chatbox";
 import MyChats from "../components/MyChats";
 import SideDrawer from "../components/miscellaneous/SideDrawer";
 import { ChatState } from "../Context/ChatProvider";
+import { useLocation } from 'react-router-dom';
 
 const Chatpage = () => {
   const [fetchAgain, setFetchAgain] = useState(false);
   const { user } = ChatState();
-
+  const location = useLocation();
+  const boxColor = location.state?.boxColor || 'white';
+  console.log(boxColor);
+
   return (
     <div style={{ width: "100%" }}>
-      {user && <SideDrawer />}
-      <Box d="flex" justifyContent="space-between" w="100%" h="91.5vh" p="10px">
-        {user && <MyChats fetchAgain={fetchAgain} />}
+      {user && <SideDrawer boxColor={boxColor}/>}
+      <Box display="flex" justifyContent="space-between" w="100%" h="91.5vh" p="10px" >
+        {user && <MyChats fetchAgain={fetchAgain} boxColor={boxColor} />}
         {user && (
-          <Chatbox fetchAgain={fetchAgain} setFetchAgain={setFetchAgain} />
+          <Chatbox fetchAgain={fetchAgain} setFetchAgain={setFetchAgain} boxColor={boxColor}/>
         )}
       </Box>
     </div>

diff --git a/frontend/src/Pages/Homepage.js b/frontend/src/Pages/Homepage.js
@@ -8,13 +8,15 @@ import {
   Tabs,
   Text,
 } from "@chakra-ui/react";
-import { useEffect } from "react";
 import { useHistory } from "react-router";
 import Login from "../components/Authentication/Login";
 import Signup from "../components/Authentication/Signup";
+import { useState, useEffect } from "react";
+import { Button } from "@chakra-ui/react";
 
 function Homepage() {
   const history = useHistory();
+  const [boxColor, setBoxColor] = useState("white"); // new state variable
 
   useEffect(() => {
     const user = JSON.parse(localStorage.getItem("userInfo"));
@@ -25,31 +27,45 @@ function Homepage() {
   return (
     <Container maxW="xl" centerContent>
       <Box
-        d="flex"
+        display="flex"
         justifyContent="center"
         p={3}
-        bg="white"
+        bg={boxColor}
         w="100%"
         m="40px 0 15px 0"
         borderRadius="lg"
         borderWidth="1px"
       >
-        <Text fontSize="4xl" fontFamily="Work sans">
-          Talk-A-Tive
+          <Button
+          position="absolute"
+          bottom="10"
+          left="10"
+          variant="solid"
+          size="md"
+          borderRadius="full"
+          mr={4}
+          onClick={() => {
+            setBoxColor(boxColor === "black" ? "white" : "black");
+          }}
+        >
+          D
+        </Button>
+        <Text fontSize="4xl" fontFamily="Work sans" color={boxColor === "black" ? "whatsapp.100" : "black"}>
+          Surmai and Harshit
         </Text>
       </Box>
-      <Box bg="white" w="100%" p={4} borderRadius="lg" borderWidth="1px">
+      <Box bg={boxColor} w="100%" p={4} borderRadius="lg" borderWidth="1px">
         <Tabs isFitted variant="soft-rounded">
           <TabList mb="1em">
-            <Tab>Login</Tab>
-            <Tab>Sign Up</Tab>
+            <Tab color={boxColor === "black" ? "whatsapp.100" : "black"}>Login</Tab>
+            <Tab color={boxColor === "black" ? "whatsapp.100" : "black"}>Sign Up</Tab>
           </TabList>
           <TabPanels>
             <TabPanel>
-              <Login />
+              <Login boxColor={boxColor}/>
             </TabPanel>
             <TabPanel>
-              <Signup />
+              <Signup boxColor={boxColor}/>
             </TabPanel>
           </TabPanels>
         </Tabs>

diff --git a/frontend/src/components/Authentication/Login.js b/frontend/src/components/Authentication/Login.js
@@ -6,8 +6,10 @@ import { useState } from "react";
 import axios from "axios";
 import { useToast } from "@chakra-ui/react";
 import { useHistory } from "react-router-dom";
+import { ChatState } from "../../Context/ChatProvider";
 
-const Login = () => {
+const Login = ({boxColor}) => {
+  const { setUser } = ChatState();
   const [show, setShow] = useState(false);
   const handleClick = () => setShow(!show);
   const toast = useToast();
@@ -53,9 +55,10 @@ const Login = () => {
         isClosable: true,
         position: "bottom",
       });
+      setUser(data);
       localStorage.setItem("userInfo", JSON.stringify(data));
       setLoading(false);
-      history.push("/chats");
+      history.push('/chats', { boxColor: boxColor });
     } catch (error) {
       toast({
         title: "Error Occured!",
@@ -70,24 +73,26 @@ const Login = () => {
   };
 
   return (
-    <VStack spacing="10px">
+    <VStack spacing="10px" >
       <FormControl id="email" isRequired>
-        <FormLabel>Email Address</FormLabel>
+        <FormLabel color={boxColor === "black" ? "whatsapp.100" : "black"}>Email Address</FormLabel>
         <Input
           value={email}
           type="email"
           placeholder="Enter Your Email Address"
           onChange={(e) => setEmail(e.target.value)}
+          color={boxColor === "black" ? "whatsapp.100" : "black"}
         />
       </FormControl>
       <FormControl id="password" isRequired>
-        <FormLabel>Password</FormLabel>
+        <FormLabel color={boxColor === "black" ? "whatsapp.100" : "black"}>Password</FormLabel>
         <InputGroup size="md">
           <Input
             value={password}
             onChange={(e) => setPassword(e.target.value)}
             type={show ? "text" : "password"}
             placeholder="Enter password"
+            color={boxColor === "black" ? "whatsapp.100" : "black"}
           />
           <InputRightElement width="4.5rem">
             <Button h="1.75rem" size="sm" onClick={handleClick}>
@@ -105,17 +110,6 @@ const Login = () => {
       >
         Login
       </Button>
-      <Button
-        variant="solid"
-        colorScheme="red"
-        width="100%"
-        onClick={() => {
-          setEmail("[email protected]");
-          setPassword("123456");
-        }}
-      >
-        Get Guest User Credentials
-      </Button>
     </VStack>
   );
 };

diff --git a/frontend/src/components/Authentication/Signup.js b/frontend/src/components/Authentication/Signup.js
@@ -6,8 +6,12 @@ import { useToast } from "@chakra-ui/toast";
 import axios from "axios";
 import { useState } from "react";
 import { useHistory } from "react-router";
+import { ChatState } from "../../Context/ChatProvider";
 
-const Signup = () => {
+const Signup = (props) => {
+
+  const { boxColor } = props; 
+  const { setUser } = ChatState();
   const [show, setShow] = useState(false);
   const handleClick = () => setShow(!show);
   const toast = useToast();
@@ -68,9 +72,10 @@ const Signup = () => {
         isClosable: true,
         position: "bottom",
       });
+      setUser(data);
       localStorage.setItem("userInfo", JSON.stringify(data));
       setPicLoading(false);
-      history.push("/chats");
+      history.push('/chats', { boxColor: boxColor });
     } catch (error) {
       toast({
         title: "Error Occured!",
@@ -132,27 +137,30 @@ const Signup = () => {
   return (
     <VStack spacing="5px">
       <FormControl id="first-name" isRequired>
-        <FormLabel>Name</FormLabel>
+        <FormLabel color={boxColor === "black" ? "whatsapp.100" : "black"}>Name</FormLabel>
         <Input
           placeholder="Enter Your Name"
           onChange={(e) => setName(e.target.value)}
+          color={boxColor === "black" ? "whatsapp.100" : "black"}
         />
       </FormControl>
       <FormControl id="email" isRequired>
-        <FormLabel>Email Address</FormLabel>
+        <FormLabel color={boxColor === "black" ? "whatsapp.100" : "black"}>Email Address</FormLabel>
         <Input
           type="email"
           placeholder="Enter Your Email Address"
           onChange={(e) => setEmail(e.target.value)}
+          color={boxColor === "black" ? "whatsapp.100" : "black"}
         />
       </FormControl>
       <FormControl id="password" isRequired>
-        <FormLabel>Password</FormLabel>
+        <FormLabel color={boxColor === "black" ? "whatsapp.100" : "black"}>Password</FormLabel>
         <InputGroup size="md">
           <Input
             type={show ? "text" : "password"}
             placeholder="Enter Password"
             onChange={(e) => setPassword(e.target.value)}
+            color={boxColor === "black" ? "whatsapp.100" : "black"}
           />
           <InputRightElement width="4.5rem">
             <Button h="1.75rem" size="sm" onClick={handleClick}>
@@ -162,12 +170,13 @@ const Signup = () => {
         </InputGroup>
       </FormControl>
       <FormControl id="password" isRequired>
-        <FormLabel>Confirm Password</FormLabel>
+        <FormLabel color={boxColor === "black" ? "whatsapp.100" : "black"}>Confirm Password</FormLabel>
         <InputGroup size="md">
           <Input
             type={show ? "text" : "password"}
             placeholder="Confirm password"
             onChange={(e) => setConfirmpassword(e.target.value)}
+            color={boxColor === "black" ? "whatsapp.100" : "black"}
           />
           <InputRightElement width="4.5rem">
             <Button h="1.75rem" size="sm" onClick={handleClick}>
@@ -177,12 +186,13 @@ const Signup = () => {
         </InputGroup>
       </FormControl>
       <FormControl id="pic">
-        <FormLabel>Upload your Picture</FormLabel>
+        <FormLabel color={boxColor === "black" ? "whatsapp.100" : "black"}>Upload your Picture</FormLabel>
         <Input
           type="file"
           p={1.5}
           accept="image/*"
           onChange={(e) => postDetails(e.target.files[0])}
+          color={boxColor === "black" ? "whatsapp.100" : "black"}
         />
       </FormControl>
       <Button