Skip to content

Commit 0b4c2b6

Browse files
pan93412pan93412
committed
feat: call new ranking API
1 parent 5ac1aba commit 0b4c2b6

File tree

6 files changed

+156
-45
lines changed

6 files changed

+156
-45
lines changed

‎app/(app)/statistics/_components/ranking/completed-questions.tsx‎

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,36 @@
22

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

7-
const MY_SOLVED_QUESTIONS_COUNT = graphql(`
8-
query MySolvedQuestionsCount {
9-
me {
10-
id
11-
name
12-
submissionStatistics {
13-
solvedQuestions
8+
const COMPLETED_QUESTIONS_RANKING = graphql(`
9+
query CompletedQuestionRanking($period: RankingPeriod!) {
10+
ranking(
11+
first: 10
12+
filter: { order: DESC, by: COMPLETED_QUESTIONS, period: $period }
13+
) {
14+
edges {
15+
node {
16+
id
17+
name
18+
submissionStatistics {
19+
solvedQuestions
20+
}
21+
}
1422
}
1523
}
1624
}
1725
`);
1826

19-
export default function SolvedQuestionsRanking() {
20-
const { data } = useSuspenseQuery(MY_SOLVED_QUESTIONS_COUNT);
27+
export default function SolvedQuestionsRanking({
28+
period,
29+
}: {
30+
period: RankingPeriod;
31+
}) {
32+
const { data } = useSuspenseQuery(COMPLETED_QUESTIONS_RANKING, {
33+
variables: { period },
34+
});
2135

2236
return (
2337
<Table>
@@ -29,10 +43,14 @@ export default function SolvedQuestionsRanking() {
2943
</TableHeader>
3044

3145
<TableBody>
32-
<TableRow>
33-
<TableCell>{data.me.name}</TableCell>
34-
<TableCell>{data.me.submissionStatistics.solvedQuestions}</TableCell>
35-
</TableRow>
46+
{data.ranking.edges.map((edge) => {
47+
return (
48+
<TableRow key={edge.node.id}>
49+
<TableCell>{edge.node.name}</TableCell>
50+
<TableCell>{edge.node.submissionStatistics.solvedQuestions}</TableCell>
51+
</TableRow>
52+
);
53+
})}
3654
</TableBody>
3755
</Table>
3856
);

‎app/(app)/statistics/_components/ranking/index.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Skeleton } from "@/components/ui/skeleton";
22
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
3+
import { RankingPeriod } from "@/gql/graphql";
34
import { Suspense } from "react";
45
import SolvedQuestionsRanking from "./completed-questions";
56
import PointsRanking from "./points";
@@ -16,22 +17,22 @@ export default function Ranking() {
1617

1718
<TabsContent value="daily-points">
1819
<Suspense fallback={<Skeleton className="h-48" />}>
19-
<PointsRanking />
20+
<PointsRanking period={RankingPeriod.Daily} />
2021
</Suspense>
2122
</TabsContent>
2223
<TabsContent value="weekly-points">
2324
<Suspense fallback={<Skeleton className="h-48" />}>
24-
<PointsRanking />
25+
<PointsRanking period={RankingPeriod.Weekly} />
2526
</Suspense>
2627
</TabsContent>
2728
<TabsContent value="daily-solved-questions">
2829
<Suspense fallback={<Skeleton className="h-48" />}>
29-
<SolvedQuestionsRanking />
30+
<SolvedQuestionsRanking period={RankingPeriod.Daily} />
3031
</Suspense>
3132
</TabsContent>
3233
<TabsContent value="weekly-solved-questions">
3334
<Suspense fallback={<Skeleton className="h-48" />}>
34-
<SolvedQuestionsRanking />
35+
<SolvedQuestionsRanking period={RankingPeriod.Weekly} />
3536
</Suspense>
3637
</TabsContent>
3738
</Tabs>

‎app/(app)/statistics/_components/ranking/points.tsx‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,27 @@
22

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

7-
const MY_POINTS = graphql(`
8-
query MyPoints {
9-
me {
10-
id
11-
name
12-
totalPoints
8+
const POINTS_RANKING = graphql(`
9+
query PointsRanking($period: RankingPeriod!) {
10+
ranking(first: 10, filter: { order: DESC, by: POINTS, period: $period }) {
11+
edges {
12+
node {
13+
id
14+
name
15+
totalPoints
16+
}
17+
}
1318
}
1419
}
1520
`);
1621

17-
export default function PointsRanking() {
18-
const { data } = useSuspenseQuery(MY_POINTS);
22+
export default function PointsRanking({ period }: { period: RankingPeriod }) {
23+
const { data } = useSuspenseQuery(POINTS_RANKING, {
24+
variables: { period },
25+
});
1926

2027
return (
2128
<Table>
@@ -27,10 +34,14 @@ export default function PointsRanking() {
2734
</TableHeader>
2835

2936
<TableBody>
30-
<TableRow>
31-
<TableCell>{data.me.name}</TableCell>
32-
<TableCell>{data.me.totalPoints}</TableCell>
33-
</TableRow>
37+
{data.ranking.edges.map((edge) => {
38+
return (
39+
<TableRow key={edge.node.id}>
40+
<TableCell>{edge.node.name}</TableCell>
41+
<TableCell>{edge.node.totalPoints}</TableCell>
42+
</TableRow>
43+
);
44+
})}
3445
</TableBody>
3546
</Table>
3647
);

‎gql/gql.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ type Documents = {
3030
"\n query MaterialsSchemaContent($id: ID!) {\n database(id: $id) {\n id\n schema\n }\n }\n": typeof types.MaterialsSchemaContentDocument,
3131
"\n query MaterialsSchema {\n databases {\n id\n ...MaterialsSchemaCard\n }\n }\n": typeof types.MaterialsSchemaDocument,
3232
"\n query CompletedQuestions {\n me {\n id\n submissionStatistics {\n totalQuestions\n solvedQuestions\n }\n }\n }\n": typeof types.CompletedQuestionsDocument,
33-
"\n query MySolvedQuestionsCount {\n me {\n id\n name\n submissionStatistics {\n solvedQuestions\n }\n }\n }\n": typeof types.MySolvedQuestionsCountDocument,
34-
"\n query MyPoints {\n me {\n id\n name\n totalPoints\n }\n }\n": typeof types.MyPointsDocument,
33+
"\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,
34+
"\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,
3535
"\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,
3636
"\n fragment PointFragment on Point {\n description\n points\n }\n": typeof types.PointFragmentFragmentDoc,
3737
"\n query ResolvedQuestions {\n me {\n id\n submissionStatistics {\n totalQuestions\n solvedQuestions\n }\n }\n }\n": typeof types.ResolvedQuestionsDocument,
@@ -60,8 +60,8 @@ const documents: Documents = {
6060
"\n query MaterialsSchemaContent($id: ID!) {\n database(id: $id) {\n id\n schema\n }\n }\n": types.MaterialsSchemaContentDocument,
6161
"\n query MaterialsSchema {\n databases {\n id\n ...MaterialsSchemaCard\n }\n }\n": types.MaterialsSchemaDocument,
6262
"\n query CompletedQuestions {\n me {\n id\n submissionStatistics {\n totalQuestions\n solvedQuestions\n }\n }\n }\n": types.CompletedQuestionsDocument,
63-
"\n query MySolvedQuestionsCount {\n me {\n id\n name\n submissionStatistics {\n solvedQuestions\n }\n }\n }\n": types.MySolvedQuestionsCountDocument,
64-
"\n query MyPoints {\n me {\n id\n name\n totalPoints\n }\n }\n": types.MyPointsDocument,
63+
"\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,
64+
"\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,
6565
"\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,
6666
"\n fragment PointFragment on Point {\n description\n points\n }\n": types.PointFragmentFragmentDoc,
6767
"\n query ResolvedQuestions {\n me {\n id\n submissionStatistics {\n totalQuestions\n solvedQuestions\n }\n }\n }\n": types.ResolvedQuestionsDocument,
@@ -155,11 +155,11 @@ export function graphql(source: "\n query CompletedQuestions {\n me {\n
155155
/**
156156
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
157157
*/
158-
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"];
158+
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"];
159159
/**
160160
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
161161
*/
162-
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"];
162+
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"];
163163
/**
164164
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
165165
*/

0 commit comments

Comments
 (0)