Skip to content

feat: call new ranking API #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pan93412 merged 1 commit into from
Oct 13, 2025
Merged

feat: call new ranking API #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 31 additions & 13 deletions app/(app)/statistics/_components/ranking/completed-questions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,36 @@

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { graphql } from "@/gql";
import type { RankingPeriod } from "@/gql/graphql";
import { useSuspenseQuery } from "@apollo/client/react";

const MY_SOLVED_QUESTIONS_COUNT = graphql(`
query MySolvedQuestionsCount {
me {
id
name
submissionStatistics {
solvedQuestions
const COMPLETED_QUESTIONS_RANKING = graphql(`
query CompletedQuestionRanking($period: RankingPeriod!) {
ranking(
first: 10
filter: { order: DESC, by: COMPLETED_QUESTIONS, period: $period }
) {
edges {
node {
id
name
submissionStatistics {
solvedQuestions
}
}
}
}
}
`);

export default function SolvedQuestionsRanking() {
const { data } = useSuspenseQuery(MY_SOLVED_QUESTIONS_COUNT);
export default function SolvedQuestionsRanking({
period,
}: {
period: RankingPeriod;
}) {
const { data } = useSuspenseQuery(COMPLETED_QUESTIONS_RANKING, {
variables: { period },
});

return (
<Table>
Expand All @@ -29,10 +43,14 @@ export default function SolvedQuestionsRanking() {
</TableHeader>

<TableBody>
<TableRow>
<TableCell>{data.me.name}</TableCell>
<TableCell>{data.me.submissionStatistics.solvedQuestions}</TableCell>
</TableRow>
{data.ranking.edges.map((edge) => {
return (
<TableRow key={edge.node.id}>
<TableCell>{edge.node.name}</TableCell>
<TableCell>{edge.node.submissionStatistics.solvedQuestions}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
);
Expand Down
9 changes: 5 additions & 4 deletions app/(app)/statistics/_components/ranking/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Skeleton } from "@/components/ui/skeleton";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { RankingPeriod } from "@/gql/graphql";
import { Suspense } from "react";
import SolvedQuestionsRanking from "./completed-questions";
import PointsRanking from "./points";
Expand All @@ -16,22 +17,22 @@ export default function Ranking() {

<TabsContent value="daily-points">
<Suspense fallback={<Skeleton className="h-48" />}>
<PointsRanking />
<PointsRanking period={RankingPeriod.Daily} />
</Suspense>
</TabsContent>
<TabsContent value="weekly-points">
<Suspense fallback={<Skeleton className="h-48" />}>
<PointsRanking />
<PointsRanking period={RankingPeriod.Weekly} />
</Suspense>
</TabsContent>
<TabsContent value="daily-solved-questions">
<Suspense fallback={<Skeleton className="h-48" />}>
<SolvedQuestionsRanking />
<SolvedQuestionsRanking period={RankingPeriod.Daily} />
</Suspense>
</TabsContent>
<TabsContent value="weekly-solved-questions">
<Suspense fallback={<Skeleton className="h-48" />}>
<SolvedQuestionsRanking />
<SolvedQuestionsRanking period={RankingPeriod.Weekly} />
</Suspense>
</TabsContent>
</Tabs>
Expand Down
35 changes: 23 additions & 12 deletions app/(app)/statistics/_components/ranking/points.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,27 @@

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { graphql } from "@/gql";
import type { RankingPeriod } from "@/gql/graphql";
import { useSuspenseQuery } from "@apollo/client/react";

const MY_POINTS = graphql(`
query MyPoints {
me {
id
name
totalPoints
const POINTS_RANKING = graphql(`
query PointsRanking($period: RankingPeriod!) {
ranking(first: 10, filter: { order: DESC, by: POINTS, period: $period }) {
edges {
node {
id
name
totalPoints
}
}
}
}
`);

export default function PointsRanking() {
const { data } = useSuspenseQuery(MY_POINTS);
export default function PointsRanking({ period }: { period: RankingPeriod }) {
const { data } = useSuspenseQuery(POINTS_RANKING, {
variables: { period },
});

return (
<Table>
Expand All @@ -27,10 +34,14 @@ export default function PointsRanking() {
</TableHeader>

<TableBody>
<TableRow>
<TableCell>{data.me.name}</TableCell>
<TableCell>{data.me.totalPoints}</TableCell>
</TableRow>
{data.ranking.edges.map((edge) => {
return (
<TableRow key={edge.node.id}>
<TableCell>{edge.node.name}</TableCell>
<TableCell>{edge.node.totalPoints}</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
);
Expand Down
12 changes: 6 additions & 6 deletions gql/gql.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ type Documents = {
"\n query MaterialsSchemaContent($id: ID!) {\n database(id: $id) {\n id\n schema\n }\n }\n": typeof types.MaterialsSchemaContentDocument,
"\n query MaterialsSchema {\n databases {\n id\n ...MaterialsSchemaCard\n }\n }\n": typeof types.MaterialsSchemaDocument,
"\n query CompletedQuestions {\n me {\n id\n submissionStatistics {\n totalQuestions\n solvedQuestions\n }\n }\n }\n": typeof types.CompletedQuestionsDocument,
"\n query MySolvedQuestionsCount {\n me {\n id\n name\n submissionStatistics {\n solvedQuestions\n }\n }\n }\n": typeof types.MySolvedQuestionsCountDocument,
"\n query MyPoints {\n me {\n id\n name\n totalPoints\n }\n }\n": typeof types.MyPointsDocument,
"\n query CompletedQuestionRanking($period: RankingPeriod!) {\n ranking(\n first: 10\n filter: { order: DESC, by: COMPLETED_QUESTIONS, period: $period }\n ) {\n edges {\n node {\n id\n name\n submissionStatistics {\n solvedQuestions\n }\n }\n }\n }\n }\n": typeof types.CompletedQuestionRankingDocument,
"\n query PointsRanking($period: RankingPeriod!) {\n ranking(first: 10, filter: { order: DESC, by: POINTS, period: $period }) {\n edges {\n node {\n id\n name\n totalPoints\n }\n }\n }\n }\n": typeof types.PointsRankingDocument,
"\n query Points {\n me {\n id\n totalPoints\n\n points(first: 5, orderBy: { field: GRANTED_AT, direction: DESC }) {\n edges {\n node {\n id\n ...PointFragment\n }\n }\n }\n }\n }\n": typeof types.PointsDocument,
"\n fragment PointFragment on Point {\n description\n points\n }\n": typeof types.PointFragmentFragmentDoc,
"\n query ResolvedQuestions {\n me {\n id\n submissionStatistics {\n totalQuestions\n solvedQuestions\n }\n }\n }\n": typeof types.ResolvedQuestionsDocument,
Expand Down Expand Up @@ -60,8 +60,8 @@ const documents: Documents = {
"\n query MaterialsSchemaContent($id: ID!) {\n database(id: $id) {\n id\n schema\n }\n }\n": types.MaterialsSchemaContentDocument,
"\n query MaterialsSchema {\n databases {\n id\n ...MaterialsSchemaCard\n }\n }\n": types.MaterialsSchemaDocument,
"\n query CompletedQuestions {\n me {\n id\n submissionStatistics {\n totalQuestions\n solvedQuestions\n }\n }\n }\n": types.CompletedQuestionsDocument,
"\n query MySolvedQuestionsCount {\n me {\n id\n name\n submissionStatistics {\n solvedQuestions\n }\n }\n }\n": types.MySolvedQuestionsCountDocument,
"\n query MyPoints {\n me {\n id\n name\n totalPoints\n }\n }\n": types.MyPointsDocument,
"\n query CompletedQuestionRanking($period: RankingPeriod!) {\n ranking(\n first: 10\n filter: { order: DESC, by: COMPLETED_QUESTIONS, period: $period }\n ) {\n edges {\n node {\n id\n name\n submissionStatistics {\n solvedQuestions\n }\n }\n }\n }\n }\n": types.CompletedQuestionRankingDocument,
"\n query PointsRanking($period: RankingPeriod!) {\n ranking(first: 10, filter: { order: DESC, by: POINTS, period: $period }) {\n edges {\n node {\n id\n name\n totalPoints\n }\n }\n }\n }\n": types.PointsRankingDocument,
"\n query Points {\n me {\n id\n totalPoints\n\n points(first: 5, orderBy: { field: GRANTED_AT, direction: DESC }) {\n edges {\n node {\n id\n ...PointFragment\n }\n }\n }\n }\n }\n": types.PointsDocument,
"\n fragment PointFragment on Point {\n description\n points\n }\n": types.PointFragmentFragmentDoc,
"\n query ResolvedQuestions {\n me {\n id\n submissionStatistics {\n totalQuestions\n solvedQuestions\n }\n }\n }\n": types.ResolvedQuestionsDocument,
Expand Down Expand Up @@ -155,11 +155,11 @@ export function graphql(source: "\n query CompletedQuestions {\n me {\n
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n query MySolvedQuestionsCount {\n me {\n id\n name\n submissionStatistics {\n solvedQuestions\n }\n }\n }\n"): (typeof documents)["\n query MySolvedQuestionsCount {\n me {\n id\n name\n submissionStatistics {\n solvedQuestions\n }\n }\n }\n"];
export function graphql(source: "\n query CompletedQuestionRanking($period: RankingPeriod!) {\n ranking(\n first: 10\n filter: { order: DESC, by: COMPLETED_QUESTIONS, period: $period }\n ) {\n edges {\n node {\n id\n name\n submissionStatistics {\n solvedQuestions\n }\n }\n }\n }\n }\n"): (typeof documents)["\n query CompletedQuestionRanking($period: RankingPeriod!) {\n ranking(\n first: 10\n filter: { order: DESC, by: COMPLETED_QUESTIONS, period: $period }\n ) {\n edges {\n node {\n id\n name\n submissionStatistics {\n solvedQuestions\n }\n }\n }\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n query MyPoints {\n me {\n id\n name\n totalPoints\n }\n }\n"): (typeof documents)["\n query MyPoints {\n me {\n id\n name\n totalPoints\n }\n }\n"];
export function graphql(source: "\n query PointsRanking($period: RankingPeriod!) {\n ranking(first: 10, filter: { order: DESC, by: POINTS, period: $period }) {\n edges {\n node {\n id\n name\n totalPoints\n }\n }\n }\n }\n"): (typeof documents)["\n query PointsRanking($period: RankingPeriod!) {\n ranking(first: 10, filter: { order: DESC, by: POINTS, period: $period }) {\n edges {\n node {\n id\n name\n totalPoints\n }\n }\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
Expand Down
Loading