Added Search Bar for better access the contacts.

README.md

@@ -1,54 +1 @@
-# Snappy - Chat Application 
-Snappy is chat application build with the power of MERN Stack. You can find the tutorial [here](https://www.youtube.com/watch?v=otaQKODEUFs)
 
-
-![login page](./images/snappy_login.png)
-
-![home page](./images/snappy.png)
-
-## Installation Guide
-
-### Requirements
-- [Nodejs](https://nodejs.org/en/download)
-- [Mongodb](https://www.mongodb.com/docs/manual/administration/install-community/)
-
-Both should be installed and make sure mongodb is running.
-
-```shell
-git clone https://github.com/koolkishan/chat-app-react-nodejs
-cd chat-app-react-nodejs
-```
-Now rename env files from .env.example to .env
-```shell
-cd public
-mv .env.example .env
-cd ..
-cd server
-mv .env.example .env
-cd ..
-```
-
-Now install the dependencies
-```shell
-cd server
-yarn
-cd ..
-cd public
-yarn
-```
-We are almost done, Now just start the development server.
-
-For Frontend.
-```shell
-cd public
-yarn start
-```
-For Backend.
-
-Open another terminal in folder, Also make sure mongodb is running in background.
-```shell
-cd server
-yarn start
-```
-
-Done! Now open localhost:3000 in your browser.

public/package.json

@@ -6,17 +6,17 @@
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
-    "axios": "^0.25.0",
+    "axios": "^1.6.0",
     "buffer": "^6.0.3",
     "emoji-picker-react": "^3.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
-    "react-router-dom": "^6.2.1",
-    "react-scripts": "5.0.0",
+    "react-router-dom": "^6.17.0",
+    "react-scripts": "^5.0.0",
     "react-toastify": "^8.1.1",
     "socket.io-client": "^4.4.1",
-    "styled-components": "^5.3.3",
+    "styled-components": "^6.1.0",
     "uuid": "^8.3.2",
     "web-vitals": "^2.1.4"
   },

public/src/components/Contacts.jsx

@@ -1,11 +1,14 @@
 import React, { useState, useEffect } from "react";
 import styled from "styled-components";
-import Logo from "../assets/logo.svg";
-
+import SearchComponent from "./SearchComponent";
 export default function Contacts({ contacts, changeChat }) {
   const [currentUserName, setCurrentUserName] = useState(undefined);
   const [currentUserImage, setCurrentUserImage] = useState(undefined);
   const [currentSelected, setCurrentSelected] = useState(undefined);
+  const [text, setText] = useState('');
+  const [filteredContacts, setFilteredContacts] = useState(contacts);
+
+
   useEffect(async () => {
     const data = await JSON.parse(
       localStorage.getItem(process.env.REACT_APP_LOCALHOST_KEY)
@@ -17,16 +20,28 @@ export default function Contacts({ contacts, changeChat }) {
     setCurrentSelected(index);
     changeChat(contact);
   };
+
+  useEffect(() => {
+    if (text === '') {
+      setFilteredContacts(contacts);
+    } else {
+      const filtered = contacts.filter((contact) =>
+        contact.username.toLowerCase().includes(text.toLowerCase())
+      );
+      setFilteredContacts(filtered);
+    }
+  }, [text, contacts]);
+
+
   return (
     <>
       {currentUserImage && currentUserImage && (
         <Container>
           <div className="brand">
-            <img src={Logo} alt="logo" />
-            <h3>snappy</h3>
+            <SearchComponent setText={setText}/>
           </div>
           <div className="contacts">
-            {contacts.map((contact, index) => {
+            {filteredContacts.map((contact, index)=> {
               return (
                 <div
                   key={contact._id}
@@ -64,23 +79,26 @@ export default function Contacts({ contacts, changeChat }) {
     </>
   );
 }
+
+// const SearchStyled=styled.div`
+
+//   display: flex;
+//   align-items: flex-start;
+//   justify-content: flex-start;
+//   height: 100vh;
+//   padding: 20px; 
+// `;
 const Container = styled.div`
   display: grid;
   grid-template-rows: 10% 75% 15%;
   overflow: hidden;
   background-color: #080420;
   .brand {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    justify-content: center;
-    img {
-      height: 2rem;
-    }
-    h3 {
-      color: white;
-      text-transform: uppercase;
-    }
+    padding-top: 10px;
+    padding-left: 16px;
+    display: grid;
+    align-self: start; 
+    justify-self: start;
   }
   .contacts {
     display: flex;
@@ -150,3 +168,5 @@ const Container = styled.div`
     }
   }
 `;
+
+

public/src/components/LoadingAnimation.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import './loadinganimation.css';
+
+const LoadingAnimation = () => {
+  return (
+    <div className="loading-animation">
+      <div className="arc"></div>
+      <h1 id="h1_of_loading"><span>LOADING</span></h1>
+    </div>
+  );
+};
+
+export default LoadingAnimation;

public/src/components/Logout.jsx

@@ -29,7 +29,7 @@ const Button = styled.button`
   align-items: center;
   padding: 0.5rem;
   border-radius: 0.5rem;
-  background-color: #9a86f3;
+  background-color: rgb(255, 0, 0);
   border: none;
   cursor: pointer;
   svg {