feat: site

finally

Author: GalvinPython

api/src/index.ts

@@ -158,9 +158,11 @@ app.get("/get/:guild", async (req, res) => {
 	} else if (!guildData) {
 		res.status(404).json({ message: "Guild not found" });
 	} else {
+		const totalXp = usersData.reduce((sum, user) => sum + user.xp, 0);
 		res.status(200).json({
 			guild: guildData,
 			leaderboard: usersData,
+			totalXp: totalXp,
 		});
 	}
 });
@@ -569,7 +571,7 @@ async function syncFromMee6(guild: string) {
 	const users = data.players;
 	let pageNumber = 1;
 	// this is needed because MEE6 doesn't give us the total amount of pages
-	 
+	// eslint-disable-next-line no-constant-condition
 	while (true) {
 		const res = await fetch(`https://mee6.xyz/api/plugins/levels/leaderboard/${guild}?limit=1000&page=${pageNumber}`);
 		const data = await res.json();
@@ -638,7 +640,7 @@ async function syncFromLurkr(guild: string) {
 
 	let pageNumber = 2;
 	// this is needed because Lurkr doesn't give us the total amount of pages
-	 
+	// eslint-disable-next-line no-constant-condition
 	while (true) {
 		const res = await fetch(`https://api.lurkr.gg/v2/levels/${guild}?page=${pageNumber}`);
 		const data = await res.json();

web/components/search.tsx

@@ -12,7 +12,7 @@ export const Search = () => {
 		}
 	};
 
-	const handleInputChange = (event: any) => {
+	const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
 		setSearchQuery(event.target.value);
 	};
 

web/package.json

@@ -6,7 +6,7 @@
 		"dev": "next dev --port 56413",
 		"build": "next build",
 		"start": "next start --port 56414",
-		"lint": "next lint"
+		"lint": "next lint --fix"
 	},
 	"dependencies": {
 		"@nextui-org/react": "^2.3.0",

web/pages/leaderboard/[server].tsx

@@ -5,6 +5,8 @@ import HighchartsReact from 'highcharts-react-official';
 import dynamic from "next/dynamic";
 import Image from 'next/image';
 import "odometer/themes/odometer-theme-default.css";
+import { ChartOptions, ChartPointsFormatted } from '@/types/chart';
+import { PropsUsers } from '@/types/props';
 
 const Odometer = dynamic(import('react-odometerjs'), {
 	ssr: false,
@@ -25,14 +27,14 @@ interface PageState {
 	odometerPointsNeededToNextLevel: number;
 	odometerPointsNeededForNextLevel: number;
 	odometerProgressToNextLevelPercentage: number;
-	chartOptions: any;
+	chartOptions: ChartOptions;
 }
 
-class IndexPage extends Component<{}, PageState> {
+class IndexPage extends Component<object, PageState> {
 
-	interval: NodeJS.Timeout | null = null
+	interval: Timer | null = null
 
-	constructor(props: any | Readonly<{}>) {
+	constructor(props: PropsUsers) {
 		super(props);
 
 		this.state = {
@@ -107,10 +109,10 @@ class IndexPage extends Component<{}, PageState> {
 				},
 				tooltip: {
 					shared: true,
-					formatter(this: any) {
+					formatter(this: ChartPointsFormatted) {
 						if (!this.points || this.points.length === 0) return '';
 
-						const point = this.points[0]; // Assuming you are only dealing with one point
+						const point = this.points[0];
 
 						const index = point.series.xData.indexOf(point.x);
 						const lastY = point.series.yData[index - 1];
@@ -133,7 +135,7 @@ class IndexPage extends Component<{}, PageState> {
 					}
 				},
 				series: [{
-					name: 'Followers',
+					name: 'Total XP',
 					data: [],
 					showInLegend: false,
 					marker: { enabled: false },
@@ -180,7 +182,7 @@ class IndexPage extends Component<{}, PageState> {
 								...prevState.chartOptions,
 								series: [{
 									...prevState.chartOptions.series[0],
-									data: updatedData,
+									data: updatedData as [number, number][],
 								}],
 							},
 							isLoading: false, // Reset isLoading flag
@@ -235,7 +237,7 @@ class IndexPage extends Component<{}, PageState> {
 					<div className="relative w-full p-4 rounded-lg flex flex-col justify-center items-center">
 						{/* <Image
 							src={this.state.discordBannerURL}
-							alt="Twitter Banner"
+							alt="Banner"
 							className="absolute inset-0 w-full h-full object-cover rounded-lg z-0 blur-sm"
 							width={1500}
 							height={500}
@@ -277,9 +279,9 @@ class IndexPage extends Component<{}, PageState> {
 						</div>
 						<div className="bg-gray-800 p-2 rounded-lg flex flex-col justify-center items-center transition-transform transform hover:scale-105">
 							<div className='text-xl sm:text-xl md:text-2xl lg:text-2xl'>
-								<Odometer value={odometerProgressToNextLevelPercentage} />%
+								<Odometer value={odometerProgressToNextLevelPercentage} />
 							</div>
-							<div className="text-gray-400 mt-2 center-text">Progress Percentage</div>
+							<div className="text-gray-400 mt-2 center-text">Progress To Next Level (%)</div>
 						</div>
 						<div className="bg-gray-800 p-2 rounded-lg flex flex-col justify-center items-center transition-transform transform hover:scale-105">
 							<div className='text-xl sm:text-xl md:text-2xl lg:text-2xl'>
@@ -300,8 +302,7 @@ class IndexPage extends Component<{}, PageState> {
 
 export async function getServerSideProps(context: { query: { server: string; user: string; }; }) {
 	const { server, user } = context.query;
-	console.log(server, user);
-
+	
 	try {
 		const response = await fetch(`http://localhost:18103/get/${server}/${user}`);
 

web/pages/leaderboard/[server]/[user].tsx

@@ -0,0 +1,86 @@
+interface ChartPoints {
+    x: number;
+    y: number;
+    series: {
+        name: string;
+        xData: number[];
+        yData: number[];
+    };
+}
+
+export interface ChartPointsFormatted {
+    points: ChartPoints[];
+}
+
+export interface ChartOptions {
+	chart: {
+		backgroundColor: string;
+		type: string;
+		zoomType: string;
+	};
+	title: {
+		text: string;
+		style: {
+			color: string;
+			font: string;
+		};
+	};
+	xAxis: {
+		type: string;
+		tickPixelInterval: number;
+		labels: {
+			style: {
+				color: string;
+				font: string;
+			};
+		};
+		visible: boolean;
+	};
+	yAxis: {
+		gridLineColor: string;
+		title: {
+			text: string;
+		};
+		labels: {
+			style: {
+				color: string;
+				font: string;
+			};
+		};
+		visible: boolean;
+	};
+	plotOptions: {
+		series: {
+			threshold: null;
+			fillOpacity: number;
+			animation: boolean;
+			lineWidth: number;
+		};
+		area: {
+			fillOpacity: number;
+		};
+	};
+	credits: {
+		enabled: boolean;
+		text: string;
+		href: string;
+	};
+	time: {
+		useUTC: boolean;
+	};
+	tooltip: {
+		shared: boolean;
+		formatter: (this: ChartPointsFormatted) => string;
+	};
+	series: {
+		name: string;
+		data: [number, number][];
+		showInLegend: boolean;
+		marker: {
+			enabled: boolean;
+		};
+		color: string;
+		lineColor: string;
+		lineWidth: number;
+	}[];
+}

web/types/chart.d.ts

@@ -0,0 +1,11 @@
+export interface Leaderboard {
+	id: string;
+	guild_id: string;
+	name: string;
+	nickname: string;
+	pfp: string;
+	xp: number;
+	level: number;
+	xp_needed_next_level: number;
+	progress_next_level: string;
+}

web/types/leaderboard.d.ts

@@ -0,0 +1,26 @@
+import { Leaderboard } from "./leaderboard";
+
+export interface PropsUsers {
+    discordAccountExists: boolean;
+    discordUserId: string;
+    discordGuildId: string;
+    discordAvatarURL: string;
+    discordUsername: string;
+    discordDisplayName: string;
+    odometerPoints: number;
+    odometerLevel: number;
+    odometerPointsNeededToNextLevel: number;
+    odometerPointsNeededForNextLevel: number;
+    odometerProgressToNextLevelPercentage: number;
+}
+
+export interface PropsGuilds {
+    discordGuildExists: boolean;
+    discordGuildId: string;
+    discordGuildIconURL: string;
+    discordGuildName: string;
+    odometerPoints: number;
+    odometerMembers: number;
+    odometerMembersBeingTracked: number;
+	leaderboard: Leaderboard[];
+}