From 52b274853a61615de2159cb09241d5d2275bdb76 Mon Sep 17 00:00:00 2001
From: Nusab Taha <nusabtaha33@gmail.com>
Date: Sat, 31 Aug 2024 04:22:43 +0600
Subject: [PATCH] no cache

---
 components/Navbar.jsx         | 22 +++++++++--
 components/ProfileBody.jsx    | 74 +++++++++++++++++++++--------------
 components/ProfilePage.jsx    |  4 +-
 components/Table.jsx          |  4 +-
 helpers/getLeaderboardData.js | 20 +++-------
 helpers/makeRequest.js        |  2 +-
 6 files changed, 73 insertions(+), 53 deletions(-)

diff --git a/components/Navbar.jsx b/components/Navbar.jsx
index ce67d63..5951a3d 100644
--- a/components/Navbar.jsx
+++ b/components/Navbar.jsx
@@ -6,8 +6,23 @@ import Image from "next/image";
 
 const Navbar = () => {
   const [theme, setTheme] = useState(null);
+  const [extraClass, setExtraClass] = useState("");
+  const [scrollY, setScrollY] = useState(0);
+  // Hide Navbar on Scroll
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrollY(window.scrollY);
+      if (scrollY > window.scrollY) {
+        setExtraClass("");
+      } else {
+        setExtraClass("-translate-y-full");
+      }
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [scrollY]);
 
