fix: fix login drawer

Author: phodal

src/components/ChatGPTApp.tsx

@@ -2,11 +2,22 @@
 
 import { ChatRoom } from "@/app/[lang]/chatgpt/ChatRoom";
 import { LoginPage } from "@/app/[lang]/chatgpt/LoginPage";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 
-export const ChatGPTApp = ({ loggedIn, initMessage }: { loggedIn?: boolean; initMessage?: string }) => {
+type ChatGPTAppProps = {
+  loggedIn?: boolean;
+  updateLoginStatus?: (loggedIn: boolean) => void;
+  initMessage?: string;
+};
+export const ChatGPTApp = ({ loggedIn, initMessage, updateLoginStatus }: ChatGPTAppProps) => {
   const [isLoggedIn, setIsLoggedIn] = useState(loggedIn ?? false);
 
+  useEffect(() => {
+    if (updateLoginStatus) {
+      updateLoginStatus(isLoggedIn);
+    }
+  }, [isLoggedIn]);
+
   return isLoggedIn ? (
     <ChatRoom setIsLoggedIn={setIsLoggedIn} initMessage={initMessage} />
   ) : (

src/components/ClickPrompt/ExecutePromptButton.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { MouseEventHandler, useState } from "react";
+import React, { MouseEventHandler, useEffect, useState } from "react";
 import { Text, useDisclosure } from "@chakra-ui/react";
 import * as UserAPI from "@/api/user";
 import { ResponseCreateConversation } from "@/pages/api/chatgpt/conversation";
@@ -31,17 +31,24 @@ function ExecutePromptButton(props: ExecButtonProps) {
   const [hasLogin, setHasLogin] = useState(false);
 
   const handleClick = async () => {
+    setIsLoading(true);
+
     try {
-      await UserAPI.isLoggedIn();
+      const response = await UserAPI.isLoggedIn();
+      if (!response.loggedIn) {
+        onOpen();
+        setIsLoading(false);
+        return;
+      }
+
       setHasLogin(true);
     } catch (e) {
-      onOpen();
+      console.log(e);
       setHasLogin(false);
     }
 
     let conversationId = props.conversationId;
     if (!props.conversationId) {
-      setIsLoading(true);
       const conversation: ResponseCreateConversation = await createConversation();
       if (!conversation) {
         return;
@@ -58,14 +65,27 @@ function ExecutePromptButton(props: ExecButtonProps) {
       }
     }
 
-    onClose();
     setIsLoading(false);
   };
 
+  useEffect(() => {
+    console.log(`hasLogin: ${hasLogin}`);
+    if (hasLogin) {
+      onClose();
+    }
+  }, [hasLogin]);
+
   const handleClose = () => {
     onClose();
   };
 
+  const updateLoginStatus = (status: boolean) => {
+    if (status) {
+      setHasLogin(true);
+      onClose();
+    }
+  };
+
   return (
     <>
       <StyledPromptButton>
@@ -76,7 +96,7 @@ function ExecutePromptButton(props: ExecButtonProps) {
         </Button>
         <ClickPromptBird />
       </StyledPromptButton>
-      {!hasLogin && LoggingDrawer(isOpen, handleClose, hasLogin, props)}
+      {!hasLogin && LoggingDrawer(isOpen, handleClose, hasLogin, props, updateLoginStatus)}
     </>
   );
 }

src/components/ClickPrompt/LoggingDrawer.tsx

@@ -5,15 +5,21 @@ import { ChatGPTApp } from "@/components/ChatGPTApp";
 import React from "react";
 import { CPButtonProps } from "@/components/ClickPrompt/Button.shared";
 
-export function LoggingDrawer(isOpen: boolean, handleClose: () => void, isLoggedIn: boolean, props: CPButtonProps) {
+export function LoggingDrawer(
+  isOpen: boolean,
+  handleClose: () => void,
+  isLoggedIn: boolean,
+  props: CPButtonProps,
+  updateStatus?: (loggedIn: boolean) => void,
+) {
   return (
     <Drawer isOpen={isOpen} placement='right' onClose={handleClose} size={"2xl"}>
       <DrawerOverlay />
       <DrawerContent>
         <DrawerCloseButton className='text-white z-50' />
         <DrawerBody padding={0}>
           <div className='bg-[#343541] flex flex-1 h-[100%] overflow-y-auto items-center justify-center'>
-            <ChatGPTApp loggedIn={isLoggedIn} initMessage={props.text} />
+            <ChatGPTApp loggedIn={isLoggedIn} initMessage={props.text} updateLoginStatus={updateStatus} />
           </div>
         </DrawerBody>
       </DrawerContent>