src/App.tsx

@@ -1,78 +1,18 @@
-import { useState, useEffect } from 'react'
 import { Routes, Route } from 'react-router'
 import './App.css'
 import TemplatePage from './pages/TemplatePage/Template.tsx'
 import Home from './pages/Home/Home.tsx'
+import ServerComms from './pages/ServerComms/ServerComms.tsx'
 
-function App() {
-  const [message, setMessage] = useState('');
-  const [sseMessage, setSseMessage] = useState('');
-  const [spoken, setSpoken] = useState<string>("");
-
-  const sendMessage = async () => {
-    try {
-      const response = await fetch("http://localhost:8000/message", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ message }),
-      });
-      const data = await response.json();
-      console.log(data);
-    } catch (error) {
-      console.error("Error sending message: ", error);
-    }
-  };
-
-  useEffect(() => {
-    const eventSource = new EventSource("http://localhost:8000/sse");
-
-    eventSource.onmessage = (event) => {
-      setSseMessage(event.data);
-
-      try {
-          const data = JSON.parse(event.data);
-          if (data.speech) setSpoken(data.speech);
-      } catch {}
-    };
-
-    return () => {
-      eventSource.close();
-    };
-  }, []);
-
-  return (
-    <div className="App">
-      <div>
-        <input
-          type="text"
-          value={message}
-          onChange={(e) => setMessage(e.target.value)}
-          onKeyDown={(e) => e.key === "Enter" && sendMessage().then(() => setMessage(""))}
-          placeholder="Enter a message"
-        />
-        <button onClick={sendMessage}>Send Message to Backend</button>
-      </div>
-      <div>
-        <h2>Message from Server (SSE):</h2>
-        <p>{sseMessage}</p>
-      </div>
-      <div>
-        <h2>Spoken text (SSE):</h2>
-        <p>{spoken}</p>
-      </div>
-    </div>
-  );
-/*
 function App(){
   
   return (
     <Routes>
       <Route path="/" element={<Home />} />
       <Route path="/Template" element={<TemplatePage />} />
+      <Route path="/ServerComms" element = {<ServerComms />} />
     </Routes>
   )
 }
-*/
+
 export default App

src/pages/Home/Home.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+//import { useState } from 'react'
 import { Link } from 'react-router'
 import reactLogo from '../../assets/react.svg'
 import viteLogo from '../../assets/vite.svg'
@@ -29,7 +29,7 @@ function Home() {
       <h1>Vite + React</h1>
       
         <Counter />
-        <Link to = '/Template'>
+        <Link to = '/ServerComms'>
             <button className='movePage right' onClick={() : void => {}}>
             Page Cool --{'>'}
             </button>

src/pages/ServerComms/ServerComms.tsx

@@ -0,0 +1,80 @@
+import { useState, useEffect } from 'react'
+import { Link } from 'react-router'
+//import Counter from '../../components/components.tsx'
+
+
+//this is your css file where you can style your buttons and such
+//you can still use css parts from App.css, but also overwrite them
+
+function ServerComms() {
+  const [message, setMessage] = useState('');
+  const [sseMessage, setSseMessage] = useState('');
+  const [spoken, setSpoken] = useState<string>("");
+
+  const sendMessage = async () => {
+    try {
+      const response = await fetch("http://localhost:8000/message", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ message }),
+      });
+      const data = await response.json();
+      console.log(data);
+    } catch (error) {
+      console.error("Error sending message: ", error);
+    }
+  };
+
+  useEffect(() => {
+    const eventSource = new EventSource("http://localhost:8000/sse");
+
+    eventSource.onmessage = (event) => {
+      setSseMessage(event.data);
+
+      try {
+          const data = JSON.parse(event.data);
+          if (data.speech) setSpoken(data.speech);
+      } catch {}
+    };
+
+    return () => {
+      eventSource.close();
+    };
+  }, []);
+
+  return (
+    <div className="App">
+      <div>
+        <input
+          type="text"
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          onKeyDown={(e) => e.key === "Enter" && sendMessage().then(() => setMessage(""))}
+          placeholder="Enter a message"
+        />
+        <button onClick={sendMessage}>Send Message to Backend</button>
+      </div>
+      <div>
+        <h2>Message from Server (SSE):</h2>
+        <p>{sseMessage}</p>
+      </div>
+      <div>
+        <h2>Spoken text (SSE):</h2>
+        <p>{spoken}</p>
+      </div>
+      <div>
+        <Link to = {"/"}> {/* here you link to the homepage, in App.tsx you can link new pages */}
+          <button className= 'movePage left' onClick={() :void => {}}>
+            Page {'<'}-- Go Home
+          </button>
+        </Link>
+      </div>
+    </div>
+    
+    
+  );
+}
+
+export default ServerComms

src/pages/TemplatePage/Template.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react'
 import { Link } from 'react-router'
 import Counter from '../../components/components.tsx'
-import style from './Template.module.css'
+//import style from './Template.module.css'
+import '../../App.css'
 
 //this is your css file where you can style your buttons and such
 //you can still use css parts from App.css, but also overwrite them