Merge pull request #3 from BYU-CPC/make-leaderboards-modular

make leaderboards modular and add progress bar

src/components/Countdown.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { useLeaderboardIndex } from "../hooks/UseLeaderboard";
+import { useDebounce } from "use-debounce";
+import ProgressBar from "./ProgressBar";
+
+const formatTime = (time: number) => {
+  if (time < 0) {
+    return "Ended";
+  }
+  const seconds = String(Math.floor((time / 1000) % 60)).padStart(2, "0");
+  const minutes = String(Math.floor((time / (1000 * 60)) % 60)).padStart(
+    2,
+    "0"
+  );
+  const hours = Math.floor((time / (1000 * 60 * 60)) % 24);
+  const days = Math.floor(time / (1000 * 60 * 60 * 24));
+  if (days) return `${days} days, ${hours}:${minutes}:${seconds}`;
+  return `${hours}:${minutes}:${seconds}`;
+};
+
+//Take in react props like classname
+function Countdown({
+  leaderboard,
+  className,
+}: {
+  leaderboard: string;
+  className?: string;
+}) {
+  const { data } = useLeaderboardIndex();
+  const board = data?.[leaderboard];
+  const currentTime = useDebounce(new Date(), 500)[0];
+  if (!board) return null;
+  const timeDisplay = formatTime(board.end.getTime() - currentTime.getTime());
+  const progress =
+    (currentTime.getTime() - (board.start.getTime() ?? 0)) /
+    ((board.end.getTime() ?? 1) - (board.start.getTime() ?? 0));
+  return (
+    <ProgressBar
+      progress={progress}
+      display={timeDisplay}
+      className={className}
+    />
+  );
+}
+
+export default Countdown;

src/components/Leaderboard.css

@@ -2,18 +2,6 @@
   gap: 20px;
 }
 
-.expBar {
-  background-color: var(--bg-color);
-  height: 4px;
-}
-
-.expBarFill {
-  background-color: #2196f3;
-  border-radius: 5px;
-  /* glow */
-  box-shadow: 0 0 10px #2196f399;
-}
-
 .relative {
   position: relative;
 }

src/components/Leaderboard.tsx

@@ -8,6 +8,7 @@ import { useSearchParams } from "react-router-dom";
 import { useAllStudyProblems, useProblems } from "../hooks/UseProblem";
 import { useQueries } from "@tanstack/react-query";
 import { getStats } from "../score/score";
