question list table

Author: Sorosliu1029

jupyterlab_leetcode/handlers/leetcode_handler.py

@@ -158,17 +158,6 @@ async def get(self):
                                         }""",
                     "variables": {"userSlug": username},
                 },
-                "userPublicProfile": {
-                    "query": """query userPublicProfile($username: String!) {
-                                          matchedUser(username: $username) {
-                                            username
-                                            profile {
-                                              ranking
-                                            }
-                                          }
-                                        }""",
-                    "variables": {"username": username},
-                },
             },
         )
 

src/components/BrowserCookie.tsx renamed to src/components/BrowserMenu.tsx

@@ -14,7 +14,7 @@ import {
 import { Button, Menu, useMantineTheme } from '@mantine/core';
 import { getCookie } from '../services/cookie';
 
-const BROWSERS = [
+const Browsers = [
   {
     name: 'Chrome',
     icon: (color: string) => (
@@ -86,7 +86,7 @@ const BROWSERS = [
 const normalizeBrowserName = (name: string) =>
   name.toLowerCase().replace(/\s+/g, '_');
 
-const BrowserCookie: React.FC<{
+const BrowserMenu: React.FC<{
   className?: string;
   setCookieLoggedIn: (b: string) => void;
 }> = ({ className, setCookieLoggedIn }) => {
@@ -146,7 +146,7 @@ const BrowserCookie: React.FC<{
       </Menu.Target>
       <Menu.Dropdown>
         <Menu.Label>With LeetCode logged in</Menu.Label>
-        {BROWSERS.map(({ name, icon }) => (
+        {Browsers.map(({ name, icon }) => (
           <Menu.Item
             key={name}
             leftSection={icon(theme.colors.blue[6])}
@@ -160,4 +160,4 @@ const BrowserCookie: React.FC<{
   );
 };
 
-export default BrowserCookie;
+export default BrowserMenu;

src/components/DifficultyStatistics.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Stack, Text } from '@mantine/core';
+
+const DifficultyStatistics: React.FC<{ text: string; color: string }> = ({
+  text,
+  color
+}) => {
+  return (
+    <Stack>
+      <Text>{text.charAt(0).toUpperCase() + text.slice(1)}</Text>
+    </Stack>
+  );
+};
+
+export default DifficultyStatistics;

src/components/Footer.tsx

@@ -3,7 +3,7 @@ import { Anchor, Container, Group } from '@mantine/core';
 import classes from '../styles/Footer.module.css';
 import { IconBrandLeetcode } from '@tabler/icons-react';
 
-const LINKS = [
+const Links = [
   {
     link: 'https://github.com/Sorosliu1029/jupyterlab-leetcode',
     label: 'GitHub'
@@ -18,7 +18,7 @@ const Footer = () => {
       <Container className={classes.inner}>
         <IconBrandLeetcode size={28} />
         <Group className={classes.links}>
-          {LINKS.map(link => (
+          {Links.map(link => (
             <Anchor<'a'>
               c="dimmed"
               key={link.label}

src/components/LeetCodeMainArea.tsx renamed to src/components/JupyterMainArea.tsx

@@ -1,15 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import { IDocumentManager } from '@jupyterlab/docmanager';
-import { JupyterFrontEnd } from '@jupyterlab/application';
 import LandingPage from './LandingPage';
-import LeetCode from './LeetCode';
+import LeetCodeMain from './LeetCodeMain';
 import { getCookie } from '../services/cookie';
 import { Notification } from '@jupyterlab/apputils';
 
-const LeetCodeMainArea: React.FC<{
-  app: JupyterFrontEnd;
-  docManager: IDocumentManager;
-}> = ({ app, docManager }) => {
+const JupyterMainArea: React.FC<{ docManager: IDocumentManager }> = ({
+  docManager
+}) => {
   const [cookieLoggedIn, setCookieLoggedIn] = useState('');
 
   useEffect(() => {
@@ -28,11 +26,12 @@ const LeetCodeMainArea: React.FC<{
     }
   });
 
+  // FIXME: flash when refresh
   return cookieLoggedIn ? (
-    <LeetCode app={app} docManager={docManager} />
+    <LeetCodeMain docManager={docManager} />
   ) : (
     <LandingPage setCookieLoggedIn={b => setCookieLoggedIn(b)} />
   );
 };
 
-export default LeetCodeMainArea;
+export default JupyterMainArea;

src/components/LandingPage.tsx

@@ -1,18 +1,20 @@
 import React from 'react';
-import BrowserCookie from './BrowserCookie';
 
 import { Button, Container, Group, Text, Tooltip, Anchor } from '@mantine/core';
 import { IconBrandGithub, IconBrandLinkedin } from '@tabler/icons-react';
 import classes from '../styles/LandingPage.module.css';
 import Footer from './Footer';
+import BrowserMenu from './BrowserMenu';
 
-const LeetCdoeGradient = { from: '#FEA512', to: '#FFDB01' };
+export const LeetCodeMainColor = '#FEA512';
+export const LeetCodeSecondColor = '#FFDB01';
+const LeetCdoeGradient = { from: LeetCodeMainColor, to: LeetCodeSecondColor };
 
 const LandingPage: React.FC<{
   setCookieLoggedIn: (b: string) => void;
 }> = ({ setCookieLoggedIn }) => {
   const options: JSX.Element[] = [
-    <BrowserCookie
+    <BrowserMenu
       setCookieLoggedIn={setCookieLoggedIn}
       className={classes.control}
     />,

src/components/LeetCode.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react';
+import { IDocumentManager } from '@jupyterlab/docmanager';
+import { Notification } from '@jupyterlab/apputils';
+import { Container, Group, Stack } from '@mantine/core';
+import { getProfile } from '../services/leetcode';
+import { LeetCodeProfile } from '../types/leetcode';
+import Profile from './Profile';
+import Statistics from './Statistics';
+import QuestionList from './QuestionList';
+
+const LeetCodeMain: React.FC<{ docManager: IDocumentManager }> = ({
+  docManager
+}) => {
+  const [profile, setProfile] = useState<LeetCodeProfile | null>(null);
+
+  useEffect(() => {
+    getProfile()
+      .then(profile => {
+        if (!profile.isSignedIn) {
+          Notification.error('Please sign in to LeetCode.', {
+            autoClose: 3000
+          });
+          return;
+        }
+        setProfile(profile);
+      })
+      .catch(e => Notification.error(e.message, { autoClose: 3000 }));
+  }, []);
+
+  const openNoteBook = (path: string) => {
+    docManager.openOrReveal(path);
+  };
+
+  const calcHeight = () => {
+    const mainEle = document.querySelector('#jll-main');
+    const profileEle = document.querySelector('#jll-profile');
+    if (!mainEle || !profileEle) {
+      return '100%';
+    }
+    const mainStyle = window.getComputedStyle(mainEle);
+    const padding =
+      parseFloat(mainStyle.paddingTop) + parseFloat(mainStyle.paddingBottom);
+    return mainEle.clientHeight - padding - profileEle.clientHeight;
+  };
+
+  return (
+    <Container fluid={true} h={'100%'} p="lg" id="jll-main">
+      <Stack>
+        <Group id="jll-profile">
+          {profile && <Profile profile={profile} />}
+          {profile && <Statistics username={profile.username} />}
+        </Group>
+        <QuestionList openNotebook={openNoteBook} height={calcHeight()} />
+      </Stack>
+    </Container>
+  );
+};
+
+export default LeetCodeMain;

src/components/LeetCodeMain.tsx

@@ -1,16 +1,28 @@
 import React from 'react';
+import { Avatar, Paper, Text } from '@mantine/core';
 import { LeetCodeProfile } from '../types/leetcode';
 
-const Profile: React.FC<{ profile: LeetCodeProfile }> = ({ profile }) => {
+const Profile: React.FC<{
+  profile: LeetCodeProfile;
+}> = ({ profile }) => {
   return (
-    <div>
-      <p>Welcome {profile.username}</p>
-      <img
-        src={profile.avatar}
-        alt="Avatar"
-        style={{ width: '100px', height: '100px' }}
-      />
-    </div>
+    <Paper
+      shadow="md"
+      radius="md"
+      withBorder
+      p="sm"
+      miw={'20%'}
+      maw={'40%'}
+      bg="var(--mantine-color-body)"
+    >
+      <Avatar src={profile.avatar} size={60} radius={60} mx="auto" />
+      <Text ta="center" fz="md" fw={500} mt="xs">
+        {profile.realName}
+      </Text>
+      <Text ta="center" c="dimmed" fz="xs">
+        {profile.username}
+      </Text>
+    </Paper>
   );
 };