style: apply formatting

**Note**: Yes, the imports being on multiple lines is really annoying. No, unfortunately there is no way around this currently :( prettier/prettier#5995
Navigraph · Nov 27, 2023 · b7fea34 · b7fea34
1 parent 17e0ebb
commit b7fea34
Show file tree

Hide file tree

Showing 10 changed files with 168 additions and 157 deletions.
diff --git a/Sources/Code/TypeScript/Components/NavigraphLogin.css b/Sources/Code/TypeScript/Components/NavigraphLogin.css
@@ -1,27 +1,27 @@
 .auth-container {
-    font-size: x-large;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
+  font-size: x-large;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
 }
 
 .login-button {
-    width: 200px;
-    height: 100px;
-    font-size: x-large;
-    margin-top: 5px;
-    background: white;
-    color: black;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  width: 200px;
+  height: 100px;
+  font-size: x-large;
+  margin-top: 5px;
+  background: white;
+  color: black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .qr-code {
-    width: 300px;
-    height: 300px;
-    display: none;
-}
+  width: 300px;
+  height: 300px;
+  display: none;
+}
diff --git a/Sources/Code/TypeScript/Components/NavigraphLogin.tsx b/Sources/Code/TypeScript/Components/NavigraphLogin.tsx
@@ -1,77 +1,87 @@
-import { FSComponent, DisplayComponent, VNode, Subject, ComputedSubject, MappedSubject, Subscription, ComponentProps, EventBus } from '@microsoft/msfs-sdk';
+import {
+  ComponentProps,
+  ComputedSubject,
+  DisplayComponent,
+  EventBus,
+  FSComponent,
+  MappedSubject,
+  Subject,
+  Subscription,
+  VNode,
+} from "@microsoft/msfs-sdk"
 import { CancelToken, DeviceFlowParams, User } from "navigraph/auth"
-import { AuthService } from '../Services/AuthService';
-import './NavigraphLogin.css'
+import { AuthService } from "../Services/AuthService"
+import "./NavigraphLogin.css"
 
 interface NavigraphLoginProps extends ComponentProps {
-    bus: EventBus;
+  bus: EventBus
 }
 
 export class NavigraphLogin extends DisplayComponent<NavigraphLoginProps> {
-    private readonly textRef = FSComponent.createRef<HTMLDivElement>();
-    private readonly buttonRef = FSComponent.createRef<HTMLButtonElement>();
-    private readonly qrCodeRef = FSComponent.createRef<HTMLImageElement>();
-
-    private cancelSource = CancelToken.source()
+  private readonly textRef = FSComponent.createRef<HTMLDivElement>()
+  private readonly buttonRef = FSComponent.createRef<HTMLButtonElement>()
+  private readonly qrCodeRef = FSComponent.createRef<HTMLImageElement>()
 
-    private commBusListener: ViewListener.ViewListener;
+  private cancelSource = CancelToken.source()
 
-    constructor(props: NavigraphLoginProps) {
-        super(props);
+  private commBusListener: ViewListener.ViewListener
 
-        this.commBusListener = RegisterViewListener('JS_LISTENER_COMM_BUS', () => {
-            console.log("JS_LISTENER_COMM_BUS registered");
-        });
+  constructor(props: NavigraphLoginProps) {
+    super(props)
 
-        this.commBusListener.on("NavdataUpdaterReceived", () => {
-            console.log("WASM received request");
-        })
-    }
+    this.commBusListener = RegisterViewListener("JS_LISTENER_COMM_BUS", () => {
+      console.log("JS_LISTENER_COMM_BUS registered")
+    })
 
-    public render(): VNode {
-        return (
-            <div class="auth-container">
-                <div ref={this.textRef} />
-                <div ref={this.buttonRef} onClick={this.handleClick} class="login-button" />
-                <img ref={this.qrCodeRef} class="qr-code" />
-            </div>
-        );
-    }
+    this.commBusListener.on("NavdataUpdaterReceived", () => {
+      console.log("WASM received request")
+    })
+  }
 
-    public onBeforeRender(): void {
-        super.onBeforeRender();
-    }
+  public render(): VNode {
+    return (
+      <div class="auth-container">
+        <div ref={this.textRef} />
+        <div ref={this.buttonRef} onClick={this.handleClick} class="login-button" />
+        <img ref={this.qrCodeRef} class="qr-code" />
+      </div>
+    )
+  }
 
-    public onAfterRender(node: VNode): void {
-        super.onAfterRender(node);
+  public onBeforeRender(): void {
+    super.onBeforeRender()
+  }
 
-        this.buttonRef.instance.addEventListener('click', () => this.handleClick());
+  public onAfterRender(node: VNode): void {
+    super.onAfterRender(node)
 
-        AuthService.user.sub(user => {
-            if (user) {
-                this.qrCodeRef.instance.src = '';
-                this.qrCodeRef.instance.style.display = "none";
-                this.buttonRef.instance.textContent = "Log out";
-                this.textRef.instance.textContent = `Welcome, ${user.preferred_username}`;
-            } else {
-                this.buttonRef.instance.textContent = "Sign in";
-                this.textRef.instance.textContent = "Not signed in";
-            }
-        })
-    }
+    this.buttonRef.instance.addEventListener("click", () => this.handleClick())
+
+    AuthService.user.sub(user => {
+      if (user) {
+        this.qrCodeRef.instance.src = ""
+        this.qrCodeRef.instance.style.display = "none"
+        this.buttonRef.instance.textContent = "Log out"
+        this.textRef.instance.textContent = `Welcome, ${user.preferred_username}`
+      } else {
+        this.buttonRef.instance.textContent = "Sign in"
+        this.textRef.instance.textContent = "Not signed in"
+      }
+    })
+  }
 
-    private handleClick() {
-        if (AuthService.getUser()) {
-            AuthService.signOut();
-        } else {
-            this.cancelSource = CancelToken.source() // Reset any previous cancellations
-            AuthService.signIn(p => {
-                if (p) {
-                    this.qrCodeRef.instance.src = `https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=${p.verification_uri_complete}`;
-                    this.qrCodeRef.instance.style.display = 'block'
-                    console.log(p.user_code);
-                }
-            }, this.cancelSource.token)
+  private handleClick() {
+    if (AuthService.getUser()) {
+      AuthService.signOut()
+    } else {
+      this.cancelSource = CancelToken.source() // Reset any previous cancellations
+      AuthService.signIn(p => {
+        if (p) {
+          this.qrCodeRef.instance.src = `https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=${p.verification_uri_complete}`
+          this.qrCodeRef.instance.style.display = "block"
+          console.log(p.user_code)
         }
+      }, this.cancelSource.token)
     }
-}
+  }
+}
diff --git a/Sources/Code/TypeScript/MyComponent.tsx b/Sources/Code/TypeScript/MyComponent.tsx
@@ -1,9 +1,7 @@
-import { FSComponent, DisplayComponent, VNode } from '@microsoft/msfs-sdk';
+import { DisplayComponent, FSComponent, VNode } from "@microsoft/msfs-sdk"
 
 export class MyComponent extends DisplayComponent<any> {
-    public render(): VNode {
-        return (
-            <div class='my-component'>Hello World!</div>
-        );
-    }
-}
+  public render(): VNode {
+    return <div class="my-component">Hello World!</div>
+  }
+}
diff --git a/Sources/Code/TypeScript/MyInstrument.css b/Sources/Code/TypeScript/MyInstrument.css
@@ -1,4 +1,4 @@
 #InstrumentContent {
-    width: 100%;
-    height: 100%;
-}
+  width: 100%;
+  height: 100%;
+}
diff --git a/Sources/Code/TypeScript/MyInstrument.html b/Sources/Code/TypeScript/MyInstrument.html
@@ -4,4 +4,7 @@
 
 <link rel="stylesheet" href="MyInstrument.css" />
 <script type="text/html" import-script="/JS/dataStorage.js"></script>
