From c8ce8ef985b8a30995c03cb2a28123c95b85d798 Mon Sep 17 00:00:00 2001
From: Joe McGrath <josephmcg01@gmail.com>
Date: Wed, 6 Apr 2022 14:55:03 +0900
Subject: [PATCH 1/3] fix(files): rework store for files modal

---
 components/ui/Global/Global.html      |  4 ++--
 components/views/files/view/View.html |  4 ++--
 components/views/files/view/View.vue  | 15 ++++++++++-----
 pages/files/browse/index.vue          |  2 +-
 plugins/thirdparty/persist.ts         |  1 +
 store/ui/mutations.ts                 |  4 ++--
 store/ui/types.ts                     |  5 ++---
 7 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/components/ui/Global/Global.html b/components/ui/Global/Global.html
index 2e11d6892b..94ddda0bfc 100644
--- a/components/ui/Global/Global.html
+++ b/components/ui/Global/Global.html
@@ -91,10 +91,10 @@
     v-if="ui.modals.changelog"
     v-click-outside="() => toggleModal(ModalWindows.CHANGELOG)"
   />
-  <UiChatImageOverlay v-if="ui.chatImageOverlay"></UiChatImageOverlay>
+  <UiChatImageOverlay v-if="ui.chatImageOverlay" />
   <FilesView
     v-if="ui.filePreview"
-    :file="ui.filePreview"
+    :fileName="ui.filePreview"
     @close="closeFilePreview()"
     @share="share"
   />
diff --git a/components/views/files/view/View.html b/components/views/files/view/View.html
index b5fabb8f18..23a6e93862 100644
--- a/components/views/files/view/View.html
+++ b/components/views/files/view/View.html
@@ -1,7 +1,7 @@
 <div id="view-file">
   <div class="file-nav">
     <div class="file-info">
-      <TypographyTitle :text="file.name" :size="6" />
+      <TypographyTitle :text="fileName" :size="6" />
       <TypographyText :text="file.type" :size="6" />
       <TypographyText :text="$filesize(file.size)" :size="6" />
       <TypographyText :text="$dayjs(file.modified).fromNow()" :size="6" />
@@ -49,7 +49,7 @@
     >
       <download-icon size="1x" class="file-icon" />
     </a>
-    <TypographyTitle :size="4" :text="file.name" />
+    <TypographyTitle :size="4" :text="fileName" />
     <TypographySubtitle :size="6" :text="file.type" />
     <TypographySubtitle :text="$filesize(file.size)" :size="6" />
     <TypographySubtitle :text="$dayjs(file.modified).fromNow()" :size="6" />
