client/web: hook up data fetching to fill --dev React UI

Updates tailscale/corp#13775

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>

client/web/src/hooks/node-data.ts

@@ -1,8 +1,4 @@
-export type UserProfile = {
-  LoginName: string
-  DisplayName: string
-  ProfilePicURL: string
-}
+import { useEffect, useState } from "react"
 
 export type NodeData = {
   Profile: UserProfile
@@ -20,29 +16,22 @@ export type NodeData = {
   IPNVersion: string
 }
 
-// testData is static set of nodedata used during development.
-// This can be removed once we have a real node data API.
-const testData: NodeData = {
-  Profile: {
-    LoginName: "amelie",
-    DisplayName: "Amelie Pangolin",
-    ProfilePicURL: "https://login.tailscale.com/logo192.png",
-  },
-  Status: "Running",
-  DeviceName: "amelies-laptop",
-  IP: "100.1.2.3",
-  AdvertiseExitNode: false,
-  AdvertiseRoutes: "",
-  LicensesURL: "https://tailscale.com/licenses/tailscale",
-  TUNMode: false,
-  IsSynology: true,
-  DSMVersion: 7,
-  IsUnraid: false,
-  UnraidToken: "",
-  IPNVersion: "0.1.0",
+export type UserProfile = {
+  LoginName: string
+  DisplayName: string
+  ProfilePicURL: string
 }
 
 // useNodeData returns basic data about the current node.
 export default function useNodeData() {
-  return testData
+  const [data, setData] = useState<NodeData>()
+
+  useEffect(() => {
+    fetch("/api/data")
+      .then((response) => response.json())
+      .then((json) => setData(json))
+      .catch((error) => console.error(error))
+  }, [])
+
+  return data
 }