Skip to content

Commit 82b5d46

Browse files
balaraju-neratibalaraju-nerati
committed
fix: toast message after search and navigating to the chat page of the searched user
1 parent 15b36ab commit 82b5d46

File tree

3 files changed

+91
-66
lines changed

3 files changed

+91
-66
lines changed

‎frontend/src/components/SearchComponents/User.js

-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from 'react'
22
import { Avatar } from '@mui/material'
33
import { MotionAnimate } from 'react-motion-animate'
44
import image from '../../assets/images/user-img.jpg'
5-
import { useEffect } from 'react'
65

76
export default function User({values,accessChat}) {
87
const accessChatHandler=()=>{

‎frontend/src/pages/HomeChat.js

-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@ export default function HomeChat() {
7171
}, [dispatch]);
7272

7373
const selectChat = (data) => {
74-
const isPresent = data.hasOwnProperty("notify");
7574
dispatch(SetActiveChat(data));
7675
};
7776

‎frontend/src/pages/Search.js

+91-64
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1-
import React, { useState } from 'react'
2-
import SearchBar from '../components/SearchComponents/SearchBar'
3-
import Loading from '../components/SearchComponents/Loading'
4-
import User from '../components/SearchComponents/User'
5-
import { ToastContainer, toast } from 'react-toastify';
6-
import 'react-toastify/dist/ReactToastify.css';
7-
import { AddUser } from '../services/Actions/Chat/action';
8-
import { useDispatch } from 'react-redux';
9-
import { useNavigate } from 'react-router-dom';
10-
import { useSelector } from 'react-redux';
1+
import React, { useState } from "react";
2+
import SearchBar from "../components/SearchComponents/SearchBar";
3+
import Loading from "../components/SearchComponents/Loading";
4+
import User from "../components/SearchComponents/User";
5+
import { ToastContainer, toast } from "react-toastify";
6+
import "react-toastify/dist/ReactToastify.css";
7+
import { AddUser, SetActiveChat } from "../services/Actions/Chat/action";
8+
import { useDispatch } from "react-redux";
9+
import { useNavigate } from "react-router-dom";
10+
import { useSelector } from "react-redux";
1111
export default function Search() {
12+
const navigate = useNavigate();
13+
const allChats = useSelector((state) => state.chat.AllChats);
14+
const dispatch = useDispatch();
15+
1216

13-
const dispatch=useDispatch();
14-
const navigate=useNavigate()
15-
const state=useSelector((state)=>state.chat.AllChats)
16-
17-
const notify = (value)=>{
17+
const notify = (value) => {
1818
return toast.info(`Added ${value}`, {
1919
position: "bottom-center",
2020
autoClose: 2222,
@@ -24,75 +24,102 @@ export default function Search() {
2424
draggable: true,
2525
progress: undefined,
2626
theme: "light",
27-
});
27+
});
2828
};
2929

30-
const[isLoading,SetisLoading]=useState(false);
31-
const [users,SetUsers]=useState([])
30+
const [isLoading, SetisLoading] = useState(false);
31+
const [users, SetUsers] = useState([]);
3232
// const[query,setQuery]=useState('');
33-
const[resultsEmpty,setResultsEmpty]=useState(false);
34-
33+
const [resultsEmpty, setResultsEmpty] = useState(false);
3534

36-
const onChangeTextHandler=(e)=>{
35+
const onChangeTextHandler = (e) => {
3736
// setQuery(e.target.value);
38-
if(!e.target.value)
39-
{
37+
if (!e.target.value) {
4038
return;
4139
}
4240

43-
const timeout=setTimeout(() => {
44-
searchHandler(e.target.value)
41+
const timeout = setTimeout(() => {
42+
searchHandler(e.target.value);
4543
}, 1000);
4644

47-
return ()=>{
45+
return () => {
4846
clearTimeout(timeout);
49-
}
50-
}
51-
52-
const searchHandler=async(value)=>{
47+
};
48+
};
5349

50+
const searchHandler = async (value) => {
5451
SetisLoading(true);
55-
const cookie=localStorage.getItem('jwt');
56-
const response=await fetch(`${process.env.REACT_APP_API_URL}/api/v1/users?search=${value}`,{
57-
headers:{
58-
'Content-type':'application/json',
59-
'Authorization':`Bearer ${cookie}`
60-
}
61-
})
62-
const data=await response.json();
63-
SetisLoading(false);
64-
data.users.length=data.users.length>2?data.users.length=2:data.users.length;
65-
SetUsers(data.users)
66-
if(data.users.length===0)
67-
setResultsEmpty(true)
68-
else
69-
setResultsEmpty(false);
70-
71-
}
72-
73-
const accessChatHandler=(values)=>{
52+
const cookie = localStorage.getItem("jwt");
53+
const response = await fetch(
54+
`${process.env.REACT_APP_API_URL}/api/v1/users?search=${value}`,
55+
{
56+
headers: {
57+
"Content-type": "application/json",
58+
Authorization: `Bearer ${cookie}`,
59+
},
60+
}
61+
);
62+
const data = await response.json();
63+
SetisLoading(false);
64+
data.users.length =
65+
data.users.length > 2 ? (data.users.length = 2) : data.users.length;
66+
SetUsers(data.users);
67+
if (data.users.length === 0) setResultsEmpty(true);
68+
else setResultsEmpty(false);
69+
};
7470

75-
const isPresent=state.find((data)=>{
76-
return data.email===values.email
77-
});
78-
dispatch(AddUser(values,state))
71+
const accessChatHandler = (values) => {
72+
let isPresent = false;
73+
let activeChat = null;
74+
for (let i = 0; i < allChats.length; i++) {
75+
if (allChats[i].chatName === "sender") {
76+
for (let j = 0; j < allChats[i].users.length; j++) {
77+
if (allChats[i].users[j].email === values.email) {
78+
isPresent = true;
79+
activeChat = allChats[i];
80+
break;
81+
}
82+
}
83+
}
84+
if (isPresent) {
85+
break;
86+
}
87+
}
88+
if (isPresent) {
89+
dispatch(SetActiveChat(activeChat));
90+
navigate("/home/message",{replace:true})
91+
}else{
92+
dispatch(AddUser(values, allChats));
7993
notify(values.name);
8094
setTimeout(()=>{
95+
dispatch(SetActiveChat(allChats[0]));
8196
navigate('/home/message',{replace:true})
8297
},2000)
8398
}
99+
};
84100

85101
return (
86-
<div className='w-[80vw] relative flex flex-col'>
87-
<ToastContainer/>
88-
<SearchBar onChange={onChangeTextHandler} searchHandler={searchHandler} ></SearchBar>
89-
<div className=' w-[100%] flex box-border justify-center py-2 relative'>
90-
{!isLoading&&resultsEmpty&&<p>0 matching results found</p>}
91-
{isLoading&&<Loading></Loading>}
92-
{!isLoading&&users.length>0&&( <div className='w-[60%] border-[1px] rounded-md border-[#acacac] px-[1%] py-[1%] flex flex-col'>
93-
{users.map((data,index)=><User accessChat={accessChatHandler} values={data} key={index}></User>)}
94-
</div>)}
95-
</div>
102+
<div className="w-[80vw] relative flex flex-col">
103+
<ToastContainer />
104+
<SearchBar
105+
onChange={onChangeTextHandler}
106+
searchHandler={searchHandler}
107+
></SearchBar>
108+
<div className=" w-[100%] flex box-border justify-center py-2 relative">
109+
{!isLoading && resultsEmpty && <p>0 matching results found</p>}
110+
{isLoading && <Loading></Loading>}
111+
{!isLoading && users.length > 0 && (
112+
<div className="w-[60%] border-[1px] rounded-md border-[#acacac] px-[1%] py-[1%] flex flex-col">
113+
{users.map((data, index) => (
114+
<User
115+
accessChat={accessChatHandler}
116+
values={data}
117+
key={index}
118+
></User>
119+
))}
120+
</div>
121+
)}
122+
</div>
96123
</div>
97-
)
124+
);
98125
}

0 commit comments

Comments
 (0)