-  // Do NOT even think about touching this useEffect hook. It's a mess. 
+  // Do NOT even think about touching this useEffect hook. It's a mess.
   useEffect(() => {
     function changeTheme(newTheme) {
       const bodyTheme = document.documentElement.classList;
@@ -42,9 +57,10 @@ const Navbar = () => {
     localStorage.setItem("theme", theme);
   }, [theme]);
 
-
   return (
-    <nav className="fixed left-0 top-0 flex w-full items-center justify-between border-b-2 border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800">
+    <nav
+      className={`fixed left-0 top-0 flex w-full items-center justify-between border-b-2 border-gray-300 bg-white transition-all duration-300 dark:border-gray-800 dark:bg-gray-900 ${extraClass}`}
+    >
       <Link href="/">
         <div className="mx-5 my-2 flex items-center justify-start gap-3">
           <Image
diff --git a/components/ProfileBody.jsx b/components/ProfileBody.jsx
index f08c76d..26cef17 100644
--- a/components/ProfileBody.jsx
+++ b/components/ProfileBody.jsx
@@ -20,55 +20,69 @@ const ProfileBody = ({ props }) => {
   const { data, userName, selected, PHOTO_URL } = props;
 
   return (
-    <div className="mx-1 overflow-x-auto bg-white text-[#2f353b] shadow-md sm:rounded-lg md:mx-5 dark:bg-gray-800 dark:text-gray-100">
+    <div className="mx-1 overflow-x-auto bg-white text-[#2f353b] shadow-md sm:rounded-lg md:mx-5 dark:bg-gray-800/30 dark:text-gray-100">
       <Image
         src={`${PHOTO_URL}/${userName}.jpg`}
         alt={`${userName}'s Profile Picture`}
         width={200}
         height={200}
-        className="rounded-lg md:mx-6 md:mt-6 md:-mb-2 mx-auto mt-6"
+        className="mx-auto mt-6 rounded-lg md:mx-6 md:-mb-2 md:mt-6"
       />
 
       <div className="p-5 text-left font-semibold">
-        <div className="flex items-center justify-start gap-2">
+        <Link
+          href={`https://toph.co/u/${userName}`}
+          target="_blank"
+          className="ml-1 rounded-md bg-blue-500 bg-opacity-10 px-3 py-2 text-xl text-blue-500 hover:bg-opacity-15 md:text-2xl lg:text-3xl dark:bg-blue-400 dark:bg-opacity-5 dark:text-blue-400 dark:hover:bg-opacity-10"
+        >
+          @{userName}
+        </Link>
+        <div className="flex items-center justify-start gap-2 py-5">
           <span>{iconList[selected]}</span>
-          <span className="flex flex-wrap items-center gap-2 text-xl md:text-4xl">
-            {selected.titleCase()} Solves by{" "}
-            <Link
-              href={`https://toph.co/u/${userName}`}
-              target="_blank"
-              className="rounded-md bg-emerald-500 bg-opacity-10 px-4 py-2 text-emerald-500 hover:bg-opacity-15 dark:bg-emerald-400 dark:bg-opacity-5 dark:text-emerald-400 dark:hover:bg-opacity-10"
-            >
-              {userName}
-            </Link>
-          </span>
+          <h2 className="font-mono text-lg tracking-widest underline underline-offset-8 md:text-xl">
+            {motto[selected]}
+          </h2>
+        </div>
+        <div className="whitespace-pre font-semibold text-gray-700 dark:text-gray-300">
+          <p>
+            Fastest<span className="ml-[15px] mr-1">:</span>
+            <code className="text-center font-mono tracking-wide">
+              {data.fastest.length}
+            </code>
+          </p>
+          <p>
+            Lightest<span className="ml-[8px] mr-1">:</span>
+            <code className="text-center font-mono tracking-wide">
+              {data.lightest.length}
+            </code>
+          </p>
+          <p>
+            Shortest
+            <span className="ml-[6px] mr-1">:</span>
+            <code className="text-center font-mono tracking-wide">
+              {data.shortest.length}
+            </code>
+          </p>
         </div>
-
-        <p className="mb-1 mt-5 text-base font-normal text-gray-500 dark:text-gray-200">
-          The table below shows the {selected.capitalize()} submissions of{" "}
-          <span className="font-semibold text-gray-700 dark:text-gray-300">
-            {userName}
-          </span>{" "}
-          on toph.co
-          <br />
-          <code className="inline-block rounded-md py-1 font-bold text-gray-700 dark:text-gray-300">
-            {userName} has <b>{data[selected].length}</b>{" "}
-            {selected.capitalize()} submissions in toph.co
-          </code>
-        </p>
       </div>
 
       <table className="w-full">
         <thead>
-          <tr className="bg-gray-100 font-bold uppercase dark:bg-gray-700 dark:bg-opacity-50 dark:text-gray-200">
+          <tr className="bg-gray-100 font-bold uppercase dark:bg-gray-800 dark:bg-opacity-50 dark:text-gray-200">
             <th className="flex items-center">
               <div className="w-5 px-6 py-3">#</div>
               <div className="px-6 py-3">Problems</div>
             </th>
           </tr>
         </thead>
-
-        <tbody className="divide-y-2 divide-gray-200 dark:divide-gray-700">
+        {data[selected].length === 0 && (
+          <div className="flex h-64 items-center justify-center">
+            <p className="text-lg font-bold md:text-2xl lg:text-4xl">
+              Nothing Here...
+            </p>
+          </div>
+        )}
+        <tbody className="divide-y-2 divide-gray-200 dark:divide-gray-800">
           {Object.keys(data[selected]).map((_, index) => {
             return (
               <tr
@@ -81,7 +95,7 @@ const ProfileBody = ({ props }) => {
                     key={index}
                     href={`https://toph.co/p/${data[selected][index]}`}
                     target="_blank"
-                    className="group ml-5 flex items-center justify-center gap-2 rounded-md bg-[#d2cbcb] bg-opacity-10 px-3 py-1 text-start hover:bg-opacity-15 hover:text-emerald-500 dark:bg-opacity-5 dark:hover:bg-opacity-10 dark:hover:text-emerald-400"
+                    className="group ml-5 flex items-center justify-center gap-2 rounded-md bg-[#d2cbcb] bg-opacity-10 px-3 py-1 text-start hover:bg-opacity-15 hover:text-sky-500 dark:bg-opacity-5 dark:hover:bg-opacity-10 dark:hover:text-sky-400"
                   >
                     {data[selected][index].replace(/-/g, " ")}
                     <svg
diff --git a/components/ProfilePage.jsx b/components/ProfilePage.jsx
index 7da4e29..b999169 100644
--- a/components/ProfilePage.jsx
+++ b/components/ProfilePage.jsx
@@ -39,8 +39,8 @@ const ProfilePage = ({ props }) => {
   return (
     <div className="mt-24">
       <Link
-        href="/"
-        className="mx-1 flex w-fit items-center gap-2 rounded-md bg-[#3598dc] px-4 py-3 text-lg text-[#e7ecf1] transition duration-100 ease-in-out hover:bg-[#3587bd] md:mx-5 dark:bg-[#2283c3] dark:hover:bg-[#3598dc]"
+        href={`/?q=${selected}`}
+        className="mx-1 flex w-fit items-center gap-2 rounded-md bg-[#3598dc] px-4 py-3 text-lg text-[#e7ecf1] transition duration-100 ease-in-out hover:bg-[#3587bd] md:mx-5 dark:bg-[#2283c3] dark:hover:bg-[#3599dc88]"
       >
         {icons.goback} Go Back
       </Link>
diff --git a/components/Table.jsx b/components/Table.jsx
index 6b084c5..3b803a1 100644
--- a/components/Table.jsx
+++ b/components/Table.jsx
@@ -28,7 +28,7 @@ const Table = ({ props }) => {
   const { data, selected } = props;
 
   return (
-    <div className="mx-1 overflow-x-auto bg-white text-[#2f353b] shadow-md sm:rounded-lg md:mx-5 dark:bg-gray-800 dark:text-gray-100">
+    <div className="mx-1 overflow-x-auto bg-white text-[#2f353b] shadow-md sm:rounded-lg md:mx-5 dark:bg-gray-800/30 dark:text-gray-100">
       <div className="p-5 text-left font-semibold">
         <span className="flex items-center justify-start gap-2">
           <span>{iconList[selected]}</span>
@@ -52,7 +52,7 @@ const Table = ({ props }) => {
       <table className="w-full">
 
         <thead>
-          <tr className="flex items-center justify-between bg-gray-100 font-bold uppercase dark:bg-gray-700 dark:bg-opacity-50 dark:text-gray-200">
+          <tr className="flex items-center justify-between bg-gray-100 font-bold uppercase dark:bg-gray-800 dark:bg-opacity-50 dark:text-gray-200">
             <th className="flex items-center">
               <div className="w-5 px-6 py-3">#</div>
               <div className="px-6 py-3">Solvers</div>
diff --git a/helpers/getLeaderboardData.js b/helpers/getLeaderboardData.js
index bd52056..6eb2e06 100644
--- a/helpers/getLeaderboardData.js
+++ b/helpers/getLeaderboardData.js
@@ -1,18 +1,8 @@
 export default async function getLeaderboardData() {
   const rootURL = process.env.ROOT_URL || "http://localhost:3000";
-  try {
-    const res = await fetch(`${rootURL}/api/leaderboard`, {
-      next: { revalidate: 60 * 10 }, // 10 minutes
-    });
-    const data = await res.json();
-    return data;
-    
-  } catch (error) {
-    console.log(`Error while fetching leaderboard data: ${error}`);
-    const res = await fetch("https://toph-api.onrender.com/getData", {
-      next: { revalidate: 60 * 10 }, // 10 minutes
-    });
-    const data = await res.json();
-    return data;
-  }
+  const res = await fetch(`${rootURL}/api/leaderboard`, {
+    next: { revalidate: 60 * 5 }, // 5 minutes
+  });
+  const data = await res.json();
+  return data;
 }
diff --git a/helpers/makeRequest.js b/helpers/makeRequest.js
index d096233..906f51a 100644
--- a/helpers/makeRequest.js
+++ b/helpers/makeRequest.js
@@ -9,7 +9,7 @@ const options = {
     "User-Agent": "Node.js",
   },
   next: {
-    revalidate: 60 * 10,
+    revalidate: 0,
   },
 };