From c3c384b733fb12a43e18802b96fb0ceb472e38a1 Mon Sep 17 00:00:00 2001
From: ahmed531998 <ahmed531998@aucegypt.edu>
Date: Wed, 19 Apr 2023 16:08:11 +0200
Subject: [PATCH] typing

---
 src/ChatBox.js      |  2 +-
 src/ChatBoxProps.js | 19 +++++++++----------
 src/ChatPage.js     | 16 ++++++++++------
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/ChatBox.js b/src/ChatBox.js
index 60eb5cd..50d8d47 100644
--- a/src/ChatBox.js
+++ b/src/ChatBox.js
@@ -12,7 +12,7 @@ const ChatBox = (props) => {
     <div className="container">
       <div className="chatbox">
         <ChatBoxProps
-          props={{ visible, updateNeedForm, messages, updateMessages, token, deleteById }}
+          props={{ visible, updateNeedForm, messages, updateMessages, token, updateState }}
         />
         <ChatButton onClick={() => setVisible(!visible)} />
       </div>
diff --git a/src/ChatBoxProps.js b/src/ChatBoxProps.js
index 0cb60f7..b7c3af6 100644
--- a/src/ChatBoxProps.js
+++ b/src/ChatBoxProps.js
@@ -3,7 +3,7 @@ import "./style.css";
 import ChatBoxMessages from "./ChatMessages.js";
 
 const ChatBoxProps = (props) => {
-  const { visible, updateNeedForm, messages, updateMessages, token, deleteById } = props.props;
+  const { visible, updateNeedForm, messages, updateMessages, token, updateState } = props.props;
   const [inputValue, setInputValue] = useState("");
   const backendUrl = '/api';
   const [clicked, setClicked] = useState(false);
@@ -22,11 +22,11 @@ const ChatBoxProps = (props) => {
            'Content-Type': 'application/json'
            },
       }).then(r => r.json()).then(r => {
-      let msg2 = { name: "Janet", message: r.answer, query: "", cand: "", history: "", modQuery: ""};
+      let msg2 = { name: "Janet", message: r.answer, query: "", cand: "", history: "", modQuery: "", typing:false};
       updateMessages(msg2);
       }).catch((error) => {
         console.error('Error:', error);
-        let msg3 = { name: "Janet", message: "Server is down, try later."};
+        let msg3 = { name: "Janet", message: "Server is down, try later.", typing:false};
       	updateMessages(msg3);
       });
       
@@ -46,11 +46,11 @@ const ChatBoxProps = (props) => {
            'Content-Type': 'application/json'
            },
       }).then(r => r.json()).then(r => {
-      let msg2 = { name: "Janet", message: r.answer, query: "", cand: "", history: "", modQuery: ""};
+      let msg2 = { name: "Janet", message: r.answer, query: "", cand: "", history: "", modQuery: "", typing:false};
       updateMessages(msg2);
       }).catch((error) => {
         console.error('Error:', error);
-	let msg3 = { name: "Janet", message: "Server is down, try later."};
+	let msg3 = { name: "Janet", message: "Server is down, try later.", typing:false};
       	updateMessages(msg3);
       });
       
@@ -82,7 +82,7 @@ const ChatBoxProps = (props) => {
     setBusy((busy) => true);
     let msg1 = { name: "User", message: inputValue };
     updateMessages(msg1);
-    let msgTemp = {name: "Typer", message: "Typing..."};
+    let msgTemp = {name: "Janet", message: "Typing...", typing:true};
     updateMessages(msgTemp);
    
     fetch(backendUrl + '/predict', {
@@ -95,14 +95,13 @@ const ChatBoxProps = (props) => {
     })
     .then(r => r.json())
     .then(r => {
-      let msg2 = { name: "Janet", message: r.answer, query: r.query, cand: r.cand, history: r.history, modQuery: r.modQuery};
-      deleteById(msgTemp);
-      updateMessages(msg2);
+      let msg2 = { name: "Janet", message: r.answer, query: r.query, cand: r.cand, history: r.history, modQuery: r.modQuery, typing:false};
+      updateState(msg2);
       updateNeedForm(true);
       setBusy((busy) => false);
     }).catch((error) => {
       console.error('Error:', error);
-      deleteById(msgTemp);
+      updateState(msgTemp);
       let msg3 = { name: "Janet", message: "Server is down, try later."};
       updateMessages(msg3);
       setBusy((busy) => false);
diff --git a/src/ChatPage.js b/src/ChatPage.js
index a6eeae7..846ff62 100644
--- a/src/ChatPage.js
+++ b/src/ChatPage.js
@@ -63,11 +63,15 @@ const ChatPage = () => {
     setNeedForm(value);
   }
 
-  function deleteById(name){
-    setMessages(oldValues => {
-      return oldValues.filter(msg => msg.name !== name)
-    })
-  }
+  function updateState(msg){
+    let newState = messages.map(obj => {
+      if (obj.name === "Janet" && obj.typing) {
+        return {...obj, message: msg.message, typing:msg.typing};
+      }
+      return obj;
+    });
+    setMessages(newState);
+  };
  
   function updateMessages(msg) {
     setMessages((prevMessages) => [msg, ...prevMessages]);
@@ -78,7 +82,7 @@ const ChatPage = () => {
   {stat==="start" &&  <p>Connecting to Server...</p>}
   {stat==="rejected" &&  <p>Unauthorized Use...</p>}
 
-  {stat==="done" && <ChatBox props={{ updateNeedForm, messages, updateMessages,  token, deleteById}} /> }
+  {stat==="done" && <ChatBox props={{ updateNeedForm, messages, updateMessages,  token, updateState}} /> }
   {stat==="done" && needForm && <FeedbackForm props={{ updateNeedForm, messages }} /> }
     </div>
   );