add: Basic search within msgs functionality

Signed-off-by: nishihere19 <[email protected]>

client/src/App.js

@@ -9,11 +9,11 @@ import { useSelector } from "react-redux"
 function App(){
     const archiveOpen = useSelector(state => state.archive.archiveOpen)
     // const userInfo = useSelector(state => state.user)
-    // const recipient = useSelector(state => state.user.recipient)
+    const value = useSelector(state => state.search.value)
     return(
     <Router>
         <Routes>
-            <Route exact path = "/" element = {<Chatbox archiveOpen={archiveOpen} />} />
+            <Route exact path = "/" element = {<Chatbox archiveOpen={archiveOpen} value={value} />} />
             <Route path = "/register" element = {<Register/>} />
             <Route path = "/login" element = {<Login/>} />
         </Routes>

client/src/Library/searchSlice.js

@@ -0,0 +1,17 @@
+import {createSlice } from '@reduxjs/toolkit';
+
+const searchSlice = createSlice({
+    name:'search',
+    initialState: {
+        value:""
+    },
+    reducers:{
+        setSearch(state,action){
+            state.value = action.payload
+        }
+    }
+})
+
+export const searchActions = searchSlice.actions
+
+export default searchSlice

client/src/Library/stores.js

@@ -1,11 +1,13 @@
 import { configureStore} from "@reduxjs/toolkit";
 import archiveSlice from "./archiveSlice";
 import userSlice from "./userSlice"
+import searchSlice from "./searchSlice"
 
 const store = configureStore({
     reducer: {
         archive: archiveSlice.reducer,
-        user: userSlice.reducer
+        user: userSlice.reducer,
+        search: searchSlice.reducer
     }
 })
 

client/src/components/archive/Archive.js

@@ -5,7 +5,6 @@ import Button from "@mui/material/Button";
 import { useDispatch } from "react-redux";
 import { archiveActions } from "../../Library/archiveSlice"
 
-const URL = process.env.REACT_APP_BACKEND_URL;
 
 export default function Archive({archiveOpen}) {
   const[value,setValue] = useState("ARCHIVES");
@@ -28,7 +27,7 @@ export default function Archive({archiveOpen}) {
   return (
     <div className='archive-section'>
       <Button variant='contained' onClick={toggleArchive} className='MUIbutton' disableElevation>
-        <i class='fa-solid fa-box-archive'></i> {value}
+        <i className='fa-solid fa-box-archive'></i> {value}
       </Button>
     </div>
   );

client/src/components/chat/Chat.js

@@ -1,11 +1,27 @@
+import { useEffect, useState } from "react";
 import "./Chat.css";
 import Message from "../message/Message";
 import crypto from "crypto-js";
+import { useSelector } from "react-redux";
 
 //The chat area component
-export default function Chat({ messages,userInfo }) {
-
-  //decrypting message before displaying
+export default function Chat({ messages, userInfo }) {
+  const searchValue = useSelector((state) => state.search.value);
+  const [finalMessages, setFinalMessages] = useState([]);
+  useEffect(() => {
+    if (!searchValue) { 
+      setFinalMessages(messages);
+    }
+    else { //if the user is trying to search, filtering msgs which include that string
+      let msgs = [];
+      setFinalMessages([]);
+      msgs = messages.filter(
+        (m) =>
+          decryptMessage(m.key, m.message, m.iv).includes(searchValue) === true
+      );
+      setFinalMessages(msgs);
+    }
+  }, [searchValue]);
   const decryptMessage = (key, message, iv) => {
     let _key = crypto.enc.Hex.parse(key);
     const result = crypto.AES.decrypt(message, _key, {
@@ -16,10 +32,18 @@ export default function Chat({ messages,userInfo }) {
 
     return result;
   };
+
   return (
-    <div className="chat-section">
-      {messages.map(m => {
-        return <Message message={decryptMessage(m.key,m.message,m.iv)} timestamp={m.timestamp} theirs={m.sender.email !== userInfo.email}/>
+    <div className='chat-section'>
+      {finalMessages.map((m) => {
+        return (
+          <Message
+            key={finalMessages.indexOf(m)}
+            message={decryptMessage(m.key, m.message, m.iv)}
+            timestamp={m.timestamp}
+            theirs={m.sender.email !== userInfo.email}
+          />
+        );
       })}
     </div>
   );

client/src/components/chatbox/Chatbox.js

@@ -12,23 +12,22 @@ import {getAllUser,getAllArchives} from "../../Library/getAllUser";
 import queryString from "query-string";
 import io from "socket.io-client";
 import getUserById from "../../Library/getUserById";
-import crypto from "crypto-js";
 import SendMessageIcon from "@material-ui/icons/Message";
-import {useDispatch} from "react-redux";
-import {userActions} from "../../Library/userSlice"
+// import {useDispatch} from "react-redux";
+// import {userActions} from "../../Library/userSlice"
 
 let socket;
 const URL = process.env.REACT_APP_BACKEND_URL;
 
-const Chatbox = ({ location={},archiveOpen }) => {
-  const [navigationOpen, setNavigationOpen] = useState(false);
+const Chatbox = ({ location={},archiveOpen, value }) => {
+  // const [navigationOpen, setNavigationOpen] = useState(false);
   const [selectedContact, setSelectedContact] = useState("");
   const [users, setUsers] = useState([]);
   const [userInfo, setUserInfo] = useState({});
   const [target, setTarget] = useState("");
   const [inputMessage, setInputMessage] = useState("");
   const [messages, setMessages] = useState([]);
-  const dispatch = useDispatch();
+  // const dispatch = useDispatch();
 
   function onClickOnContact(contact) {
     setSelectedContact(contact);
@@ -104,7 +103,7 @@ const Chatbox = ({ location={},archiveOpen }) => {
     const token = new Cookies().get("token");
     getAllUser(token).then((result) => {
       getAllArchives().then((archives)=>{
-          if(archiveOpen==true){
+          if(archiveOpen===true){
             let users=[];
             archives.forEach(item=>{
               if(item.me===userInfo.email) users.push(item.them);
@@ -139,20 +138,10 @@ const Chatbox = ({ location={},archiveOpen }) => {
     setInputMessage("");
   };
 
-  useEffect(() => {
-    var checkExist = setInterval(function () {
-      if (document.querySelector("#messages")) {
-        document.querySelector("#messages").scrollTop =
-          document.querySelector("#messages").scrollHeight;
-        clearInterval(checkExist);
-      }
-    }, 100);
-  });
-
 
   return (
     <div className="app">
-    <div className={`chatbox ${(navigationOpen) ? 'chatbox-navigation-open' : 'chatbox-navigation-closed'}`}>
+    <div className={`chatbox ${false ? 'chatbox-navigation-open' : 'chatbox-navigation-closed'}`}>
       <Navigation/>
       <Archive archiveOpen={archiveOpen}/>
       <List onClick={onClickOnContact} contacts={users}/>

client/src/components/details/Details.js

@@ -1,15 +1,18 @@
+import {useState} from "react"
 import "./Details.css";
 import AccountCircleIcon from "@material-ui/icons/AccountCircle";
 import Axios from "axios";
 import Button from "@mui/material/Button";
 import { useDispatch } from "react-redux";
 import { archiveActions } from "../../Library/archiveSlice";
+import { searchActions } from "../../Library/searchSlice";
 
 //gets the URL from backend
 const URL = process.env.REACT_APP_BACKEND_URL;
 
 //this is the details component for the recipient title bar
 export default function Details({ contact, userInfo }) {
+  const[inputSearch, setInputSearch] = useState("");
   const dispatch = useDispatch();
 
   //this function hits the add_archive route which adds the friend to archive if not archived or removes them
@@ -26,6 +29,12 @@ export default function Details({ contact, userInfo }) {
     dispatch(archiveActions.toggleState());
   };
 
+  //dispatches the event to add searchvalue in store
+  const submitSearch = async(e) =>{
+    e.preventDefault();
+    dispatch(searchActions.setSearch(inputSearch))
+  }
+
   return (
     <div className='details-section'>
       <div className='user'>
@@ -34,14 +43,23 @@ export default function Details({ contact, userInfo }) {
           <span className='name'>{contact}</span>
         </div>
       </div>
+      <input className="message-input" placeholder="Type to search" value={inputSearch} onChange={({ target: { value } }) => setInputSearch(value)}/>
       <div className='actions'>
+      <Button
+          variant='contained'
+          onClick={submitSearch}
+          className='MUIbutton'
+          disableElevation
+        >
+          <i className='fa-solid fa-search'></i>
+        </Button>
         <Button
           variant='contained'
           onClick={addArchive}
           className='MUIbutton'
           disableElevation
         >
-          <i class='fa-solid fa-box-archive'></i>
+          <i className='fa-solid fa-box-archive'></i>
         </Button>
       </div>
     </div>

client/src/components/list/List.js

@@ -6,7 +6,7 @@ export default function List({ contacts, onClick }) {
   return (
     <div className="list-section">
       {contacts.map((c) => {
-        return <Contact onClick={onClick} key={c.name} contact={c} />;
+        return <Contact onClick={onClick} key={contacts.indexOf(c)} contact={c} />;
       })}
     </div>
   );

client/src/components/navigation/Navigation.js

@@ -1,10 +1,7 @@
 import "./Navigation.css";
 import React from "react";
-import MoreVertIcon from "@material-ui/icons/MoreVert";
-import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 import AccountCircleIcon from "@material-ui/icons/AccountCircle";
 import Cookies from "universal-cookie";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 export default function Navigation() {
   const LogoutUser = () => {
@@ -17,11 +14,9 @@ export default function Navigation() {
     <div className='navigation-section'>
       <AccountCircleIcon className='icon-clickable profile-picture' />
       <div className='actions'>
-        {/* <MoreVertIcon className='icon-clickable' onClick={LogoutUser} /> */}
         <button className='Rbutton' onClick={LogoutUser}>
           <i className='fa-solid fa-right-from-bracket'></i>
         </button>
-        {/* <FontAwesomeIcon icon='fa-regular fa-arrow-right-from-bracket' /> */}
       </div>
     </div>
   );

server/Router/message.router.js

@@ -36,7 +36,7 @@ const createMessage = async (sender, userToken, recipient, message) => {
                 _message.save()
                 _info = {
                     recipient: {email: _user.email, id: _user._id}, sender: {email: user.email, id: user._id},
-                    iv: encryptedMessage.iv, message: encryptedMessage.encryptedMessage, key: encryptedMessage.key
+                    iv: encryptedMessage.iv, message: encryptedMessage.encryptedMessage, key: encryptedMessage.key, timestamp: _message.createdAt
                 }
             }
         })