@@ -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