feat(api): add api endpoint and display results in main page

Author: cascandaliato

.gitignore

@@ -32,3 +32,5 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+.vscode

.prettierrc.json

@@ -0,0 +1 @@
+{} 

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  reactStrictMode: true,
+};

package.json

@@ -8,8 +8,17 @@
     "start": "next start"
   },
   "dependencies": {
+    "@material-ui/core": "^4.11.0",
+    "axios": "^0.21.0",
     "next": "10.0.0",
     "react": "17.0.1",
-    "react-dom": "17.0.1"
+    "react-dom": "17.0.1",
+    "rxjs": "^6.6.3"
+  },
+  "devDependencies": {
+    "@types/node": "^14.14.6",
+    "@types/react": "^16.9.55",
+    "prettier": "^2.1.2",
+    "typescript": "^4.0.5"
   }
 }

pages/_app.js

@@ -0,0 +1,8 @@
+import "../styles/globals.css";
+import { AppProps } from "next/app";
+
+const MyApp = ({ Component, pageProps }: AppProps) => (
+  <Component {...pageProps} />
+);
+
+export default MyApp;

pages/_app.tsx

@@ -0,0 +1,92 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import axios from "axios";
+
+interface LeetCodeCount {
+  difficulty: string;
+  count: number;
+}
+
+interface LeetCodeResponse {
+  data: {
+    data: {
+      allQuestionsCount: LeetCodeCount[];
+      matchedUser: {
+        profile: { ranking: number };
+        submitStats: {
+          acSubmissionNum: LeetCodeCount[];
+        };
+      };
+    };
+  };
+}
+
+interface Output {
+  error: null | string;
+  ranking: number | string;
+  solved: number | string;
+  solvedOverTotal: string;
+  solvedPercentage: string;
+}
+
+const query = (user: string) =>
+  `{
+    "operationName": "getUserProfile",
+    "variables": { "username" : "${user}" },
+    "query": "query getUserProfile($username: String!) { allQuestionsCount { difficulty count } matchedUser(username: $username) { profile { starRating ranking } submitStats { acSubmissionNum { difficulty count } } } }"
+}`;
+
+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 {
+      data: { data },
+    }: LeetCodeResponse = await axios.post(
+      "https://leetcode.com/graphql",
+      query(user as string),
+      {
+        headers: {
+          "content-type": "application/json",
+        },
+      }
+    );
+
+    if (!data.matchedUser) throw new Error("User not found");
+
+    const ranking = data.matchedUser.profile.ranking;
+
+    const solved = data.matchedUser.submitStats.acSubmissionNum.filter(
+      ({ difficulty }) => difficulty === "All"
+    )[0].count;
+
+    const total = data.allQuestionsCount.filter(
+      ({ difficulty }) => difficulty === "All"
+    )[0].count;
+
+    output = {
+      error: null,
+      ranking,
+      solved,
+      solvedOverTotal: `${solved}/${total}`,
+      solvedPercentage: `${((solved / total) * 100).toFixed(1)}%`,
+    };
+  } catch ({ message }) {
+    output = {
+      error: message,
+      ranking: genericErrorMessage,
+      solved: genericErrorMessage,
+      solvedOverTotal: genericErrorMessage,
+      solvedPercentage: genericErrorMessage,
+    };
+  }
+
+  res.setHeader("Content-Type", "application/json");
+  res.status(200).json(output);
+};