refactor: clean up commented-out code and improve theme handling

docker-compose.yml

@@ -1,27 +1,27 @@
 services:
-#  admin_react-frontend:
+  #  admin_react-frontend:
-#    container_name: bikelane-frontend_react-admin
+  #    container_name: bikelane-frontend_react-admin
-#    build: ./frontend_admin
+  #    build: ./frontend_admin
-#    ports:
+  #    ports:
-#      - "5001:5001"
+  #      - "5001:5001"
-#    environment:
+  #    environment:
-#      - CHOKIDAR_USEPOLLING=true
+  #      - CHOKIDAR_USEPOLLING=true
-#    volumes:
+  #    volumes:
-#      - ./frontend_admin:/app
+  #      - ./frontend_admin:/app
-#      - /app/node_modules
+  #      - /app/node_modules
-#    restart: unless-stopped
+  #    restart: unless-stopped
 
-#  user_react-frontend:
+  #  user_react-frontend:
-#    container_name: bikelane-frontend_react-user
+  #    container_name: bikelane-frontend_react-user
-#    build: ./frontend_user
+  #    build: ./frontend_user
-#    ports:
+  #    ports:
-#      - "5003:5003"
+  #      - "5003:5003"
-#    environment:
+  #    environment:
-#      - CHOKIDAR_USEPOLLING=true
+  #      - CHOKIDAR_USEPOLLING=true
-#    volumes:
+  #    volumes:
-#      - ./frontend_user:/app
+  #      - ./frontend_user:/app
-#      - /app/node_modules
+  #      - /app/node_modules
-#    restart: unless-stopped
+  #    restart: unless-stopped
 
   bikelane-backend:
     container_name: bikelane-backend_express
@@ -52,4 +52,4 @@ services:
       - "3307:3306"
 
 volumes:
-  mysql-data:
+  mysql-data:

frontend_admin/src/App.tsx

@@ -4,7 +4,6 @@ import { useUsers } from "./utils/useUsers";
 import UserTable from "./components/UserTable";
 import { useEffect } from "react";
 import { loadTheme } from "./utils/functions";
-import { replaceUsers } from "./utils/functions";
 
 function App() {
   const users = useUsers();

frontend_admin/src/components/Header.tsx

@@ -23,7 +23,10 @@ const Header: React.FC = () => {
           <ul className="flex space-x-4">
             <li>
               <a className="hover:underline">
-                <button onClick={() => changeTheme()} className="bg-blue-700 shadow-md hover:bg-blue-800 transition padding px-4 py-2 rounded-md text-white font-semibold">
+                <button
+                  onClick={() => changeTheme()}
+                  className="bg-blue-700 shadow-md hover:bg-blue-800 transition padding px-4 py-2 rounded-md text-white font-semibold"
+                >
                   Change Theme
                 </button>
                 <button

frontend_admin/src/components/Sidebar.tsx

@@ -34,4 +34,4 @@ const Sidebar: React.FC = () => (
   </aside>
 );
 
-export default Sidebar;
+export default Sidebar;

frontend_admin/src/components/UserTable.tsx

@@ -3,8 +3,6 @@ import React from "react";
 import { useEffect, useState } from "react";
 import { deleteUser, updateUserFunc } from "../utils/functions.ts";
 
-const selectedUsers: Record<number, boolean> = {};
-
 interface User {
   id: number;
   username: string;
@@ -74,7 +72,7 @@ const UserTable: React.FC<UserTableProps> = ({ users }) => {
         </tr>
       </thead>
       <tbody className="bg-white divide-y divide-gray-100">
-        {userList.map((user, idx) => (
+        {userList.map((user) => (
           <tr key={user.id} className="hover:bg-blue-50 transition">
             <td className="px-4 py-2 whitespace-nowrap">{user.id}</td>
             <td className="px-4 py-2 whitespace-nowrap">

frontend_admin/src/layout/Layout.tsx

@@ -1,7 +1,5 @@
 import React from "react";
 import Header from "../components/Header";
-import userIcon from "../assets/circle-user-solid-full.svg";
-import logoIcon from "../assets/bicycle-solid-full.svg";
 import Cookies from "js-cookie"; // Add this import
 import Sidebar from "../components/Sidebar";
 

frontend_admin/src/utils/functions.ts

@@ -10,13 +10,13 @@ export const loadTheme = () => {
     window.matchMedia("(prefers-color-scheme: dark)").matches
   ) {
     // Switch to dark theme
-    console.log("dark")
+    console.log("dark");
     document.documentElement.classList.add("dark");
     document.body.classList.add("dark");
     Cookies.set("theme", "dark", { expires: 365 });
   } else {
     // Switch to light theme
-    console.log("light")
+    console.log("light");
     document.documentElement.classList.remove("dark");
     document.body.classList.remove("dark");
     Cookies.set("theme", "light", { expires: 365 });
@@ -26,13 +26,13 @@ export const loadTheme = () => {
 export const changeTheme = () => {
   if (Cookies.get("theme") === "dark") {
     // Switch to light theme
-    console.log("light")
+    console.log("light");
     document.documentElement.classList.remove("dark");
     document.body.classList.remove("dark");
     Cookies.set("theme", "light", { expires: 365 });
   } else if (Cookies.get("theme") === "light") {
     // Switch to dark theme
-    console.log("dark")
+    console.log("dark");
     document.documentElement.classList.add("dark");
     document.body.classList.add("dark");
     Cookies.set("theme", "dark", { expires: 365 });