Add #6 Add hall of fame

lefthook.yml

@@ -3,10 +3,10 @@ pre-commit:
   commands:
     format:
       glob: "*.{js,ts,jsx}"
-      run: npm run format && git add .
+      run: npm run format {staged_files} && git add {staged_files}
     lint:
       glob: "*.{js,ts,jsx}"
-      run: npm run lint && git add .
+      run: npm run lint {staged_files} && git add {staged_files}
 
 commit-msg:
   commands:

src/components/home/score-board/index.jsx

@@ -0,0 +1,101 @@
+import { useEffect, useState } from "react";
+import { twMerge } from "tailwind-merge";
+import { ScoreCardSkeleton } from "@/components";
+import { ScoreCard } from "@/components/home";
+import { filters as filterData, sorts as sortData } from "@/filters";
+import { useTitle } from "@/hooks";
+import {
+  AnimatedSwitcher,
+  Filters,
+  NoRecords,
+  Pagination,
+  Sorts,
+  TwinSwitch
+} from "@sliit-foss/bashaway-ui/components";
+import { useGhostLegion, useRound } from "@sliit-foss/bashaway-ui/hooks";
+import { Ghost } from "@sliit-foss/bashaway-ui/icons";
+import { Footnote, Title } from "@sliit-foss/bashaway-ui/typography";
+import { computeFilterQuery, computeSortQuery } from "@sliit-foss/bashaway-ui/utils";
+
+const ScoreBoard = ({ pageTitle, title, subTitle, useFetchData }) => {
+  const [page, setPage] = useState(1);
+  const [filters, setFilters] = useState(computeFilterQuery(filterData));
+  const [sorts, setSorts] = useState(computeSortQuery(sortData));
+
+  const { rounds, round, roundKey, onRoundChange } = useRound();
+  const { ghostLegion, toggleGhostLegion } = useGhostLegion();
+  const { data: scores, isFetching } = useFetchData({ page, filters, sorts, round, ghostLegion });
+
+  useEffect(() => {
+    if (page !== 1) setPage(1);
+  }, [filters, sorts, round, ghostLegion]);
+
+  useTitle(pageTitle);
+
+  return (
+    <>
+      <div className="w-full flex flex-col justify-center items-center gap-6 mb-8 max-w-4xl">
+        <div className="flex flex-col items-center gap-2 md:gap-1 mb-2">
+          <Title className="tracking-normal pointer-events-none">{title}</Title>
+          <Footnote className="text-black/40 max-w-[500px] text-xl lg:text-center leading-6 pointer-events-none">
+            {subTitle}
+          </Footnote>
+          <TwinSwitch values={rounds} className="mt-5" onChange={onRoundChange} selectedValue={roundKey} />
+        </div>
+        <div className="w-full flex flex-col md:flex-row justify-between items-center gap-6 mb-8">
+          <Filters filters={filterData} setFilterQuery={setFilters} styles={{ root: "w-auto", filter: "md:w-full" }} />
+          <div className="flex flex-wrap justify-center items-center gap-y-3 gap-x-8" onClick={toggleGhostLegion}>
+            <div
+              className={twMerge(
+                "group flex justify-center items-center gap-3.5 transform translate-y-[1.5px] cursor-pointer transition-all duration-medium",
+                round == 2 ? "opacity-100 h-10 md:h-auto" : "opacity-0 h-0 md:h-auto"
+              )}
+            >
+              <span className="text-md text-black/70 group-hover:text-black/90 font-semibold transition-all duration-medium">
+                Ghost Legion
+              </span>
+              <Ghost
+                className={twMerge(
+                  "w-[1.4rem] h-[1.4rem] fill-current transition-all duration-medium",
+                  ghostLegion ? "text-[#f00]" : "text-black/60 group-hover:text-[#f00]"
+                )}
+              />
+            </div>
+            <Sorts
+              styles={{ root: "w-auto justify-end gap-8", sort: "justify-center md:justify-start w-full md:w-full" }}
+              sorts={sortData}
+              setSortQuery={setSorts}
+            />
+          </div>
+        </div>
+        <AnimatedSwitcher
+          show={isFetching}
+          className={`w-full flex flex-col gap-5 min-h-[150px] xl:min-h-[250px] 2xl:min-h-[350px]`}
+          component={<ScoreCardSkeleton />}
+          alternateComponent={
+            scores?.data?.docs?.length ? (
+              <>
+                {scores.data.docs.map((item, index) => (
+                  <ScoreCard item={item} round={round} key={`score-card-${index}`} />
+                ))}
+              </>
+            ) : (
+              <div className="h-full flex flex-1 items-center">
+                <NoRecords text="No leaders at the moment" />
+              </div>
+            )
+          }
+        />
+        <div className="w-full flex justify-center items-center mt-6 mb-2">
+          <Pagination
+            currentPage={page}
+            onPageChange={(newPage) => setPage(newPage)}
+            totalPages={scores?.data?.totalPages}
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ScoreBoard;

src/components/layout/header.jsx

@@ -1,8 +1,10 @@
 import { useState } from "react";
 import { RxCross1, RxHamburgerMenu } from "react-icons/rx";
 import { Link } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { twMerge } from "tailwind-merge";
 import { portalURL } from "@/constants";
+import { hallOfFame } from "@/constants/routes";
 import { useBreakpoint } from "@/hooks";
 import { BashawayLeaderboard } from "@/icons";
 import { AnimatedSwitcher, Button } from "@sliit-foss/bashaway-ui/components";
@@ -17,6 +19,9 @@ const Header = ({ className }) => {
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
 
   const breakpoints = useBreakpoint();
+  const { pathname } = useLocation();
+
+  const isHallOfFame = pathname === hallOfFame;
 
   return (
     <header
@@ -67,9 +72,19 @@ const Header = ({ className }) => {
                 : "opacity-0 pointer-events-none xl:opacity-100 xl:pointer-events-auto"
             )}
           >
+            <Link
+              to={isHallOfFame ? "/" : "/hall-of-fame"}
+              onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
+              aria-label="Home"
+              className="ml-[-1.6125rem] gap-2"
+            >
+              <div className="group flex gap-1.5 items-center">
+                <span className="link ml-8 xl:ml-0">{isHallOfFame ? "Leaderboard" : "Hall of Fame"}</span>
+              </div>
+            </Link>
             <div className="group flex gap-1.5 items-center">
               <a href="https://bashaway.sliitfoss.org" target="_blank" className="link ml-8 xl:ml-0" rel="noreferrer">
-                The competition
+                The Competition
               </a>
               <LinkIcon className="transform -rotate-45 before:w-[1.2rem] xl:before:w-[0.6rem] before:group-hover:w-[1.45rem] xl:before:group-hover:w-[0.75rem] translate-y-[-0.1rem]" />
             </div>

src/constants/annual-leaderboard/2023/final.json

@@ -0,0 +1,74 @@
+{
+  "data": [
+    {
+      "name": "TrackTech",
+      "email": "[email protected]",
+      "university": "University of Moratuwa",
+      "eliminated": false,
+      "score": 700
+    },
+    {
+      "name": "HereForTheBytes",
+      "email": "[email protected]",
+      "university": "UCSC",
+      "eliminated": false,
+      "score": 475
+    },
+    {
+      "name": "' OR 1=1 --",
+      "email": "[email protected]",
+      "university": "University of Moratuwa",
+      "eliminated": false,
+      "score": 425
+    },
+    {
+      "name": "REISUB",
+      "email": "[email protected]",
+      "university": "UCSC",
+      "eliminated": false,
+      "score": 300
+    },
+    {
+      "name": "The BroCode",
+      "email": "[email protected]",
+      "university": "University of Moratuwa",
+      "eliminated": false,
+      "score": 275
+    },
+    {
+      "name": "iCoders",
+      "email": "[email protected]",
+      "university": "University of Moratuwa",
+      "eliminated": false,
+      "score": 250
+    },
+    {
+      "name": "4bit",
+      "email": "[email protected]",
+      "university": "University of Moratuwa",
+      "eliminated": false,
+      "score": 250
+    },
+    {
+      "name": "MegaMinds",
+      "email": "[email protected]",
+      "university": "University of Moratuwa",
+      "eliminated": false,
+      "score": 225
+    },
+    {
+      "name": "5H4D0W\\ G4RD3N",
+      "email": "[email protected]",
+      "university": "SLIIT",
+      "eliminated": false,
+      "score": 150
+    },
+    {
+      "name": "WeDoNotSow",
+      "email": "[email protected]",
+      "university": "University of Moratuwa",
+      "eliminated": false,
+      "score": 50
+    }
+  ]
+}