Skip to content
This repository was archived by the owner on Apr 18, 2024. It is now read-only.

Commit fef054c

Browse files
teoblerteobler
committed
refactor: make all api as props
Signed-off-by: teobler <teobler@163.com>
1 parent 8fe43cb commit fef054c

File tree

4 files changed

+125
-59
lines changed

4 files changed

+125
-59
lines changed

‎packages/click-prompt-button/src/Button.shared.tsx‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Image from "next/image";
2-
import React, { MouseEventHandler } from "react";
2+
import React from "react";
33
import styled from "@emotion/styled";
44

55
export type ButtonSize = "sm" | "md" | "lg";
@@ -14,13 +14,3 @@ export const StyledPromptButton = styled.div`
1414
position: relative;
1515
width: min-content;
1616
`;
17-
18-
export type CPButtonProps = {
19-
loading?: boolean;
20-
onClick?: MouseEventHandler;
21-
size?: ButtonSize;
22-
text: string;
23-
children?: React.ReactNode;
24-
[key: string]: any;
25-
isLoggedIn: () => Promise<any>;
26-
};

‎packages/click-prompt-button/src/ClickPromptButton.tsx‎

Lines changed: 57 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,27 @@
1-
import React, { useState } from "react";
1+
import React, { MouseEventHandler, useState } from "react";
22
import { Box, Button, Text, Tooltip, useDisclosure } from "@chakra-ui/react";
33
import { BeatLoader } from "react-spinners";
44
import { ClickPromptSmall } from "./CustomIcon";
55
import clickPromptLogo from "@/assets/clickprompt-light.svg?url";
6-
import { CPButtonProps, StyledBird, StyledPromptButton } from "./Button.shared";
6+
import { ButtonSize, StyledBird, StyledPromptButton } from "./Button.shared";
77
import { LoggingDrawer } from "./LoggingDrawer";
88

9+
interface ClickPromptButtonProps {
10+
loading?: boolean;
11+
onClick?: MouseEventHandler;
12+
size?: ButtonSize;
13+
text: string;
14+
children?: React.ReactNode;
15+
isLoggedInApi: () => Promise<any>;
16+
changeConversationNameApi: (conversation_id: number, name: string) => Promise<any>;
17+
createConversationApi: (name?: string) => Promise<any>;
18+
getChatsByConversationIdApi: (conversationId: number) => Promise<any>;
19+
deleteConversationApi: (conversationId: number) => Promise<any>;
20+
deleteAllConversationsApi: () => Promise<any>;
21+
sendMsgWithStreamResApi: (conversageId: number, message: string, name?: string) => Promise<any>;
22+
logoutApi: () => Promise<any>;
23+
}
24+
925
export type ClickPromptBirdParams = { width?: number; height?: number };
1026