diff --git a/components/views/files/view/View.vue b/components/views/files/view/View.vue
index 8b8a68ed28..9b263c7725 100644
--- a/components/views/files/view/View.vue
+++ b/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,
@@ -23,15 +23,16 @@ export default Vue.extend({
     LinkIcon,
   },
   props: {
-    file: {
-      type: Object as PropType<Fil>,
+    fileName: {
+      type: String,
       required: true,
     },
   },
   data() {
     return {
       load: false as boolean,
-      name: this.file.name as string,
+      file: undefined as Fil | undefined,
+      name: '' as string,
     }
   },
   computed: {
@@ -39,8 +40,12 @@ export default Vue.extend({
   },
   /**
    */
-  async mounted() {
+  async created() {
     this.load = true
+
+    this.file = this.$FileSystem.getChild(this.fileName) 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
diff --git a/pages/files/browse/index.vue b/pages/files/browse/index.vue
index 00ccfa00bc..779ddbe470 100644
--- a/pages/files/browse/index.vue
+++ b/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)
diff --git a/plugins/thirdparty/persist.ts b/plugins/thirdparty/persist.ts
index 4ff45473f6..d0bf7cdc46 100644
--- a/plugins/thirdparty/persist.ts
+++ b/plugins/thirdparty/persist.ts
@@ -37,6 +37,7 @@ const commonProperties = [
   'groups.groupSubscriptions',
   'ui.modals',
   'ui.isScrollOver',
+  'ui.filePreview',
 ]
 
 const propertiesNoStorePin = [
diff --git a/store/ui/mutations.ts b/store/ui/mutations.ts
index 336a86cced..4dd5c183d3 100644
--- a/store/ui/mutations.ts
+++ b/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
diff --git a/store/ui/types.ts b/store/ui/types.ts
index be0a193406..1364276fa4 100644
--- a/store/ui/types.ts
+++ b/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
 }
 

From 7887a7c52472f5ea19c94226b28e8fbe04b294a9 Mon Sep 17 00:00:00 2001
From: Joe McGrath <josephmcg01@gmail.com>
Date: Wed, 6 Apr 2022 14:59:58 +0900
Subject: [PATCH 2/3] refactor(files): undo template update

---
 components/views/files/view/View.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/views/files/view/View.html b/components/views/files/view/View.html
index 23a6e93862..b5fabb8f18 100644
--- a/components/views/files/view/View.html
+++ b/components/views/files/view/View.html
@@ -1,7 +1,7 @@
 <div id="view-file">
   <div class="file-nav">
     <div class="file-info">
-      <TypographyTitle :text="fileName" :size="6" />
+      <TypographyTitle :text="file.name" :size="6" />
       <TypographyText :text="file.type" :size="6" />
       <TypographyText :text="$filesize(file.size)" :size="6" />
       <TypographyText :text="$dayjs(file.modified).fromNow()" :size="6" />
@@ -49,7 +49,7 @@
     >
       <download-icon size="1x" class="file-icon" />
     </a>
-    <TypographyTitle :size="4" :text="fileName" />
+    <TypographyTitle :size="4" :text="file.name" />
     <TypographySubtitle :size="6" :text="file.type" />
     <TypographySubtitle :text="$filesize(file.size)" :size="6" />
     <TypographySubtitle :text="$dayjs(file.modified).fromNow()" :size="6" />

From da214383d4495fa9b2a3953090d4b749b53da0fd Mon Sep 17 00:00:00 2001
From: Joe McGrath <josephmcg01@gmail.com>
Date: Thu, 7 Apr 2022 10:41:50 +0900
Subject: [PATCH 3/3] refactor(files): remove unnecessary prop

---
 components/ui/Global/Global.html     | 7 +------
 components/views/files/view/View.vue | 8 +-------
 2 files changed, 2 insertions(+), 13 deletions(-)

diff --git a/components/ui/Global/Global.html b/components/ui/Global/Global.html
index 94ddda0bfc..2314e05e50 100644
--- a/components/ui/Global/Global.html
+++ b/components/ui/Global/Global.html
@@ -92,12 +92,7 @@
     v-click-outside="() => toggleModal(ModalWindows.CHANGELOG)"
   />
   <UiChatImageOverlay v-if="ui.chatImageOverlay" />
-  <FilesView
-    v-if="ui.filePreview"
-    :fileName="ui.filePreview"
-    @close="closeFilePreview()"
-    @share="share"
-  />
+  <FilesView v-if="ui.filePreview" @close="closeFilePreview()" @share="share" />
   <transition :name="$device.isMobile ? 'slide' : ''">
     <InteractablesQuickProfile v-if="ui.quickProfile" :user="ui.quickProfile" />
   </transition>
diff --git a/components/views/files/view/View.vue b/components/views/files/view/View.vue
index 9b263c7725..90f51f9e3d 100644
--- a/components/views/files/view/View.vue
+++ b/components/views/files/view/View.vue
@@ -22,12 +22,6 @@ export default Vue.extend({
     XIcon,
     LinkIcon,
   },
-  props: {
-    fileName: {
-      type: String,
-      required: true,
-    },
-  },
   data() {
     return {
       load: false as boolean,
@@ -43,7 +37,7 @@ export default Vue.extend({
   async created() {
     this.load = true
 
-    this.file = this.$FileSystem.getChild(this.fileName) as Fil
+    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