Merge pull request #980 from manifoldco/dangodev/wait-for-auth

use waitForAuth on resource components

Author: DangoDev

CHANGELOG.md

@@ -5,7 +5,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project
 adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased]
+## [0.9.8] - 2020-03-30
 
 ### Fixed
 
@@ -543,7 +543,7 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - Changed the `manifold-resource-credentials` component to use the standalone `manifold-credentials`
   component.
 
-[unreleased]: https://github.com/manifoldco/ui/compare/v0.9.7...HEAD
+[0.9.8]: https://github.com/manifoldco/ui/compare/v0.9.7...v0.9.8
 [0.9.7]: https://github.com/manifoldco/ui/compare/v0.9.6...v0.9.7
 [0.9.6]: https://github.com/manifoldco/ui/compare/v0.9.5...v0.9.6
 [0.9.5]: https://github.com/manifoldco/ui/compare/v0.9.4...v0.9.5

src/components/manifold-data-resource-list/manifold-data-resource-list.tsx

@@ -1,6 +1,7 @@
 import { h, Component, Prop, State, Event, EventEmitter, Element } from '@stencil/core';
 
 import { connection } from '../../global/app';
+import { waitForAuthToken } from '../../utils/auth';
 import logger, { loadMark } from '../../utils/logger';
 import fetchAllPages from '../../utils/fetchAllPages';
 import { GraphqlFetch } from '../../utils/graphqlFetch';
@@ -38,7 +39,17 @@ export class ManifoldDataResourceList {
   @Event({ eventName: 'manifold-resourceList-click', bubbles: true }) clickEvent: EventEmitter;
 
   @loadMark()
-  componentWillLoad() {
+  async componentWillLoad() {
+    // if auth token missing, wait
+    if (!connection.getAuthToken()) {
+      await waitForAuthToken(
+        () => connection.authToken,
+        connection.waitTime,
+        () => Promise.resolve()
+      );
+    }
+
+    // start polling
     this.fetchResources();
     if (!this.paused) {
       this.interval = window.setInterval(() => this.fetchResources(), 3000);

src/components/manifold-resource-container/manifold-resource-container.tsx

@@ -2,6 +2,7 @@ import { h, Element, Component, Prop, State, Watch, Event, EventEmitter } from '
 
 import ResourceTunnel from '../../data/resource';
 import { connection } from '../../global/app';
+import { waitForAuthToken } from '../../utils/auth';
 import logger, { loadMark } from '../../utils/logger';
 import {
   ResourceStatusLabel,
@@ -42,7 +43,17 @@ export class ManifoldResourceContainer {
   }
 
   @loadMark()
-  componentWillLoad() {
+  async componentWillLoad() {
+    // if auth token missing, wait
+    if (!connection.getAuthToken()) {
+      await waitForAuthToken(
+        () => connection.authToken,
+        connection.waitTime,
+        () => Promise.resolve()
+      );
+    }
+
+    // fetch initial resource
     this.fetchResource(this.resourceLabel);
   }
 
@@ -55,11 +66,6 @@ export class ManifoldResourceContainer {
       return;
     }
 
-    // for this component, wait for auth before fetching
-    if (!connection.getAuthToken()) {
-      return;
-    }
-
     const variables: ResourceWithOwnerQueryVariables = { resourceLabel, owner: this.ownerId };
     const { data, errors } = await this.graphqlFetch<ResourceWithOwnerQuery>({
       query: queryWithOwner,

src/components/manifold-resource-list/manifold-resource-list.tsx

@@ -2,6 +2,7 @@ import { h, Component, Prop, State, Element, Watch } from '@stencil/core';
 
 import { GraphqlFetch } from '../../utils/graphqlFetch';
 import { connection } from '../../global/app';
+import { waitForAuthToken } from '../../utils/auth';
 import logger, { loadMark } from '../../utils/logger';
 import queryWithOwner from './resources-with-owner.graphql';
 import { Query, ResourceEdge, Resources_With_OwnerQueryVariables } from '../../types/graphql';
@@ -36,7 +37,17 @@ export class ManifoldResourceList {
   }
 
   @loadMark()
-  componentWillLoad() {
+  async componentWillLoad() {
+    // if auth token missing, wait
+    if (!connection.getAuthToken()) {
+      await waitForAuthToken(
+        () => connection.authToken,
+        connection.waitTime,
+        () => Promise.resolve()
+      );
+    }
+
+    // start polling
     this.fetchResources();
     if (!this.paused) {
       this.interval = window.setInterval(() => this.fetchResources(), 3000);
@@ -54,11 +65,6 @@ export class ManifoldResourceList {
       return;
     }
 
-    // for this component, wait for auth before fetching
-    if (!connection.getAuthToken()) {
-      return;
-    }
-
     const variables: Resources_With_OwnerQueryVariables = {
       first: 50,
       after: '',

src/index.ts

@@ -8,7 +8,11 @@ export async function ensureAuthToken() {
     return connection.authToken;
   }
 
-  await waitForAuthToken(() => connection.authToken, connection.waitTime, Promise.resolve);
+  await waitForAuthToken(
+    () => connection.authToken,
+    connection.waitTime,
+    () => Promise.resolve()
+  );
 
   return connection.authToken;
 }