Merge pull request #30 from Octasol/addsearch

Added search feature in leaderboard

Author: A91y

src/app/(pages)/layout.tsx

@@ -11,8 +11,6 @@ const Layout = ({ children }: Props) => {
   const [verifiedEmail, setVerifiedEmail] = useState(true);
 
   const verified = async (): Promise<void> => {
-    console.log("session", session);
-
     if (session && session.accessToken) {
       setVerifiedEmail(session.isVerifiedEmail);
     }

src/app/(pages)/leaderboard/page.tsx

@@ -13,15 +13,49 @@ import RankCard from "@/components/RankCard";
 import { Profile } from "@/lib/types";
 import { leaderboard } from "@/config/axios/Breakpoints";
 import { useRouter } from "next/navigation";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronLeft, ChevronRight, Search, SearchIcon, X } from "lucide-react";
 import { useSelector } from "react-redux";
+import LoginButton from "@/components/Button/LoginButton";
+import { Input } from "@/components/ui/input";
 
 const Leaderboard = () => {
   const router = useRouter();
   const [profile, setProfile] = useState<Profile[]>([]);
   const user = useSelector((state: any) => state.user);
   const [currentPage, setCurrentPage] = useState(1);
   const recordsPerPage = 15;
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [filteredProfiles, setFilteredProfiles] = useState<Profile[]>([]);
+
+  useEffect(() => {
+    const fetchProfiles = async () => {
+      const { response } = await POST(leaderboard, {});
+      setProfile(response?.data);
+      setFilteredProfiles(response?.data);
+    };
+    fetchProfiles();
+  }, []);
+
+  useEffect(() => {
+    if (search) {
+      const rankedProfiles = profile.map((p, index) => ({
+        ...p,
+        rank: index + 1,
+      }));
+      setFilteredProfiles(
+        rankedProfiles.filter((p) =>
+          p.githubUsername.toLowerCase().includes(search.toLowerCase())
+        )
+      );
+    } else {
+      setFilteredProfiles([]);
+    }
+  }, [search, profile]);
+
+  const toggleSearch = () => {
+    setIsOpen(!isOpen);
+  };
 
   const response = async () => {
     const { response } = await POST(leaderboard, {});
@@ -60,7 +94,7 @@ const Leaderboard = () => {
 
   return (
     <>
-      <div className="w-full flex justify-center items-center text-3xl font-bold tracking-widest">
+      <div className="w-full hidden md:flex justify-center items-center text-3xl font-bold tracking-widest">
         LEADERBOARD
       </div>
       <div className="w-full h-fit pt-4">
@@ -79,7 +113,67 @@ const Leaderboard = () => {
         </div>
       </div>
 
-      <div className="flex flex-col justify-center items-center container max-w-5xl">
+      <div className="absolute bottom-[82vh]  md:bottom-10 right-[10px] z-30 max-w-[500px]">
+        <div>
+          <button
+            onClick={toggleSearch}
+            className="px-4 py-3 border-[1px] rounded-full border-slate-800 bg-black flex justify-center items-center gap-4"
+          >
+            <SearchIcon size={20} />
+            <p className="hidden md:flex">Search</p>
+          </button>
+        </div>
+
+        <div
+          className={`fixed w-full md:w-1/2 lg:w-1/3 h-4/6  bottom-0 right-0 z-30 border-[1px] bg-black border-slate-800 transition-transform duration-500 ease-in-out rounded-lg ${
+            isOpen ? "translate-x-0" : "translate-x-full"
+          }`}
+        >
+          <div className="p-4 flex flex-col gap-4">
+            <div className="flex justify-between px-4 items-center">
+              <h2 className="text-xl font-bold">Search Panel</h2>
+              <X size={20} onClick={toggleSearch} className="cursor-pointer" />
+            </div>
+            <hr />
+            <div>
+              <Input
+                id="first-name"
+                placeholder="Enter name"
+                name="name"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+              />
+            </div>
+            <div className="mt-4 max-h-[430px] overflow-y-auto">
+              {search && filteredProfiles.length > 0 ? (
+                <ul>
+                  {filteredProfiles.map((item) => (
+                    <li
+                      key={item.githubUsername}
+                      className="p-2 border-b cursor-pointer hover:bg-gray-700"
+                      onClick={() => userProfile(item.githubUsername)}
+                    >
+                      <div className="flex justify-between">
+                        <p className="w-[60px]">{item.rank}</p>
+                        <p className="w-[210px] flex justify-start">
+                          {item.githubUsername}
+                        </p>
+                        <p className="w-[80px] flex justify-end">
+                          {item.totalPoints}
+                        </p>
+                      </div>
+                    </li>
+                  ))}
+                </ul>
+              ) : search ? (
+                <p className="text-center text-gray-400">No user found</p>
+              ) : null}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col justify-center items-center px-4 md:container md:max-w-5xl">
         <Table>
           <TableHeader>
             <TableRow>
@@ -124,12 +218,13 @@ const Leaderboard = () => {
             </Table>
           </div>
         )}
-        <div className="flex justify-between items-center py-6 w-full">
+        <div className="flex justify-between items-center pt-6 pb-6 md:pb-16 w-full">
           <button
             onClick={handlePreviousPage}
             disabled={currentPage === 1}
-            className={`px-4 py-2 rounded ${currentPage === 1 ? "opacity-50 cursor-not-allowed" : ""
-              }`}
+            className={`px-4 py-2 rounded ${
+              currentPage === 1 ? "opacity-50 cursor-not-allowed" : ""
+            }`}
           >
             <ChevronLeft color="white" size={40} />
           </button>
@@ -141,15 +236,14 @@ const Leaderboard = () => {
           <button
             onClick={handleNextPage}
             disabled={currentPage === totalPages}
-            className={`px-4 py-2 rounded ${currentPage === totalPages ? "opacity-50 cursor-not-allowed" : ""
-              }`}
+            className={`px-4 py-2 rounded ${
+              currentPage === totalPages ? "opacity-50 cursor-not-allowed" : ""
+            }`}
           >
             <ChevronRight color="white" size={40} />
           </button>
         </div>
       </div>
-
-      {/* Pagination controls */}
     </>
   );
 };

src/components/Login/Login.tsx

@@ -39,10 +39,6 @@ const Login = () => {
   const user = useSelector((state: any) => state.user);
   const sessionToVerifyEmail = useSelector((state: any) => state.user);
 
-  useEffect(() => {
-    console.log("session", sessionToVerifyEmail.isVerifiedEmail);
-  });
-
   interface SessionUser {
     name?: string | null;
     email?: string | null;

src/components/Sidebar/index.tsx

@@ -23,10 +23,6 @@ const Sidebar = ({ verified }: Props) => {
 
   const isActive = (linkPath: string) => pathname.includes(linkPath);
 
-  useEffect(() => {
-    console.log("session", verified);
-  }, [verified]);
-
   return (
     <>
       <div className="w-full flex justify-between">

src/lib/types.ts

@@ -1,6 +1,7 @@
 export interface Profile {
   githubUsername: string;
   totalPoints: number;
+  rank: number;
 }
 
 export interface GithubDevProfile {