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(){
-    fetch(
-      "http://localhost:8000/robot/get_available_gesture_tags",
-      {
-      method: "GET"
-      }
-    ).then((res) => {
-    if (!res.ok) throw new Error("Failed communicating with the backend.")
-    res.json().then((jsonRes) => setTags(jsonRes["tags"])) 
+  const [selectedTag, setSelectedTag] = useState("");
 
-    }).catch(() => console.log("Failed to send program to the backend."));
+  async function getTags() {
+    try {
+      const res = await fetch("http://localhost:8000/robot/get_available_gesture_tags");
+      if (!res.ok) throw new Error("Failed communicating with the backend.");
+      const jsonRes = await res.json();
+      setTags(jsonRes["tags"]);
+    } catch (err) {
+      console.error("Failed to fetch tags:", err);
+    }
   }
 
-  const gesture = {endpoint: "actuate/gesture/tag", data: "happy"}
-  function doGesture(){
-    fetch(
-    "http://localhost:8000/robot/command",
-    {
-      method: "POST",
-      headers: {"Content-Type": "application/json"},
-      body: JSON.stringify(gesture),
+  async function doGesture() {
+    if (!selectedTag) {
+      alert("Please select a gesture first.");
+      return;
+    }
+
+    const gesture = { endpoint: "actuate/gesture/tag", data: selectedTag };
+
+    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">
-      <button onClick={getTags}>
-        Get Tags
-      </button>
-
-      <button onClick={doGesture}>
-        Do Gesture
-      </button>
+    <div className="card p-4 space-y-4">
+      <button onClick={getTags}>Get Tags</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>
-  )
+  );
 }