Merge pull request #32 from druvkotwani/fix/leetboard

druvkotwani · web-flow · commit 1e8035916917 · 2024-08-09T14:58:21.000+05:30
Fix/leetboard
diff --git a/client/src/app/components/Card.tsx b/client/src/app/components/Card.tsx
@@ -5,31 +5,37 @@ import SocialLinks from "./SocialLinks";
 
 export const data = {
   profileData: {
+    username: "druv_kotwani",
+    rank: 263817,
     image: "https://assets.leetcode.com/users/avatars/avatar_1672478903.png",
-    fullName: "John Doe",
-    username: "johndoe",
-    rank: "203432",
+    fullName: "Dhruv Kotwani",
   },
   aboutData: {
-    github: { link: "https://github.com/druvkotwani", text: "druvkotwani" },
-    twitter: { link: "https://twitter.com/druv_kotwani", text: "druv_kotwani" },
+    github: {
+      link: "https://github.com/druvkotwani",
+      text: "Github",
+    },
+    website: {
+      link: "https://dhruvkotwani.vercel.app",
+      text: "Website",
+    },
     linkedin: {
       link: "https://linkedin.com/in/dhruv-kotwani",
-      text: "dhruv-kotwani",
+      text: "LinkedIn",
     },
-    website: {
-      link: "https://dhruvkotwani.me",
-      text: "dhruvkotwani.vercel.app",
+    twitter: {
+      link: "https://twitter.com/druv_kotwani",
+      text: "Twitter",
     },
   },
-
-  totalSolved: 100,
-  easySolved: 50,
-  easyTotal: 100,
-  mediumSolved: 30,
-  mediumTotal: 50,
-  hardSolved: 20,
-  hardTotal: 50,
+  total: 3247,
+  easyTotal: 817,
+  mediumTotal: 1704,
+  hardTotal: 726,
+  totalSolved: 306,
+  easySolved: 175,
+  mediumSolved: 110,
+  hardSolved: 21,
 };
 
 export default function Card({ userData = data, index }: any) {
diff --git a/client/src/app/components/GenerateStats.tsx b/client/src/app/components/GenerateStats.tsx
@@ -50,6 +50,12 @@ const GenerateStats = ({ showStats, setShowStats }: any) => {
         body: JSON.stringify(data),
       });
       const result = await response.json();
+
+      if (!result.success) {
+        toast("👻 Username already exists in LeetBoard");
+        return;
+      }
+
       if (result.success) {
         setDatas([...datas, data]);
         toast("🥷Data added to the hall of fame");
diff --git a/client/src/app/components/SocialLinks.tsx b/client/src/app/components/SocialLinks.tsx
@@ -4,71 +4,46 @@ import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
 const SocialLinks = ({ result, index }: any) => {
-  const [hovered, setHovered] = useState<string | null>(null);
-  const random = Math.floor(Math.random() * 1);
-
-  function truncateText(text: any, maxLength: any) {
-    if (text && text.length > maxLength) {
-      return text.substring(0, maxLength) + "...";
-    }
-    return text;
-  }
   return (
-    <div className="mt-4 mb-2 flex flex-col justify-self-start">
+    <div className="mt-2 mb-2 grid grid-cols-2 gap-2">
       {/* <p className="flex">
-                <iconify-icon icon="carbon:location" width="17" height="19" style={{ color: 'white', marginRight: '5px' }}></iconify-icon>
+                <iconify-icon icon="carbon:location" width="21" height="23" style={{ color: 'white', marginRight: '5px' }}></iconify-icon>
                 <span className='text-sm text-[#BDBEC3] '>India</span>
             </p> */}
       {result?.website?.link && (
         <Link
-          onMouseEnter={() => setHovered("website")}
-          onMouseLeave={() => setHovered(null)}
           target="_blank"
           rel="noreferrer"
           href={result?.website?.link}
           className="flex"
         >
           <Image
             src="/assets/icons/globe.svg"
-            width={17}
-            height={19}
+            width={25}
+            height={23}
             alt="Website"
-            className="mr-1"
+            className="mr-1 hover:scale-125 ease-in transition-all transform duration-300 hover:rotate-180"
           />
-          <span className="text-sm text-[#BDBEC3] ">
-            <p className={`${hovered === "website" ? "text-[#f7f7f7]" : ""}`}>
-              {truncateText(result?.website?.text, 10)}
-            </p>
-          </span>
         </Link>
       )}
       {result?.github?.link && (
         <Link
-          onMouseEnter={() => setHovered("github")}
-          onMouseLeave={() => setHovered(null)}
           target="_blank"
           rel="noreferrer"
           href={result?.github?.link}
           className="flex"
         >
           <Image
             src="/assets/icons/github.svg"
-            width={17}
-            height={19}
+            width={21}
+            height={23}
             alt="Github"
-            className="mr-1"
+            className="mr-1 hover:scale-125 ease-in transition-all transform duration-300 "
           />
-          <span className="text-sm text-[#BDBEC3] ">
-            <p className={`${hovered === "github" ? "text-[#f7f7f7]" : ""}`}>
-              {truncateText(result?.github?.text, 10)}
-            </p>
-          </span>
         </Link>
       )}
       {result?.twitter?.link && (
         <Link
-          onMouseEnter={() => setHovered("twitter")}
-          onMouseLeave={() => setHovered(null)}
           target="_blank"
           rel="noreferrer"
           href={result?.twitter?.link}
@@ -77,21 +52,14 @@ const SocialLinks = ({ result, index }: any) => {
           <Image
             src="/assets/icons/twitter.svg"
             alt="twitter"
-            width={17}
-            height={19}
-            className="mr-1"
+            width={21}
+            height={23}
+            className="mr-1 hover:scale-125 ease-in transition-all transform duration-300 "
           />
-          <span className="text-sm text-[#BDBEC3] ">
-            <p className={`${hovered === "twitter" ? "text-[#f7f7f7]" : ""}`}>
-              {truncateText(result?.twitter?.text, 10)}
-            </p>
-          </span>
         </Link>
       )}
       {result?.linkedin?.link && (
         <Link
-          onMouseEnter={() => setHovered("linkedin")}
-          onMouseLeave={() => setHovered(null)}
           target="_blank"
           rel="noreferrer"
           href={result?.linkedin?.link}
@@ -100,15 +68,10 @@ const SocialLinks = ({ result, index }: any) => {
           <Image
             src="/assets/icons/linkedin.svg"
             alt="linkedin"
-            width={17}
-            height={19}
-            className="mr-1"
+            width={21}
+            height={23}
+            className="mr-1 hover:scale-125 ease-in transition-all transform duration-300 "
           />
-          <span className="text-sm text-[#BDBEC3] ">
-            <p className={`${hovered === "linkedin" ? "text-[#f7f7f7]" : ""}`}>
-              {truncateText(result?.linkedin?.text, 10)}
-            </p>
-          </span>
         </Link>
       )}
     </div>
diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
@@ -5,7 +5,7 @@ import Navbar from "./components/Navbar";
 import Card from "./components/Card";
 import Footer from "./components/Footer";
 import GenerateStats from "./components/GenerateStats";
-import { useContext, useEffect, useState } from "react";
+import { use, useContext, useEffect, useState } from "react";
 import PromotionCard from "./components/PromotionCard";
 import { DataContext } from "./context/DataContext";
 import { ToastContainer } from "react-toastify";
@@ -17,13 +17,13 @@ export default function Home() {
   const [loading, setLoading] = useState(true);
   const [search, setSearch] = useState<string>("");
   const [showStats, setShowStats] = useState(false);
+  const [sortBy, setSortBy] = useState("default");
 
   const fetchData = async () => {
     try {
       const res = await fetch("/api/fetchdata");
       const data = await res.json();
       setDatas(data.data);
-      console.log(data.data);
       setLoading(false);
     } catch (error) {
       console.error("Error fetching messages:", error);
@@ -34,9 +34,32 @@ export default function Home() {
     fetchData();
   }, [datas && datas.length]);
 
+  useEffect(() => {
+    setTimeout(() => {
+      setShowStats(true);
+    }, 5000);
+  }, []);
+
+  const handleSortChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setSortBy(e.target.value);
+  };
+
   const searchedData = datas?.filter((data: any) =>
     data.profileData.fullName.toLowerCase().includes(search.toLowerCase())
   );
+  const sorting = (data: any[]) => {
+    switch (sortBy) {
+      case "question-solved":
+        return data.slice().sort((a, b) => b.totalSolved - a.totalSolved);
+      case "default":
+      default:
+        return data.slice().sort((a, b) => {
+          return (
+            new Date(b.timeStamp).getTime() - new Date(a.timeStamp).getTime()
+          );
+        });
+    }
+  };
 
   return (
     <section className="px-4 lg:px-24 relative ">
@@ -56,7 +79,18 @@ export default function Home() {
 
       <GenerateStats showStats={showStats} setShowStats={setShowStats} />
 
-      <div className="mt-32  max-w-7xl mx-auto  place-items-center grid grid-cols-1 md:grid-cols-2 gap-y-8 xl:grid-cols-3 font-sourcecodepro gap-x-4">
+      <div className="w-full flex items-center justify-center  ">
+        <select
+          value={sortBy}
+          onChange={handleSortChange}
+          className="mt-28 rounded border-2 border-[#f7f7f7]  w-64 bg-[#0e0e0e] text-white p-2 font-sourcecodepro"
+        >
+          <option value="default">Sort By Default</option>
+          <option value="question-solved">Sort By Questions Solved</option>
+        </select>
+      </div>
+
+      <div className="mt-8  max-w-7xl mx-auto  place-items-center grid grid-cols-1 md:grid-cols-2 gap-y-8 xl:grid-cols-3 font-sourcecodepro gap-x-4">
         <PromotionCard />
         {loading ? (
           <>
@@ -65,16 +99,9 @@ export default function Home() {
             ))}
           </>
         ) : (
-          searchedData &&
-          searchedData
-            .sort(
-              (a: any, b: any) =>
-                new Date(b.timeStamp).getTime() -
-                new Date(a.timeStamp).getTime()
-            )
-            .map((userData: any, index: number) => (
-              <Card userData={userData} index={index} key={index} />
-            ))
+          sorting(searchedData).map((userData: any, index: number) => (
+            <Card userData={userData} index={index} key={index} />
+          ))
         )}
       </div>
 
