Dashboard functions are reactive now, fixed up minor bugs

src/Index.tsx

@@ -1,5 +1,9 @@
 import { useState, useEffect } from "react";
 import { Routes, Route, useNavigate } from "react-router-dom";
+import VeryLowSignal from "./assets/very_low_signal.png";
+import LowSignal from "./assets/low_signal.png";
+import MediumSignal from "./assets/medium_signal.png";
+import HighSignal from "./assets/high_signal.png";
 import Dashboard from "./pages/Dashboard";
 import Devices from "./pages/DeviceList";
 import Extend from "./pages/ExtendWirelessNetwork";
@@ -31,8 +35,17 @@ function Index() {
     "10.0.0.6",
     "10.0.0.7",
   ]);
+  const wifiNames = [
+    "Home Wifi",
+    "Neighbors Wifi",
+    "Grandmas Wifi",
+    "McDonalds Wifi",
+    "Starbucks Wifi",
+    "Hotel Wifi",
+  ];
+  const wifiSignals = [4, 3, 1, 2, 1, 2];
+  const wifiSignalImages = [VeryLowSignal, LowSignal, MediumSignal, HighSignal];
 
-  const [routerName, setRouterName] = useState("Example Router");
   const [twoGExtendedName, setTwoGExtendedName] = useState(
     "Example 2.4GHz Network",
   );
@@ -46,6 +59,8 @@ function Index() {
 
   const [selectedModeButton, setSelectedModeButton] = useState(0);
 
+  const [routerName, setRouterName] = useState("");
+
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -57,6 +72,12 @@ function Index() {
     setDevicesOnline(deviceNames.length);
   }, [loginState, navigate, setLoggedUser, deviceNames]);
 
