wrap ky in object, add helper method for setting current title (#638)

babel.config.json

@@ -24,8 +24,8 @@
       }
     ],
     [ // required for svelte-jsx and svelte-fragment-component
-      '@babel/plugin-transform-react-jsx',
-      {runtime: 'automatic', importSource: 'svelte-jsx'}
+      "@babel/plugin-transform-react-jsx",
+      {"runtime": "automatic", "importSource": "svelte-jsx"}
     ]
   ]
 }

examples/demo/src/app.config.js

@@ -4,7 +4,7 @@ import appName from './app.module'
 import './config.router'
 import appState from 'angle-grinder/src/tools/AppState'
 import {setConfig} from 'angle-grinder/src/tools/AppConfig'
-import {setClientConfig} from "angle-grinder/src/dataApi/ky";
+import {setClientConfig} from "angle-grinder/src/dataApi/kyClient";
 
 const app = angular.module(appName)
 // export default app.name

examples/demo/src/svelte/Lists/ListSimple.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Avatar, Columns, Col, BlockTitle, Card, CardContent, Icon, List, ListItem } from 'angle-grinder/svelte'
-
+  import { SkeletonBlock } from 'skeleton-elements/svelte';
   let simpleList = ['Item 1', 'Item 2', 'Item 3']
   let dataList = [
     {name: 'DSO', val: 39},
@@ -59,6 +59,14 @@
 <BlockTitle>Contact List</BlockTitle>
 <Card>
   <CardContent class="p0">
+    <List mediaList v-if="loading">
+      <ListItem class={`skeleton-text skeleton-effect-wave`} title="Full Name" subtitle="Position">
+        <span slot="media">
+
+          <SkeletonBlock style="width: 40px; height: 40px; border-radius: 50%" />
+        </span>
+      </ListItem>
+    </List>
     <List>
       <ListItem link={noref} header="Name" title="John Doe">
         <Avatar slot="media" class="is-small" imgSrc="/assets/images/photos/beard-guy.jpg"></Avatar>

examples/grails-demo/src/main.js

@@ -13,7 +13,7 @@ import './app.config'
 import './AppCtrl'
 
 import './grids'
-import {setClientConfig} from 'angle-grinder/src/dataApi/ky'
+import {setClientConfig} from 'angle-grinder/src/dataApi/kyClient'
 
 setClientConfig({prefixUrl: 'http://localhost:8080'})
 $log.debugEnabled(true)

src/dataApi/AppConfigApi.js

@@ -1,4 +1,4 @@
-import { client as ky } from './ky'
+import kyApi from './kyClient'
 
 class LocalCache {
   _values = {}
@@ -45,7 +45,7 @@ export class AppConfigApi {
     if (_cache.contains(key)) {
       return _cache.get(key)
     } else {
-      const cfg = await ky.get(key).json()
+      const cfg = await kyApi.client.get(key).json()
       _cache.set(key, cfg)
       return cfg
     }

src/dataApi/RestDataApi.js

@@ -9,12 +9,16 @@ export default class RestDataApi {
    *
    * @param prefixUrl The endpoint url prefix ex: /api or http://foo.com/api
    */
-  constructor(endpoint, api) {
+  constructor(endpoint, kyApi) {
     // this.prefixUrl = prefixUrl
     this.endpoint = endpoint
     // this.api = ky.create({prefixUrl: prefixUrl});
     this._idProp = 'id'
-    this.api = api || ky
+    this.kyApi = kyApi
+  }
+
+  get api(){
+    return this.kyApi.client || ky
   }
 
   //

src/dataApi/kyClient.js

@@ -0,0 +1,30 @@
+import ky from 'ky'
+import globalLoader from '../tools/globalLoader'
+
+
+// we wrap it like this so we can import the same instance
+// and when setClientConfig it will set it up and then every where its used
+// can ref it with kyApi.client and it will get the same reference
+const kyApi = {
+  client:{}
+}
+
+const defaultKy = ky.extend({
+  hooks: {
+    beforeRequest: [
+      request => {
+        globalLoader.start()
+      }
+    ],
+    afterResponse: [
+			(_request, _options, response) => {
+       globalLoader.complete()
+      }]
+  }
+})
+
+export const setClientConfig = (config) => {
+  kyApi.client = defaultKy.extend(config)
+}
+
+export default kyApi

src/styles/framework7/framework7.less

@@ -59,3 +59,6 @@
 @import '~framework7/components/input/input.less';
 @import '~framework7/components/calendar/calendar.less';
 @import '~framework7/components/popover/popover.less';
+
+//misc
+@import '~framework7/components/skeleton/skeleton.less';

src/tools/AppState.js

@@ -53,6 +53,10 @@ class AppState {
     return this.$state.current?.data?.title
   }
 
+  setCurrentTitle(dataTitle) {
+    this.$state.current.data.title = dataTitle
+  }
+
   /**
    * construct the page title from app name and title to show on head and browser tab
    */