feat: added tag selection and tag loading

ref: N25B-345

src/pages/GesturePage/GesturePage.tsx

@@ -7,45 +7,60 @@ import { useState } from 'react'
 export default function GesturePage() {
 
   const [tags, setTags] = useState([])
-  function getTags(){
+  const [selectedTag, setSelectedTag] = useState("");
-    fetch(
+
-      "http://localhost:8000/robot/get_available_gesture_tags",
+  async function getTags() {
-      {
+    try {
-      method: "GET"
+      const res = await fetch("http://localhost:8000/robot/get_available_gesture_tags");
-      }
+      if (!res.ok) throw new Error("Failed communicating with the backend.");
-    ).then((res) => {
+      const jsonRes = await res.json();
-    if (!res.ok) throw new Error("Failed communicating with the backend.")
+      setTags(jsonRes["tags"]);
-    res.json().then((jsonRes) => setTags(jsonRes["tags"])) 
+    } catch (err) {
-    
+      console.error("Failed to fetch tags:", err);
-    }).catch(() => console.log("Failed to send program to the backend."));
+    }
   }
 
-  const gesture = {endpoint: "actuate/gesture/tag", data: "happy"}
+  async function doGesture() {
-  function doGesture(){
+    if (!selectedTag) {
-    fetch(
+      alert("Please select a gesture first.");
-    "http://localhost:8000/robot/command",
+      return;
-    {
+    }
-      method: "POST",
+
-      headers: {"Content-Type": "application/json"},
+    const gesture = { endpoint: "actuate/gesture/tag", data: selectedTag };
-      body: JSON.stringify(gesture),
+
+    try {
+      const res = await fetch("http://localhost:8000/robot/command", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(gesture),
+      });
+      if (!res.ok) throw new Error("Failed communicating with the backend.");
+      console.log(`Successfully sent gesture '${selectedTag}' to the backend.`);
+    } catch (err) {
+      console.error("Failed to send gesture command:", err);
     }
-  ).then((res) => {
-    if (!res.ok) throw new Error("Failed communicating with the backend.")
-    console.log("Successfully sent the gesture command to the backend.");
-  }).catch(() => console.log("Failed to send gesture command to the backend."));
   }
 
   return (
-    <div className="card">
+    <div className="card p-4 space-y-4">
-      <button onClick={getTags}>
+      <button onClick={getTags}>Get Tags</button>
-        Get Tags
-      </button>
-
-      <button onClick={doGesture}>
-        Do Gesture
-      </button>
 
+      <select
+        value={selectedTag}
+        onChange={(e) => setSelectedTag(e.target.value)}
+        disabled={tags.length === 0}
+      >
+        <option value="">
+          {tags.length === 0 ? "No tags loaded yet" : "-- Select a gesture --"}
+        </option>
+        {tags.map((tag) => (
+          <option key={tag} value={tag}>
+            {tag}
+          </option>
+        ))}
+      </select>
 
+      <button onClick={doGesture}>Do Gesture</button>
     </div>
-  )
+  );
 }