Add badges for LeetCode contest rating

.gitignore

@@ -33,4 +33,5 @@ yarn-error.log*
 # vercel
 .vercel
 
-.vscode
+.vscode
+test.ipynb

README.md

@@ -15,3 +15,5 @@ Live at https://leetcode-badge.vercel.app/
 - [React](https://reactjs.org/) hooks
 - [RxJS](https://rxjs.dev/)
 - [TypeScript](https://www.typescriptlang.org/)
+
+[![LeetCode user cascandaliato](https://img.shields.io/badge/dynamic/json?style=for-the-badge&labelColor=black&color=%23ffa116&label=Solved&query=solvedOverTotal&url=https%3A%2F%2Flocalhost:3000%2Fapi%2Fusers%2Fcascandaliato&logo=leetcode&logoColor=yellow)](https://leetcode.com/cascandaliato/)

components/BadgeContent.tsx

@@ -6,7 +6,9 @@ import {
   InputLabel,
   MenuItem,
   Select,
+  Switch,
   TextField,
+  Grid,
 } from "@material-ui/core";
 import { Dispatch, FC, SetStateAction } from "react";
 import { Badge, ContentPresetName, contentPresets } from "../utils/badge";

components/CopyToClipboard.tsx

@@ -73,7 +73,7 @@ const CopyToClipboard: FC<{
         tabIndex={0}
         style={{ cursor: "pointer" }}
       >
-        <FontAwesomeIcon icon={icon} size="2x" />
+        <FontAwesomeIcon icon={icon} size="1x" width="40px" height="40px" />
         <span style={{ fontWeight: 400 }}>{label}</span>
       </Box>
     </Tooltip>

next-env.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -15,7 +15,7 @@
     "@material-ui/core": "^4.11.0",
     "axios": "^0.21.1",
     "copy-to-clipboard": "^3.3.1",
-    "next": "10.0.0",
+    "next": "^12.1.6",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "rxjs": "^6.6.3"

pages/api/users/[user]/cn.ts

@@ -0,0 +1,177 @@
+import axios from "axios";
+import { NextApiRequest, NextApiResponse } from "next";
+import { parse } from "path";
+
+interface LeetCodeCount {
+  difficulty: string;
+  count: number;
+}
+
+interface processResponse {
+  data: {
+    data: {
+      userProfileUserQuestionProgress: {
+        numAcceptedQuestions: LeetCodeCount[];
+        numFailedQuestions: LeetCodeCount[];
+        numUntouchedQuestions: LeetCodeCount[];
+      };
+    };
+  };
+}
+
+interface profileResponse {
+  data: {
+    data: {
+      userProfilePublicProfile: {
+        siteRanking: number;
+        profile: { userSlug: string; realName: string; userAvatar: string };
+      };
+    };
+  };
+}
+
+interface contestResponse {
+  data: {
+    data: {
+      userContestRanking: { rating: number; topPercentage: string };
+    };
+  };
+}
+
+interface Output {
+  realName: string;
+  avatarUrl: string;
+  ranking: number | string;
+  rating: number | string;
+  solved: number | string;
+  solvedOverTotal: string;
+  solvedPercentage: string;
+  error: null | string;
+  ratingQuantile: string;
+}
+
+const queryProfile = (user: string) =>
+  `{
+    "variables": { "userSlug" : "${user}" },
+    "query": "query userProfilePublicProfile($userSlug: String!) { userProfilePublicProfile(userSlug: $userSlug) { siteRanking profile { userSlug realName userAvatar} }}"
+}`;
+
+const queryProcess = (user: string) =>
+  `{"variables": { "userSlug" : "${user}" },
+    "query": "query userQuestionProgress($userSlug: String!) { userProfileUserQuestionProgress(userSlug: $userSlug) { numAcceptedQuestions { difficulty count } numFailedQuestions { difficulty count }numUntouchedQuestions { difficulty count } }}"
+}`;
+
+const queryRating = (user: string) =>
+  `{"variables": { "userSlug" : "${user}" }, 
+ "query": "query userContestRankingInfo($userSlug: String!) { userContestRanking(userSlug: $userSlug) {rating topPercentage}}" 
+}`;
+
+const genericErrorMessage =
+  "error: reach out to github.com/cascandaliato/leetcode-badge";
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  const {
+    query: { user },
+  } = req;
+
+  let output: Output;
+
+  try {
+    const userprofile: profileResponse = await axios.post(
+      "https://leetcode.cn/graphql",
+      queryProfile(user as string),
+      {
+        headers: {
+          "content-type": "application/json",
+        },
+      }
+    );
+
+    if (!userprofile.data.data.userProfilePublicProfile)
+      throw new Error("User not found");
+
+    const processResponse: processResponse = await axios.post(
+      "https://leetcode-cn.com/graphql",
+      queryProcess(user as string),
+      {
+        headers: {
+          "content-type": "application/json",
+        },
+      }
+    );
+
+    const usercontestres: contestResponse = await axios.post(
+      "https://leetcode.cn/graphql/noj-go",
+      queryRating(user as string),
+      {
+        headers: {
+          "content-type": "application/json",
+        },
+      }
+    );
+
+    const realName =
+      userprofile.data.data.userProfilePublicProfile.profile.realName;
+    const avatarUrl =
+      userprofile.data.data.userProfilePublicProfile.profile.userAvatar;
+    const ranking = userprofile.data.data.userProfilePublicProfile.siteRanking;
+
+    const solved = processResponse.data.data.userProfileUserQuestionProgress.numAcceptedQuestions.reduce(
+      (sum, item) => sum + item.count,
+      0
+    );
+
+    const failed = processResponse.data.data.userProfileUserQuestionProgress.numFailedQuestions.reduce(
+      (sum, item) => sum + item.count,
+      0
+    );
+
+    const untouched = processResponse.data.data.userProfileUserQuestionProgress.numUntouchedQuestions.reduce(
+      (sum, item) => sum + item.count,
+      0
+    );
+
+    const total = solved + failed + untouched;
+
+    const rating = usercontestres.data.data.userContestRanking
+      ? Math.round(usercontestres.data.data.userContestRanking.rating)
+      : "N/A";
+
+    const topPercentage = usercontestres.data.data.userContestRanking
+      ? parseFloat(usercontestres.data.data.userContestRanking.topPercentage)
+      : "N/A";
+
+    const ratingQuantile =
+      rating === "N/A" || topPercentage === "N/A"
+        ? "N/A"
+        : `${rating} (top ${topPercentage}%)`;
+
+    output = {
+      realName,
+      avatarUrl,
+      ranking,
+      rating: rating,
+      solved,
+      solvedOverTotal: `${solved}/${total}`,
+      solvedPercentage: `${((solved / total) * 100).toFixed(1)}%`,
+      error: null,
+      ratingQuantile,
+    };
+  } catch (e) {
+    let err = (e as Error).message;
+    output = {
+      realName: err,
+      avatarUrl: err,
+      ranking: err,
+      rating: err,
+      solved: err,
+      solvedOverTotal: err,
+      solvedPercentage: err,
+      error: err,
+      ratingQuantile: err,
+    };
+  }
+
+  res.setHeader("Content-Type", "application/json");
+  res.status(200).json(output);
+};

pages/api/users/[user].ts → pages/api/users/[user]/index.ts

@@ -10,10 +10,12 @@ interface LeetCodeResponse {
   data: {
     data: {
       allQuestionsCount: LeetCodeCount[];
+      filteredQuestions: LeetCodeCount[];
       matchedUser: {
         profile: { realName: string; userAvatar: string; ranking: number };
         submitStats: { acSubmissionNum: LeetCodeCount[] };
       };
+      userContestRanking: { rating: string; topPercentage: string };
     };
   };
 }
@@ -22,6 +24,8 @@ interface Output {
   realName: string;
   avatarUrl: string;
   ranking: number | string;
+  rating: number | string;
+  ratingQuantile: string;
   solved: number | string;
   solvedOverTotal: string;
   solvedPercentage: string;
@@ -30,9 +34,8 @@ interface Output {
 
 const query = (user: string) =>
   `{
-    "operationName": "getUserProfile",
     "variables": { "username" : "${user}" },
-    "query": "query getUserProfile($username: String!) { allQuestionsCount { difficulty count } matchedUser(username: $username) { profile { realName userAvatar starRating ranking } submitStats { acSubmissionNum { difficulty count } } } }"
+    "query": "query getUserProfile($username: String!) { allQuestionsCount { difficulty count } matchedUser(username: $username) { profile { realName userAvatar starRating ranking } submitStats { acSubmissionNum { difficulty count } } } userContestRanking(username: $username)  {rating topPercentage} }"
 }`;
 
 const genericErrorMessage =
@@ -74,24 +77,42 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
       ({ difficulty }) => difficulty === "All"
     )[0].count;
 
+    const rating = data.userContestRanking
+      ? Math.round(parseFloat(data.userContestRanking.rating))
+      : "N/A";
+
+    const topPercentage = data.userContestRanking
+      ? parseFloat(data.userContestRanking.topPercentage)
+      : "N/A";
+
+    const ratingQuantile =
+      topPercentage === "N/A" || rating === "N/A"
+        ? "N/A"
+        : `${rating} (top ${topPercentage}%)`;
+
     output = {
       realName,
       avatarUrl,
       ranking,
+      rating,
       solved,
+      ratingQuantile,
       solvedOverTotal: `${solved}/${total}`,
       solvedPercentage: `${((solved / total) * 100).toFixed(1)}%`,
       error: null,
     };
-  } catch ({ message }) {
+  } catch (e) {
+    let err = (e as Error).message;
     output = {
-      realName: genericErrorMessage,
-      avatarUrl: genericErrorMessage,
-      ranking: genericErrorMessage,
-      solved: genericErrorMessage,
-      solvedOverTotal: genericErrorMessage,
-      solvedPercentage: genericErrorMessage,
-      error: message,
+      realName: err,
+      avatarUrl: err,
+      ranking: err,
+      rating: err,
+      solved: err,
+      solvedOverTotal: err,
+      solvedPercentage: err,
+      error: err,
+      ratingQuantile: err,
     };
   }