-<script type="text/html" import-script="/Pages/VCockpit/Instruments/Navigraph/DataUpdaterSample/MyInstrument.js"></script>
+<script
+  type="text/html"
+  import-script="/Pages/VCockpit/Instruments/Navigraph/DataUpdaterSample/MyInstrument.js"
+></script>
diff --git a/Sources/Code/TypeScript/MyInstrument.tsx b/Sources/Code/TypeScript/MyInstrument.tsx
@@ -1,35 +1,34 @@
 /// <reference types="@microsoft/msfs-types/Pages/VCockpit/Core/VCockpit" />
 
-import { EventBus, FSComponent } from '@microsoft/msfs-sdk';
-import { NavigraphLogin } from './Components/NavigraphLogin';
-import { AuthService } from './Services/AuthService';
-import './MyInstrument.css'
+import { EventBus, FSComponent } from "@microsoft/msfs-sdk"
+import { NavigraphLogin } from "./Components/NavigraphLogin"
+import { AuthService } from "./Services/AuthService"
+import "./MyInstrument.css"
 
 class MyInstrument extends BaseInstrument {
-    private readonly bus: EventBus;
+  private readonly bus: EventBus
 
-    constructor() {
-        super();
+  constructor() {
+    super()
 
-        this.bus = new EventBus;
-    }
+    this.bus = new EventBus()
+  }
 
-    get templateID(): string {
-        return 'MyInstrument';
-    }
+  get templateID(): string {
+    return "MyInstrument"
+  }
 
-    get isInteractive(): boolean {
-        return true;
-    }
+  get isInteractive(): boolean {
+    return true
+  }
 
-    public connectedCallback(): void {
-        super.connectedCallback();
+  public connectedCallback(): void {
+    super.connectedCallback()
 
-        AuthService.init(this.bus);
-
-        FSComponent.render(<NavigraphLogin bus={this.bus} />, document.getElementById('InstrumentContent'));
-    }
+    AuthService.init(this.bus)
 
+    FSComponent.render(<NavigraphLogin bus={this.bus} />, document.getElementById("InstrumentContent"))
+  }
 }
 
