list LeetCode questions

Author: Sorosliu1029

jupyterlab_leetcode/handlers/__init__.py

@@ -2,7 +2,8 @@
 
 from .base_handler import BaseHandler
 from .cookie_handler import GetCookieHandler
-from .leetcode_handler import LeetCodeProfileHandler, LeetCodeStatisticsHandler
+from .leetcode_handler import (LeetCodeProfileHandler, LeetCodeQuestionHandler,
+                               LeetCodeStatisticsHandler)
 
 
 def setup_handlers(web_app):
@@ -12,6 +13,7 @@ def setup_handlers(web_app):
         GetCookieHandler,
         LeetCodeProfileHandler,
         LeetCodeStatisticsHandler,
+        LeetCodeQuestionHandler,
     ]
 
     web_app.add_handlers(

jupyterlab_leetcode/handlers/leetcode_handler.py

@@ -1,5 +1,5 @@
 import json
-from typing import cast
+from typing import Any, Mapping, cast
 
 import tornado
 from tornado.gen import multi
@@ -10,7 +10,7 @@
 
 LEETCODE_GRAPHQL_URL = "https://leetcode.com/graphql"
 
-type QueryType = dict[str, str | dict[str, str]]
+type QueryType = dict[str, str | Mapping[str, Any]]
 
 
 class LeetCodeHandler(BaseHandler):
@@ -174,3 +174,93 @@ async def get(self):
             )
         )
         self.finish(res)
+
+
+class LeetCodeQuestionHandler(LeetCodeHandler):
+    route = r"leetcode/questions"
+
+    @tornado.web.authenticated
+    async def post(self):
+        body = self.get_json_body()
+        if not body:
+            self.set_status(400)
+            self.finish(json.dumps({"message": "Request body is required"}))
+            return
+
+        body = cast("dict[str, str|int]", body)
+        skip = cast(int, body.get("skip", 0))
+        limit = cast(int, body.get("limit", 0))
+        keyword = cast(str, body.get("keyword", ""))
+        sortField = cast(str, body.get("sortField", "CUSTOM"))
+        sortOrder = cast(str, body.get("sortOrder", "ASCENDING"))
+
+        await self.graphql(
+            name="question_list",
+            query={
+                "query": """query problemsetQuestionListV2($filters: QuestionFilterInput,
+                                                                $limit: Int,
+                                                                $searchKeyword: String,
+                                                                $skip: Int,
+                                                                $sortBy: QuestionSortByInput,
+                                                                $categorySlug: String) {
+                                              problemsetQuestionListV2(
+                                                filters: $filters
+                                                limit: $limit
+                                                searchKeyword: $searchKeyword
+                                                skip: $skip
+                                                sortBy: $sortBy
+                                                categorySlug: $categorySlug
+                                              ) {
+                                                questions {
+                                                  id
+                                                  titleSlug
+                                                  title
+                                                  translatedTitle
+                                                  questionFrontendId
+                                                  paidOnly
+                                                  difficulty
+                                                  topicTags {
+                                                    name
+                                                    slug
+                                                    nameTranslated
+                                                  }
+                                                  status
+                                                  isInMyFavorites
+                                                  frequency
+                                                  acRate
+                                                }
+                                                totalLength
+                                                finishedLength
+                                                hasMore
+                                              }
+                                            }""",
+                "variables": {
+                    "skip": skip,
+                    "limit": limit,
+                    "searchKeyword": keyword,
+                    "categorySlug": "algorithms",
+                    "filters": {
+                        "filterCombineType": "ALL",
+                        "statusFilter": {
+                            "questionStatuses": ["TO_DO"],
+                            "operator": "IS",
+                        },
+                        "difficultyFilter": {
+                            "difficulties": ["MEDIUM", "HARD"],
+                            "operator": "IS",
+                        },
+                        "languageFilter": {"languageSlugs": [], "operator": "IS"},
+                        "topicFilter": {"topicSlugs": [], "operator": "IS"},
+                        "acceptanceFilter": {},
+                        "frequencyFilter": {},
+                        "frontendIdFilter": {},
+                        "lastSubmittedFilter": {},
+                        "publishedFilter": {},
+                        "companyFilter": {"companySlugs": [], "operator": "IS"},
+                        "positionFilter": {"positionSlugs": [], "operator": "IS"},
+                        "premiumFilter": {"premiumStatus": [], "operator": "IS"},
+                    },
+                    "sortBy": {"sortField": sortField, "sortOrder": sortOrder},
+                },
+            },
+        )

src/components/BrowserCookie.tsx

@@ -2,11 +2,9 @@ import React, { useEffect, useState } from 'react';
 import { getCookie } from '../services/cookie';
 import Bowser from 'bowser';
 
