refactor: move states into array

-remove states chatPrompt and botMessage
-add these states as object in chatLog array

client/src/App.js

@@ -7,15 +7,17 @@ import NavPrompt from "./components/NavPrompt";
 
 function App() {
   const [showMenu, setShowMenu] = useState(false);
-  const [chatPrompt, setChatPrompt] = useState("Hello bot!");
-  const [botMessage, setBotMessage] = useState(
-    "Hey human! I am an AI. Tell me how can I help you."
-  );
   const [inputPrompt, setInputPrompt] = useState("");
+  const [chatLog, setChatLog] = useState([
+    {
+      chatPrompt: "Hello bot!",
+      botMessage: "Hey human! I am an AI. Tell me how can I help you.",
+    },
+  ]);
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    console.log("form runs");
+    setChatLog([...chatLog, { chatPrompt: inputPrompt }]);
     async function callAPI() {
       const response = await fetch("http://localhost:4000/", {
         method: "POST",
@@ -23,9 +25,13 @@ function App() {
         body: JSON.stringify({ message: inputPrompt }),
       });
       const data = await response.json();
-      console.log("data", data.botResponse);
+      setChatLog([
-      setChatPrompt(inputPrompt);
+        ...chatLog,
-      setBotMessage(data.botResponse);
+        {
+          chatPrompt: inputPrompt,
+          botMessage: data.botResponse,
+        },
+      ]);
     }
     callAPI();
     setInputPrompt("");
@@ -54,7 +60,7 @@ function App() {
       {showMenu && (
         <nav>
           <div className="navItems">
-            <NewChat />
+            <NewChat setChatLog={setChatLog} />
             <NavPrompt />
           </div>
           <div className="navCloseIcon">
@@ -75,12 +81,15 @@ function App() {
       )}
 
       <aside className="sideMenu">
-        <NewChat />
+        <NewChat setChatLog={setChatLog} />
         <NavPrompt />
       </aside>
 
       <section className="chatBox">
-        <div className="chatLog">
+        <div className="chatLogWrapper">
+          {chatLog.length > 0 &&
+            chatLog.map((chat, idx) => (
+              <div className="chatLog" key={idx}>
                 <div className="chatPromptMainContainer">
                   <div className="chatPromptWrapper">
                     <Avatar bg="#5437DB" className="userSVG">
@@ -100,9 +109,10 @@ function App() {
                         <circle cx={12} cy={7} r={4} />
                       </svg>
                     </Avatar>
-              <div id="chatPrompt">{chatPrompt}</div>
+                    <div id="chatPrompt">{chat.chatPrompt}</div>
                   </div>
                 </div>
+
                 <div className="botMessageMainContainer">
                   <div className="botMessageWrapper">
                     <Avatar bg="#11a27f" className="openaiSVG">
@@ -120,10 +130,12 @@ function App() {
                         />
                       </svg>
                     </Avatar>
-              <div id="botMessage">{botMessage}</div>
+                    <div id="botMessage">{chat.botMessage}</div>
                   </div>
                 </div>
               </div>
+            ))}
+        </div>
 
         <form onSubmit={handleSubmit}>
           <div className="inputPromptWrapper">
@@ -135,6 +147,7 @@ function App() {
               rows="1"
               value={inputPrompt}
               onChange={(e) => setInputPrompt(e.target.value)}
+              autoFocus
             ></input>
             <p></p>
           </div>

client/src/components/NewChat.jsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-const NewChat = () => {
+const NewChat = ({ setChatLog }) => {
  return (
-    <div className="sideMenuButton">
+    <div className="sideMenuButton" onClick={() => setChatLog([])}>
       <span>+</span>
       New chat
     </div>