Finished Extend Wireless, Made minor tweaks

src/Index.tsx

@@ -11,14 +11,39 @@ import Navbar from "./components/Navbar";
 import "./styles/Main.css";
 
 function Index() {
-  let [loginState, setLoginState] = useState(false);
+  const [loginState, setLoginState] = useState(false);
-  let [loggedUser, setLoggedUser] = useState("");
+  const [loggedUser, setLoggedUser] = useState("");
 
-  let [routerName, setRoutername] = useState("Example Router");
+  const [deviceNames, setDeviceNames] = useState([
-  let [twoGExtendedName, settwoGExtendedName] = useState("Example 2G Network");
+    "My PC",
-  let [fiveGExtendedName, setFiveGExtendedName] =
+    "My Smartphone",
-    useState("Example 5G Network");
+    "My Smartfridge",
-  let [devicesOnline, setDevicesOnline] = useState(0);
+    "My Watch",
+    "My Remote",
+    "My TV",
+  ]);
+  const [deviceIPs, setDeviceIPs] = useState([
+    "10.0.0.2",
+    "10.0.0.3",
+    "10.0.0.4",
+    "10.0.0.5",
+    "10.0.0.6",
+    "10.0.0.7",
+  ]);
+
+  const [routerName, setRouterName] = useState("Example Router");
+  const [twoGExtendedName, setTwoGExtendedName] = useState(
+    "Example 2.4GHz Network",
+  );
+  const [fiveGExtendedName, setFiveGExtendedName] = useState(
+    "Example 5GHz Network",
+  );
+  const [devicesOnline, setDevicesOnline] = useState(0);
+
+  const [extenderMode, setExtenderMode] = useState(false);
+  const [connected, setConnected] = useState(-1);
+
+  const [selectedModeButton, setSelectedModeButton] = useState(0);
 
   const navigate = useNavigate();
 
@@ -26,10 +51,8 @@ function Index() {
     if (!loginState) {
       navigate("/login");
     }
-    if (loggedUser === "") {
+    setDevicesOnline(deviceNames.length);
-      setLoggedUser("Not Logged In");
+  }, [loginState, navigate, setLoggedUser, deviceNames]);
-    }
-  }, [loginState, setLoggedUser]);
 
   return (
     <>
@@ -46,8 +69,30 @@ function Index() {
             />
           }
         />
-        <Route path="/devices" element={<Devices />} />
+        <Route
-        <Route path="/extend" element={<Extend />} />
+          path="/devices"
+          element={
+            <Devices
+              deviceNames={deviceNames}
+              deviceIPs={deviceIPs}
+              setDevice={setDeviceNames}
+              setDeviceIP={setDeviceIPs}
+            />
+          }
+        />
+        <Route
+          path="/extend"
+          element={
+            <Extend
+              selectedModeButton={selectedModeButton}
+              setSelecModeButton={setSelectedModeButton}
+              extendedMode={extenderMode}
+              setExtendedMode={setExtenderMode}
+              connected={connected}
+              setConnected={setConnected}
+            />
+          }
+        />
         <Route path="/wireless" element={<WirelessSettings />} />
         <Route path="/settings" element={<SystemSettings />} />
         <Route

src/pages/DeviceList.tsx

@@ -1,47 +1,56 @@
-import { useState } from "react";
+import { Dispatch, SetStateAction } from "react";
-import Device from '../assets/device.png'
+import Device from "../assets/device.png";
-import '../styles/DeviceList.css'
+import "../styles/DeviceList.css";
 
-function DeviceList() {
+interface Props {
-
+  deviceNames: string[];
-  let [deviceNames, setDeviceNames] = useState(["My PC", "My Smartphone", "My Smartfridge", "My Watch", "My Remote", "My TV"]);
+  deviceIPs: string[];
-  let [deviceIPs, setDeviceIPs] = useState(["10.0.0.2", "10.0.0.3", "10.0.0.4", "10.0.0.5", "10.0.0.6", "10.0.0.7"]);
+  setDevice: Dispatch<SetStateAction<string[]>>;
+  setDeviceIP: Dispatch<SetStateAction<string[]>>;
+}
 
+function DeviceList({ deviceNames, deviceIPs, setDevice, setDeviceIP }: Props) {
   const removeDevice = (index: number) => {
-    const newDeviceNames = [...deviceNames];
+    const newDeviceNames = deviceNames.slice();
-    const newDeviceIPs = [...deviceIPs];
+    const newDeviceIPs = deviceIPs.slice();
 
     newDeviceNames.splice(index, 1);
-    newDeviceIPs.splice(index,1);
+    newDeviceIPs.splice(index, 1);
 
-    setDeviceNames(newDeviceNames);
+    setDevice(newDeviceNames);
-    setDeviceIPs(newDeviceIPs);
+    setDeviceIP(newDeviceIPs);
-  }
+  };
 
   return (
     <div id="deviceList">
       <h2>Device list</h2>
-      { deviceNames.length === 0 && <p>No devices are connected.</p> }
+      {deviceNames.length === 0 && <p>No devices are connected.</p>}
       <ul id="devices">
-        { deviceNames.map((device, index) => 
+        {deviceNames.map((device, index) => (
           <li>
-              <img src={ Device } />
+            <img src={Device} />
             <div>
-                <h3>{ device }</h3>
+              <h3>{device}</h3>
-                <p>{ deviceIPs[index] }</p>
+              <p>{deviceIPs[index]}</p>
             </div>
-              <svg onClick={ () => removeDevice(index) } className="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+            <svg
+              onClick={() => removeDevice(index)}
+              className="close"
+              viewBox="0 0 384 512"
+            >
               <path
-                  fill="currentColor" 
+                fill="none"
-                  d="M376.6 84.5c11.3-13.6 9.5-33.8-4.1-45.1s-33.8-9.5-45.1 4.1L192 206 56.6 43.5C45.3 29.9 25.1 28.1 11.5 39.4S-3.9 70.9 7.4 84.5L150.3 256 7.4 427.5c-11.3 13.6-9.5 33.8 4.1 45.1s33.8 9.5 45.1-4.1L192 306 327.4 468.5c11.3 13.6 31.5 15.4 45.1 4.1s15.4-31.5 4.1-45.1L233.7 256 376.6 84.5z"
+                stroke="currentColor"
+                stroke-width="64"
+                stroke-linecap="round"
+                d="M32 64 352 448m0-384L32 448"
               />
             </svg>
           </li>
-          )
+        ))}
-        }
       </ul>
     </div>
-  )
+  );
 }
 
 export default DeviceList;

