feat(http): rework frontend project structure

The http client globally uses the base URL from the selected environment
in the app configuration. The selected environment is based on the
running location of the app and can be changed centrally.

---

 src/configuration/fetch-config.js  | 33 +++++++++++++++++++++++++++++++
 src/configuration/legendsrising.js | 17 ----------------
 src/view-models/app.js             |  7 +++++--
 3 files changed, 38 insertions(+), 19 deletions(-)

Author: Marc Scheib

src/configuration/fetch-config.js

@@ -0,0 +1,33 @@
+import {HttpClient} from 'aurelia-fetch-client';
+import {inject} from 'aurelia-framework';
+import {Configure} from 'aurelia-configuration';
+
+@inject(HttpClient, Configure)
+export default class {
+  constructor(httpClient, configure) {
+    this.httpClient = httpClient;
+    this.configuration = configure;
+  }
+
+  configure() {
+    this.httpClient.configure(config => {
+      config
+        .withDefaults({
+          headers: {
+            'Accept': 'application/json'
+          }
+        })
+        .withBaseUrl(this.configuration.get('api.endpoint'))
+        .withInterceptor({
+          request(request) {
+            console.log(`Requesting ${request.method} ${request.url}`);
+            return request; // you can return a modified Request, or you can short-circuit the request by returning a Response
+          },
+          response(response) {
+            console.log(`Received ${response.status} ${response.url}`);
+            return response; // you can return a modified Response
+          }
+        });
+    });
+  }
+}

src/configuration/legendsrising.js

@@ -1,7 +1,5 @@
 import {ViewLocator, LogManager} from 'aurelia-framework';
 import {ConsoleAppender} from 'aurelia-logging-console';
-import {HttpClient} from 'aurelia-fetch-client';
-import {Configure} from 'aurelia-configuration';
 import authConfig from './auth-config';
 
 LogManager.addAppender(new ConsoleAppender());
@@ -35,20 +33,5 @@ export function configure(aurelia) {
       baseConfig.configure(authConfig);
     });
 
-  aurelia.container.registerInstance(HttpClient, new HttpClient().configure(config => {
-    config
-      .withBaseUrl('http://lr.local/api')//configure.get('api.endpoint'))
-      .withInterceptor({
-        request(request) {
-          console.log(`Requesting ${request.method} ${request.url}`);
-          return request; // you can return a modified Request, or you can short-circuit the request by returning a Response
-        },
-        response(response) {
-          console.log(`Received ${response.status} ${response.url}`);
-          return response; // you can return a modified Response
-        }
-      });
-  }));
-
   aurelia.start().then(a => a.setRoot('view-models/app', document.body));
 }

src/view-models/app.js

@@ -2,19 +2,22 @@ import {inject} from 'aurelia-framework';
 import {Router} from 'aurelia-router';
 import {FetchConfig} from 'aurelia-auth';
 import AppRouterConfig from '../configuration/router-config';
+import AppFetchConfig from '../configuration/fetch-config';
 import 'jquery';
 import 'twbs/bootstrap';
 
-@inject(Router, FetchConfig, AppRouterConfig)
+@inject(Router, FetchConfig, AppRouterConfig, AppFetchConfig)
 export class App {
-  constructor(router, fetchConfig, appRouterConfig) {
+  constructor(router, fetchConfig, appRouterConfig, appFetchConfig) {
     this.router = router;
     this.fetchConfig = fetchConfig;
     this.appRouterConfig = appRouterConfig;
+    this.appFetchConfig = appFetchConfig;
   }
 
   activate() {
     this.fetchConfig.configure();
     this.appRouterConfig.configure();
+    this.appFetchConfig.configure();
   }
 }