+  useEffect(() => {
+    if (!wifiNames[connected]) return setRouterName("Not Connnected");
+
+    setRouterName(wifiNames[connected]);
+  }, [connected]);
+
   return (
     <>
       <Navbar LoggedUser={loggedUser} />
@@ -65,10 +86,13 @@ function Index() {
           path="/"
           element={
             <Dashboard
-              RouterName={routerName}
+              routerName={routerName}
-              TwoGExtendedName={twoGExtendedName}
+              twoGExtendedName={twoGExtendedName}
-              FiveGExtendedName={fiveGExtendedName}
+              fiveGExtendedName={fiveGExtendedName}
-              DevicesOnline={devicesOnline}
+              devicesOnline={devicesOnline}
+              wifiSignals={wifiSignals}
+              wifiSignalImages={wifiSignalImages}
+              connected={connected}
             />
           }
         />
@@ -93,6 +117,9 @@ function Index() {
               setExtendedMode={setExtenderMode}
               connected={connected}
               setConnected={setConnected}
+              wifiNames={wifiNames}
+              wifiSignals={wifiSignals}
+              wifiSignalImages={wifiSignalImages}
             />
           }
         />

src/pages/Dashboard.tsx

@@ -1,25 +1,33 @@
-import { Link } from 'react-router-dom'
+import { Link } from "react-router-dom";
-import '../styles/Dashboard.css'
+import "../styles/Dashboard.css";
-import Globe from '../assets/globe.png'
+import Globe from "../assets/globe.png";
-import Arrow from '../assets/arrow.png'
+import Arrow from "../assets/arrow.png";
-import Router from '../assets/router.png'
+import Router from "../assets/router.png";
-import Signal from '../assets/signal.png'
+import Signal from "../assets/signal.png";
-import VeryLowSignal from '../assets/very_low_signal.png'
+import HighSignal from "../assets/high_signal.png";
-import LowSignal from '../assets/low_signal.png'
+import Extender from "../assets/extender.png";
-import MediumSignal from '../assets/medium_signal.png'
+import Device from "../assets/device.png";
-import HighSignal from '../assets/high_signal.png'
+import Gear from "../assets/gear.png";
-import Extender from '../assets/extender.png'
-import Device from '../assets/device.png'
-import Gear from '../assets/gear.png'
 
 interface Props {
-  RouterName: string;
+  routerName: string;
-  TwoGExtendedName: string;
+  twoGExtendedName: string;
-  FiveGExtendedName: string;
+  fiveGExtendedName: string;
-  DevicesOnline: number;
+  devicesOnline: number;
+  connected: number;
+  wifiSignals: number[];
+  wifiSignalImages: string[];
 }
 
-function Dashboard({ RouterName, TwoGExtendedName, FiveGExtendedName, DevicesOnline }: Props) {
+function Dashboard({
+  routerName,
+  twoGExtendedName,
+  fiveGExtendedName,
+  devicesOnline,
+  connected,
+  wifiSignals,
+  wifiSignalImages,
+}: Props) {
   return (
     <>
       <header id="dashboardHeader">
@@ -34,16 +42,23 @@ function Dashboard({ RouterName, TwoGExtendedName, FiveGExtendedName, DevicesOnl
           <li>
             <img src={Router} className="listIcons" />
             <h2>Router</h2>
-            <p>{ RouterName }</p>
+            <p>{routerName}</p>
           </li>
           <li>
-            <img src= { MediumSignal } className="signal" />
+            <img
+              src={
+                connected === -1
+                  ? Signal
+                  : wifiSignalImages[wifiSignals[connected] - 1]
+              }
+              className="signal"
+            />
           </li>
           <li>
             <img src={Extender} className="listIcons" />
             <h2>Extender</h2>
-            <p>{ TwoGExtendedName }</p>
+            <p>{twoGExtendedName}</p>
-            <p>{ FiveGExtendedName }</p>
+            <p>{fiveGExtendedName}</p>
           </li>
           <li>
             <img src={HighSignal} className="signal" />
@@ -60,7 +75,7 @@ function Dashboard({ RouterName, TwoGExtendedName, FiveGExtendedName, DevicesOnl
             <li>
               <img src={Device} />
               <h2>Device List</h2>
-              <p>{ DevicesOnline } Devices Online</p>
+              <p>{devicesOnline} Devices Online</p>
             </li>
           </Link>
           <Link to="/extend">
@@ -87,7 +102,7 @@ function Dashboard({ RouterName, TwoGExtendedName, FiveGExtendedName, DevicesOnl
         </ul>
       </nav>
     </>
-  )
+  );
 }
 
-export default Dashboard
+export default Dashboard;

src/pages/ExtendWirelessNetwork.tsx

@@ -1,8 +1,4 @@
 import { Dispatch, SetStateAction } from "react";
-import VeryLowSignal from "../assets/very_low_signal.png";
-import LowSignal from "../assets/low_signal.png";
-import MediumSignal from "../assets/medium_signal.png";
-import HighSignal from "../assets/high_signal.png";
 import "../styles/ExtendWirelessNetwork.css";
 
 interface Props {
@@ -12,6 +8,9 @@ interface Props {
   setExtendedMode: Dispatch<SetStateAction<boolean>>;
   connected: number;
   setConnected: Dispatch<SetStateAction<number>>;
+  wifiNames: string[];
+  wifiSignals: number[];
+  wifiSignalImages: string[];
 }
 
 function ExtendWirelessNetwork({
@@ -21,18 +20,11 @@ function ExtendWirelessNetwork({
   setExtendedMode,
   connected,
   setConnected,
+  wifiNames,
+  wifiSignals,
+  wifiSignalImages,
 }: Props) {
   const buttons = ["AP Mode", "Extend Mode"];
-  const wifiNames = [
-    "Wifi 1",
-    "Wifi 2",
-    "Wifi 3",
-    "Wifi 4",
-    "Wifi 5",
-    "Wifi 6",
-  ];
-  const wifiSignals = [4, 3, 1, 2, 1, 2];
-  const wifiSignalImages = [VeryLowSignal, LowSignal, MediumSignal, HighSignal];
 
   return (
     <div id="extendNetwork">

src/pages/Login.tsx

@@ -1,9 +1,9 @@
-import { Dispatch, SetStateAction, useState } from 'react';
+import { Dispatch, SetStateAction, useState } from "react";
-import { useNavigate, Link } from 'react-router-dom';
+import { useNavigate, Link } from "react-router-dom";
-import '../styles/Login.css'
+import "../styles/Login.css";
 
-const usernames = ['root'];
+const usernames = ["root"];
-const passwords = ['123'];
+const passwords = ["123"];
 
 interface Props {
   setLogin: Dispatch<SetStateAction<boolean>>;
@@ -16,13 +16,18 @@ function Login({ setLogin, setUser }: Props) {
   const [usernameError, setUsernameError] = useState(false);
   const [passwordError, setPasswordError] = useState(false);
 
-  setUser('Not Logged In');
+  setUser("Not Logged In");
+  setLogin(false);
 
   const handleLogin = (e: React.FormEvent) => {
     e.preventDefault();
 
-    const userElement = document.getElementById('username') as HTMLInputElement | null;
+    const userElement = document.getElementById(
-    const passwordElement = document.getElementById('password') as HTMLInputElement | null;
+      "username",
+    ) as HTMLInputElement | null;
+    const passwordElement = document.getElementById(
+      "password",
+    ) as HTMLInputElement | null;
 
     if (!userElement || !passwordElement) return;
 
@@ -50,21 +55,21 @@ function Login({ setLogin, setUser }: Props) {
           <h2>Username</h2>
           <input type="text" id="username" />
 
-        { passwordError &&
+          {passwordError && <p id="noinput">Wrong username.</p>}
-        <p id="noinput">Wrong username.</p> }
 
           <h2>Password</h2>
           <input type="password" id="password" />
 
-        { usernameError &&
+          {usernameError && <p id="noinput">Wrong password.</p>}
-        <p id="noinput">Wrong password.</p> }
 
-        <p>Forgot password? <Link to="/reset">Reset it</Link></p>
+          <p>
+            Forgot password? <Link to="/reset">Reset it</Link>
+          </p>
           <button onClick={handleLogin}>Login</button>
         </form>
       </div>
     </div>
-  )
+  );
 }
 
 export default Login;

src/styles/Dashboard.css

@@ -28,6 +28,7 @@
 
         .listIcons {
             max-height: 160px;
+            width: auto;
         }
         .arrow {
             max-height: 60px;
@@ -62,7 +63,6 @@
     img {
         margin: 10px;
         max-height: 160px;
-    aspect-ratio: 1/1;
         width: fit-content;
     }
     li:hover {