fixed navigate to home page chars not render issue and improve settin…

…gs' ui (#219)

client/web/src/App.jsx

@@ -39,6 +39,8 @@ const App = () => {
   const [messageInput, setMessageInput] = useState('');
   const [isCallView, setIsCallView] = useState(false);
   const [textAreaValue, setTextAreaValue] = useState('');
+  const [characterGroups, setCharacterGroups] = useState([]);
+  const [characterConfirmed, setCharacterConfirmed] = useState(false);
   const audioPlayer = useRef(null);
   const callActive = useRef(false);
   const audioSent = useRef(false);
@@ -164,7 +166,8 @@ const App = () => {
 
       // reset everything to initial states
       setSelectedCharacter(null);
-      // setCharacterConfirmed(false);
+      setCharacterConfirmed(false);
+      setCharacterGroups([]);
       setIsCallView(false);
       setTextAreaValue("");
       setSelectedModel("gpt-3.5-turbo-16k");
@@ -186,7 +189,11 @@ const App = () => {
               <Home
                 selectedCharacter={selectedCharacter} 
                 setSelectedCharacter={setSelectedCharacter} 
-                isPlaying={isPlaying} 
+                isPlaying={isPlaying}
+                characterGroups={characterGroups}
+                setCharacterGroups={setCharacterGroups}
+                setCharacterConfirmed={setCharacterConfirmed}
+                characterConfirmed={characterConfirmed}
               />} 
             />
             <Route path="/settings" element={
@@ -231,6 +238,10 @@ const App = () => {
                 stopRecording={stopRecording} 
                 preferredLanguage={preferredLanguage} 
                 setPreferredLanguage={setPreferredLanguage}
+                characterGroups={characterGroups}
+                selectedCharacter={selectedCharacter}
+                setSelectedCharacter={setSelectedCharacter}
+                characterConfirmed={characterConfirmed}
               />} 
             />
         </Routes>

client/web/src/components/TextView/index.js

@@ -58,11 +58,6 @@ const TextView = ({ send, isPlaying, stopAudioPlayback, textAreaValue, setTextAr
         setMessageInput(event.target.value);
     };
 
-    const handleChange = () => {
-        send('[!USE_SEARCH]' + (!useSearch).toString());
-        setUseSearch(!useSearch);
-    };
-
     const handlePushTalk = () => {
         if (!talking.current) {
             startRecording();
@@ -120,14 +115,6 @@ const TextView = ({ send, isPlaying, stopAudioPlayback, textAreaValue, setTextAr
                 <Button onClick={handleSendClick} name="Send Message" />
             }
 
-            <label className='search-checkbox'>
-                <input
-                type="checkbox"
-                checked={useSearch}
-                onChange={handleChange}
-                />
-                Enable Google Search
-            </label>
             <div className="options-container">
                 <IconButton Icon={TbPower} className="icon-red" onClick={handlePowerOffClick} />
                 <IconButton Icon={TbPhoneCall} className="icon-blue" onClick={() => setIsCallView(true)} disabled={talking.current} />

client/web/src/pages/Conversation.jsx

@@ -4,11 +4,12 @@
  * created by Lynchee on 7/28/23
  */
 
-import React from 'react';
+import React, {useEffect} from 'react';
 import CallView from '../components/CallView';
 import TextView from '../components/TextView';
 import Button from '../components/Common/Button';
-
+import Characters from '../components/Characters';
+import { useNavigate } from 'react-router-dom';
 
 // TODO: user can access this page only if isConnected.current
 
@@ -37,50 +38,76 @@ const Conversation = ({
   stopRecording,
   preferredLanguage,
   setPreferredLanguage,
+  characterGroups,
+  selectedCharacter,
+  setSelectedCharacter,
+  characterConfirmed
 }) => {
-    return (
-        <div>
-            {/* we render both views but only display one. */}
-            <p className="alert text-white">
-              { isConnected.current && isRecording ? 
-                (<span className="recording">Recording</span>) : null
-              } 
-            </p>
-                <div className="main-screen" style={{ display: isCallView ? "flex" : "none" }}>
-                  <CallView 
-                    isRecording={isRecording} 
-                    isPlaying={isPlaying}
-                    audioPlayer={audioPlayer} 
-                    handleStopCall={handleStopCall} 
-                    handleContinueCall={handleContinueCall}
-                    audioQueue={audioQueue}
-                    setIsPlaying={setIsPlaying}
-                    handleDisconnect={handleDisconnect}
-                    setIsCallView={setIsCallView}
-                  />
-                </div>
-
-                <div className="main-screen" style={{ display: isCallView ? "none" : "flex" }}>
-                  <TextView 
-                    send={send} 
-                    isPlaying={isPlaying}
-                    stopAudioPlayback={stopAudioPlayback}
-                    textAreaValue={textAreaValue}
-                    setTextAreaValue={setTextAreaValue}
-                    messageInput={messageInput}
-                    setMessageInput={setMessageInput}
-                    handleDisconnect={handleDisconnect}
-                    setIsCallView={setIsCallView}
-                    useSearch={useSearch}
-                    setUseSearch={setUseSearch}
-                    callActive={callActive}
-                    startRecording={startRecording}
-                    stopRecording={stopRecording}
-                    preferredLanguage={preferredLanguage}
-                    setPreferredLanguage={setPreferredLanguage}
-                  />
-                </div>
-              </div>
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const handleUnload = (event) => {
+      event.preventDefault();
+      navigate('/');
+    };
+    window.addEventListener("beforeunload", handleUnload);
+
+    // Clean up event listener on component unmount
+    return () => window.removeEventListener("beforeunload", handleUnload);
+  }, [navigate]);
+
+return (
+    <div className='conversation-page'>
+        {/* we render both views but only display one. */}
+        <p className="alert text-white">
+          { isConnected.current && isRecording ? 
+            (<span className="recording">Recording</span>) : null
+          } 
+        </p>
+
+        <Characters 
+          characterGroups={characterGroups} 
+          selectedCharacter={selectedCharacter} 
+          setSelectedCharacter={setSelectedCharacter} 
+          isPlaying={isPlaying} 
+          characterConfirmed={characterConfirmed} 
+        />
+
+        <div className="main-screen" style={{ display: isCallView ? "flex" : "none" }}>
+          <CallView 
+            isRecording={isRecording} 
+            isPlaying={isPlaying}
+            audioPlayer={audioPlayer} 
+            handleStopCall={handleStopCall} 
+            handleContinueCall={handleContinueCall}
+            audioQueue={audioQueue}
+            setIsPlaying={setIsPlaying}
+            handleDisconnect={handleDisconnect}
+            setIsCallView={setIsCallView}
+          />
+        </div>
+
+        <div className="main-screen" style={{ display: isCallView ? "none" : "flex" }}>
+          <TextView 
+            send={send} 
+            isPlaying={isPlaying}
+            stopAudioPlayback={stopAudioPlayback}
+            textAreaValue={textAreaValue}
+            setTextAreaValue={setTextAreaValue}
+            messageInput={messageInput}
+            setMessageInput={setMessageInput}
+            handleDisconnect={handleDisconnect}
+            setIsCallView={setIsCallView}
+            useSearch={useSearch}
+            setUseSearch={setUseSearch}
+            callActive={callActive}
+            startRecording={startRecording}
+            stopRecording={stopRecording}
+            preferredLanguage={preferredLanguage}
+            setPreferredLanguage={setPreferredLanguage}
+          />
+        </div>
+      </div>
     );
 };
 

client/web/src/pages/Home.jsx

@@ -12,14 +12,24 @@ import MobileWarning from '../components/MobileWarning';
 import Characters from '../components/Characters';
 import Button from '../components/Common/Button';
 
-const Home = ({ selectedCharacter, setSelectedCharacter, isPlaying }) => {
+const Home = ({ 
+  selectedCharacter, 
+  setSelectedCharacter, 
+  isPlaying,
+  characterGroups,
+  setCharacterGroups,
+  setCharacterConfirmed,
+  characterConfirmed
+}) => {
   const navigate = useNavigate();
   const isMobile = window.innerWidth <= 768; 
-  const [characterGroups, setCharacterGroups] = useState([]);
-  const [characterConfirmed, setCharacterConfirmed] = useState(false);
+  const [loading, setLoading] = useState(true);
+
 
   // Get characters
   useEffect(() => {
+    setLoading(true);
+
     // Get host
     const scheme = window.location.protocol;
     var currentHost = window.location.host;
@@ -37,8 +47,13 @@ const Home = ({ selectedCharacter, setSelectedCharacter, isPlaying }) => {
 
     fetch(url)
       .then(response => response.json())
-      .then(data => setCharacterGroups(data))
-      .catch(err => console.error(err));
+      .then(data => {
+        setCharacterGroups(data);
+        setLoading(false);
+      }).catch(err => {
+        setLoading(false);
+        console.error(err);
+      });
   }, [])
 
   const handleNextClick = () => {
@@ -51,18 +66,21 @@ const Home = ({ selectedCharacter, setSelectedCharacter, isPlaying }) => {
         <MobileWarning />
       ) : (
         <div id="desktop-content">
-          <p className="header">Choose Your Partner</p>
-
-          <Characters 
-              characterGroups={characterGroups} 
-              selectedCharacter={selectedCharacter} 
-              setSelectedCharacter={setSelectedCharacter} 
-              isPlaying={isPlaying} 
-              characterConfirmed={characterConfirmed} 
-          />
+          { loading ? (<h2>Loading...</h2>) : (
+            <>
+              <p className="header">Choose Your Partner</p>
+
+              <Characters 
+                  characterGroups={characterGroups} 
+                  selectedCharacter={selectedCharacter} 
+                  setSelectedCharacter={setSelectedCharacter} 
+                  isPlaying={isPlaying} 
+                  characterConfirmed={characterConfirmed} 
+              />
 
-          <Button onClick={handleNextClick} name="Next"  disabled={!selectedCharacter}/>
-        </div>
+              <Button onClick={handleNextClick} name="Next"  disabled={!selectedCharacter}/>
+              </>)}
+          </div>
       )
     )
 };

client/web/src/pages/Settings.jsx

@@ -26,11 +26,6 @@ const Settings = ({ preferredLanguage, setPreferredLanguage, selectedDevice, set
         const interval = setInterval(() => {
             // display callview
             setIsCallView(commMethod === "call");
-            const greeting = {
-                "English": "Hi, my friend, what brings you here today?",
-                "Spanish": "Hola, mi amigo, ¿qué te trae por aquí hoy?"
-            }
-            // TODO(logic): setHeaderText(greeting[preferredLanguage]);
 
             shouldPlayAudio.current = true;
             clearInterval(interval);
@@ -51,22 +46,26 @@ const Settings = ({ preferredLanguage, setPreferredLanguage, selectedDevice, set
     };
 
     return (
-        <div>
+        <div className='settings'>
             <h2>Confirm your setting</h2>
 
-            <h4>Communication method</h4>
-            <select value={commMethod} onChange={handleCommMethodChange}>
-                <option value="call">Call</option>
-                <option value="text">Text</option>
-            </select>
+            <div className="comm-container">
+                <label className="comm-label" htmlFor="comm-selection">Communication method</label>
+                <div id="comm-selection" className="select-dropdown">
+                    <select value={commMethod} onChange={handleCommMethodChange}>
+                        <option disabled value="">Select Language</option>
+                        <option value="call">Call</option>
+                        <option value="text">Text</option>
+                    </select>
+                </div>
+            </div>
 
             <Languages preferredLanguage={preferredLanguage} setPreferredLanguage={setPreferredLanguage} />
 
             <MediaDevices selectedDevice={selectedDevice} setSelectedDevice={setSelectedDevice} />
 
             <Models selectedModel={selectedModel} setSelectedModel={setSelectedModel} />
-
-            <h4>advanced option</h4>
+
             <label className='search-checkbox'>
                 <input
                 type="checkbox"
@@ -76,7 +75,9 @@ const Settings = ({ preferredLanguage, setPreferredLanguage, selectedDevice, set
                 Enable Google Search
             </label>
 
-            <Button onClick={handleStartClick} name="Get Started"/>
+            <div className='start-btn'>
+                <Button onClick={handleStartClick} name="Get Started"/>
+            </div>
         </div>
     );
 };

client/web/src/pages/styles.css

@@ -1,3 +1,32 @@
 h2, h4, p {
     color: white
 }
+
+.comm-container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+}
+
+.comm-label {
+	margin-top: 40px;
+	margin-bottom: 20px;
+	color: #e0e0e0;
+}
+
+.settings {
+  display: flex;
+  flex-direction: column;
+  align-items: center;	
+}
+
+.start-btn {
+	padding: 30px;
+}
+
+.conversation-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;	
+}