-const BrowserCookie = ({
-  setCookieLoggedIn
-}: {
+const BrowserCookie: React.FC<{
   setCookieLoggedIn: (b: string) => void;
-}) => {
+}> = ({ setCookieLoggedIn }) => {
   const browsers = [
     'Chrome',
     'Firefox',

src/components/LandingPage.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import BrowserCookie from './BrowserCookie';
 
-const LandingPage = ({
-  setCookieLoggedIn
-}: {
+const LandingPage: React.FC<{
   setCookieLoggedIn: (b: string) => void;
-}) => {
+}> = ({ setCookieLoggedIn }) => {
   const options: JSX.Element[] = [
     <BrowserCookie setCookieLoggedIn={setCookieLoggedIn} />
   ];

src/components/LeetCode.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { getProfile, getStatistics } from '../services/leetcode';
-import { LeetCodeProfile, LeetCodeStatistics } from '../types/leetcode';
+import { getProfile } from '../services/leetcode';
+import { LeetCodeProfile } from '../types/leetcode';
 import Profile from './Profile';
 import Statistics from './Statistics';
+import QuestionList from './QuestionList';
 
-const LeetCode = () => {
+const LeetCode: React.FC = () => {
   const [profile, setProfile] = useState<LeetCodeProfile | null>(null);
-  const [statistics, setStatistics] = useState<LeetCodeStatistics | null>(null);
 
   useEffect(() => {
     getProfile().then(profile => {
@@ -18,19 +18,11 @@ const LeetCode = () => {
     });
   }, []);
 
-  useEffect(() => {
-    if (!profile) {
-      return;
-    }
-    getStatistics(profile.username).then(d => {
-      setStatistics(d);
-    });
-  }, [profile]);
-
   return profile ? (
     <div>
       <Profile profile={profile} />
-      {statistics ? <Statistics statisitcs={statistics} /> : null}
+      <Statistics username={profile.username} />
+      <QuestionList />
     </div>
   ) : null;
 };

src/components/Profile.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { LeetCodeProfile } from '../types/leetcode';
 
-const Profile = ({ profile }: { profile: LeetCodeProfile }) => {
+const Profile: React.FC<{ profile: LeetCodeProfile }> = ({ profile }) => {
   return (
     <div>
       <p>Welcome {profile.username}</p>

src/components/QuestionItem.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { LeetCodeQuestion } from '../types/leetcode';
+const QuestionItem: React.FC<{ question: LeetCodeQuestion }> = ({
+  question
+}) => {
+  return (
+    <div>
+      <p>{question.title}</p>
+    </div>
+  );
+};
+
+export default QuestionItem;

src/components/QuestionList.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from 'react';
+import { listQuestions } from '../services/leetcode';
+import { LeetCodeQuestion } from '../types/leetcode';
+import QuestionItem from './QuestionItem';
+
+const QuestionList: React.FC = () => {
+  const [skip, setSkip] = useState(0);
+  const limit = 100;
+  const [keyword, setKeyword] = useState('');
+  const [questions, setQuestions] = useState<LeetCodeQuestion[]>([]);
+  const [_hasMore, setHasMore] = useState(true);
+  const [_finishedLength, setFinishedLength] = useState(0);
+  const [_totalLength, setTotalLength] = useState(0);
+
+  useEffect(() => setSkip(0), [keyword]);
+
+  useEffect(() => {
+    listQuestions(keyword, skip, limit).then(r => {
+      if (!r) {
+        return;
+      }
+      const {
+        questions: fetchedQuestions,
+        hasMore: fetchedHasMore,
+        finishedLength: fetchedFinishedLength,
+        totalLength: fetchedTotalLength
+      } = r.problemsetQuestionListV2;
+      setQuestions(fetchedQuestions);
+      setHasMore(fetchedHasMore);
+      setFinishedLength(fetchedFinishedLength);
+      setTotalLength(fetchedTotalLength);
+    });
+  }, [keyword, skip]);
+
+  return (
+    <div>
+      <label htmlFor="keyword">Keyword:</label>
+      <input
+        type="text"
+        id="keyword"
+        value={keyword}
+        onChange={e => setKeyword(e.target.value)}
+      />
+      {questions.length > 0 ? (
+        <div>
+          {questions.map(q => (
+            <QuestionItem key={q.id} question={q} />
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default QuestionList;

src/components/Statistics.tsx

@@ -1,12 +1,21 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { getStatistics } from '../services/leetcode';
 import { LeetCodeStatistics } from '../types/leetcode';
 
-const Statistics = ({ statisitcs }: { statisitcs: LeetCodeStatistics }) => {
-  return (
+const Statistics: React.FC<{ username: string }> = ({ username }) => {
+  const [statistics, setStatistics] = useState<LeetCodeStatistics | null>(null);
+
+  useEffect(() => {
+    getStatistics(username).then(d => {
+      setStatistics(d);
+    });
+  }, []);
+
+  return statistics ? (
     <div>
-      <p>rank: {statisitcs.userPublicProfile.matchedUser.profile.ranking}</p>
+      <p>rank: {statistics.userPublicProfile.matchedUser.profile.ranking}</p>
     </div>
-  );
+  ) : null;
 };
 
 export default Statistics;

src/services/leetcode.ts

@@ -1,18 +1,42 @@
-import { LeetCodeProfile, LeetCodeStatistics } from '../types/leetcode';
+import {
+  LeetCodeProfile,
+  LeetCodeQuestion,
+  LeetCodeStatistics
+} from '../types/leetcode';
 import { requestAPI } from './handler';
 
-export async function getProfile(): Promise<LeetCodeProfile | null> {
+export async function getProfile() {
   return requestAPI<{ data: { userStatus: LeetCodeProfile } }>(
     '/leetcode/profile'
   )
     .then(d => d.data.userStatus)
     .catch(() => null);
 }
 
-export async function getStatistics(
-  username: string
-): Promise<LeetCodeStatistics | null> {
+export async function getStatistics(username: string) {
   return requestAPI<LeetCodeStatistics>(
     `/leetcode/statistics?username=${username}`
   ).catch(() => null);
 }
+
+export async function listQuestions(
+  keyword: string,
+  skip: number,
+  limit: number
+) {
+  return requestAPI<{
+    data: {
+      problemsetQuestionListV2: {
+        finishedLength: number;
+        hasMore: boolean;
+        totalLength: number;
+        questions: LeetCodeQuestion[];
+      };
+    };
+  }>('/leetcode/questions', {
+    method: 'POST',
+    body: JSON.stringify({ skip, limit, keyword })
+  })
+    .then(d => d.data)
+    .catch(() => null);
+}