Index: backend/node_modules/.package-lock.json =================================================================== --- backend/node_modules/.package-lock.json (revision defb0fb2f3cd7c294c0a1f00a2474944e06d4be2) +++ backend/node_modules/.package-lock.json (revision 479eacad01c8926648a1e9ec1bf93b97825a38ae) @@ -80,7 +80,7 @@ }, "node_modules/@types/node": { - "version": "22.15.29", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.29.tgz", - "integrity": "sha512-LNdjOkUDlU1RZb8e1kOIUpN1qQUlzGkEtbVNo53vbrwDg5om6oduhm4SiUaPW5ASTXhAiP0jInWG8Qx9fVlOeQ==", + "version": "22.15.30", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.30.tgz", + "integrity": "sha512-6Q7lr06bEHdlfplU6YRbgG1SFBdlsfNC4/lX+SkhiTs0cpJkOElmWls8PxDFv4yY/xKb8Y6SO0OmSX4wgqTZbA==", "license": "MIT", "dependencies": { @@ -992,4 +992,19 @@ } }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/function-bind": { "version": "1.1.2", Index: backend/node_modules/@types/node/README.md =================================================================== --- backend/node_modules/@types/node/README.md (revision defb0fb2f3cd7c294c0a1f00a2474944e06d4be2) +++ backend/node_modules/@types/node/README.md (revision 479eacad01c8926648a1e9ec1bf93b97825a38ae) @@ -9,5 +9,5 @@ ### Additional Details - * Last updated: Fri, 30 May 2025 18:40:02 GMT + * Last updated: Thu, 05 Jun 2025 18:56:28 GMT * Dependencies: [undici-types](https://npmjs.com/package/undici-types) Index: backend/node_modules/@types/node/http2.d.ts =================================================================== --- backend/node_modules/@types/node/http2.d.ts (revision defb0fb2f3cd7c294c0a1f00a2474944e06d4be2) +++ backend/node_modules/@types/node/http2.d.ts (revision 479eacad01c8926648a1e9ec1bf93b97825a38ae) @@ -1224,12 +1224,64 @@ // Http2Server export interface SessionOptions { + /** + * Sets the maximum dynamic table size for deflating header fields. + * @default 4Kib + */ maxDeflateDynamicTableSize?: number | undefined; + /** + * Sets the maximum number of settings entries per `SETTINGS` frame. + * The minimum value allowed is `1`. + * @default 32 + */ + maxSettings?: number | undefined; + /** + * Sets the maximum memory that the `Http2Session` is permitted to use. + * The value is expressed in terms of number of megabytes, e.g. `1` equal 1 megabyte. + * The minimum value allowed is `1`. + * This is a credit based limit, existing `Http2Stream`s may cause this limit to be exceeded, + * but new `Http2Stream` instances will be rejected while this limit is exceeded. + * The current number of `Http2Stream` sessions, the current memory use of the header compression tables, + * current data queued to be sent, and unacknowledged `PING` and `SETTINGS` frames are all counted towards the current limit. + * @default 10 + */ maxSessionMemory?: number | undefined; + /** + * Sets the maximum number of header entries. + * This is similar to `server.maxHeadersCount` or `request.maxHeadersCount` in the `node:http` module. + * The minimum value is `1`. + * @default 128 + */ maxHeaderListPairs?: number | undefined; + /** + * Sets the maximum number of outstanding, unacknowledged pings. + * @default 10 + */ maxOutstandingPings?: number | undefined; + /** + * Sets the maximum allowed size for a serialized, compressed block of headers. + * Attempts to send headers that exceed this limit will result in + * a `'frameError'` event being emitted and the stream being closed and destroyed. + */ maxSendHeaderBlockLength?: number | undefined; + /** + * Strategy used for determining the amount of padding to use for `HEADERS` and `DATA` frames. + * @default http2.constants.PADDING_STRATEGY_NONE + */ paddingStrategy?: number | undefined; + /** + * Sets the maximum number of concurrent streams for the remote peer as if a `SETTINGS` frame had been received. + * Will be overridden if the remote peer sets its own value for `maxConcurrentStreams`. + * @default 100 + */ peerMaxConcurrentStreams?: number | undefined; + /** + * The initial settings to send to the remote peer upon connection. + */ settings?: Settings | undefined; + /** + * The array of integer values determines the settings types, + * which are included in the `CustomSettings`-property of the received remoteSettings. + * Please see the `CustomSettings`-property of the `Http2Settings` object for more information, on the allowed setting types. + */ remoteCustomSettings?: number[] | undefined; /** @@ -1240,9 +1292,25 @@ */ unknownProtocolTimeout?: number | undefined; - selectPadding?(frameLen: number, maxFrameLen: number): number; } export interface ClientSessionOptions extends SessionOptions { + /** + * Sets the maximum number of reserved push streams the client will accept at any given time. + * Once the current number of currently reserved push streams exceeds reaches this limit, + * new push streams sent by the server will be automatically rejected. + * The minimum allowed value is 0. The maximum allowed value is 232-1. + * A negative value sets this option to the maximum allowed value. + * @default 200 + */ maxReservedRemoteStreams?: number | undefined; + /** + * An optional callback that receives the `URL` instance passed to `connect` and the `options` object, + * and returns any `Duplex` stream that is to be used as the connection for this session. + */ createConnection?: ((authority: url.URL, option: SessionOptions) => stream.Duplex) | undefined; + /** + * The protocol to connect with, if not set in the `authority`. + * Value may be either `'http:'` or `'https:'`. + * @default 'https:' + */ protocol?: "http:" | "https:" | undefined; } Index: backend/node_modules/@types/node/package.json =================================================================== --- backend/node_modules/@types/node/package.json (revision defb0fb2f3cd7c294c0a1f00a2474944e06d4be2) +++ backend/node_modules/@types/node/package.json (revision 479eacad01c8926648a1e9ec1bf93b97825a38ae) @@ -1,5 +1,5 @@ { "name": "@types/node", - "version": "22.15.29", + "version": "22.15.30", "description": "TypeScript definitions for node", "homepage": "https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/node", @@ -221,5 +221,5 @@ }, "peerDependencies": {}, - "typesPublisherContentHash": "98b7a6aabffc6588a0865305b51b9dd48e81a270354b592630e8d37772f1f57a", + "typesPublisherContentHash": "e608b189ccd6623034719d736dfcdaf6bae11f1e8fe989b19c4a6d3221277a64", "typeScriptVersion": "5.1" } Index: backend/node_modules/@types/node/util.d.ts =================================================================== --- backend/node_modules/@types/node/util.d.ts (revision defb0fb2f3cd7c294c0a1f00a2474944e06d4be2) +++ backend/node_modules/@types/node/util.d.ts (revision 479eacad01c8926648a1e9ec1bf93b97825a38ae) @@ -1412,5 +1412,5 @@ * @since v20.12.0 */ - export function parseEnv(content: string): object; + export function parseEnv(content: string): NodeJS.Dict; // https://nodejs.org/docs/latest/api/util.html#foreground-colors type ForegroundColors = Index: backend/package-lock.json =================================================================== --- backend/package-lock.json (revision defb0fb2f3cd7c294c0a1f00a2474944e06d4be2) +++ backend/package-lock.json (revision 479eacad01c8926648a1e9ec1bf93b97825a38ae) @@ -21,4 +21,5 @@ }, "devDependencies": { + "@types/node": "^22.15.30", "nodemon": "^3.1.9" } @@ -99,7 +100,7 @@ }, "node_modules/@types/node": { - "version": "22.15.29", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.29.tgz", - "integrity": "sha512-LNdjOkUDlU1RZb8e1kOIUpN1qQUlzGkEtbVNo53vbrwDg5om6oduhm4SiUaPW5ASTXhAiP0jInWG8Qx9fVlOeQ==", + "version": "22.15.30", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.30.tgz", + "integrity": "sha512-6Q7lr06bEHdlfplU6YRbgG1SFBdlsfNC4/lX+SkhiTs0cpJkOElmWls8PxDFv4yY/xKb8Y6SO0OmSX4wgqTZbA==", "license": "MIT", "dependencies": { Index: backend/package.json =================================================================== --- backend/package.json (revision defb0fb2f3cd7c294c0a1f00a2474944e06d4be2) +++ backend/package.json (revision 479eacad01c8926648a1e9ec1bf93b97825a38ae) @@ -24,4 +24,5 @@ }, "devDependencies": { + "@types/node": "^22.15.30", "nodemon": "^3.1.9" } Index: backend/supabase/.temp/cli-latest =================================================================== --- backend/supabase/.temp/cli-latest (revision 479eacad01c8926648a1e9ec1bf93b97825a38ae) +++ backend/supabase/.temp/cli-latest (revision 479eacad01c8926648a1e9ec1bf93b97825a38ae) @@ -0,0 +1,1 @@ +v2.24.3 Index: backend/supabase/config.toml =================================================================== --- backend/supabase/config.toml (revision 479eacad01c8926648a1e9ec1bf93b97825a38ae) +++ backend/supabase/config.toml (revision 479eacad01c8926648a1e9ec1bf93b97825a38ae) @@ -0,0 +1,11 @@ + +[functions.leaderboard] +enabled = true +verify_jwt = true +import_map = "./functions/leaderboard/deno.json" +# Uncomment to specify a custom file path to the entrypoint. +# Supported file extensions are: .ts, .js, .mjs, .jsx, .tsx +entrypoint = "./functions/leaderboard/index.ts" +# Specifies static files to be bundled with the function. Supports glob patterns. +# For example, if you want to serve static HTML pages in your function: +# static_files = [ "./functions/leaderboard/*.html" ] Index: backend/supabase/functions/leaderboard/.npmrc =================================================================== --- backend/supabase/functions/leaderboard/.npmrc (revision 479eacad01c8926648a1e9ec1bf93b97825a38ae) +++ backend/supabase/functions/leaderboard/.npmrc (revision 479eacad01c8926648a1e9ec1bf93b97825a38ae) @@ -0,0 +1,3 @@ +# Configuration for private npm package dependencies +# For more information on using private registries with Edge Functions, see: +# https://supabase.com/docs/guides/functions/import-maps#importing-from-private-registries Index: backend/supabase/functions/leaderboard/deno.json =================================================================== --- backend/supabase/functions/leaderboard/deno.json (revision 479eacad01c8926648a1e9ec1bf93b97825a38ae) +++ backend/supabase/functions/leaderboard/deno.json (revision 479eacad01c8926648a1e9ec1bf93b97825a38ae) @@ -0,0 +1,7 @@ +{ + "imports": {}, + "compilerOptions": { + "lib": ["deno.ns", "dom"] + } +} + Index: backend/supabase/functions/leaderboard/index.ts =================================================================== --- backend/supabase/functions/leaderboard/index.ts (revision 479eacad01c8926648a1e9ec1bf93b97825a38ae) +++ backend/supabase/functions/leaderboard/index.ts (revision 479eacad01c8926648a1e9ec1bf93b97825a38ae) @@ -0,0 +1,138 @@ +// Supabase Edge Function - leaderboard.ts +import { serve } from "https://deno.land/std/http/server.ts"; +import { createClient } from "https://esm.sh/@supabase/supabase-js"; + +// Cache structure and constants +type CacheEntry = { + data: any; + timestamp: number; +}; + +const cachedPages = new Map(); +const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes +const PAGE_SIZE = 20; + +serve(async (req: Request): Promise => { + // Handle CORS preflight + if (req.method === 'OPTIONS') { + return new Response(null, { + status: 200, + headers: { + 'Access-Control-Allow-Origin': '*', + 'Access-Control-Allow-Methods': 'GET, POST, OPTIONS', + 'Access-Control-Allow-Headers': 'Content-Type, Authorization', + }, + }); + } + + try { + const url = new URL(req.url); + const page = parseInt(url.searchParams.get('page') || '1'); + const limit = parseInt(url.searchParams.get('limit') || PAGE_SIZE.toString()); + + if (page < 1 || limit < 1 || limit > 100) { + return new Response(JSON.stringify({ + error: 'Invalid parameters', + message: 'Page must be >= 1 and limit must be between 1 and 100' + }), { + status: 400, + headers: { + 'Content-Type': 'application/json', + 'Access-Control-Allow-Origin': '*', + }, + }); + } + + const now = Date.now(); + const cacheKey = `${page}-${limit}`; + + // Check cache + if (cachedPages.has(cacheKey)) { + const cached = cachedPages.get(cacheKey)!; + if (now - cached.timestamp < CACHE_DURATION) { + return new Response(JSON.stringify({ ...cached.data, cached: true }), { + status: 200, + headers: { + 'Content-Type': 'application/json', + 'Access-Control-Allow-Origin': '*', + }, + }); + } else { + cachedPages.delete(cacheKey); + } + } + + // Load env variables - FIXED + const supabaseUrl = Deno.env.get('SUPABASE_URL'); + const supabaseServiceKey = Deno.env.get('SUPABASE_SERVICE_ROLE_KEY'); + + if (!supabaseUrl || !supabaseServiceKey) { + throw new Error('Missing Supabase env variables'); + } + + const supabase = createClient(supabaseUrl, supabaseServiceKey); + + // Pagination + const offset = (page - 1) * limit; + const { data, error, count } = await supabase + .from('users') + .select('id, username, points, rank', { count: 'exact' }) + .order('points', { ascending: false }) + .range(offset, offset + limit - 1); + + if (error) { + throw new Error(`Supabase query error: ${error.message}`); + } + + const totalPages = Math.ceil((count ?? 0) / limit); + const hasNextPage = page < totalPages; + const hasPreviousPage = page > 1; + + const responseData = { + leaderboard: data, + pagination: { + currentPage: page, + totalPages, + totalUsers: count, + usersPerPage: limit, + hasNextPage, + hasPreviousPage, + nextPage: hasNextPage ? page + 1 : null, + previousPage: hasPreviousPage ? page - 1 : null + }, + timestamp: now, + cached: false + }; + + // Store in cache + cachedPages.set(cacheKey, { data: responseData, timestamp: now }); + + // Limit memory usage + if (cachedPages.size > 10) { + const oldestKey = cachedPages.keys().next().value; + cachedPages.delete(oldestKey); + } + + return new Response(JSON.stringify(responseData), { + status: 200, + headers: { + 'Content-Type': 'application/json', + 'Access-Control-Allow-Origin': '*', + }, + }); + + } catch (err: any) { + console.error('Leaderboard error:', err.message); + return new Response(JSON.stringify({ + error: 'Failed to fetch leaderboard', + message: err.message + }), { + status: 500, + headers: { + 'Content-Type': 'application/json', + 'Access-Control-Allow-Origin': '*', + }, + }); + } +}); + Index: client/src/LandingPage/LandingPage.jsx =================================================================== --- client/src/LandingPage/LandingPage.jsx (revision defb0fb2f3cd7c294c0a1f00a2474944e06d4be2) +++ client/src/LandingPage/LandingPage.jsx (revision 479eacad01c8926648a1e9ec1bf93b97825a38ae) @@ -5,16 +5,17 @@ import Intro from "./components/Intro"; import NavbarLanding from "./components/NavbarLanding"; -import LeaderLanding from "./components/LeaderLanding"; +import LeaderBoardEx from "@/LandingPage/components/LeaderBoardEx.jsx"; + const LandingPage = () => { - return ( -
- - - - - -
-
- ); + return ( +
+ + + + + +
+
+ ); }; Index: client/src/LandingPage/components/LeaderBoardEx.jsx =================================================================== --- client/src/LandingPage/components/LeaderBoardEx.jsx (revision defb0fb2f3cd7c294c0a1f00a2474944e06d4be2) +++ client/src/LandingPage/components/LeaderBoardEx.jsx (revision 479eacad01c8926648a1e9ec1bf93b97825a38ae) @@ -1,6 +1,131 @@ -import Navbar from '@/Dashboard/components/Navbar'; -import React from 'react'; +import Navbar from "@/Dashboard/components/Navbar"; +import { useEffect, useState } from "react"; +import { useLocation } from "react-router-dom"; const LeaderBoardEx = () => { + const [landing, setLanding] = useState(false); + const [leaderboard, setLeaderboard] = useState([]); + const [loading, setLoading] = useState(false); + const [loadingMore, setLoadingMore] = useState(false); + const [error, setError] = useState(null); + const [pagination, setPagination] = useState(null); + const [currentPage, setCurrentPage] = useState(1); + const location = useLocation(); + + useEffect(() => { + if (location.pathname === "/") { + setLanding(true); + } else if (location.pathname === "/dashboard/leaderboard") { + setLanding(false); + } + }, [location.pathname]); + + // Function to fetch leaderboard data + const fetchLeaderboard = async (page = 1, append = false) => { + try { + if (append) { + setLoadingMore(true); + } else { + setLoading(true); + setError(null); + } + + // Fix: Use the correct Supabase function URL + const response = await fetch( + `${ + import.meta.env.VITE_SUPABASE_URL + }/functions/v1/leaderboard?page=${page}&limit=20`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${import.meta.env.VITE_SUPABASE_ANON_KEY}`, + }, + } + ); + + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + + const data = await response.json(); + + if (data.error) { + throw new Error(data.message || "Failed to fetch leaderboard"); + } + + if (append) { + setLeaderboard((prev) => [...prev, ...data.leaderboard]); + } else { + setLeaderboard(data.leaderboard); + setCurrentPage(page); + } + + setPagination(data.pagination); + } catch (err) { + console.error("Error fetching leaderboard:", err); + setError(err.message); + } finally { + setLoading(false); + setLoadingMore(false); + } + }; + // Load initial data + useEffect(() => { + fetchLeaderboard(1, false); + }, []); + + // Handle load more button click + const handleLoadMore = () => { + if (pagination && pagination.hasNextPage) { + fetchLeaderboard(pagination.nextPage, true); + } + }; + + // Calculate position based on current page and index - FIXED + const getPosition = (index) => { + // For load more functionality, we need to track total loaded items + // since we're appending data, the index represents the actual position + return index + 1; + }; + + if (loading && leaderboard.length === 0) { + return ( +
+ {!landing ? : null} +
+

Leaderboard

+
+
+
+ ); + } + + if (error && leaderboard.length === 0) { + return ( +
+ {!landing ? : null} +
+

Leaderboard

+
+ {error} +
+ +
+
+ ); + } + return (
- + {!landing ? : null} +

Leaderboard

-
+

WARNING: The leaderboard updates every 5 minutes

+ + {pagination && ( +
+
+
Total Users
+
{pagination.totalUsers}
+
+
+
Showing
+
{leaderboard.length}
+
+
+ )} + +
- {/* head */} - - + + - {/* row 1 */} - - - - - - - {/* row 2 */} - - - - - - - {/* row 3 */} - - - - - - - {/* row 4 */} - - - - - - - {/* row 5 */} - - - - - - - {/* row 6 */} - - - - - - - {/* row 7 */} - - - - - - - {/* row 8 */} - - - - - - + {leaderboard.map((user, index) => ( + + + + + + + ))}
Name RankUsernameRank Tier Points
1John SmithDiamond2500
2Sarah JohnsonPlatinum2300
3Michael BrownGold2100
4Emily DavisSilver1900
5David WilsonBronze1700
6Lisa AndersonBronze1500
7Robert TaylorBronze1300
8Jennifer MartinezBronze1100
{getPosition(index)}{user.username} +
{user.rank}
+ 		{user.points}
- + + {error && leaderboard.length > 0 && ( +
+ Error loading more data: {error} +
+ )} + + {pagination && pagination.hasNextPage && ( + + )} + + {pagination && !pagination.hasNextPage && leaderboard.length > 0 && ( +
+

You've reached the end of the leaderboard! 🎉

+
+ )}
Index: ient/src/LandingPage/components/LeaderLanding.jsx =================================================================== --- client/src/LandingPage/components/LeaderLanding.jsx (revision defb0fb2f3cd7c294c0a1f00a2474944e06d4be2) +++ (revision ) @@ -1,88 +1,0 @@ -import React from "react"; - -const LeaderLanding = () => { - return ( -
-
-

Leaderboard

-
- - {/* head */} - - - - - - - - - - {/* row 1 */} - - - - - - - {/* row 2 */} - - - - - - - {/* row 3 */} - - - - - - - {/* row 4 */} - - - - - - - {/* row 5 */} - - - - - - - {/* row 6 */} - - - - - - - {/* row 7 */} - - - - - - - {/* row 8 */} - - - - - - - -
NameRankPoints
1John SmithDiamond2500
2Sarah JohnsonPlatinum2300
3Michael BrownGold2100
4Emily DavisSilver1900
5David WilsonBronze1700
6Lisa AndersonBronze1500
7Robert TaylorBronze1300
8Jennifer MartinezBronze1100
-
- -
-
- ); -}; - -export default LeaderLanding;