client/web: pull SynoToken logic into apiFetch

Updates tailscale/corp#13775

client/web/src/api.ts

@@ -1,12 +1,26 @@
 let csrfToken: string
 
-// apiFetch wraps the standard JS fetch function
+// apiFetch wraps the standard JS fetch function with csrf header
-// with csrf header management.
+// management and param additions specific to the web client.
+//
+// apiFetch adds the `api` prefix to the request URL,
+// so endpoint should be provided without the `api` prefix
+// (i.e. provide `/data` rather than `api/data`).
 export function apiFetch(
-  input: RequestInfo | URL,
+  endpoint: string,
-  init?: RequestInit | undefined
+  init?: RequestInit | undefined,
+  addURLParams?: Record<string, string>
 ): Promise<Response> {
-  return fetch(input, {
+  const urlParams = new URLSearchParams(window.location.search)
+  const nextParams = new URLSearchParams(addURLParams)
+  const token = urlParams.get("SynoToken")
+  if (token) {
+    nextParams.set("SynoToken", token)
+  }
+  const search = nextParams.toString()
+  const url = `api${endpoint}${search ? `?${search}` : ""}`
+
+  return fetch(url, {
     ...init,
     headers: withCsrfToken(init?.headers),
   }).then((r) => {

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

@@ -35,21 +35,14 @@ export default function useNodeData() {
   const [data, setData] = useState<NodeData>()
   const [isPosting, setIsPosting] = useState<boolean>(false)
 
-  const fetchNodeData = useCallback(() => {
+  const fetchNodeData = useCallback(
-    const urlParams = new URLSearchParams(window.location.search)
+    () =>
-    const nextParams = new URLSearchParams()
+      apiFetch("/data")
-    const token = urlParams.get("SynoToken")
+        .then((r) => r.json())
-    if (token) {
+        .then((d) => setData(d))
-      nextParams.set("SynoToken", token)
+        .catch((error) => console.error(error)),
-    }
+    [setData]
-    const search = nextParams.toString()
+  )
-    const url = `api/data${search ? `?${search}` : ""}`
-
-    apiFetch(url)
-      .then((r) => r.json())
-      .then((d) => setData(d))
-      .catch((error) => console.error(error))
-  }, [setData])
 
   const updateNode = useCallback(
     (update: NodeUpdate) => {
@@ -77,17 +70,7 @@ export default function useNodeData() {
             : data.AdvertiseExitNode,
       }
 
-      const urlParams = new URLSearchParams(window.location.search)
-      const nextParams = new URLSearchParams({ up: "true" })
-      const token = urlParams.get("SynoToken")
-      if (token) {
-        nextParams.set("SynoToken", token)
-      }
-      const search = nextParams.toString()
-      const url = `api/data${search ? `?${search}` : ""}`
-
       var body, contentType: string
-
       if (data.IsUnraid) {
         const params = new URLSearchParams()
         params.append("csrf_token", data.UnraidToken)
@@ -99,11 +82,15 @@ export default function useNodeData() {
         contentType = "application/json"
       }
 
-      apiFetch(url, {
+      apiFetch(
-        method: "POST",
+        "/data",
-        headers: { Accept: "application/json", "Content-Type": contentType },
+        {
-        body: body,
+          method: "POST",
-      })
+          headers: { Accept: "application/json", "Content-Type": contentType },
+          body: body,
+        },
+        { up: "true" }
+      )
         .then((r) => r.json())
         .then((r) => {
           setIsPosting(false)