+import { useLeaderboardIndex } from "../hooks/UseLeaderboard";
 
 function formatCodeforcesId(input: string) {
   const match = input.match(/^(\d+)(\D.*)$/);
@@ -43,15 +44,18 @@ export function Leaderboard() {
   const leaderboard = params.get("leaderboard") || "all";
   const { data: allProblems } = useProblems();
   const { data: allStudyProblems } = useAllStudyProblems();
+  const { data: leaderboardIndex } = useLeaderboardIndex();
+  const leaderboardData = leaderboardIndex?.[leaderboard];
+
   const calculatedUsers = useQueries({
     queries: users.map((user) => ({
       queryKey: [leaderboard, "score", user.id],
       queryFn: async () => {
-        return allProblems && allStudyProblems
-          ? getStats(user, allProblems, allStudyProblems)
-          : null;
+        return allProblems && allStudyProblems && leaderboardData
+          ? getStats(user, allProblems, allStudyProblems, leaderboardData)
+          : undefined;
       },
-      enabled: !!allProblems && !!allStudyProblems,
+      enabled: !!allProblems && !!allStudyProblems && !!leaderboardData,
       staleTime: 1000 * 60 * 5,
     })),
     combine: (results) => results.map((r) => r.data).filter((a) => !!a),

src/components/LeaderboardRow.tsx

@@ -5,6 +5,7 @@ import DeadFlame from "../icons/DeadFlame";
 import React from "react";
 import { useThisWeek } from "../hooks/UseWeek";
 import { UserStats } from "../score/score";
+import ProgressBar from "./ProgressBar";
 function WeeklyProblemBox({
   solved,
   allProblemsLength,
@@ -17,7 +18,7 @@ function WeeklyProblemBox({
       className={`center rounded tiny transparent ${
         solved === 2 ? "bg-green" : solved === 1 ? "outline-green" : ""
       }`}
-      style={{ width: `${100 / allProblemsLength}%` }}
+      style={{ width: `${100 / allProblemsLength}%`, userSelect: "none" }}
     >
       ✓
     </div>
@@ -106,7 +107,7 @@ export function LeaderboardRow({ userStats, rank, isMe }: LeaderboardRowProps) {
               </div>
             </div>
             <div className="flexRow gap-12">
-              <div>
+              <div data-tooltip-id={userId + "-exp"}>
                 <span className="small">Lv.</span>{" "}
                 <span className="bold">{userStats.level.level}</span>
               </div>
@@ -145,7 +146,13 @@ export function LeaderboardRow({ userStats, rank, isMe }: LeaderboardRowProps) {
             )}
           </div>
         </div>
-        <div className="expBar w-full" data-tooltip-id={userId + "-exp"}>
+        <ProgressBar
+          progress={
+            userStats.level.currentExp /
+            (userStats.level.currentExp + userStats.level.nextLevel)
+          }
+        />
+        <div className="expBar w-full">
           <div
             className="expBarFill h-full"
             style={{

src/components/ProgressBar.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+function ProgressBar({
+  progress,
+  className,
+  display,
+  fontSize,
+}: {
+  progress: number;
+  display?: string;
+  className?: string;
+  fontSize?: string;
+}) {
+  const size = fontSize ?? "10px";
+  return (
+    <div
+      className={" center " + (className ?? "")}
+      style={{ position: "relative" }}
+    >
+      <div
+        className=" "
+        style={{
+          position: "absolute",
+          width: `${progress * 100}%`,
+          minHeight: "1px",
+          backgroundColor: "var(--accent-color)",
+          background: `linear-gradient(90deg, var(--accent-color) 0%, var(--accent-color-two) 100%)`,
+          color: "transparent",
+          userSelect: "none",
+          fontSize: size,
+          zIndex: -1,
+        }}
+      >
+        {display ?? ""}
+      </div>
+      <div className="w-full" style={{ fontSize: size }}>
+        {display ?? ""}
+      </div>
+    </div>
+  );
+}
+export default ProgressBar;

src/components/Sidebar.tsx

@@ -1,10 +1,14 @@
 import React from "react";
 import UserBadge from "./UserBadge";
+import { useSearchParams } from "react-router-dom";
+import Countdown from "./Countdown";
 
 const Sidebar = ({ children }: React.PropsWithChildren) => {
+  const [params] = useSearchParams();
+  const leaderboard = params.get("leaderboard") ?? "all";
   return (
     <div className="flexCol align-center">
-      <div className="shadow w-full flexRow space-between space-beneath bg-secondary flex-center">
+      <div className="shadow w-full flexRow space-between  bg-secondary flex-center">
         <div className="f1" />
         <a className="fg-color" href="/challenge">
           <h3 className="f1">
@@ -14,6 +18,7 @@ const Sidebar = ({ children }: React.PropsWithChildren) => {
         </a>
         <UserBadge />
       </div>
+      <Countdown leaderboard={leaderboard} className="w-full space-beneath " />
       {children}
     </div>
   );

src/hooks/UseLeaderboard.tsx

@@ -0,0 +1,39 @@
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+import { BACKEND_URL } from "./base";
+
+export type Leaderboard = { start: Date; end: Date };
+
+export type LeaderboardIndex = Record<string, Leaderboard>;
+type LeaderboardResponse = Record<
+  string,
+  {
+    start: number;
+    end: number;
+  }
+>;
+
+const getLeaderboardIndex = async (): Promise<LeaderboardResponse> => {
+  const response = await axios.get(`${BACKEND_URL}/leaderboard`);
+  return response.data;
+};
+
+export const useLeaderboardIndex = () => {
+  const query = useQuery({
+    queryKey: ["leaderboardIndex"],
+    queryFn: () => getLeaderboardIndex(),
+    staleTime: 1000 * 60 * 60,
+  });
+  const transformedData = query.data
+    ? Object.fromEntries(
+        Object.entries(query.data).map(([key, value]) => [
+          key,
+          {
+            start: new Date(value.start * 1000),
+            end: new Date(value.end * 1000),
+          },
+        ])
+      )
+    : undefined;
+  return { ...query, data: transformedData };
+};

src/hooks/UseProblem.tsx

@@ -27,5 +27,6 @@ export const useAllStudyProblems = () => {
   return useQuery({
     queryFn: getAllStudyProblems,
     queryKey: ["allStudyProblems"],
+    staleTime: 1000 * 60 * 60,
   });
 };

src/hooks/UseUser.tsx

@@ -31,6 +31,5 @@ export const useUsers = () => {
       });
     }
   }
-  console.log(query.data);
   return query.data ?? [];
 };

src/index.css

@@ -10,6 +10,7 @@
   --bg-greenish: #32a85233;
   --fg-color: #333;
   --accent-color: #2196f3;
+  --accent-color-two: #21c2f3;
   --fg-accent: #555;
   --fg-secondary: #0004;
   --rt-transition-show-delay: 1s !important;
@@ -109,7 +110,6 @@ code {
 
 .responsive-fg {
   width: min(90%, 1200px);
-  border-radius: 5px;
 }
 
 .wrap {
@@ -241,7 +241,6 @@ button {
   background-color: var(--bg-tertiary);
   color: var(--fg-accent);
   padding: 10px;
-  border-radius: 5px;
   cursor: pointer;
 }
 button:disabled {
@@ -254,7 +253,6 @@ input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus {
   padding: 10px;
-  border-radius: 5px;
   border: 1px solid var(--fg-secondary);
   background-color: var(--bg-tertiary);
   color: var(--fg-color);

src/pages/SignIn.css

@@ -17,7 +17,6 @@
 .auth {
   width: min(90%, 400px);
   padding: 20px;
-  border-radius: 10px;
 }
 
 .sign-in-form {
@@ -34,7 +33,6 @@
 
 .submit {
   padding: 10px;
-  border-radius: 5px;
   border: transparent;
   background-color: var(--fg-color);
   color: var(--bg-color);