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/components/app.tsx

@@ -7,12 +7,19 @@ export default function App() {
 
   return (
     <div className="py-14">
-      <main className="container max-w-lg mx-auto mb-8 py-6 px-8 bg-white rounded-md shadow-2xl">
-        <Header data={data} />
-        <IP data={data} />
-        <State data={data} />
-      </main>
-      <Footer data={data} />
+      {!data ? (
+        // TODO(sonia): add a loading view
+        <div className="text-center">Loading...</div>
+      ) : (
+        <>
+          <main className="container max-w-lg mx-auto mb-8 py-6 px-8 bg-white rounded-md shadow-2xl">
+            <Header data={data} />
+            <IP data={data} />
+            <State data={data} />
+          </main>
+          <Footer data={data} />
+        </>
+      )}
     </div>
   )
 }

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
 }