diff --git a/src/client/components/ConversationWrapper.tsx b/src/client/components/ConversationWrapper.tsx index a1d7b2a..a0a93df 100644 --- a/src/client/components/ConversationWrapper.tsx +++ b/src/client/components/ConversationWrapper.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { useState, useRef, useEffect } from "react"; +import { useState, useRef, useEffect, useCallback } from "react"; import { useParams } from "react-router"; import { Redirect, useLocation } from "react-router-dom"; @@ -8,8 +8,6 @@ import updateConversation from "@wasp/actions/updateConversation"; import getAgentResponse from "@wasp/actions/getAgentResponse"; import getConversations from "@wasp/queries/getConversations"; -// import type { Conversation } from "@wasp/entities"; - import ConversationsList from "./ConversationList"; import Loader from "./Loader"; @@ -22,20 +20,19 @@ function getQueryParam(paramName: string) { ); } -export async function triggerSubmit( +export function setRedirectMsg(formInputRef: any, loginMsgQuery: string) { + if (loginMsgQuery) { + formInputRef.value = decodeURIComponent(loginMsgQuery); + } +} + +export function triggerSubmit( + node: any, loginMsgQuery: string, - // Todo: remove the below ignore comment - // @ts-ignore - submitBtnRef, - // Todo: remove the below ignore comment - // @ts-ignore - formInputRef + formInputRef: any ) { - if (loginMsgQuery) { - setTimeout(() => { - formInputRef.current.value = decodeURIComponent(loginMsgQuery); - submitBtnRef.current.click(); - }, 1500); // todo: remove timeout and implement a proper fix + if (loginMsgQuery && formInputRef && formInputRef.value !== "") { + node.click(); } } @@ -44,10 +41,27 @@ export default function ConversationWrapper() { // @ts-ignore const { id } = useParams(); const [isLoading, setIsLoading] = useState(false); - const loginMsgQuery = getQueryParam("msg"); const chatContainerRef = useRef(null); - const submitBtnRef = useRef(null); - const formInputRef = useRef(null); + + const loginMsgQuery: any = getQueryParam("msg"); + const formInputRef = useCallback( + (node: any) => { + if (node !== null) { + setRedirectMsg(node, loginMsgQuery); + } + }, + [loginMsgQuery] + ); + + const submitBtnRef = useCallback( + (node: any) => { + if (node !== null) { + triggerSubmit(node, loginMsgQuery, formInputRef); + } + }, + [loginMsgQuery, formInputRef] + ); + const { data: conversations, isLoading: isConversationLoading, @@ -60,13 +74,6 @@ export default function ConversationWrapper() { { enabled: !!id } ); - // componentDidMount - useEffect(() => { - // Todo: remove the below ignore comment - // @ts-ignore - triggerSubmit(loginMsgQuery, submitBtnRef, formInputRef); - }, [loginMsgQuery]); - useEffect(() => { if (chatContainerRef.current) { // Todo: remove the below ignore comment