fix

src/ChatBoxProps.js

@@ -8,31 +8,12 @@ const ChatBoxProps = (props) => {
   const backendUrl = '/api';
   const [clicked, setClicked] = useState(false);
   const [timer, setTimer] = useState(0);
-  const [first, setFirst] = useState(true);
+  const [first, setFirst] = useState(false);
   const [busy, setBusy] = useState(false);
-  const tick = useRef()
-  const [username, setUsername] = useState("");
-  
-  
+  const tick = useRef()  
+
   useEffect(() => {
     if (first){
-      fetch(backendUrl + '/dm', {
-            method: 'POST',
-            body: JSON.stringify({ token: token }),
-            mode: 'cors',
-            headers: {
-           'Content-Type': 'application/json'
-           },
-      }).then(r => r.json()).then(r => {
-      let msg2 = { name: "Janet", message: r.answer};
-      //updateMessages(msg2);
-      setUsername(r.assignedname);
-      }).catch((error) => {
-        console.error('Error:', error);
-        let msg3 = { name: "Janet", message: "Server is down, try later."};
-      	updateMessages(msg3);
-      });
-
       fetch(backendUrl + '/predict', {
             method: 'POST',
             body: JSON.stringify({ message: "<HELP_ON_START>", token: token }),

src/ChatPage.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useSearchParams, useParams } from "react-router-dom";
 import "./style.css";
 import ChatBox from "./ChatBox.js";
@@ -6,11 +6,35 @@ import FeedbackForm from "./FeedbackForm.js";
 
 const ChatPage = () => {
   const [needForm, setNeedForm] = useState(false);
+  const [ready, setReady] = useState(false);
   //const { token } = useParams();
+  const backendUrl = '/api';
   const [searchParams, setSearchParams] = useSearchParams();
   const token = searchParams.get("gcube-token") || '';
   const [messages, setMessages] = useState([]);
+  
+  const [username, setUsername] = useState("");
+  
 
+  useEffect(() => {
+    if (!(token === "") && !ready){
+        fetch(backendUrl + '/dm', {
+            method: 'POST',
+            body: JSON.stringify({ token: token }),
+            mode: 'cors',
+            headers: {
+           'Content-Type': 'application/json'
+           },
+      }).then(r => r.json()).then(r => {
+      let msg2 = { name: "Janet", message: r.answer};
+      setUsername(r.assignedname);
+      setReady(true);
+      }).catch((error) => {
+        console.error('Error:', error);
+      });
+    }
+   }, [token, ready, username]);
+ 
   function updateNeedForm(value) {
     setNeedForm(value);
   }
@@ -19,8 +43,8 @@ const ChatPage = () => {
   }
   return (
     <div>
-      <ChatBox props={{ updateNeedForm, messages, updateMessages,  token}} />
-  { needForm && <FeedbackForm props={{ updateNeedForm, messages }} /> }
+  {ready && <ChatBox props={{ updateNeedForm, messages, updateMessages,  token}} /> }
+  {ready && needForm && <FeedbackForm props={{ updateNeedForm, messages }} /> }
     </div>
   );
 };