fix(files): rework store for files modal

components/ui/Global/Global.html

@@ -91,13 +91,8 @@
     v-if="ui.modals.changelog"
     v-click-outside="() => toggleModal(ModalWindows.CHANGELOG)"
   />
-  <UiChatImageOverlay v-if="ui.chatImageOverlay"></UiChatImageOverlay>
-  <FilesView
-    v-if="ui.filePreview"
-    :file="ui.filePreview"
-    @close="closeFilePreview()"
-    @share="share"
-  />
+  <UiChatImageOverlay v-if="ui.chatImageOverlay" />
+  <FilesView v-if="ui.filePreview" @close="closeFilePreview()" @share="share" />
   <transition :name="$device.isMobile ? 'slide' : ''">
     <InteractablesQuickProfile v-if="ui.quickProfile" :user="ui.quickProfile" />
   </transition>

components/views/files/view/View.vue

@@ -1,6 +1,6 @@
 <template src="./View.html"></template>
 <script lang="ts">
-import Vue, { PropType } from 'vue'
+import Vue from 'vue'
 import { mapState } from 'vuex'
 import {
   FileIcon,
@@ -22,25 +22,24 @@ export default Vue.extend({
     XIcon,
     LinkIcon,
   },
-  props: {
-    file: {
-      type: Object as PropType<Fil>,
-      required: true,
-    },
-  },
   data() {
     return {
       load: false as boolean,
-      name: this.file.name as string,
+      file: undefined as Fil | undefined,
+      name: '' as string,
     }
   },
   computed: {
     ...mapState(['ui']),
   },
   /**
    */
-  async mounted() {
+  async created() {
     this.load = true
+
+    this.file = this.$FileSystem.getChild(this.ui.filePreview) as Fil
+    this.name = this.file?.name
+
     // if no file data available, pull encrypted file from textile bucket
     if (!this.file.file) {
       const fsFil: Fil = this.$FileSystem.getChild(this.file.name) as Fil

pages/files/browse/index.vue

@@ -58,7 +58,7 @@ export default Vue.extend({
      */
     handle(item: Item) {
       if (item instanceof Fil) {
-        this.$store.commit('ui/setFilePreview', item)
+        this.$store.commit('ui/setFilePreview', item.name)
       }
       if (item instanceof Directory) {
         this.fileSystem.openDirectory(item.name)

plugins/thirdparty/persist.ts

@@ -37,6 +37,7 @@ const commonProperties = [
   'groups.groupSubscriptions',
   'ui.modals',
   'ui.isScrollOver',
+  'ui.filePreview',
 ]
 
 const propertiesNoStorePin = [

store/ui/mutations.ts

@@ -51,8 +51,8 @@ export default {
   fullscreen(state: UIState, fullscreen: boolean) {
     state.fullscreen = fullscreen
   },
-  setFilePreview(state: UIState, file: Fil | undefined) {
-    state.filePreview = file
+  setFilePreview(state: UIState, name: string) {
+    state.filePreview = name
   },
   setChatImageOverlay(state: UIState, image: ImageMessage | undefined) {
     state.chatImageOverlay = image

store/ui/types.ts

@@ -1,5 +1,4 @@
 import { TranslateResult } from 'vue-i18n'
-import { Fil } from '~/libraries/Files/Fil'
 import { ImageMessage } from '~/types/textile/mailbox'
 import { FileSortEnum } from '~/libraries/Enums/enums'
 import { Glyph } from '~/types/ui/glyph'
@@ -214,8 +213,8 @@ export interface UIState {
   }
   isLoadingFileIndex: boolean
   renameCurrentName?: string
-  filePreview: Fil | undefined
-  chatImageOverlay: ImageMessage | undefined
+  filePreview?: string
+  chatImageOverlay?: ImageMessage
   fileSort: FileSort
 }