Feat/college cp leaderboard

public/index.html

@@ -9,7 +9,7 @@
     <meta name="RECursion Website" content="RECursion 2023" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Roboto&family=Roboto+Slab:wght@900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300..900;1,300..900&family=Roboto&family=Roboto+Slab:wght@900&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Mullish:wght@300;400;600;700&display=swap" rel="stylesheet">

src/App.js

@@ -19,6 +19,7 @@ import AskREC from "./components/AskREC";
 import Events from "./components/Events/Events";
 import GetStarted from "./components/GetStarted/GetStarted";
 import ContentsPage from "./components/GetStarted/ContentsPage";
+import Leaderboard from "./components/Leaderboard/Leaderboard";
 import NotFound from "./components/NotFound";
 import React from "react";
 import { LoadingProvider } from "./context/LoadingContext";
@@ -47,16 +48,14 @@ function App() {
               <Route path="forgot-password" element={<ResetPassword />} />
               <Route path="alumni" element={<Alumni />} />
               <Route path="events" element={<Events />} />
+              <Route path="leaderboard" element={<Leaderboard />} />
               <Route path="get_started" element={<ContentsPage />} />
               <Route path="get_started/:subtopicId" element={<GetStarted />} />
               <Route
                 path="profile/reset/:uidb64/:newtoken"
                 element={<ResetPasswordForm />}
               />
-              <Route
-                path="reset/sent"
-                element={<ResetPasswordSent />}
-              />
+              <Route path="reset/sent" element={<ResetPasswordSent />} />
 
               {/* private routes */}
               <Route element={<RequireAuth />}>

src/api/leaderboard.js

@@ -0,0 +1,27 @@
+import axios from "./axios";
+
+export const getLeaderboard = async ({
+  platform = "codeforces",
+  search = "",
+  batch = "",
+  showInactive = false,
+} = {}) => {
+  const params = {};
+  if (platform) params.platform = platform;
+  if (search) params.search = search;
+  if (batch && batch !== "all") params.batch = batch;
+  if (showInactive) params["show_inactive"] = "true";
+
+  const response = await axios.get("/leaderboard/", { params });
+  return response.data;
+};
+
+export const refreshLeaderboard = async () => {
+  const response = await axios.post("/leaderboard/refresh/");
+  return response.data;
+};
+
+export const getLeaderboardCooldown = async () => {
+  const response = await axios.get("/leaderboard/cooldown/");
+  return response.data;
+};

src/components/Layout.jsx

@@ -1,5 +1,11 @@
 import React, { useState, useEffect } from "react";
-import { Outlet, Link, NavLink, useNavigate, useLocation } from "react-router-dom";
+import {
+  Outlet,
+  Link,
+  NavLink,
+  useNavigate,
+  useLocation,
+} from "react-router-dom";
 import useAuth from "../hooks/useAuth";
 import {
   Box,
@@ -36,13 +42,19 @@ const Layout = () => {
       if (user && location.pathname !== "/profile/edit") {
         try {
           const profile = await getProfile();
-          const isNameMissing = !profile.name || (typeof profile.name === "string" && profile.name.trim() === "");
-          const isCollegeMissing = !profile.college || (typeof profile.college === "string" && profile.college.trim() === "");
+          const isNameMissing =
+            !profile.name ||
+            (typeof profile.name === "string" && profile.name.trim() === "");
+          const isCollegeMissing =
+            !profile.college ||
+            (typeof profile.college === "string" &&
+              profile.college.trim() === "");
 
           if (isNameMissing || isCollegeMissing) {
             toast({
               title: "Profile Incomplete",
-              description: "You must complete your profile (Name & College) to continue.",
+              description:
+                "You must complete your profile (Name & College) to continue.",
               status: "warning",
               duration: 3000,
               isClosable: true,
@@ -138,6 +150,13 @@ const Layout = () => {
           >
             Events
           </MenuItem>
+          <MenuItem
+            to="/leaderboard"
+            isActive={activeLink === "/leaderboard"}
+            onClick={() => setActiveLink("/leaderboard")}
+          >
+            Leaderboard
+          </MenuItem>
           <MenuItem
             to="/get_started"
             isActive={activeLink === "/get_started"}
@@ -249,6 +268,7 @@ const Layout = () => {
             {/* Same links as above */}
             <MenuItem to="/experience">Interview Experiences</MenuItem>
             <MenuItem to="/events">Events</MenuItem>
+            <MenuItem to="/leaderboard">Leaderboard</MenuItem>
             <MenuItem to="/get_started">Getting Started</MenuItem>
             <MenuItem to="/team">Team</MenuItem>
             {!user ? (
@@ -330,12 +350,13 @@ const MenuItem = ({ to, children, isActive, onClick, noHoverEffect }) => {
       >
         <Text
           as="span"
-          className={`relative text-xl w-fit block ${!noHoverEffect
-            ? isActive
-              ? "after:block after:content-[''] after:absolute after:h-[3px] after:bg-[#58CDFF] after:w-full after:scale-x-100"
-              : "after:block after:content-[''] after:absolute after:h-[3px] after:bg-[#ffffff] after:w-full after:scale-x-0 hover:after:scale-x-100"
-            : ""
-            } after:transition after:duration-300 after:origin-center`}
+          className={`relative text-xl w-fit block ${
+            !noHoverEffect
+              ? isActive
+                ? "after:block after:content-[''] after:absolute after:h-[3px] after:bg-[#58CDFF] after:w-full after:scale-x-100"
+                : "after:block after:content-[''] after:absolute after:h-[3px] after:bg-[#ffffff] after:w-full after:scale-x-0 hover:after:scale-x-100"
+              : ""
+          } after:transition after:duration-300 after:origin-center`}
           fontSize="18px"
           transition="color 0.3s"
           _hover={{