Skip to content

Commit c2b4468

Browse files
committed
Add Categories dropdown to my_account page
1 parent 4e39adf commit c2b4468

File tree

2 files changed

+121
-3
lines changed

2 files changed

+121
-3
lines changed
Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
"use client";
2+
3+
import { useState } from "react";
4+
5+
interface Category {
6+
ID: number;
7+
Category: string;
8+
Name: string;
9+
}
10+
11+
interface Props {
12+
category: string;
13+
}
14+
15+
const CategoriesDropdown = ({ category }: Props) => {
16+
const [isMenuOpen, setIsLocationMenuOpen] = useState<boolean>(false);
17+
const [locationsList, setLocationsList] = useState<Category[]>([]);
18+
const [InterestList, setInterestList] = useState<Category[]>([]);
19+
const [value, setvalue] = useState<string>("");
20+
// these two state variable values will be used to send data to backend
21+
const [LocationValue, setLocationValue] = useState<string | null>(null);
22+
const [interestsValue, setInterestsValue] = useState<string | null>(null);
23+
24+
const Category = category.toLowerCase();
25+
26+
const handleOpenMenu = async () => {
27+
// It will run when isMenuOpen is false which will make 'if' condition !false i.e. true.
28+
if (!isMenuOpen) {
29+
try {
30+
const response = await fetch(
31+
`http://3.131.171.245:8181/v1.0/voyager/categories/${Category}`
32+
);
33+
const list = await response.json();
34+
if (Category === "interests") {
35+
setInterestList(list);
36+
} else if (Category === "location") {
37+
setLocationsList(list);
38+
}
39+
} catch (error) {
40+
alert("Error: " + error);
41+
}
42+
}
43+
setIsLocationMenuOpen(!isMenuOpen);
44+
};
45+
46+
return (
47+
<>
48+
<div
49+
id="dropdownDefaultButton"
50+
data-dropdown-toggle="dropdown"
51+
className="font-medium bg-white focus:outline-none text-sm px-5 py-2 text-center inline-flex items-center rounded-3xl"
52+
onClick={handleOpenMenu}
53+
>
54+
{category}: {value}
55+
<svg
56+
className="w-2.5 h-2.5 ms-3 cursor-pointer"
57+
aria-hidden="true"
58+
xmlns="http://www.w3.org/2000/svg"
59+
fill="none"
60+
viewBox="0 0 10 6"
61+
>
62+
<path
63+
stroke="currentColor"
64+
strokeLinecap="round"
65+
strokeLinejoin="round"
66+
strokeWidth="2"
67+
d="m1 1 4 4 4-4"
68+
/>
69+
stroke-linecap
70+
</svg>
71+
</div>
72+
{isMenuOpen && (
73+
<div
74+
id="dropdown"
75+
className="z-10 bg-gray-50 rounded-lg shadow w-44 mt-1"
76+
>
77+
<ul
78+
className="py-2 text-sm font-medium"
79+
aria-labelledby="dropdownDefaultButton"
80+
>
81+
{Category === "location" &&
82+
locationsList.map(({ ID, Name }) => (
83+
<li
84+
className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
85+
key={ID}
86+
onClick={(event: React.MouseEvent<HTMLElement>) => {
87+
const element = event.target as HTMLElement;
88+
setvalue(element.innerHTML);
89+
setLocationValue(element.innerHTML);
90+
}}
91+
>
92+
{Name}
93+
</li>
94+
))}
95+
{Category === "interests" &&
96+
InterestList.map(({ ID, Name }) => (
97+
<li
98+
className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
99+
key={ID}
100+
onClick={(event: React.MouseEvent<HTMLElement>) => {
101+
const element = event.target as HTMLElement;
102+
setvalue(element.innerHTML);
103+
setInterestsValue(element.innerHTML);
104+
}}
105+
>
106+
{Name}
107+
</li>
108+
))}
109+
</ul>
110+
</div>
111+
)}
112+
</>
113+
);
114+
};
115+
116+
export default CategoriesDropdown;

app/voyager/my_account/page.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
"use client";
22

3-
import React, {Suspense} from "react";
43
import Image from "next/image";
54
import { useSearchParams } from "next/navigation";
65
import HomeNavbar from "@/app/components/HomeNavbar";
76
import Footer from "@/app/components/Footer";
7+
import CategoriesDropdown from "@/app/components/random_chat_components/CategoriesDropdown";
88

99
const MyAccount = () => {
1010
const searchParams = useSearchParams();
@@ -28,16 +28,18 @@ const MyAccount = () => {
2828
width={200}
2929
alt="profile-picture"
3030
/>
31-
<div className="mt-5">Name</div>
31+
<div className="mt-5 font-bold">User Name</div>
3232
</div>
3333
<div className="flex mt-10 justify-center">
3434
<div className="flex flex-col gap-3">
3535
<div className="font-medium bg-white py-2 px-5 rounded-3xl">
3636
Address: {address}
3737
</div>
38-
<div className="font-medium bg-white py-2 px-5 rounded-3xl">
38+
<div className="font-meLdium bg-white py-2 px-5 rounded-3xl">
3939
User Id: {id}
4040
</div>
41+
<CategoriesDropdown category="Location" />
42+
<CategoriesDropdown category="Interests" />
4143
</div>
4244
</div>
4345
</div>

0 commit comments

Comments
 (0)