fix(files): make filesystem progress/total size reactive

components/views/files/aside/Aside.html

@@ -9,7 +9,7 @@
         v-tooltip.bottom="$t('pages.files.aside.coming_soon')"
       />
     </div>
-    <UiProgress :progress="progress" />
+    <UiProgress :progress="fileSystem.percentageUsed" />
     <div class="usage-text">
       <span :class="sizeColor">{{totalSize}}</span>
       <span>of {{sizeLimit}}</span>

components/views/files/aside/Aside.vue

@@ -1,21 +1,21 @@
 <template src="./Aside.html"></template>
 <script lang="ts">
 import Vue from 'vue'
+import { mapState } from 'vuex'
 import { SimpleItem } from '~/types/ui/sidebar'
 import { FileAsideRouteEnum, FileIconsEnum } from '~/libraries/Enums/enums'
+import { RootState } from '~/types/store/store'
 
 export default Vue.extend({
-  data() {
-    return {
-      progress: this.$FileSystem.percentStorageUsed as number,
-    }
-  },
   computed: {
+    ...mapState({
+      fileSystem: (state) => (state as RootState).textile.fileSystem,
+    }),
     /**
      * @description total size of all uploaded files
      */
     totalSize(): string {
-      return this.$filesize(this.$FileSystem.totalSize)
+      return this.$filesize(this.fileSystem.totalSize)
     },
     /**
      * @description storage space (free tier is 4GB)
@@ -24,7 +24,7 @@ export default Vue.extend({
       return this.$filesize(this.$Config.personalFilesLimit)
     },
     sizeColor(): string {
-      return this.progress > 90 ? 'red' : 'green'
+      return this.fileSystem.percentageUsed > 90 ? 'red' : 'green'
     },
     quickAccessOptions(): SimpleItem[] {
       return [
@@ -66,11 +66,6 @@ export default Vue.extend({
       ]
     },
   },
-  watch: {
-    totalSize() {
-      this.progress = this.$FileSystem.percentStorageUsed
-    },
-  },
 })
 </script>
 <style scoped lang="less" src="./Aside.less"></style>

store/textile/__snapshots__/state.test.ts.snap

@@ -5,6 +5,10 @@ Object {
   "activeConversation": "",
   "conversationLoading": false,
   "conversations": Object {},
+  "fileSystem": Object {
+    "percentageUsed": 0,
+    "totalSize": 0,
+  },
   "initialized": false,
   "messageLoading": false,
   "uploadProgress": Object {},

store/textile/actions.ts

@@ -62,8 +62,13 @@ export default {
     config: TextileConfig,
   ) {
     const $TextileManager: TextileManager = Vue.prototype.$TextileManager
+    const $FileSystem: FilSystem = Vue.prototype.$FileSystem
 
     await $TextileManager.init(config)
+    commit('setFileSystem', {
+      totalSize: $FileSystem.totalSize,
+      percentageUsed: $FileSystem.percentStorageUsed,
+    })
 
     const textilePublicKey = $TextileManager.getIdentityPublicKey()
 
@@ -1142,7 +1147,7 @@ export default {
   /**
    * @description export filesystem index to textile bucket and update threaddb version
    */
-  async exportFileSystem({ dispatch }: ActionsArguments<TextileState>) {
+  async exportFileSystem({ dispatch, commit }: ActionsArguments<TextileState>) {
     const $TextileManager: TextileManager = Vue.prototype.$TextileManager
     const $FileSystem: FilSystem = Vue.prototype.$FileSystem
 
@@ -1154,6 +1159,10 @@ export default {
     dispatch('updateUserThreadData', {
       filesVersion: $FileSystem.version,
     })
+    commit('setFileSystem', {
+      totalSize: $FileSystem.totalSize,
+      percentageUsed: $FileSystem.percentStorageUsed,
+    })
   },
 
   /**

store/textile/mutations.ts

@@ -199,6 +199,9 @@ const mutations = {
   setUserThreadData(state: TextileState, data: UserThreadData) {
     state.userThread = data
   },
+  setFileSystem(state: TextileState, data: TextileState['fileSystem']) {
+    state.fileSystem = data
+  },
 }
 
 export default mutations

store/textile/state.ts

@@ -12,6 +12,10 @@ const InitialTextileState = (): TextileState => ({
     blockNsfw: true,
     flipVideo: true,
   },
+  fileSystem: {
+    totalSize: 0,
+    percentageUsed: 0,
+  },
 })
 
 export default InitialTextileState

store/textile/types.ts

@@ -36,6 +36,10 @@ export interface TextileState {
     }
   }
   userThread: UserThreadData
+  fileSystem: {
+    totalSize: number
+    percentageUsed: number
+  }
 }
 
 export enum TextileError {