From a5a3b0acf556189b9a110251f5d25342d9319ef5 Mon Sep 17 00:00:00 2001
From: Joshua B <joshdev@9ci.com>
Date: Wed, 1 Dec 2021 06:22:52 -0700
Subject: [PATCH] wrap ky in object, add helper method for setting current
 title (#638)

---
 babel.config.json                             |  4 +--
 examples/demo/src/app.config.js               |  2 +-
 .../demo/src/svelte/Lists/ListSimple.svelte   | 10 ++++++-
 examples/grails-demo/src/main.js              |  2 +-
 src/dataApi/AppConfigApi.js                   |  4 +--
 src/dataApi/RestDataApi.js                    |  8 +++--
 src/dataApi/ky.js                             | 24 ---------------
 src/dataApi/kyClient.js                       | 30 +++++++++++++++++++
 src/styles/framework7/framework7.less         |  3 ++
 src/tools/AppState.js                         |  4 +++
 10 files changed, 58 insertions(+), 33 deletions(-)
 delete mode 100644 src/dataApi/ky.js
 create mode 100644 src/dataApi/kyClient.js

diff --git a/babel.config.json b/babel.config.json
index 2f4c564d6..5b7e0bd4c 100644
--- a/babel.config.json
+++ b/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"}
     ]
   ]
 }
diff --git a/examples/demo/src/app.config.js b/examples/demo/src/app.config.js
index e1a26a283..867ec60d0 100644
--- a/examples/demo/src/app.config.js
+++ b/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
diff --git a/examples/demo/src/svelte/Lists/ListSimple.svelte b/examples/demo/src/svelte/Lists/ListSimple.svelte
index c65cf2c6e..685dd9adf 100644
--- a/examples/demo/src/svelte/Lists/ListSimple.svelte
+++ b/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>
diff --git a/examples/grails-demo/src/main.js b/examples/grails-demo/src/main.js
index 14ceed2dd..1130deac7 100644
--- a/examples/grails-demo/src/main.js
+++ b/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)
diff --git a/src/dataApi/AppConfigApi.js b/src/dataApi/AppConfigApi.js
index 09e1d03d6..b86cb8b3d 100644
--- a/src/dataApi/AppConfigApi.js
+++ b/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
     }
diff --git a/src/dataApi/RestDataApi.js b/src/dataApi/RestDataApi.js
index faf72017f..c792b87a4 100644
--- a/src/dataApi/RestDataApi.js
+++ b/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
   }
 
   //
diff --git a/src/dataApi/ky.js b/src/dataApi/ky.js
deleted file mode 100644
index 27b039553..000000000
--- a/src/dataApi/ky.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import ky from 'ky'
-import globalLoader from '../tools/globalLoader'
-
-// TODO set defaults
-
-let client = ky.extend({
-  hooks: {
-    beforeRequest: [
-      request => {
-        globalLoader.start()
-      }
-    ],
-    afterResponse: [
-			(_request, _options, response) => {
-       globalLoader.complete()
-      }]
-  }
-})
-
-const setClientConfig = (config) => {
-  client = client.extend(config)
-}
-
-export { client, setClientConfig }
diff --git a/src/dataApi/kyClient.js b/src/dataApi/kyClient.js
new file mode 100644
index 000000000..d7a8de07a
--- /dev/null
+++ b/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
diff --git a/src/styles/framework7/framework7.less b/src/styles/framework7/framework7.less
index 1f7500ece..a133cb3be 100644
--- a/src/styles/framework7/framework7.less
+++ b/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';
diff --git a/src/tools/AppState.js b/src/tools/AppState.js
index 030471e82..fd6999cd1 100644
--- a/src/tools/AppState.js
+++ b/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
    */