feat!: use fetch service

BREAKING CHANGE: The addon now requires a fetch service that handles
authentication. See `dummy/app/services/fetch.js` for an example
implementation.

README.md

@@ -48,6 +48,7 @@ constructor(...args) {
           "session",
           "intl",
           "notification",
+          "fetch",
           "alexandria-config",
         ],
       },

addon/components/document-card.js

@@ -9,6 +9,7 @@ export default class DocumentCardComponent extends Component {
   @service notification;
   @service intl;
   @service("alexandria-config") config;
+  @service fetch;
 
   get classes() {
     const classes = [
@@ -76,12 +77,7 @@ export default class DocumentCardComponent extends Component {
         )}`;
       }
 
-      const transfer = yield fetch(url, {
-        mode: "cors",
-        headers: {
-          Authorization: `Bearer ${this.config.accessToken}`,
-        },
-      });
+      const transfer = yield this.fetch.fetch(url, { mode: "cors" });
       const bytes = yield transfer.blob();
       saveAs(bytes, `Download-${this.args.documents.length}-files.zip`);
     }

addon/engine.js

@@ -11,7 +11,7 @@ export default class EmberAlexandriaEngine extends Engine {
   Resolver = Resolver;
 
   dependencies = {
-    services: ["session", "intl", "notification", "alexandria-config"],
+    services: ["session", "intl", "notification", "fetch", "alexandria-config"],
   };
 }
 

tests/dummy/app/app.js

@@ -12,7 +12,13 @@ export default class App extends Application {
   engines = {
     "ember-alexandria": {
       dependencies: {
-        services: ["session", "intl", "notification", "alexandria-config"],
+        services: [
+          "session",
+          "intl",
+          "notification",
+          "fetch",
+          "alexandria-config",
+        ],
       },
     },
   };

tests/dummy/app/services/fetch.js

@@ -0,0 +1,54 @@
+import Service, { inject as service } from "@ember/service";
+import { isEmpty } from "@ember/utils";
+import fetch from "fetch";
+
+const CONTENT_TYPE = "application/vnd.api+json";
+
+const cleanObject = (obj) => {
+  return Object.entries(obj).reduce((clean, [key, value]) => {
+    return {
+      ...clean,
+      ...(isEmpty(value) ? {} : { [key]: value }),
+    };
+  }, {});
+};
+
+export default class FetchService extends Service {
+  @service session;
+
+  async fetch(resource, init = {}) {
+    init.headers = cleanObject({
+      ...this.session.headers,
+      accept: CONTENT_TYPE,
+      "content-type": CONTENT_TYPE,
+      ...(init.headers || {}),
+    });
+
+    const response = await fetch(resource, init);
+
+    if (!response.ok) {
+      if (response.status === 401) {
+        return this.session.handleUnauthorized();
+      }
+
+      const contentType = response.headers.map["content-type"];
+      let body = "";
+
+      if (
+        ["application/json", "application/vnd.api+json"].includes(contentType)
+      ) {
+        body = (await response.json())?.errors;
+      } else if (contentType === "text/plain") {
+        body = await response.text();
+      }
+
+      // throw an error containing a human readable message
+      throw new Error(
+        `Fetch request to URL ${response.url} returned ${response.status} ${response.statusText}:\n\n${body}`,
+        { cause: body },
+      );
+    }
+
+    return response;
+  }
+}

tests/dummy/mirage/config.js

@@ -24,7 +24,7 @@ export default function makeServer(config) {
 
       this.put("/file-upload", () => new Response(201, {}, {}));
 
-      this.get("/files/multi", 200);
+      this.get("/files/multi", () => new Response(200, {}, {}));
     },
   });
 }