From f12f34352aa35a43b28fcc49975976fdc63450fa Mon Sep 17 00:00:00 2001
From: dikapratana <dikapratana11@gmail.com>
Date: Fri, 6 Feb 2026 16:16:08 +0700
Subject: [PATCH] feat(topic state and command) - add tab

---
 src/features/topics/hooks/queries.ts     | 16 ++++++++-
 src/features/topics/index.tsx            | 41 ++++++++++++++++--------
 src/features/topics/sections/command.tsx | 22 +++++++++++++
 src/features/topics/sections/state.tsx   | 22 +++++++++++++
 src/repositories/device/index.ts         | 10 ++++++
 5 files changed, 96 insertions(+), 15 deletions(-)
 create mode 100644 src/features/topics/sections/command.tsx
 create mode 100644 src/features/topics/sections/state.tsx

diff --git a/src/features/topics/hooks/queries.ts b/src/features/topics/hooks/queries.ts
index 2fb83b5..6d7c2b0 100644
--- a/src/features/topics/hooks/queries.ts
+++ b/src/features/topics/hooks/queries.ts
@@ -1,10 +1,24 @@
 import { useQuery } from "@tanstack/react-query";
-import { getTopicsState } from "../../../repositories/device";
+import { getTopicsCommand, getTopicsState } from "../../../repositories/device";
 
 export function useTopics() {
   const result = useQuery({
     queryKey: ["topics/state"],
     queryFn: () => getTopicsState(),
+    gcTime: 0,
+  });
+
+  return {
+    ...result,
+    data: result?.data?.data,
+  };
+}
+
+export function useTopicCommand() {
+  const result = useQuery({
+    queryKey: ["topics/command"],
+    queryFn: () => getTopicsCommand(),
+    gcTime: 0,
   });
 
   return {
diff --git a/src/features/topics/index.tsx b/src/features/topics/index.tsx
index baa5389..a23ed39 100644
--- a/src/features/topics/index.tsx
+++ b/src/features/topics/index.tsx
@@ -1,8 +1,11 @@
-import { Edit, PlusIcon, Trash2 } from "lucide-react";
-import { useTopics } from "./hooks/queries";
+import { PlusIcon } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../../utils/classname";
+import StateSection from "./sections/state";
+import CommandSection from "./sections/command";
 
 export default function TopicsFeature() {
-  const { data } = useTopics();
+  const [tab, setTab] = useState("state");
   return (
     <div className="flex flex-col gap-4">
       <div className="p-4 flex justify-end">
@@ -11,18 +14,28 @@ export default function TopicsFeature() {
           Tambah Topic
         </button>
       </div>
-      {data?.map((item, key) => (
-        <div
-          key={key}
-          className="bg-white border-b border-neutral-200 p-4 flex justify-between"
+      <div className="flex justify-between">
+        <button
+          onClick={() => setTab("state")}
+          className={cn(
+            "w-full text-center p-x2 py-4 border-b-2 border-transparent",
+            tab === "state" && "border-amber-500",
+          )}
         >
-          <h1>{item.topic}</h1>
-          <div className="flex gap-2 ">
-            <Edit className="text-blue-500 cursor-pointer" size={18} />
-            <Trash2 className="text-red-500 cursor-pointer" size={18} />
-          </div>
-        </div>
-      ))}
+          state-reply
+        </button>
+        <button
+          onClick={() => setTab("command")}
+          className={cn(
+            "w-full text-center p-x2 py-4 border-b-2 border-transparent",
+            tab === "command" && "border-amber-500",
+          )}
+        >
+          commands
+        </button>
+      </div>
+      {tab === "state" && <StateSection />}
+      {tab === "command" && <CommandSection />}
     </div>
   );
 }
diff --git a/src/features/topics/sections/command.tsx b/src/features/topics/sections/command.tsx
new file mode 100644
index 0000000..2de6bde
--- /dev/null
+++ b/src/features/topics/sections/command.tsx
@@ -0,0 +1,22 @@
+import { useTopicCommand } from "../hooks/queries";
+import { Edit, Trash2 } from "lucide-react";
+
+export default function CommandSection() {
+  const { data } = useTopicCommand();
+  return (
+    <>
+      {data?.map((item, key) => (
+        <div
+          key={key}
+          className="bg-white border-b border-neutral-200 p-4 flex justify-between"
+        >
+          <h1>{item.topic}</h1>
+          <div className="flex gap-2 ">
+            <Edit className="text-blue-500 cursor-pointer" size={18} />
+            <Trash2 className="text-red-500 cursor-pointer" size={18} />
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}
diff --git a/src/features/topics/sections/state.tsx b/src/features/topics/sections/state.tsx
new file mode 100644
index 0000000..685cd42
--- /dev/null
+++ b/src/features/topics/sections/state.tsx
@@ -0,0 +1,22 @@
+import { useTopics } from "../hooks/queries";
+import { Edit, Trash2 } from "lucide-react";
+
+export default function StateSection() {
+  const { data } = useTopics();
+  return (
+    <>
+      {data?.map((item, key) => (
+        <div
+          key={key}
+          className="bg-white border-b border-neutral-200 p-4 flex justify-between"
+        >
+          <h1>{item.topic}</h1>
+          <div className="flex gap-2 ">
+            <Edit className="text-blue-500 cursor-pointer" size={18} />
+            <Trash2 className="text-red-500 cursor-pointer" size={18} />
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}
diff --git a/src/repositories/device/index.ts b/src/repositories/device/index.ts
index 8bfb7c0..a245cf6 100644
--- a/src/repositories/device/index.ts
+++ b/src/repositories/device/index.ts
@@ -17,6 +17,16 @@ export const postCommandStatus = async (
 };
 
 export const getTopicsState = async (): Promise<TopicData> => {
+  const res = await api.get("/topics/v1/state-reply", {
+    headers: {
+      Authorization: basicAuth(ENV.basicUsername, ENV.basicPassword),
+    },
+  });
+
+  return res.data;
+};
+
+export const getTopicsCommand = async (): Promise<TopicData> => {
   const res = await api.get("/topics/v1/commands", {
     headers: {
       Authorization: basicAuth(ENV.basicUsername, ENV.basicPassword),