diff --git a/components/header/Header.tsx b/components/header/Header.tsx index 9d11edf..151f91e 100644 --- a/components/header/Header.tsx +++ b/components/header/Header.tsx @@ -4,6 +4,7 @@ import Image from "next/image"; import { useRouter } from "next/router"; import "bootstrap-icons/font/bootstrap-icons.css"; import SettingsModal from "./settingsModal/SettingsModal"; +import { RootState } from "../../redux/store"; import { useSelector } from "react-redux"; import decodeToken from "../../utils/decodeToken"; @@ -11,7 +12,9 @@ function Header() { const router = useRouter(); const [showSettingsModal, setShowSettingsModal] = useState(false); const [isAdminLoggedIn, setIsAdminLoggedIn] = useState(false); - const deviceName = useSelector((state) => state.variables.deviceName); + const deviceName = useSelector( + (state: RootState) => state.systemSettings.deviceName + ); const handleSettingsClick = () => setShowSettingsModal(true); const handleCloseSettingsModal = () => setShowSettingsModal(false); diff --git a/components/header/settingsModal/SettingsModal.tsx b/components/header/settingsModal/SettingsModal.tsx index 29ed796..619daf8 100644 --- a/components/header/settingsModal/SettingsModal.tsx +++ b/components/header/settingsModal/SettingsModal.tsx @@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react"; import ReactModal from "react-modal"; import "bootstrap-icons/font/bootstrap-icons.css"; +import { RootState } from "../../../redux/store"; import { useSelector } from "react-redux"; import handleClearDatabase from "./handlers/handleClearDatabase"; import handleReboot from "./handlers/handleReboot"; @@ -99,19 +100,37 @@ function SettingModal({ showModal, onClose }) { } } }, [showModal]); - const deviceName_Redux = useSelector((state) => state.variables.deviceName); - const mac1_Redux = useSelector((state) => state.variables.mac1); - const ip_Redux = useSelector((state) => state.variables.ip); - const subnet_Redux = useSelector((state) => state.variables.subnet); - const gateway_Redux = useSelector((state) => state.variables.gateway); - const datetime_Redux = useSelector( - (state) => state.variables.cplInternalTimestamp + const deviceName_Redux = useSelector( + (state: RootState) => state.systemSettings.deviceName + ); + const mac1_Redux = useSelector( + (state: RootState) => state.systemSettings.mac1 + ); + const ip_Redux = useSelector((state: RootState) => state.systemSettings.ip); + const subnet_Redux = useSelector( + (state: RootState) => state.systemSettings.subnet + ); + const gateway_Redux = useSelector( + (state: RootState) => state.systemSettings.gateway + ); + const datetime_Redux = useSelector( + (state: RootState) => state.systemSettings.cplInternalTimestamp + ); + const ntp1_Redux = useSelector( + (state: RootState) => state.systemSettings.ntp1 + ); + const ntp2_Redux = useSelector( + (state: RootState) => state.systemSettings.ntp2 + ); + const ntp3_Redux = useSelector( + (state: RootState) => state.systemSettings.ntp3 + ); + const ntpTimezone_Redux = useSelector( + (state: RootState) => state.systemSettings.ntpTimezone + ); + const active_Redux = useSelector( + (state: RootState) => state.systemSettings.ntpActive ); - const ntp1_Redux = useSelector((state) => state.variables.ntp1); - const ntp2_Redux = useSelector((state) => state.variables.ntp2); - const ntp3_Redux = useSelector((state) => state.variables.ntp3); - const ntpTimezone_Redux = useSelector((state) => state.variables.ntpTimezone); - const active_Redux = useSelector((state) => state.variables.ntpActive); const [name, setName] = useState(deviceName_Redux || ""); const [mac1, setMac1] = useState(mac1_Redux || ""); diff --git a/components/main/settingsPageComponents/GeneralSettings.tsx b/components/main/settingsPageComponents/GeneralSettings.tsx index 3b2cc35..e329ebc 100644 --- a/components/main/settingsPageComponents/GeneralSettings.tsx +++ b/components/main/settingsPageComponents/GeneralSettings.tsx @@ -1,117 +1,180 @@ -import React, { useState, useEffect } from "react"; +"use client"; +import React, { useState } from "react"; +import { RootState } from "../../../redux/store"; import { useSelector } from "react-redux"; -import handleClearDatabase from "../../header/settingsModal/handlers/handleReboot"; +import handleClearDatabase from "../../header/settingsModal/handlers/handleClearDatabase"; import handleReboot from "../../header/settingsModal/handlers/handleReboot"; -import handleSetDateTime from "../../header/settingsModal/handlers/handleReboot"; -import handleSubmit from "../../header/settingsModal/handlers/handleReboot"; +import handleSetDateTime from "../../header/settingsModal/handlers/handleSetDateTime"; +import handleSubmit from "../../header/settingsModal/handlers/handleSubmit"; const GeneralSettings = () => { - const deviceName_Redux = useSelector((state) => state.variables.deviceName); - const ip_Redux = useSelector((state) => state.variables.ip); - const subnet_Redux = useSelector((state) => state.variables.subnet); - const gateway_Redux = useSelector((state) => state.variables.gateway); - const datetime_Redux = useSelector( - (state) => state.variables.cplInternalTimestamp + const systemSettings = useSelector( + (state: RootState) => state.systemSettings ); - const ntp1_Redux = useSelector((state) => state.variables.ntp1); - const ntp2_Redux = useSelector((state) => state.variables.ntp2); - const ntp3_Redux = useSelector((state) => state.variables.ntp3); - const ntpTimezone_Redux = useSelector((state) => state.variables.ntpTimezone); - const active_Redux = useSelector((state) => state.variables.ntpActive); + console.log("Redux SystemSettings:", systemSettings); - const [name, setName] = useState(deviceName_Redux || ""); - const [ip, setIp] = useState(ip_Redux || ""); - const [subnet, setSubnet] = useState(subnet_Redux || ""); - const [gateway, setGateway] = useState(gateway_Redux || ""); - const [systemUhr, setSystemUhr] = useState(datetime_Redux || ""); - const [ntp1, setNtp1] = useState(ntp1_Redux || ""); - const [ntp2, setNtp2] = useState(ntp2_Redux || ""); - const [ntp3, setNtp3] = useState(ntp3_Redux || ""); - const [ntpTimezone, setNtpTimezone] = useState(ntpTimezone_Redux || ""); - const [active, setActive] = useState(active_Redux || ""); - - useEffect(() => { - setName(deviceName_Redux || ""); - setIp(ip_Redux || ""); - setSubnet(subnet_Redux || ""); - setGateway(gateway_Redux || ""); - setSystemUhr(datetime_Redux || ""); - setNtp1(ntp1_Redux || ""); - setNtp2(ntp2_Redux || ""); - setNtp3(ntp3_Redux || ""); - setNtpTimezone(ntpTimezone_Redux || ""); - setActive(active_Redux || ""); - }, [ - deviceName_Redux, - ip_Redux, - subnet_Redux, - gateway_Redux, - datetime_Redux, - ntp1_Redux, - ntp2_Redux, - ntp3_Redux, - ntpTimezone_Redux, - active_Redux, - ]); + const [name, setName] = useState(systemSettings.deviceName || ""); + const [ip, setIp] = useState(systemSettings.ip || ""); + const [subnet, setSubnet] = useState(systemSettings.subnet || ""); + const [gateway, setGateway] = useState(systemSettings.gateway || ""); + const [systemUhr, setSystemUhr] = useState( + systemSettings.cplInternalTimestamp || "" + ); + const [ntp1, setNtp1] = useState(systemSettings.ntp1 || ""); + const [ntp2, setNtp2] = useState(systemSettings.ntp2 || ""); + const [ntp3, setNtp3] = useState(systemSettings.ntp3 || ""); + const [ntpTimezone, setNtpTimezone] = useState( + systemSettings.ntpTimezone || "" + ); + const [active, setActive] = useState(systemSettings.ntpActive || false); return ( -