feat(topics) - add list topic

src/features/settings/index.tsx

@@ -11,17 +11,15 @@ export default function SettingsFeature() {
     tower: "",
     floor: "",
     unit: "",
+    credential: "",
   });
   const [loading, setLoading] = useState<boolean>(false);
 
-function isObjectValueDifferent(
-  a: MerchantForm,
-  b: MerchantForm
-): boolean {
-  return (Object.keys(a) as (keyof MerchantForm)[]).some(
-    (key) => a[key] !== b[key]
-  );
-}
+  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<HTMLInputElement>) {
     const { name, value } = e.target;
@@ -31,29 +29,26 @@ function isObjectValueDifferent(
     }));
   }
 
-function handleSubmit(e: React.FormEvent) {
-  e.preventDefault();
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
 
-  const merchant = getMerchant();
+    const merchant = getMerchant();
 
-  if(merchant){
-    const isDifferent = isObjectValueDifferent(merchant, form);
-    if (isDifferent) {
-      clearDevice(); // reset device kalau merchant berubah
+    if (merchant) {
+      const isDifferent = isObjectValueDifferent(merchant, form);
+      if (isDifferent) {
+        clearDevice(); // reset device kalau merchant berubah
+      }
     }
 
+    setLoading(true);
+    saveMerchant(form);
+
+    setTimeout(() => {
+      setLoading(false);
+      navigate({ to: "/" });
+    }, 200);
   }
-  
-
-
-  setLoading(true);
-  saveMerchant(form);
-
-  setTimeout(() => {
-    setLoading(false);
-    navigate({ to: "/" });
-  }, 200);
-}
 
   useEffect(() => {
     const merchant = getMerchant();
@@ -119,6 +114,18 @@ function handleSubmit(e: React.FormEvent) {
               className="p-2 border border-neutral-200 w-full rounded-md"
             />
           </div>
+
+          <div>
+            <label className="mb-1 text-neutral-900 block font-semibold">
+              Credential
+            </label>
+            <input
+              name="credential"
+              value={form.credential}
+              onChange={handleChange}
+              className="p-2 border border-neutral-200 w-full rounded-md"
+            />
+          </div>
         </div>
       </div>