diff --git a/declaration.d.ts b/declaration.d.ts index 0292a33..92bdf7d 100644 --- a/declaration.d.ts +++ b/declaration.d.ts @@ -1 +1,9 @@ declare module "*.scss"; +declare var __CONFIG__: SettingType; + +type SettingType = { + apiUrl: string; + apiVersion: string; + ssl: string; + appName: string; +}; diff --git a/src/common/core/BaseElement/BaseElement.ts b/src/common/core/BaseElement/BaseElement.ts index 9c66ff8..a4abdc4 100644 --- a/src/common/core/BaseElement/BaseElement.ts +++ b/src/common/core/BaseElement/BaseElement.ts @@ -1,5 +1,10 @@ import { html, render, TemplateResult } from "@github/jtml"; -import { AppMainElement, AppModalElement, AppRootElement } from "components/"; +import { + AppLoaderElement, + AppMainElement, + AppModalElement, + AppRootElement, +} from "components/"; import { AppService, RouterService } from "core/services"; import { AuthStore } from "core/store"; import { closest } from "core/utils"; @@ -33,6 +38,9 @@ class BaseElement extends HTMLElement { public get mainRoot(): AppRootElement { return this.appMain?.mainRoot; } + public get appLoader(): AppLoaderElement { + return this.appMain?.appLoader; + } public get isAuth(): boolean { return this.appMain?.isAuth(); diff --git a/src/components/app-loader/AppLoaderElement.ts b/src/components/app-loader/AppLoaderElement.ts new file mode 100644 index 0000000..f2c0bc7 --- /dev/null +++ b/src/components/app-loader/AppLoaderElement.ts @@ -0,0 +1,63 @@ +import { controller, target } from "@github/catalyst"; +import { html } from "@github/jtml"; +import { BaseComponentElement } from "common/"; + +@controller +class AppLoaderElement extends BaseComponentElement { + private finished: boolean = true; + private _loading: number = 0; + + constructor() { + super(); + } + + public start = () => { + this.finished = false; + this._loading++; + this.update(); + }; + + public stop = () => { + if (this._loading > 0) { + this._loading--; + } + console.log(this._loading); + if (this._loading == 0) { + this.finishInitiate(); + } + this.update(); + }; + + public get loading() { + return this._loading > 0; + } + + private finishInitiate = () => { + setTimeout(() => { + this.finished = true; + this.update(); + }, 300); + }; + + elementConnected = (): void => { + this.update(); + }; + + public setFinished = () => {}; + + render = () => { + const renderLoader = (finished: boolean, loading: boolean) => { + if (!finished && !loading) { + console.log("Removing"); + return html`
`; + } else if (loading) { + console.log("loading"); + return html`
`; + } + return html``; + }; + return html`${renderLoader(this.finished, this.loading)}`; + }; +} + +export type { AppLoaderElement }; diff --git a/src/components/app-main/AppMainElement.ts b/src/components/app-main/AppMainElement.ts index ce9e043..92c4311 100644 --- a/src/components/app-main/AppMainElement.ts +++ b/src/components/app-main/AppMainElement.ts @@ -3,6 +3,7 @@ import { AppService, HttpClient, RouterService } from "core/services"; import { AuthStore } from "core/store"; import { AppModalElement, AppRootElement } from "components/"; import { closest } from "core/utils"; +import { AppLoaderElement } from "components/app-loader/AppLoaderElement"; @controller class AppMainElement extends HTMLElement { @@ -12,6 +13,7 @@ class AppMainElement extends HTMLElement { public appService: AppService; @target appModal: AppModalElement; @target mainRoot: AppRootElement; + @target appLoader: AppLoaderElement; @closest appMain: AppMainElement; public domEvents: any = { routechanged: new Event("routechanged"), @@ -24,6 +26,7 @@ class AppMainElement extends HTMLElement { } connectedCallback() { if (this.appMain !== this) return; + this.createLoader(); const mainRoot = this.createMainRoot(); this.httpClient = new HttpClient(); this.appService = new AppService(this, this.httpClient); @@ -129,6 +132,12 @@ class AppMainElement extends HTMLElement { return _appModal; }; + private createLoader = () => { + const _loader = document.createElement("app-loader"); + _loader.setAttribute("data-target", "app-main.appLoader"); + this.appendChild(_loader); + }; + private createModalContent = (element: string) => { const _modalElement = document.createElement(element); const _divEl = document.createElement("div"); diff --git a/src/components/app-menu/AppMenuElement.ts b/src/components/app-menu/AppMenuElement.ts index e4a6c12..a3bd451 100644 --- a/src/components/app-menu/AppMenuElement.ts +++ b/src/components/app-menu/AppMenuElement.ts @@ -132,7 +132,7 @@ class AppMenuElement extends BaseComponentElement { return html`
- ${menuHeader("Wallets")} ${regularMenu("/", "Home")} + ${menuHeader(__CONFIG__.appName)} ${regularMenu("/", "Home")} ${authMenu("/history", "Transaction History")} ${authMenu( "/wallet/all", diff --git a/src/components/index.ts b/src/components/index.ts index 9502f3c..029ce17 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -6,5 +6,8 @@ export * from "./app-root/AppRootElement"; export * from "./app-slot/AppSlotElement"; export * from "./app-menu/AppMenuElement"; export * from "./input-field/InputFieldElement"; +export * from "./app-loader/AppLoaderElement"; + +// LAST export * from "./app-main/AppMainElement"; export * from "./app-shadow/AppShadowElement"; diff --git a/src/configs/development/app-settings.json b/src/configs/development/app-settings.json index 1a74f7a..b8b1613 100644 --- a/src/configs/development/app-settings.json +++ b/src/configs/development/app-settings.json @@ -1,5 +1,6 @@ { - "apiUrl": "main-wallet--dtnyc2vcdgu2re9j-gtw.qovery.io", + "apiUrl": "localhost:4000", "apiVersion": "v1", - "ssl": true + "ssl": false, + "appName": "Wallets" } \ No newline at end of file diff --git a/src/core/services/app-service/AppService.ts b/src/core/services/app-service/AppService.ts index b5e55be..1284d90 100644 --- a/src/core/services/app-service/AppService.ts +++ b/src/core/services/app-service/AppService.ts @@ -17,11 +17,13 @@ class AppService { Authorization: `BEARER ${this.appMain?.authStore?.token}`, }; try { + this?.appMain?.appLoader?.start?.(); const response = await this.httpClient.post( url, data, headersParam ); + this?.appMain?.appLoader?.stop?.(); if ( response?.statusCode == 400 || response?.statusCode == 500 || @@ -35,6 +37,7 @@ class AppService { } return response; } catch (err) { + this?.appMain?.appLoader?.stop?.(); throw err; } }; @@ -49,7 +52,9 @@ class AppService { Authorization: `BEARER ${this.appMain?.authStore?.token}`, }; try { + this?.appMain?.appLoader?.start?.(); const response = await this.httpClient.put(url, data, headersParam); + this?.appMain?.appLoader?.stop?.(); if ( response?.statusCode == 400 || response?.statusCode == 500 || @@ -63,6 +68,7 @@ class AppService { } return response; } catch (err) { + this?.appMain?.appLoader?.stop?.(); throw err; } }; @@ -77,11 +83,13 @@ class AppService { Authorization: `BEARER ${this.appMain?.authStore?.token}`, }; try { + this?.appMain?.appLoader?.start?.(); const response = await this.httpClient.delete( url, data, headersParam ); + this?.appMain?.appLoader?.stop?.(); if ( response?.statusCode == 400 || response?.statusCode == 500 || @@ -95,6 +103,7 @@ class AppService { } return response; } catch (err) { + this?.appMain?.appLoader?.stop?.(); throw err; } }; @@ -109,11 +118,13 @@ class AppService { Authorization: `BEARER ${this.appMain?.authStore?.token}`, }; try { + this?.appMain?.appLoader?.start?.(); const response = await this.httpClient.get( url, params, headersParam ); + this?.appMain?.appLoader?.stop?.(); if ( response?.statusCode == 400 || response?.statusCode == 500 || @@ -127,6 +138,7 @@ class AppService { } return response; } catch (err) { + this?.appMain?.appLoader?.stop?.(); throw err; } }; diff --git a/src/core/services/http-service/HttpClient.ts b/src/core/services/http-service/HttpClient.ts index 4bfe777..a4db320 100644 --- a/src/core/services/http-service/HttpClient.ts +++ b/src/core/services/http-service/HttpClient.ts @@ -1,11 +1,9 @@ -import settings from "configs/development/app-settings.json"; - class HttpClient { private url: string; constructor() { - this.url = `${settings.ssl ? "https" : "http"}://${settings.apiUrl}/${ - settings.apiVersion - }`; + this.url = `${__CONFIG__.ssl ? "https" : "http"}://${ + __CONFIG__.apiUrl + }/${__CONFIG__.apiVersion}`; } post(url: string, data: Object, headersParam: HeadersInit): Promise { diff --git a/src/core/store/AuthStore.ts b/src/core/store/AuthStore.ts index 07cf56d..74cd902 100644 --- a/src/core/store/AuthStore.ts +++ b/src/core/store/AuthStore.ts @@ -44,10 +44,12 @@ class AuthStore { checkToken = async (token: string) => { try { - const response = await this.authService.checkToken({ token }); - if (!(response && response.valid)) { - this.token = null; - this.appMain.routerService.goTo("/token-expired"); + if (token && token !== "null") { + const response = await this.authService.checkToken({ token }); + if (!(response && response.valid)) { + this.token = null; + this.appMain.routerService.goTo("/token-expired"); + } } } catch (err) { this.token = null; diff --git a/src/styles/app-loader/app-loader.scss b/src/styles/app-loader/app-loader.scss new file mode 100644 index 0000000..2614f49 --- /dev/null +++ b/src/styles/app-loader/app-loader.scss @@ -0,0 +1,27 @@ +.loader { + position: absolute; + top: 0; + left: 0; + height: 5px; + width: 0; + background-color: $blue-09; + z-index: 2000; + &.--loading { + animation: animateBar 5s linear; + } + + &.--removing { + width: 100%; + } +} + +.progress .progress-bar { +} +@keyframes animateBar { + 0% { + width: 0; + } + 100% { + width: 100%; + } +} diff --git a/src/styles/app-loader/index.scss b/src/styles/app-loader/index.scss new file mode 100644 index 0000000..a46897d --- /dev/null +++ b/src/styles/app-loader/index.scss @@ -0,0 +1 @@ +@import "./app-loader.scss"; diff --git a/src/styles/main.scss b/src/styles/main.scss index f8a34a6..ee309ce 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -4,3 +4,4 @@ @import "./sidebar/index.scss"; @import "./modal/index.scss"; @import "./table/index.scss"; +@import "./app-loader/index.scss"; diff --git a/webpack.config.js b/webpack.config.js index d4345d5..16282f7 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,5 +1,7 @@ const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); +const settings = require("./src/configs/development/app-settings.json"); +const { DefinePlugin } = require('webpack'); const alias = { common: path.resolve(__dirname, '/common'), @@ -83,6 +85,9 @@ module.exports = { new HtmlWebpackPlugin({ template: './src/index.html' }), + new DefinePlugin({ + __CONFIG__: JSON.stringify(settings) + }) ], resolve: { extensions: ['.js', '.ts'],