feat: storage files refresh and load (#1415)

* feat: add refresh button on storage

Signed-off-by: peterpeterparker <[email protected]>

* feat: load assets on async login

Signed-off-by: peterpeterparker <[email protected]>

Author: peterpeterparker

studio/src/app/components/core/storage/app-storage-files/app-storage-files.tsx

@@ -1,13 +1,14 @@
-import {Component, ComponentInterface, EventEmitter, h, Host, State, Event, Prop, Watch} from '@stencil/core';
+import {Component, ComponentInterface, EventEmitter, h, Host, State, Event, Prop, Watch, Method} from '@stencil/core';
 
-import {StorageFile, StorageFilesList} from '@deckdeckgo/editor';
+import {AuthUser, StorageFile, StorageFilesList} from '@deckdeckgo/editor';
 
 import store from '../../../../stores/error.store';
 import i18n from '../../../../stores/i18n.store';
 
 import {Constants} from '../../../../types/core/constants';
 
 import {getFiles} from '../../../../providers/storage/storage.provider';
+import authStore from '../../../../stores/auth.store';
 
 @Component({
   tag: 'app-storage-files',
@@ -34,15 +35,26 @@ export class AppStorageFiles implements ComponentInterface {
   @Event()
   selectAsset: EventEmitter<StorageFile>;
 
-  componentWillLoad() {
-    this.search().then(() => {});
+  private destroyListener;
+
+  async componentDidLoad() {
+    this.destroyListener = authStore.onChange('authUser', async (_authUser: AuthUser | null) => {
+      await this.search();
+    });
+
+    await this.search();
+  }
+
+  disconnectedCallback() {
+    this.destroyListener?.();
   }
 
   @Watch('folder')
   async onFolderChange() {
     await this.resetAndSearch();
   }
 
+  @Method()
   async resetAndSearch() {
     this.disableInfiniteScroll = false;
     this.files = [];
@@ -52,6 +64,10 @@ export class AppStorageFiles implements ComponentInterface {
   }
 
   private async search() {
+    if (!authStore.state.loggedIn) {
+      return;
+    }
+
     const {items, nextPageToken}: StorageFilesList = await this.loadFiles();
 
     this.files = [...this.files, ...items];

studio/src/app/pages/core/app-storage/app-storage.scss

@@ -1,3 +1,5 @@
+@use "../../../../global/theme/mixins/button";
+
 app-storage {
   app-storage-files {
     grid-template-columns: repeat(8, calc((100% - (7 * 32px)) / 8));
@@ -11,12 +13,25 @@ app-storage {
     }
   }
 
-  div.select {
-    width: fit-content;
-    margin: 16px 0 8px;
+  div.filter {
+    display: flex;
+    align-items: center;
+
+    margin: 16px 16px 4px 0;
+
+    div.select {
+      margin: 0 8px 0 0;
+
+      ion-select {
+        background: white;
+      }
+    }
+
+    button.refresh {
+      @include button.action;
 
-    ion-select {
-      background: white;
+      padding: 6px;
+      border-radius: 50%;
     }
   }
 }

studio/src/app/pages/core/app-storage/app-storage.tsx

@@ -9,6 +9,7 @@ import {renderI18n} from '../../../utils/core/i18n.utils';
 import {signIn} from '../../../utils/core/signin.utils';
 
 import {ImageEvents} from '../../../events/core/image/image.events';
+import {AppIcon} from '../../../components/core/app-icon/app-icon';
 
 @Component({
   tag: 'app-storage',
@@ -25,6 +26,8 @@ export class AppStorage implements ComponentInterface {
 
   private imageEvents: ImageEvents = new ImageEvents();
 
+  private storageFilesRef: HTMLAppStorageFilesElement | undefined;
+
   constructor() {
     this.debounceLoading = debounce(() => (this.loading = false), 750);
   }
@@ -76,24 +79,35 @@ export class AppStorage implements ComponentInterface {
 
         {this.renderFilter()}
 
-        <app-storage-files class="ion-padding-top ion-padding-bottom" folder={this.folder} admin={true}></app-storage-files>
+        <app-storage-files
+          class="ion-padding-top ion-padding-bottom"
+          folder={this.folder}
+          admin={true}
+          ref={(el) => (this.storageFilesRef = el as HTMLAppStorageFilesElement)}></app-storage-files>
       </Fragment>
     );
   }
 
   private renderFilter() {
     return (
-      <div class="select">
-        <ion-select
-          value={'images'}
-          placeholder={i18n.state.editor.list}
-          onIonChange={($event: CustomEvent) => (this.folder = $event.detail.value)}
-          interface="popover"
-          mode="md"
-          class="ion-padding-start ion-padding-end">
-          <ion-select-option value="images">Images</ion-select-option>
-          <ion-select-option value="data">Data</ion-select-option>
-        </ion-select>
+      <div class="filter">
+        <div class="select">
+          <ion-select
+            value={'images'}
+            placeholder={i18n.state.editor.list}
+            onIonChange={($event: CustomEvent) => (this.folder = $event.detail.value)}
+            interface="popover"
+            mode="md"
+            class="ion-padding-start ion-padding-end">
+            <ion-select-option value="images">Images</ion-select-option>
+            <ion-select-option value="data">Data</ion-select-option>
+          </ion-select>
+        </div>
+
+        <button class="ion-activatable refresh" onClick={async () => await this.storageFilesRef?.resetAndSearch()}>
+          <ion-ripple-effect></ion-ripple-effect>
+          <AppIcon name="sync" ariaLabel={i18n.state.core.close}></AppIcon>
+        </button>
       </div>
     );
   }

studio/src/components.d.ts

@@ -367,6 +367,7 @@ export namespace Components {
     interface AppStorageFiles {
         "admin": boolean;
         "folder": 'data' | 'images';
+        "resetAndSearch": () => Promise<void>;
     }
     interface AppStorageImages {
     }