diff --git a/src/features/device/add/index.tsx b/src/features/device/add/index.tsx index 3b0b8fe..7c1652a 100644 --- a/src/features/device/add/index.tsx +++ b/src/features/device/add/index.tsx @@ -54,8 +54,6 @@ export default function AddDeviceFeature() { return (
-

Add Device

- {!isMerchantValid && (

Lengkapi data merchant (tower, floor, unit) terlebih dahulu @@ -134,7 +132,7 @@ export default function AddDeviceFeature() { disabled:cursor-not-allowed " > - Save Device + Add Device

); diff --git a/src/features/home/sections/devices.tsx b/src/features/home/sections/devices.tsx index 998c946..c590521 100644 --- a/src/features/home/sections/devices.tsx +++ b/src/features/home/sections/devices.tsx @@ -62,17 +62,20 @@ export default function Devices() { return ( <>
+ { merchant && ( +

- Your Devices + Devices Located at{' '}{merchant?.tower}/{merchant?.floor}/{merchant?.unit}

-
+ ) } +
@@ -149,6 +152,9 @@ export default function Devices() { {item?.deviceLabel}

+ Room: {item?.roomName} +

+

Device:{" "} {icons[item.deviceName as keyof typeof icons]?.label ?? item.deviceName} @@ -156,10 +162,6 @@ export default function Devices() {

Status: {item?.payload?.toString()}

-

- {item?.towerNumber}/{item?.floorName}/{item?.unitNumber}/ - {item?.roomName} -

{item?.deviceName === "AC" && ( <> diff --git a/src/features/settings/index.tsx b/src/features/settings/index.tsx index 008b97d..d3c7c26 100644 --- a/src/features/settings/index.tsx +++ b/src/features/settings/index.tsx @@ -1,12 +1,8 @@ /* eslint-disable react-hooks/set-state-in-effect */ import { useEffect, useState } from "react"; -import { - saveMerchant, - getMerchant, -} from "../../utils/storage"; +import { saveMerchant, getMerchant, clearDevice } from "../../utils/storage"; import { useNavigate } from "@tanstack/react-router"; - export default function SettingsFeature() { const navigate = useNavigate(); @@ -18,10 +14,16 @@ export default function SettingsFeature() { }); const [loading, setLoading] = useState(false); +function isObjectValueDifferent( + a: MerchantForm, + b: MerchantForm +): boolean { + return (Object.keys(a) as (keyof MerchantForm)[]).some( + (key) => a[key] !== b[key] + ); +} - function handleChange( - e: React.ChangeEvent - ) { + function handleChange(e: React.ChangeEvent) { const { name, value } = e.target; setForm((prev) => ({ ...prev, @@ -29,19 +31,28 @@ export default function SettingsFeature() { })); } - function handleSubmit(e: React.FormEvent) { - e.preventDefault(); - if (!isFormValid) return; +function handleSubmit(e: React.FormEvent) { + e.preventDefault(); - setLoading(true); - saveMerchant(form); + const merchant = getMerchant(); + if (!merchant || !form) return; + if (!isFormValid) return; - setTimeout(() => { - setLoading(false); - navigate({ to: "/" }); - }, 200); + const isDifferent = isObjectValueDifferent(merchant, form); + + if (isDifferent) { + clearDevice(); // reset device kalau merchant berubah } + setLoading(true); + saveMerchant(form); + + setTimeout(() => { + setLoading(false); + navigate({ to: "/" }); + }, 200); +} + useEffect(() => { const merchant = getMerchant(); if (merchant) { @@ -113,13 +124,13 @@ export default function SettingsFeature() { type="submit" disabled={!isFormValid || loading} className=" - w-full py-2 rounded-lg mt-8 text-white + w-full py-2 rounded-lg mt-8 text-white cursor-pointer bg-orange-500 disabled:bg-neutral-400 disabled:cursor-not-allowed " > - {loading ? "Saving..." : "Save Device"} + {loading ? "Saving..." : "Save"} ); diff --git a/src/pages/device/add.tsx b/src/pages/device/add.tsx index eaf3d91..9c63457 100644 --- a/src/pages/device/add.tsx +++ b/src/pages/device/add.tsx @@ -5,7 +5,7 @@ export default function AddDevicePage() { return ( diff --git a/src/utils/storage.ts b/src/utils/storage.ts index c9dd727..fe61c00 100644 --- a/src/utils/storage.ts +++ b/src/utils/storage.ts @@ -13,6 +13,10 @@ export function saveDevices(devices: DeviceData[]) { localStorage.setItem(STORAGE_KEY, JSON.stringify(devices)); } +export function clearDevice() { + localStorage.removeItem(STORAGE_KEY); +} + export function isDuplicateDevice( devices: DeviceData[], newDevice: DeviceData