add LeetCode component after user logged in

Author: Sorosliu1029

jupyterlab_leetcode/handlers/cookie_handler.py

@@ -60,7 +60,7 @@ def get(self):
             )
             self.add_header(
                 "Set-Cookie",
-                f"leetcode_browser={browser}; Path=/; HttpOnly; Max-Age={max_age}",
+                f"leetcode_browser={browser}; Path=/; Max-Age={max_age}",
             )
 
         self.finish(json.dumps(resp))

src/components/BrowserCookie.tsx

@@ -2,7 +2,11 @@ import React, { useEffect, useState } from 'react';
 import { getCookie } from '../services/cookie';
 import Bowser from 'bowser';
 
-const BrowserCookie = ({ onSuccess }: { onSuccess: () => void }) => {
+const BrowserCookie = ({
+  setCookieLoggedIn
+}: {
+  setCookieLoggedIn: (b: string) => void;
+}) => {
   const browsers = [
     'Chrome',
     'Firefox',
@@ -40,9 +44,9 @@ const BrowserCookie = ({ onSuccess }: { onSuccess: () => void }) => {
 
   useEffect(() => {
     if (checked) {
-      onSuccess();
+      setCookieLoggedIn(browser);
     }
-  }, [checked, onSuccess]);
+  }, [checked, setCookieLoggedIn]);
 
   const checkCookie = () => {
     // TODO: change alert

src/components/LandingPage.tsx

@@ -1,8 +1,14 @@
 import React from 'react';
 import BrowserCookie from './BrowserCookie';
 
-const LandingPage = ({ onLoginSuccess }: { onLoginSuccess: () => void }) => {
-  const options: JSX.Element[] = [<BrowserCookie onSuccess={onLoginSuccess} />];
+const LandingPage = ({
+  setCookieLoggedIn
+}: {
+  setCookieLoggedIn: (b: string) => void;
+}) => {
+  const options: JSX.Element[] = [
+    <BrowserCookie setCookieLoggedIn={setCookieLoggedIn} />
+  ];
   return (
     <div>
       <p>Welcome to JupyterLab LeetCode Widget.</p>

src/components/LeetCode.tsx

@@ -0,0 +1,15 @@
+import React, { useState } from 'react';
+
+const LeetCode = () => {
+  const [_username, _setUsername] = useState('');
+
+  // useEffect(() => {}, []);
+
+  return (
+    <div>
+      <p>Welcome username</p>
+    </div>
+  );
+};
+
+export default LeetCode;

src/index.ts

@@ -7,11 +7,13 @@ import { ICommandPalette, WidgetTracker } from '@jupyterlab/apputils';
 
 import LeetCodeWidget from './widget';
 
+const PLUGIN_ID = 'jupyterlab-leetcode:plugin';
+
 /**
  * Initialization data for the jupyterlab-leetcode extension.
  */
 const plugin: JupyterFrontEndPlugin<void> = {
-  id: 'jupyterlab-leetcode:plugin',
+  id: PLUGIN_ID,
   description: 'Integrate LeetCode into beloved Jupyter.',
   autoStart: true,
   requires: [ICommandPalette],

src/widget.tsx

@@ -1,13 +1,25 @@
 import { ReactWidget } from '@jupyterlab/ui-components';
-import React, { StrictMode, useState } from 'react';
+import React, { StrictMode, useEffect, useState } from 'react';
 import LandingPage from './components/LandingPage';
+import LeetCode from './components/LeetCode';
 
 const LeetCodeComponent = (): JSX.Element => {
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
-  return isLoggedIn ? (
-    <div></div>
+  const [cookieLoggedIn, setCookieLoggedIn] = useState('');
+
+  useEffect(() => {
+    const leetcode_browser = document.cookie
+      .split('; ')
+      .find(cookie => cookie.startsWith('leetcode_browser='))
+      ?.split('=')[1];
+    if (leetcode_browser) {
+      setCookieLoggedIn(leetcode_browser);
+    }
+  }, []);
+
+  return cookieLoggedIn ? (
+    <LeetCode />
   ) : (
-    <LandingPage onLoginSuccess={() => setIsLoggedIn(true)} />
+    <LandingPage setCookieLoggedIn={b => setCookieLoggedIn(b)} />
   );
 };