Refactor: Centralize chat history management

Moved the management of the chat history state to within the HomePage component. This simplifies the component structure and removes unnecessary prop drilling, making the code cleaner and easier to maintain.
pinacai · Jun 23, 2024 · 2c1a2fb · 2c1a2fb
1 parent ec6c2bc
commit 2c1a2fb
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 48 deletions.
diff --git a/frontend/App.tsx b/frontend/App.tsx
@@ -25,18 +25,6 @@ const App = () => {
     localStorage.setItem("preferred-theme", "light");
   }
 
-  //
-  // Setting the conversation bubbles
-  const [chatHistory, setChatHistory] = useState<JSX.Element[]>([]);
-
-  const addMessageToChatHistory = (newMessage: JSX.Element) => {
-    setChatHistory((prevChatHistory) => [...prevChatHistory, newMessage]);
-  };
-
-  const clearChatHistory = () => {
-    setChatHistory([]);
-  };
-
   //
   // Check if Logged In otherwise redirect to login
   useEffect(() => {
@@ -69,11 +57,7 @@ const App = () => {
           path="/"
           element={
             isLoggedIn ? (
-              <HomePage
-                chatHistory={chatHistory}
-                addMessageToChatHistory={addMessageToChatHistory}
-                clearChatHistory={clearChatHistory}
-              />
+              <HomePage />
             ) : (
               <LogInPage changeLogInStatus={changeLogInStatus} />
             )

diff --git a/frontend/pages/HomePage.tsx b/frontend/pages/HomePage.tsx
@@ -9,30 +9,17 @@ import "./style/HomePage.css";
 // Icons
 import sendIcon from "../assets/icon/send.svg";
 
-interface HomePageProps {
-  chatHistory: JSX.Element[];
-  addMessageToChatHistory: (newMessage: JSX.Element) => void;
-  clearChatHistory: () => void;
-}
-
-export const HomePage: React.FC<HomePageProps> = ({
-  chatHistory,
-  addMessageToChatHistory,
-  clearChatHistory,
-}) => {
+export const HomePage: React.FC = () => {
   const [welcomeBox, setWelcomeBox] = useState<JSX.Element>(
-    chatHistory.length === 0 ? (
-      <div className="welcome-text-row">
-        <div className="welcome-text">
-          Hello,
-          <br />
-          How can I help you today ?
-        </div>
+    <div className="welcome-text-row">
+      <div className="welcome-text">
+        Hello,
+        <br />
+        How can I help you today ?
       </div>
-    ) : (
-      <></>
-    )
+    </div>
   );
+  const [chatHistory, setChatHistory] = useState<JSX.Element[]>([]);
   const [userInput, setUserInput] = useState<string>(""); // Declare state for input value
   const [isUserInputActive, setUserInputActive] = useState<boolean>(false); // Declare state for input value
   const [buttonsDisabled, setButtonsDisabled] = useState<boolean>(false); // For disabling send button
@@ -60,7 +47,7 @@ export const HomePage: React.FC<HomePageProps> = ({
 
   //
   const startNewChat = () => {
-    clearChatHistory();
+    setChatHistory([]);
     window.ipcRenderer.send("request-to-backend", {
       request_type: "clear-chat",
     });
@@ -86,25 +73,24 @@ export const HomePage: React.FC<HomePageProps> = ({
         setWelcomeBox(<></>);
       }
 
-      addMessageToChatHistory(
-        <ShowHumanMessage
-          response={text}
-        />
-      );
+      setChatHistory((prevChatHistory) => [
+        ...prevChatHistory,
+        <ShowHumanMessage response={text} />,
+      ]);
       const preferredModel = localStorage.getItem("preferred-model");
       window.ipcRenderer.send("request-to-server", {
         request_type: "user-input",
         preferred_model: preferredModel,
         user_query: text,
       });
-      addMessageToChatHistory(
-        <ShowAiMessage setButtonsDisabled={setButtonsDisabled} />
-      );
+      setChatHistory((prevChatHistory) => [
+        ...prevChatHistory,
+        <ShowAiMessage setButtonsDisabled={setButtonsDisabled} />,
+      ]);
       setUserInput("");
       if (textareaRef.current) {
         textareaRef.current.style.height = "50px"; // Reset textarea height
       }
-      // setButtonsDisabled(false);
     }
   };