src/pages/ExtendWirelessNetwork.tsx

@@ -1,5 +1,85 @@
-function ExtendWirelessNetwork() {
+import { Dispatch, SetStateAction } from "react";
-  return <p>Extend Wireless Network</p>
+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 {
+  selectedModeButton: number;
+  setSelecModeButton: Dispatch<SetStateAction<number>>;
+  extendedMode: boolean;
+  setExtendedMode: Dispatch<SetStateAction<boolean>>;
+  connected: number;
+  setConnected: Dispatch<SetStateAction<number>>;
+}
+
+function ExtendWirelessNetwork({
+  selectedModeButton,
+  setSelecModeButton,
+  extendedMode,
+  setExtendedMode,
+  connected,
+  setConnected,
+}: 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">
+      <h2>Extend Network</h2>
+      <div id="modeButton">
+        {buttons.map((button, index) => (
+          <button
+            className={selectedModeButton === index ? "modeButonActive" : ""}
+            onClick={() => {
+              setSelecModeButton(index);
+              setExtendedMode(buttons[index] === "Extend Mode");
+            }}
+          >
+            {button}
+          </button>
+        ))}
+      </div>
+
+      {extendedMode ? (
+        <ul id="signalList">
+          {wifiNames.map((wifi, index) => (
+            <li>
+              <img src={wifiSignalImages[wifiSignals[index] - 1]} />
+              <div>
+                <h3>{wifi}</h3>
+                {index === connected ? <p>Connected</p> : <p>Unknown</p>}
+              </div>
+              <svg
+                className="link"
+                onClick={() => setConnected(index)}
+                viewBox="0 0 640 512"
+              >
+                <path
+                  stroke="currentColor"
+                  stroke-width="64"
+                  stroke-linecap="round"
+                  d="M230 437A114 112-4 0184 266L200 150A113 112-4 01365 301M410 75A114 112 176 01556 246L440 362A113 112 176 01275 211"
+                />
+              </svg>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p id="APMode">On AP Mode.</p>
+      )}
+    </div>
+  );
 }
 
 export default ExtendWirelessNetwork;

src/pages/Login.tsx

@@ -2,8 +2,8 @@ import { Dispatch, SetStateAction, useState } from 'react';
 import { useNavigate, Link } from 'react-router-dom';
 import '../styles/Login.css'
 
-let usernames = ['root'];
+const usernames = ['root'];
-let passwords = ['123', 'hello'];
+const passwords = ['123'];
 
 interface Props {
   setLogin: Dispatch<SetStateAction<boolean>>;
@@ -13,10 +13,10 @@ interface Props {
 function Login({ setLogin, setUser }: Props) {
   const navigate = useNavigate();
 
-  let [usernameError, setUsernameError] = useState(false);
+  const [usernameError, setUsernameError] = useState(false);
-  let [passwordError, setPasswordError] = useState(false);
+  const [passwordError, setPasswordError] = useState(false);
 
-  setUser('');
+  setUser('Not Logged In');
 
   const handleLogin = (e: React.FormEvent) => {
     e.preventDefault();
@@ -26,8 +26,8 @@ function Login({ setLogin, setUser }: Props) {
 
     if(!userElement || !passwordElement) return;
 
-    let user = userElement?.value;
+    const user = userElement?.value;
-    let password = passwordElement?.value;
+    const password = passwordElement?.value;
 
     for (let i = 0; i < usernames.length; i++) {
       if(user === usernames[i] && password === passwords[i]) {

src/pages/SystemSettings.tsx

@@ -1,5 +1,5 @@
 function SystemSettings() {
-  return <p></p>
+  return <p>System Settings</p>;
 }
 
 export default SystemSettings;

src/pages/WirelessSettings.tsx

@@ -1,5 +1,5 @@
 function WirelessName() {
-  return <p>Wireless Name??????????</p>
+  return <p>Wireless Name</p>;
 }
 
 export default WirelessName;

src/styles/ExtendWirelessNetwork.css

@@ -0,0 +1,85 @@
+#extendNetwork {
+    background-color: var(--bg-color-alt);
+    margin-top: 20px;
+    border-radius: 20px;
+    padding: 20px;
+    height: calc(100% - 50px);
+    overflow: scroll;
+
+    h2 {
+        font-size: 2.5rem;
+        text-align: center;
+    }
+    button {
+        background-color: #071436;
+        color: white;
+        border: none;
+        cursor: pointer;
+        height: 50px;
+        width: 80px;
+        border-radius: 10px;
+        transition: 0.3s background-color;
+    }
+    button:hover {
+        background-color: #0069ff;
+    }
+    #modeButton {
+        margin-top: 20px;
+        display: flex;
+        justify-content: center;
+        gap: 20px;
+    }
+    #APMode {
+        margin-top: 60px;
+        font-size: 2rem;
+        text-align: center;
+    }
+    .modeButonActive {
+        background-color: #0069ff;
+    }
+}
+
+#signalList {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    margin-top: 20px;
+
+    li {
+      display: inherit;
+      background-color: #071436;
+      padding: 30px 20px;
+      border-radius: 20px;
+      justify-content: space-between;
+      align-items: center;
+    }
+    h3 {
+      font-size: 1.8rem;
+      width: fit-content;
+    }
+    p {
+      font-size: 1.3rem;
+      width: fit-content;
+    }
+    div {
+      display: inherit;
+      flex-direction: column;
+      text-align: center;
+      margin: 0 20px;
+      position: relative;
+      width: 100%;
+    }
+    img {
+      max-width: 100px;
+    }
+    .link {
+      max-width: 50px;
+      cursor: pointer;
+      color: #fff;
+      transition: 0.3s color;
+    }
+    .link:hover {
+      color: #0069ff;
+    }
+}

src/styles/Login.css

@@ -1,11 +1,3 @@
-body {
-  height: 100vh;
-}
-
-#root {
-  height: 100%;
-}
-
 #login {
   display: flex;
   align-items: center;

src/styles/Main.css

@@ -25,6 +25,7 @@ body {
   color: #fff;
   padding: 20px;
   font-family: 'Poppins', sans-serif;
+  height: 100vh;
 }
 
 a {
@@ -32,6 +33,10 @@ a {
   text-decoration: none;
 }
 
+#root {
+  height: 100%;
+}
+
 #topNav {
   display: flex;
   justify-content: space-between;