From f6f206919f756867b7b4d1faab496e26c41d185b Mon Sep 17 00:00:00 2001 From: Le Khac Thanh Tung Date: Thu, 25 Jan 2024 21:43:24 +0700 Subject: [PATCH] fix-bug when navigate after sign & add loader --- .../extension/src/pages/chatbot/index.tsx | 111 +++++------------- .../src/pages/chatbot/loader.module.scss | 55 +++++++++ .../extension/src/pages/chatbot/loader.tsx | 13 ++ 3 files changed, 98 insertions(+), 81 deletions(-) create mode 100644 packages/extension/src/pages/chatbot/loader.module.scss create mode 100644 packages/extension/src/pages/chatbot/loader.tsx diff --git a/packages/extension/src/pages/chatbot/index.tsx b/packages/extension/src/pages/chatbot/index.tsx index 97d7dd59..01529764 100644 --- a/packages/extension/src/pages/chatbot/index.tsx +++ b/packages/extension/src/pages/chatbot/index.tsx @@ -1,5 +1,11 @@ import { observer } from 'mobx-react-lite'; -import React, { FunctionComponent, useEffect, useReducer, useRef } from 'react'; +import React, { + FunctionComponent, + useEffect, + useReducer, + useRef, + useState, +} from 'react'; import { HeaderLayout } from '../../layouts'; import style from './style.module.scss'; import { useStore } from '../../stores'; @@ -8,7 +14,7 @@ import { useClientTestnet } from './use-client-testnet'; import { OptionEnum, StatusEnum } from './enum'; import { Dropdown } from './dropdown'; import { Messages } from './messages'; -import { useHistory, useLocation } from 'react-router'; +import { Loader } from './loader'; const BACKEND_URL = 'https://oraidex-tools.fly.dev'; @@ -70,14 +76,10 @@ function reducer(state, action) { export const ChatbotPage: FunctionComponent = observer(() => { const { chainStore, accountStore } = useStore(); const accountInfo = accountStore.getAccount(chainStore.current.chainId); - const userAddr = accountInfo._bech32Address; + const userAddr = accountInfo.bech32Address; const accountOrai = accountStore.getAccount(ChainIdEnum.Oraichain); const client = useClientTestnet(accountOrai); - // router - const history = useHistory(); // navigate back to chatbot after sign success - const location = useLocation(); // active useEffect to reload messages - const messagesEndRef = useRef(null); const [ @@ -85,31 +87,7 @@ export const ChatbotPage: FunctionComponent = observer(() => { dispatch, ] = useReducer(reducer, initialState); - console.log(userAddr); - - useEffect(() => { - dispatch({ - type: 'reload_messages', - }); - }, [location.pathname]); - - const testChatUI = () => { - dispatch({ - type: 'chat', - payload: { - isUser: true, - msg: prompt, - }, - }); - - dispatch({ - type: 'chat', - payload: { - isUser: false, - msg: 'Answer', - }, - }); - }; + const [isLoading, setIsLoading] = useState(false); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); @@ -124,7 +102,8 @@ export const ChatbotPage: FunctionComponent = observer(() => { dispatch, prompt, pairContractAddr, - chosenOption + chosenOption, + setIsLoading ) => { let endPoint = ''; if (chosenOption === OptionEnum.SWAP) { @@ -136,6 +115,7 @@ export const ChatbotPage: FunctionComponent = observer(() => { msg: prompt, }, }); + setIsLoading(true); try { const resp = await fetch(endPoint, { method: 'POST', @@ -149,6 +129,7 @@ export const ChatbotPage: FunctionComponent = observer(() => { }), }); const data = await resp.json(); + setIsLoading(false); console.log(data); const { answer, msg } = data; const msgObject = JSON.parse(msg); @@ -182,16 +163,12 @@ export const ChatbotPage: FunctionComponent = observer(() => { }, ]) ); - // navigate to chatbot page - history.push('/chatbot'); } catch (err) { console.log(err); } } else { endPoint = `${BACKEND_URL}/chatoraidex`; try { - // console.log(userAddr); - // console.log(prompt); dispatch({ type: 'chat', payload: { @@ -199,6 +176,7 @@ export const ChatbotPage: FunctionComponent = observer(() => { msg: prompt, }, }); + setIsLoading(true); const resp = await fetch(endPoint, { method: 'POST', headers: { @@ -210,6 +188,7 @@ export const ChatbotPage: FunctionComponent = observer(() => { }), }); const data = await resp.json(); + setIsLoading(false); const { output } = data; console.log(data); dispatch({ @@ -244,33 +223,6 @@ export const ChatbotPage: FunctionComponent = observer(() => { return result; } - // useEffect(() => { - // document.addEventListener('keypress', (evt) => { - // if (evt.key == 'Enter') { - // testChatUI(); - // } - // }); - - // return () => { - // document.removeEventListener('keypress', (evt) => { - // if (evt.key == 'Enter') { - // testChatUI(); - // } - // }); - // }; - // }, [testChatUI]); - - // useEffect(() => { - // fetch( - // 'https://api.oraidex.io/price?base_denom=orai"e_denom=orai12hzjxfh77wl572gdzct2fxv2arxcwh6gykc7qh&tf=240' - // ) - // .then((res) => res.json()) - // .then((data) => console.log(data)) - // .catch((err) => { - // console.log(err); - // }); - // }, []); - return (
@@ -292,7 +244,7 @@ export const ChatbotPage: FunctionComponent = observer(() => { onClick={(evt) => dispatch({ type: 'on_change_prompt', - payload: evt.target.innerText, + payload: (evt.target as HTMLDivElement).innerText, }) } > @@ -303,7 +255,7 @@ export const ChatbotPage: FunctionComponent = observer(() => { onClick={(evt) => dispatch({ type: 'on_change_prompt', - payload: evt.target.innerText, + payload: (evt.target as HTMLDivElement).innerText, }) } > @@ -314,7 +266,7 @@ export const ChatbotPage: FunctionComponent = observer(() => { onClick={(evt) => dispatch({ type: 'on_change_prompt', - payload: evt.target.innerText, + payload: (evt.target as HTMLDivElement).innerText, }) } > @@ -327,17 +279,7 @@ export const ChatbotPage: FunctionComponent = observer(() => { )} - {/*
- - - -
*/} + {isLoading && }
@@ -351,8 +293,14 @@ export const ChatbotPage: FunctionComponent = observer(() => { } onKeyDown={(evt) => { if (evt.key === 'Enter') { - testChatUI(); - // callBot(userAddr, dispatch, prompt); + callBot( + userAddr, + dispatch, + prompt, + pairContractAddr, + chosenOption, + setIsLoading + ); } }} className={style.inputBox} @@ -374,7 +322,8 @@ export const ChatbotPage: FunctionComponent = observer(() => { dispatch, prompt, pairContractAddr, - chosenOption + chosenOption, + setIsLoading ) } // onClick={() => testChatUI()} diff --git a/packages/extension/src/pages/chatbot/loader.module.scss b/packages/extension/src/pages/chatbot/loader.module.scss new file mode 100644 index 00000000..23ec5fc2 --- /dev/null +++ b/packages/extension/src/pages/chatbot/loader.module.scss @@ -0,0 +1,55 @@ +.ldsEllipsis { + display: block; + position: relative; + width: 40px; + height: 40px; +} +.ldsEllipsis div { + position: absolute; + top: 33px; + width: 13px; + height: 13px; + border-radius: 50%; + background: black; + animation-timing-function: cubic-bezier(0, 1, 1, 0); +} +.ldsEllipsis div:nth-child(1) { + left: 8px; + animation: lds-ellipsis1 0.6s infinite; +} +.ldsEllipsis div:nth-child(2) { + left: 8px; + animation: lds-ellipsis2 0.6s infinite; +} +.ldsEllipsis div:nth-child(3) { + left: 32px; + animation: lds-ellipsis2 0.6s infinite; +} +.ldsEllipsis div:nth-child(4) { + left: 56px; + animation: lds-ellipsis3 0.6s infinite; +} +@keyframes lds-ellipsis1 { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } +} +@keyframes lds-ellipsis3 { + 0% { + transform: scale(1); + } + 100% { + transform: scale(0); + } +} +@keyframes lds-ellipsis2 { + 0% { + transform: translate(0, 0); + } + 100% { + transform: translate(24px, 0); + } +} diff --git a/packages/extension/src/pages/chatbot/loader.tsx b/packages/extension/src/pages/chatbot/loader.tsx new file mode 100644 index 00000000..8ba397f8 --- /dev/null +++ b/packages/extension/src/pages/chatbot/loader.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import styles from './loader.module.scss'; + +export const Loader = () => { + return ( +
+
+
+
+
+
+ ); +};