Merge pull request #426 from UppuluriKalyani/main

Added Ranks/ Position gained in GSSoC'24 Leaderboard on the certificate
girlscript · Sep 18, 2024 · d358e24 · d358e24
2 parents d036fae + ec850a7
commit d358e24
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 350 deletions.
diff --git a/components/Certi_Comp.js b/components/Certi_Comp.js
@@ -237,6 +237,10 @@ const Certi_Comp = (props) => {
             <div id="contrib_name" className={`${props.year==2024?"contrib_name_2024":"contrib_name_2023"} text-big-orange`}>
               {props.verified ? props.Name : "X".repeat(props.Name.length)}
             </div>
+            <div id="rank_display" className="rank_display_2024 text-big-black">
+            {props.verified ? `Rank: ${props.Rank}` : "Rank: X".repeat(props.Rank.length)}
+            </div>
+
             <h5 className="cert_id_2024 text-sm  font-bold">
               Certificate ID: <span className="font-normal">{certificateId}</span>
             </h5>
@@ -255,6 +259,10 @@ const Certi_Comp = (props) => {
             <div id="contrib_name" className={`${props.year==2024?"contrib_name_2024":"contrib_name_2023"} text-big-orange`}>
               {props.verified ? props.Name : "X".repeat(props.Name.length)}
             </div>
+            <div id="rank_display" className="toprank_display_2024 text-big-black">
+            {props.verified ? `Rank: ${props.Rank}` : "Rank: X".repeat(props.Rank.length)}
+            </div>
+
             <h5 className="cert_id_2024 text-sm  font-bold">
               Certificate ID: <span className="font-normal">{certificateId}</span>
             </h5>
@@ -368,7 +376,7 @@ const Certi_Comp = (props) => {
             : "dark:text-black bg-gradient-to-b from-slate-600 to-orange-400 text-md text-white w-full font-medium py-3 px-5 rounded mb-3 text-md text-white font-bold px-5 py-1 rounded md:text-xl md:py-3"
         }
         onClick={Switcher}
-        disabled={props.verified}
+        disabled={!props.verified}
       >
         Verify
       </button>

diff --git a/pages/verify_cert.js b/pages/verify_cert.js
@@ -1,6 +1,6 @@
 import { Spacer } from "@chakra-ui/react";
 import Head from "next/head";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 // import FileSaver from "file-saver";
 // import CertImg from "../components/cert.svg";
 import dynamic from "next/dynamic";
@@ -16,6 +16,8 @@ const Cert = () => {
   const [Role, setRole] = useState("Contributor");
   const [verified, setVerified] = useState(false);
   const [year, setYear] = useState("2024");
+  const [githubId, setGithubId] = useState("");
+  const [rank, setRank] = useState("");
 
   const setVerifiedTrue = () => {
     setVerified(true);
@@ -46,6 +48,37 @@ const Cert = () => {
   //     })
   // }, [ref]);
 
+  useEffect(() => {
+    const verifyGithubId = async () => {
+      if (!githubId) return; 
+
+      try {
+        const response = await fetch("/leaderboards/leaderboard24.json");
+        const leaderboard = await response.json();
+
+        const userIndex = leaderboard.leaderboard.findIndex(
+          (user) => user.login.toLowerCase() === githubId.toLowerCase()
+        );
+
+        if (userIndex === -1) {
+          setRank(""); 
+          setVerified(false);
+          return;
+        }
+
+        const rank = userIndex + 1;
+        setRank(rank); 
+        setVerified(true);
+      } catch (error) {
+        console.error("Error verifying GitHub ID:", error);
+        setRank(""); 
+        setVerified(false); 
+      }
+    };
+
+    verifyGithubId();
+  }, [githubId]);
+
   return (
     <>
       <Head>
@@ -116,13 +149,32 @@ const Cert = () => {
           <option value="Speaker">Speaker</option>
           <option value="Organizing Team">Organizing Team</option>
         </select>
-        <Spacer mt={20} />
+        <Spacer mt={3} />
         {/* <img
           src="https://res.cloudinary.com/dqjtoo2h2/image/upload/l_text:helvetica_72_bold_normal_left:Contributor/fl_layer_apply,g_center,x_0.2,y_-0.1/CA_Speaker_certificate_oqydmx.jpg"
           className="w-full h-auto mt-4"
           id="canvas"
         /> */}
-        <Certi_Comp Name={Name} Role={Role} Email={Email} verified={verified} setVerified={setVerifiedTrue} year={year} />
+        <label className="text-black dark:text-primary_orange-0 font-semibold mt-3 text-lg">
+          Enter GitHub ID*
+        </label>
+        <input
+          type="text"
+          className="text-primary_orange-0 dark:text-white dark:border-slate-200 border-black border-2 rounded-md font-semibold mt-2 text-xs sm:text-sm md:text-lg"
+          value={githubId}
+          onChange={(e) => setGithubId(e.target.value)}
+          disabled={verified}
+        ></input>
+        <label className="text-black dark:text-primary_orange-0 font-semibold mt-3 text-lg">
+          Rank
+        </label>
+        <input
+          type="text"
+          className="text-primary_orange-0 dark:text-white dark:border-slate-200 border-black border-2 rounded-md font-semibold mt-2 text-xs sm:text-sm md:text-lg"
+          value={rank}
+          disabled
+        ></input>
+        <Certi_Comp Name={Name} Role={Role} Email={Email} Rank={rank} verified={verified} setVerified={setVerifiedTrue} year={year} />
       </div>
     </>
   );