+
LeaderBoard-Pro
A Project Under OpenLake
- )
-}
+ );
+};
-export default HomePage
+export default HomePage;
diff --git a/app/src/components/LeetcodeGraphs.js b/app/src/components/LeetcodeGraphs.js
index 4ac4b13..dbf6090 100644
--- a/app/src/components/LeetcodeGraphs.js
+++ b/app/src/components/LeetcodeGraphs.js
@@ -1,99 +1,99 @@
-import React, { useState, useEffect } from "react";
-import axios from "axios";
-import { useParams } from "react-router-dom";
-import Chart from "react-apexcharts";
-
-const LeetcodeGraphs = ({ darkmode }) => {
- const { username } = useParams();
- const [rankings, setRankings] = useState([]);
- const [options, setOptions] = useState({});
- const [series, setSeries] = useState([]);
- const [contestID, setContestID] = useState([]);
-
- useEffect(() => {
- const fetchRankings = async () => {
- try {
- const response = await axios.get(
- "http://localhost:8000/contest-rankings/"
- );
- const data = response.data;
-
- const contestRankings = data
- .filter((rank) => rank.usernames === username)
- .map((rank) => {
- const variableNames = Object.keys(rank).filter(
- (key) => key !== "usernames"
- );
- setContestID(variableNames);
- return {
- username: rank.usernames,
- ranking: variableNames.map((key) => rank[key]),
- };
- });
-
- setRankings(contestRankings);
- } catch (error) {
- console.log("error", error);
- }
- };
-
- fetchRankings();
- }, []);
-
- useEffect(() => {
- if (rankings.length > 0) {
- const { username, ranking } = rankings[0];
- const reversedRanking = ranking.slice().reverse();
- setSeries([
- {
- name: username,
- data: ranking,
- },
- ]);
- setOptions({
- chart: {
- height: 350,
- type: "line",
- zoom: {
- enabled: false,
- },
- ...(darkmode && { background: "#252f3d", foreColor: "#fff" }), // Set background and foreColor for dark mode
- },
- dataLabels: {
- enabled: false,
- },
- stroke: {
- curve: "straight",
- },
- title: {
- text: "Leetocde Contest Rankings",
- align: "left",
- },
- grid: {
- row: {
- colors: ["#f3f3f3", "transparent"],
- opacity: 0.5,
- },
- },
- xaxis: {
- categories: contestID,
- },
- // yaxis: {
- // reversed: true,
- // },
- tooltip:{
- fillSeriesColor:true,
- },
- });
- }
- }, [rankings, darkmode]);
-
- return (
-
- {username}
-
-
- );
-};
-
-export default LeetcodeGraphs;
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { useParams } from 'react-router-dom';
+import Chart from 'react-apexcharts';
+
+const LeetcodeGraphs = ({ darkmode }) => {
+ const { username } = useParams();
+ const [rankings, setRankings] = useState([]);
+ const [options, setOptions] = useState({});
+ const [series, setSeries] = useState([]);
+ const [contestID, setContestID] = useState([]);
+
+ useEffect(() => {
+ const fetchRankings = async () => {
+ try {
+ const response = await axios.get(
+ 'http://localhost:8000/contest-rankings/'
+ );
+ const data = response.data;
+
+ const contestRankings = data
+ .filter((rank) => rank.usernames === username)
+ .map((rank) => {
+ const variableNames = Object.keys(rank).filter(
+ (key) => key !== 'usernames'
+ );
+ setContestID(variableNames);
+ return {
+ username: rank.usernames,
+ ranking: variableNames.map((key) => rank[key]),
+ };
+ });
+
+ setRankings(contestRankings);
+ } catch (error) {
+ console.log('error', error);
+ }
+ };
+
+ fetchRankings();
+ }, []);
+
+ useEffect(() => {
+ if (rankings.length > 0) {
+ const { username, ranking } = rankings[0];
+ const reversedRanking = ranking.slice().reverse();
+ setSeries([
+ {
+ name: username,
+ data: ranking,
+ },
+ ]);
+ setOptions({
+ chart: {
+ height: 350,
+ type: 'line',
+ zoom: {
+ enabled: false,
+ },
+ ...(darkmode && { background: '#252f3d', foreColor: '#fff' }), // Set background and foreColor for dark mode
+ },
+ dataLabels: {
+ enabled: false,
+ },
+ stroke: {
+ curve: 'straight',
+ },
+ title: {
+ text: 'Leetocde Contest Rankings',
+ align: 'left',
+ },
+ grid: {
+ row: {
+ colors: ['#f3f3f3', 'transparent'],
+ opacity: 0.5,
+ },
+ },
+ xaxis: {
+ categories: contestID,
+ },
+ // yaxis: {
+ // reversed: true,
+ // },
+ tooltip: {
+ fillSeriesColor: true,
+ },
+ });
+ }
+ }, [rankings, darkmode]);
+
+ return (
+
+ {username}
+
+
+ );
+};
+
+export default LeetcodeGraphs;
diff --git a/app/src/components/LeetcodeRankings.js b/app/src/components/LeetcodeRankings.js
index 525d52a..0e10546 100644
--- a/app/src/components/LeetcodeRankings.js
+++ b/app/src/components/LeetcodeRankings.js
@@ -1,6 +1,5 @@
import React, { useState } from 'react';
-
const LeetcodeRankings = ({ darkmode }) => {
const [contestId, setContestId] = useState('');
const [usernames, setUsernames] = useState([]);
@@ -16,7 +15,7 @@ const LeetcodeRankings = ({ darkmode }) => {
const handleSubmit = async (event) => {
event.preventDefault();
-
+
try {
const url = `http://localhost:8000/api/leetcodecontestrankings/?contest=${contestId}`;
const response = await fetch(url, {
@@ -25,11 +24,11 @@ const LeetcodeRankings = ({ darkmode }) => {
Authorization: `Bearer ${localStorage.getItem('authTokens')}`,
},
});
-
+
if (response.ok) {
const data = await response.json();
setRankings(data);
- console.log(data)
+ console.log(data);
} else {
throw new Error('Request failed');
}
@@ -37,10 +36,10 @@ const LeetcodeRankings = ({ darkmode }) => {
console.log(error);
}
};
-
+
return (