Merge pull request #759 from LAION-AI/754-leaderboard-on-dashboard

ensure we include a timeframe when fetching leaderboard
This commit is contained in:
AbdBarho
2023-01-16 09:11:02 +01:00
committed by GitHub
2 changed files with 6 additions and 30 deletions
@@ -1,17 +1,16 @@
import { Box, Link, Stack, StackDivider, Text, useColorModeValue } from "@chakra-ui/react";
import { Box, Link, Text, useColorModeValue } from "@chakra-ui/react";
import NextLink from "next/link";
import { get } from "src/lib/api";
import useSWR from "swr";
import { LeaderboardGridCell } from "src/components/LeaderboardGridCell";
import { LeaderboardTimeFrame } from "src/types/Leaderboard";
export function LeaderboardTable() {
const backgroundColor = useColorModeValue("white", "gray.700");
const accentColor = useColorModeValue("gray.200", "gray.900");
const { data: leaderboardEntries } = useSWR("/api/leaderboard", get);
return (
<main className="h-fit col-span-3">
<div className="flex flex-col gap-4">
<div className="flex items-end justify-between">
<Text className="text-2xl font-bold">Top 5 Contributors</Text>
<Text className="text-2xl font-bold">Top 5 Contributors Today</Text>
<Link as={NextLink} href="/leaderboard" _hover={{ textDecoration: "none" }}>
<Text color="blue.400" className="text-sm font-bold">
View All -&gt;
@@ -25,30 +24,7 @@ export function LeaderboardTable() {
borderRadius="xl"
className="p-6 shadow-sm"
>
<Stack divider={<StackDivider />} spacing="4">
<div className="grid grid-cols-4 items-center font-bold">
<p>Name</p>
<div className="col-start-4 flex justify-center">
<p>Score</p>
</div>
</div>
{leaderboardEntries?.map(({ display_name, score }, idx) => (
<div key={idx} className="grid grid-cols-4 items-center">
<div className="flex items-center gap-3">
{/*
<Image alt="Profile Picture" src={item.image} boxSize="7" borderRadius="full"></Image>
*/}
<p>{display_name}</p>
{/*
<Badge colorScheme="purple">{item.streakCount}</Badge>
*/}
</div>
<Box bg={backgroundColor} className="col-start-4 flex justify-center">
<p>{score}</p>
</Box>
</div>
))}
</Stack>
<LeaderboardGridCell timeFrame={LeaderboardTimeFrame.day} />
</Box>
</div>
</main>
+1 -1
View File
@@ -6,7 +6,7 @@ import { LeaderboardTimeFrame } from "src/types/Leaderboard";
* Returns the set of valid labels that can be applied to messages.
*/
const handler = withoutRole("banned", async (req, res) => {
const time_frame = req.query.time_frame as LeaderboardTimeFrame;
const time_frame = (req.query.time_frame as LeaderboardTimeFrame) || LeaderboardTimeFrame.day;
const { leaderboard } = await oasstApiClient.fetch_leaderboard(time_frame);
res.status(200).json(leaderboard);
});