Skip to content

Commit a507064

Browse files
chauhanshilpachauhanshilpa
committed
Show an alert if no random user is find based on interest
1 parent 42120a2 commit a507064

File tree

4 files changed

+151
-95
lines changed

4 files changed

+151
-95
lines changed

‎app/components/random_chat_components/CategoriesAndGenderDetailsPopup.tsx

Lines changed: 104 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React, { useState } from "react";
33
import Image from "next/image";
44
import { MdOutlineCancel } from "react-icons/md";
55
import { useRouter } from "next/navigation";
6+
import { Alert } from "../reusable/ALert";
67

78
interface RandomCandidate {
89
id: string;
@@ -20,8 +21,10 @@ const CategoriesAndGenderDetailsPopup = () => {
2021
string | undefined
2122
>();
2223
const [interestValue, setInterestValue] = useState<string | undefined>();
24+
const [alert, setAlert] = useState<boolean>(false);
25+
2326
// check for gender also (in future)
24-
const [gender, setGender] = useState<string>("both")
27+
const [gender, setGender] = useState<string>("both");
2528

2629
const router = useRouter();
2730

@@ -42,10 +45,10 @@ const CategoriesAndGenderDetailsPopup = () => {
4245
// find a user for chat
4346
if (typeof window !== undefined) {
4447
userId = localStorage.getItem("userId");
45-
subId = localStorage.getItem("subId")
48+
subId = localStorage.getItem("subId");
4649
}
4750
updateUserData();
48-
51+
4952
const list: RandomCandidate[] = await fetch(
5053
`http://${IP_ADDRESS}/v1.0/voyager/user/list-users-interest/${interestValue}/${userId}`,
5154
{
@@ -62,12 +65,12 @@ const CategoriesAndGenderDetailsPopup = () => {
6265
return response.json();
6366
})
6467
.then((data) => {
65-
console.log(data)
68+
console.log(data);
6669
return data;
6770
})
6871
.catch((error) => console.log("error getting data", error));
6972
if (list.length <= 0) {
70-
alert("No user found");
73+
setAlert(true);
7174
} else {
7275
const randomNumber = Math.floor(Math.random() * list.length);
7376
const randomCandidateData = list[randomNumber];
@@ -102,99 +105,107 @@ const CategoriesAndGenderDetailsPopup = () => {
102105
}
103106

104107
return (
105-
<div className="flex flex-col justify-between bg-[#222831] rounded p-4 w-[30%] h-[auto] m-auto">
106-
<MdOutlineCancel className="self-end text-2xl font-md text-gray-400 cursor-pointer hover:text-gray-50" />
107-
<div>
108-
<h6 className="font-md text-sm mb-4 text-[#7AA2E3] text-center">
109-
Choose gender
110-
</h6>
111-
<div className="flex justify-around gap-3">
112-
<div className="flex flex-col items-center">
113-
<Image
114-
src="/female.png"
115-
height={30}
116-
width={40}
117-
alt="profile-picture"
118-
className="hover:border-[#EE99C2] hover:border-2 cursor-pointer"
119-
onClick={() => setGender("female")}
120-
/>
121-
<h6 className="text-gray-200 text-sm mt-2">female</h6>
122-
</div>
123-
<div className="flex flex-col items-center">
124-
<Image
125-
src="/male.png"
126-
height={30}
127-
width={40}
128-
alt="profile-picture"
129-
className="hover:border-[#5755FE] hover:border-2 cursor-pointer"
130-
onClick={() => setGender("male")}
131-
/>
132-
<h6 className="text-gray-200 text-sm mt-2">male</h6>
133-
</div>
134-
<div className="flex flex-col items-center">
135-
<Image
136-
src="/both_gender.png"
137-
height={30}
138-
width={40}
139-
alt="profile-picture"
140-
className="hover:border-[#3AA6B9] hover:border-2 cursor-pointer"
141-
onClick={() => setGender("both")}
142-
/>
143-
<h6 className="text-gray-200 text-sm mt-2">both</h6>
108+
<>
109+
{alert && (
110+
<Alert
111+
message="Oops! We couldn't find a user matching your search"
112+
setFunction={setAlert}
113+
/>
114+
)}
115+
<div className="flex flex-col justify-between bg-[#222831] rounded p-4 w-[30%] h-[auto] m-auto">
116+
<MdOutlineCancel className="self-end text-2xl font-md text-gray-400 cursor-pointer hover:text-gray-50" />
117+
<div>
118+
<h6 className="font-md text-sm mb-4 text-[#7AA2E3] text-center">
119+
Choose gender
120+
</h6>
121+
<div className="flex justify-around gap-3">
122+
<div className="flex flex-col items-center">
123+
<Image
124+
src="/female.png"
125+
height={30}
126+
width={40}
127+
alt="profile-picture"
128+
className="hover:border-[#EE99C2] hover:border-2 cursor-pointer"
129+
onClick={() => setGender("female")}
130+
/>
131+
<h6 className="text-gray-200 text-sm mt-2">female</h6>
132+
</div>
133+
<div className="flex flex-col items-center">
134+
<Image
135+
src="/male.png"
136+
height={30}
137+
width={40}
138+
alt="profile-picture"
139+
className="hover:border-[#5755FE] hover:border-2 cursor-pointer"
140+
onClick={() => setGender("male")}
141+
/>
142+
<h6 className="text-gray-200 text-sm mt-2">male</h6>
143+
</div>
144+
<div className="flex flex-col items-center">
145+
<Image
146+
src="/both_gender.png"
147+
height={30}
148+
width={40}
149+
alt="profile-picture"
150+
className="hover:border-[#3AA6B9] hover:border-2 cursor-pointer"
151+
onClick={() => setGender("both")}
152+
/>
153+
<h6 className="text-gray-200 text-sm mt-2">both</h6>
154+
</div>
144155
</div>
145156
</div>
146-
</div>
147-
<div className="mt-5">
148-
<h6 className="font-md text-sm mb-3 text-[#7AA2E3] text-center">
149-
Match with interests
150-
</h6>
151-
<div className="flex flex-wrap gap-2 bg-muted rounded-md p-2 py-4 bg-[#31363F] overflow-x-auto">
152-
{interestValue !== undefined && (
153-
<div className="inline-flex items-center justify-center px-2.5 py-1 text-sm font-medium rounded-full bg-gray-300">
154-
{interestValue}
155-
<button className="flex-shrink-0 ml-1.5 h-3.5 w-3.5 rounded-full inline-flex items-center justify-center text-card bg-card-foreground hover:bg-card-foreground/80 focus:bg-card-foreground-hover">
156-
<span className="sr-only">Remove</span>
157-
<svg
158-
stroke="currentColor"
159-
fill="currentColor"
160-
strokeWidth="0"
161-
viewBox="0 0 20 20"
162-
aria-hidden="true"
163-
height="10"
164-
width="10"
165-
xmlns="http://www.w3.org/2000/svg"
166-
onClick={() => setInterestValue(undefined)}
167-
>
168-
<path
169-
fillRule="evenodd"
170-
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
171-
clipRule="evenodd"
172-
></path>
173-
</svg>
174-
</button>
175-
</div>
176-
)}
157+
<div className="mt-5">
158+
<h6 className="font-md text-sm mb-3 text-[#7AA2E3] text-center">
159+
Match with interests
160+
</h6>
161+
<div className="flex flex-wrap gap-2 bg-muted rounded-md p-2 py-4 bg-[#31363F] overflow-x-auto">
162+
{interestValue !== undefined && (
163+
<div className="inline-flex items-center justify-center px-2.5 py-1 text-sm font-medium rounded-full bg-gray-300">
164+
{interestValue}
165+
<button className="flex-shrink-0 ml-1.5 h-3.5 w-3.5 rounded-full inline-flex items-center justify-center text-card bg-card-foreground hover:bg-card-foreground/80 focus:bg-card-foreground-hover">
166+
<span className="sr-only">Remove</span>
167+
<svg
168+
stroke="currentColor"
169+
fill="currentColor"
170+
strokeWidth="0"
171+
viewBox="0 0 20 20"
172+
aria-hidden="true"
173+
height="10"
174+
width="10"
175+
xmlns="http://www.w3.org/2000/svg"
176+
onClick={() => setInterestValue(undefined)}
177+
>
178+
<path
179+
fillRule="evenodd"
180+
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
181+
clipRule="evenodd"
182+
></path>
183+
</svg>
184+
</button>
185+
</div>
186+
)}
177187

178-
<input
179-
type="text"
180-
className="w-32 select-auto sm:text-sm text-sm rounded-md bg-popover dark:bg-placeholder p-1 focus-visible:outline-none inline-flex bg-gray-200"
181-
maxLength={32}
182-
placeholder="Add an interest..."
183-
onChange={(event) => {
184-
setInterestInputValue(event.target.value);
185-
}}
186-
onKeyDown={handleInterestValue}
187-
value={interestInputValue}
188-
/>
188+
<input
189+
type="text"
190+
className="w-32 select-auto sm:text-sm text-sm rounded-md bg-popover dark:bg-placeholder p-1 focus-visible:outline-none inline-flex bg-gray-200"
191+
maxLength={32}
192+
placeholder="Add an interest..."
193+
onChange={(event) => {
194+
setInterestInputValue(event.target.value);
195+
}}
196+
onKeyDown={handleInterestValue}
197+
value={interestInputValue}
198+
/>
199+
</div>
189200
</div>
201+
<button
202+
className="bg-[#4ea5ec] mt-3 hover:bg-[#4890cb] text-white font-bold py-2 px-4 rounded"
203+
onClick={handleStartNewChat}
204+
>
205+
Start new chat
206+
</button>
190207
</div>
191-
<button
192-
className="bg-[#4ea5ec] mt-3 hover:bg-[#4890cb] text-white font-bold py-2 px-4 rounded"
193-
onClick={handleStartNewChat}
194-
>
195-
Start new chat
196-
</button>
197-
</div>
208+
</>
198209
);
199210
};
200211

‎app/components/reusable/ALert.tsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from "react";
2+
3+
interface Props {
4+
message: string;
5+
setFunction: React.Dispatch<React.SetStateAction<boolean>>;
6+
}
7+
8+
export const Alert = ({ message, setFunction }: Props) => {
9+
return (
10+
<div className="fixed z-50 top-0 w-[71.3%]">
11+
<div
12+
className="flex text-white justify-between bg-[#AD88C6] p-5 rounded relative"
13+
role="alert"
14+
>
15+
<div className="text-md font-semibold">{message}</div>
16+
<div>
17+
<svg
18+
className="cursor-pointer"
19+
width="25"
20+
height="25"
21+
viewBox="0 0 24 24"
22+
fill="none"
23+
xmlns="http://www.w3.org/2000/svg"
24+
onClick={() => setFunction(false)}
25+
>
26+
<path
27+
d="M18 6L6 18"
28+
stroke="#FEFEFE"
29+
stroke-width="2"
30+
stroke-linecap="round"
31+
stroke-linejoin="round"
32+
/>
33+
<path
34+
d="M6 6L18 18"
35+
stroke="#FEFEFE"
36+
stroke-width="2"
37+
stroke-linecap="round"
38+
stroke-linejoin="round"
39+
/>
40+
</svg>
41+
</div>
42+
</div>
43+
</div>
44+
);
45+
};

‎app/voyager/random_chat/[id]/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ const NewChat = () => {
100100
setFriendList={setFriendList}
101101
setLike={setLike}
102102
/>
103-
<div className="flex flex-col justify-between h-[100vh] w-full ml-[25%] bg-[#35374B]">
103+
<div className="flex flex-col justify-between h-[100vh] w-[75%] ml-[25%] bg-[#35374B]">
104104
<RandomChatNavbar
105105
like={like}
106106
setLike={setLike}

‎app/voyager/random_chat/new/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const NewRandomChat = () => {
1111
return (
1212
<div className="flex w-full h-full">
1313
<Sidebar friendList={friendList} setFriendList={setFriendList} />
14-
<div className="flex flex-col justify-between h-[100vh] w-full ml-[25%] bg-[#35374B]">
14+
<div className="flex flex-col justify-between h-[100vh] w-[75%] ml-[25%] bg-[#35374B]">
1515
<div className="p-2 m-5 h-full overflow-auto">
1616
<CategoriesAndGenderDetailsPopup />
1717
</div>

0 commit comments

Comments
 (0)