-registerInstrument('my-instrument', MyInstrument);
+registerInstrument("my-instrument", MyInstrument)
diff --git a/Sources/Code/TypeScript/README.md b/Sources/Code/TypeScript/README.md
@@ -1,2 +1,3 @@
 # auth flow
-show navigraph login -> get user -> publish to the bus
+
+show navigraph login -> get user -> publish to the bus
diff --git a/Sources/Code/TypeScript/lib/navigraph.ts b/Sources/Code/TypeScript/lib/navigraph.ts
@@ -1,15 +1,15 @@
 import { DataStore } from "@microsoft/msfs-sdk"
-import { initializeApp, Scope, NavigraphApp } from "@navigraph/app";
-import { getAuth } from "@navigraph/auth";
-import { getChartsAPI } from "@navigraph/charts";
+import { initializeApp, NavigraphApp, Scope } from "@navigraph/app"
+import { getAuth } from "@navigraph/auth"
+import { getChartsAPI } from "@navigraph/charts"
 
 const config: NavigraphApp = {
-    clientId: "YOUR_CLIENT_ID",
-    clientSecret: "YOUR_CLIENT_SECRET",
-    scopes: [Scope.CHARTS, Scope.TILES, Scope.FMSDATA],
+  clientId: "YOUR_CLIENT_ID",
+  clientSecret: "YOUR_CLIENT_SECRET",
+  scopes: [Scope.CHARTS, Scope.TILES, Scope.FMSDATA],
 };
 
-initializeApp(config);
+initializeApp(config)
 
 // Wait 1s before accessing datastorage
 // This is a potential workaround for the issue where datastorage does not deliver credentials on startup.

diff --git a/Sources/Code/TypeScript/rollup.config.js b/Sources/Code/TypeScript/rollup.config.js
@@ -1,32 +1,32 @@
-import typescript from '@rollup/plugin-typescript';
-import resolve from '@rollup/plugin-node-resolve';
-import copy from 'rollup-plugin-copy';
-import css from 'rollup-plugin-import-css';
+import resolve from "@rollup/plugin-node-resolve"
+import typescript from "@rollup/plugin-typescript"
+import copy from "rollup-plugin-copy"
+import css from "rollup-plugin-import-css"
 
-let DEBUG = true;
+let DEBUG = true
 
-let outputDest = '../../../PackageSources';
+let outputDest = "../../../PackageSources"
 if (DEBUG) {
-    outputDest = '../../../Packages/navigraph-aircraft-updater-sample'
+  outputDest = "../../../Packages/navigraph-aircraft-updater-sample"
 }
 
 export default {
-    input: 'MyInstrument.tsx',
-    output: {
-        dir: `${outputDest}/html_ui/Pages/VCockpit/Instruments/Navigraph/DataUpdaterSample`,
-        format: 'es'
-    },
-    plugins: [
-        css({ output: 'MyInstrument.css' }),
-        resolve(),
-        typescript(),
-        copy({
-            targets: [
-                {
-                    src: 'MyInstrument.html',
-                    dest: `${outputDest}/html_ui/Pages/VCockpit/Instruments/Navigraph/DataUpdaterSample`,
-                }
-            ]
-        })
-    ]
-}
+  input: "MyInstrument.tsx",
+  output: {
+    dir: `${outputDest}/html_ui/Pages/VCockpit/Instruments/Navigraph/DataUpdaterSample`,
+    format: "es",
+  },
+  plugins: [
+    css({ output: "MyInstrument.css" }),
+    resolve(),
+    typescript(),
+    copy({
+      targets: [
+        {
+          src: "MyInstrument.html",
+          dest: `${outputDest}/html_ui/Pages/VCockpit/Instruments/Navigraph/DataUpdaterSample`,
+        },
+      ],
+    }),
+  ],
+}