Handle the result of server calls

music-player/client/src/client.ts

@@ -1,3 +1,8 @@
+export type Response<A> =
+  | { type: "Success"; content: A }
+  | { type: "Failure"; content: string }
+  | { type: "Fatal"; content: string };
+
 export interface TrackInfo {
   id: string;
   track_number?: number;
@@ -8,11 +13,28 @@ export interface TrackInfo {
 }
 
 export const getTracks = (): Promise<TrackInfo[]> =>
-  fetch("/api/v1/tracks").then((r) => r.json());
+  fetch("/api/v1/tracks")
+    .then((r) => r.json())
+    .then((result: Response<TrackInfo[]>) => {
+      switch (result.type) {
+        case "Success":
+          return result.content || [];
+        case "Failure":
+          console.log("failed: ", result.content);
+          return [];
+        case "Fatal":
+          console.log("fatal: ", result.content);
+          return [];
+      }
+    });
 
-export const playTrack = (id: string): Promise<Response> =>
+export const playTrack = (id: string): Promise<void> =>
   fetch("/api/v1/play", {
     method: "POST",
     headers: { "content-type": "application/json" },
     body: JSON.stringify({ id: id }),
+  })
+    .then((r) => r.json())
+    .then((result: Response<null>) => {
+      console.log("result: ", result);
     });

music-player/server/src/bin/server.rs

@@ -16,11 +16,13 @@ use std::{
 use warp::Filter;
 
 #[derive(Clone, Debug, Deserialize)]
+#[serde(rename_all = "camelCase")]
 struct TrackRequest {
     id: String,
 }
 
 #[derive(Serialize)]
+#[serde(tag = "type", content = "content")]
 enum Response<A: Serialize> {
     Success(A),
     Failure(String),