chore(nsfw): adding logging to ui

Satellite-im · Apr 8, 2022 · 881fceb · 881fceb
1 parent 5e8ae4b
commit 881fceb
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 6 deletions.
diff --git a/components/views/files/controls/Controls.html b/components/views/files/controls/Controls.html
@@ -48,7 +48,31 @@
       multiple
     />
   </div>
-  <UiProgress v-if="progress != 100" :progress="progress" />
+
+  <span v-if="progress < 100">
+    <UiProgress :progress="progress" />
+    <TypographyText
+      :text="`${$t('pages.files.controls.status')}: % ${progress} ${$t('pages.files.controls.upload_progress')}`"
+      :size="6"
+    />
+  </span>
+  <span v-if="startingUpload">
+    <TypographyText
+      :text="`${$t('pages.files.controls.status')}: ${$t('pages.files.controls.starting_upload')}`"
+      :size="6"
+    />
+  </span>
+  <span v-if="doingSomethingElse">
+    <TypographyText
+      :text="`${$t('pages.files.controls.status')}: ${$t('pages.files.controls.rebuilding_structure')}`"
+      :size="6"
+  /></span>
+  <span v-if="updatingIndex">
+    <TypographyText
+      :text="`${$t('pages.files.controls.status')}: ${$t('pages.files.controls.updating_indexes')}`"
+      :size="6"
+  /></span>
+
   <div class="error-container" v-if="errors.length">
     <alert-triangle-icon size="1.3x" />
     <div>

diff --git a/components/views/files/controls/Controls.vue b/components/views/files/controls/Controls.vue
@@ -34,6 +34,9 @@ export default Vue.extend({
       text: '' as string,
       errors: [] as Array<string | TranslateResult>,
       progress: 100 as number,
+      updatingIndex: false,
+      startingUpload: false,
+      doingSomethingElse: false,
     }
   },
   computed: {
@@ -84,6 +87,7 @@ export default Vue.extend({
      * @example <input @change="handleFile" />
      */
     async handleFile(event: any) {
+      this.startingUpload = true
       this.errors = []
       this.$store.commit('ui/setIsLoadingFileIndex', true)
       const originalFiles: File[] = [...event.target.files]
@@ -145,7 +149,6 @@ export default Vue.extend({
           files.push(el.file)
         }
       }
-
       for (const file of files) {
         try {
           await this.$FileSystem.uploadFile(file, this.setProgress)
@@ -156,11 +159,20 @@ export default Vue.extend({
 
       // only update index if files have been updated
       if (files.length) {
-        await this.$TextileManager.bucket?.updateIndex(this.$FileSystem.export)
+        this.doingSomethingElse = false
+        this.updatingIndex = true
+        this.$TextileManager.bucket
+          ?.updateIndex(this.$FileSystem.export)
+          .then(() => {
+            this.updatingIndex = false
+            this.$store.commit('ui/setIsLoadingFileIndex', false)
+          })
+      }
+      if (!files.length) {
+        this.$store.commit('ui/setIsLoadingFileIndex', false)
       }
 
-      this.$store.commit('ui/setIsLoadingFileIndex', false)
-
+      // re-render so new files show up
       this.$emit('forceRender')
 
       if (originalFiles.length !== invalidNameResults.length) {
@@ -183,7 +195,9 @@ export default Vue.extend({
      * @param size total file size in bytes
      */
     setProgress(num: number, size: number) {
+      if (this.startingUpload) this.startingUpload = false
       this.progress = Math.floor((num / size) * 100)
+      if (this.progress >= 100) this.doingSomethingElse = true
     },
   },
 })

diff --git a/libraries/Files/Directory.ts b/libraries/Files/Directory.ts
@@ -111,7 +111,6 @@ export class Directory extends Item {
     }
 
     let parent = this.parent
-
     while (!isEqual(parent, null)) {
       if (isEqual(parent, child)) {
         throw new Error(FileSystemErrors.DIR_PARENT_PARADOX)

diff --git a/locales/en-US.js b/locales/en-US.js
@@ -130,6 +130,11 @@ export default {
       controls: {
         new_file: 'New File',
         name_folder: 'Name Folder...',
+        status: 'Status',
+        upload_progress: 'Upload Progress',
+        starting_upload: 'Starting Upload',
+        rebuilding_structure: 'Rebuilding File Structure',
+        updating_indexes: 'Updating Remote Indexes',
       },
       browse: {
         files: 'Files',