1127
export function ClickPromptBird(props: ClickPromptBirdParams) {
@@ -15,17 +31,31 @@ export function ClickPromptBird(props: ClickPromptBirdParams) {
1531
return <StyledBird src={clickPromptLogo} alt="ClickPrompt Logo" width={width} height={height} />;
1632
}
1733

18-
export function ClickPromptButton(props: CPButtonProps) {
19-
const [isLoading, setIsLoading] = useState(props.loading);
34+
export function ClickPromptButton({
35+
isLoggedInApi,
36+
children,
37+
size,
38+
text,
39+
onClick,
40+
loading,
41+
changeConversationNameApi,
42+
createConversationApi,
43+
getChatsByConversationIdApi,
44+
deleteConversationApi,
45+
deleteAllConversationsApi,
46+
sendMsgWithStreamResApi,
47+
logoutApi,
48+
}: ClickPromptButtonProps) {
49+
const [isLoading, setIsLoading] = useState(loading);
2050
const [isLoggedIn, setIsLoggedIn] = useState(false);
2151
const { isOpen, onOpen, onClose } = useDisclosure();
2252

2353
const handleClick = async (event: any) => {
2454
setIsLoading(true);
25-
const isLoggedIn = await props.isLoggedIn();
55+
const isLoggedIn = await isLoggedInApi();
2656
setIsLoggedIn(isLoggedIn);
2757
onOpen();
28-
props.onClick && props.onClick(event);
58+
onClick && onClick(event);
2959
};
3060

3161
const handleClose = () => {
@@ -36,8 +66,9 @@ export function ClickPromptButton(props: CPButtonProps) {
3666
function NormalSize() {
3767
return (
3868
<StyledPromptButton>
39-
<Button colorScheme="twitter" className="bg-blue" onClick={handleClick} {...props}>
40-
{props.children}
69+
{/*TODO: check ...props with what is passed in*/}
70+
<Button colorScheme="twitter" className="bg-blue" onClick={handleClick}>
71+
{children}
4172
{!isLoading && <Text>Prompt</Text>}
4273
{isLoading && <BeatLoader size={8} color="black" />}
4374
</Button>
@@ -48,8 +79,9 @@ export function ClickPromptButton(props: CPButtonProps) {
4879

4980
function SmallSize() {
5081
return (
51-
<Button variant="unstyled" onClick={handleClick} {...props}>
52-
{props.children}
82+
// TODO: check ...props with what is passed in
83+
<Button variant="unstyled" onClick={handleClick}>
84+
{children}
5385
<Tooltip label="Execute ChatGPT Prompt" aria-label="A tooltip">
5486
<ClickPromptSmall width={32} height={32} />
5587
</Tooltip>
@@ -59,10 +91,22 @@ export function ClickPromptButton(props: CPButtonProps) {
5991

6092
return (
6193
<Box>
62-
{props.size !== "sm" && <NormalSize />}
63-
{props.size === "sm" && <SmallSize />}
94+
{size !== "sm" && <NormalSize />}
95+
{size === "sm" && <SmallSize />}
6496

65-
{LoggingDrawer(isOpen, handleClose, isLoggedIn, props)}
97+
{LoggingDrawer({
98+
isOpen,
99+
handleClose,
100+
isLoggedIn,
101+
initMessage: text,
102+
changeConversationNameApi,
103+
createConversationApi,
104+
getChatsByConversationIdApi,
105+
deleteConversationApi,
106+
deleteAllConversationsApi,
107+
sendMsgWithStreamResApi,
108+
logoutApi,
109+
})}
66110
</Box>
67111
);
68112
}

‎packages/click-prompt-button/src/LoggingDrawer.tsx‎

Lines changed: 41 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,55 @@
11
import { Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerOverlay } from "@chakra-ui/react";
22
import { ChatGPTApp } from "@/chatgpt/ChatGPTApp";
33
import React from "react";
4-
import { CPButtonProps } from "./Button.shared";
54

6-
export function LoggingDrawer(
7-
isOpen: boolean,
8-
handleClose: () => void,
9-
isLoggedIn: boolean,
10-
props: CPButtonProps,
11-
updateStatus?: (loggedIn: boolean) => void
12-
) {
5+
interface LoggingDrawerProps {
6+
isOpen: boolean;
7+
handleClose: () => void;
8+
isLoggedIn: boolean;
9+
updateStatus?: (loggedIn: boolean) => void;
10+
initMessage: string;
11+
changeConversationNameApi: (conversation_id: number, name: string) => Promise<any>;
12+
createConversationApi: (name?: string) => Promise<any>;
13+
getChatsByConversationIdApi: (conversationId: number) => Promise<any>;
14+
deleteConversationApi: (conversationId: number) => Promise<any>;
15+
deleteAllConversationsApi: () => Promise<any>;
16+
sendMsgWithStreamResApi: (conversageId: number, message: string, name?: string) => Promise<any>;
17+
logoutApi: () => Promise<any>;
18+
}
19+
20+
export function LoggingDrawer({
21+
isOpen,
22+
handleClose,
23+
isLoggedIn,
24+
updateStatus,
25+
initMessage,
26+
changeConversationNameApi,
27+
createConversationApi,
28+
getChatsByConversationIdApi,
29+
deleteConversationApi,
30+
deleteAllConversationsApi,
31+
sendMsgWithStreamResApi,
32+
logoutApi,
33+
}: LoggingDrawerProps) {
1334
return (
1435
<Drawer isOpen={isOpen} placement="right" onClose={handleClose} size={"2xl"}>
1536
<DrawerOverlay />
1637
<DrawerContent>
1738
<DrawerCloseButton className="text-white z-50" />
1839
<DrawerBody padding={0}>
1940
<div className="bg-[#343541] flex flex-1 h-[100%] overflow-y-auto items-center justify-center">
20-
<ChatGPTApp loggedIn={isLoggedIn} initMessage={props.text} updateLoginStatus={updateStatus} />
41+
<ChatGPTApp
42+
loggedIn={isLoggedIn}
43+
initMessage={initMessage}
44+
updateLoginStatus={updateStatus}
45+
changeConversationNameApi={changeConversationNameApi}
46+
createConversationApi={createConversationApi}
47+
getChatsByConversationIdApi={getChatsByConversationIdApi}
48+
deleteConversationApi={deleteConversationApi}
49+
deleteAllConversationsApi={deleteAllConversationsApi}
50+
sendMsgWithStreamResApi={sendMsgWithStreamResApi}
51+
logoutApi={logoutApi}
52+
/>
2153
</div>
2254
</DrawerBody>
2355
</DrawerContent>

‎packages/click-prompt-button/src/chatgpt/ChatGPTApp.tsx‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,26 @@ type ChatGPTAppProps = {
66
loggedIn?: boolean;
77
updateLoginStatus?: (loggedIn: boolean) => void;
88
initMessage?: string;
9+
changeConversationNameApi: (conversation_id: number, name: string) => Promise<any>;
10+
createConversationApi: (name?: string) => Promise<any>;
11+
getChatsByConversationIdApi: (conversationId: number) => Promise<any>;
12+
deleteConversationApi: (conversationId: number) => Promise<any>;
13+
deleteAllConversationsApi: () => Promise<any>;
14+
sendMsgWithStreamResApi: (conversageId: number, message: string, name?: string) => Promise<any>;
15+
logoutApi: () => Promise<any>;
916
};
10-
export const ChatGPTApp = ({ loggedIn, initMessage, updateLoginStatus }: ChatGPTAppProps) => {
17+
export const ChatGPTApp = ({
18+
loggedIn,
19+
initMessage,
20+
updateLoginStatus,
21+
changeConversationNameApi,
22+
createConversationApi,
23+
getChatsByConversationIdApi,
24+
deleteConversationApi,
25+
deleteAllConversationsApi,
26+
sendMsgWithStreamResApi,
27+
logoutApi,
28+
}: ChatGPTAppProps) => {
1129
const [isLoggedIn, setIsLoggedIn] = useState(loggedIn ?? false);
1230

1331
useEffect(() => {
@@ -20,31 +38,13 @@ export const ChatGPTApp = ({ loggedIn, initMessage, updateLoginStatus }: ChatGPT
2038
<ChatRoom
2139
setIsLoggedIn={setIsLoggedIn}
2240
initMessage={initMessage}
23-
changeConversationNameApi={function (conversation_id: number, name: string): Promise<any> {
24-
throw new Error("Function not implemented.");
25-
}}
26-
createConversationApi={function (name?: string | undefined): Promise<any> {
27-
throw new Error("Function not implemented.");
28-
}}
29-
getChatsByConversationIdApi={function (conversationId: number): Promise<any> {
30-
throw new Error("Function not implemented.");
31-
}}
32-
deleteConversationApi={function (conversationId: number): Promise<any> {
33-
throw new Error("Function not implemented.");
34-
}}
35-
deleteAllConversationsApi={function (): Promise<any> {
36-
throw new Error("Function not implemented.");
37-
}}
38-
sendMsgWithStreamResApi={function (
39-
conversageId: number,
40-
message: string,
41-
name?: string | undefined
42-
): Promise<any> {
43-
throw new Error("Function not implemented.");
44-
}}
45-
logoutApi={function (): Promise<any> {
46-
throw new Error("Function not implemented.");
47-
}}
41+
changeConversationNameApi={changeConversationNameApi}
42+
createConversationApi={createConversationApi}
43+
getChatsByConversationIdApi={getChatsByConversationIdApi}
44+
deleteConversationApi={deleteConversationApi}
45+
deleteAllConversationsApi={deleteAllConversationsApi}
46+
sendMsgWithStreamResApi={sendMsgWithStreamResApi}
47+
logoutApi={logoutApi}
4848
/>
4949
) : (
5050
<LoginPage

0 commit comments

Comments
 (0)