Use reactive store to share data between components

web_src/js/components/DiffFileTree.vue

@@ -5,7 +5,7 @@
   >
     <!-- only render the tree if we're visible. in many cases this is something that doesn't change very often -->
     <div class="ui list">
-      <DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item" :selected-file="selectedFile"/>
+      <DiffFileTreeItem v-for="item in fileTree" :key="item.name" :item="item"/>
     </div>
     <div v-if="isIncomplete" id="diff-too-many-files-stats" class="gt-pt-2">
       <span class="gt-mr-2">{{ tooManyFilesMessage }}</span><a :class="['ui', 'basic', 'tiny', 'button', isLoadingNewData === true ? 'disabled' : '']" id="diff-show-more-files-stats" @click.stop="loadMoreData">{{ showMoreMessage }}</a>
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import DiffFileTreeItem from './DiffFileTreeItem.vue';
+import DiffFileTreeItem, {store} from './DiffFileTreeItem.vue';
 import {doLoadMoreFiles} from '../features/repo-diff.js';
 import {toggleElem} from '../utils/dom.js';
 
@@ -28,7 +28,7 @@ export default {
     pageData.diffFileInfo.fileTreeIsVisible = fileTreeIsVisible;
     return {
       ...pageData.diffFileInfo,
-      selectedFile: ''
+      store,
     };
   },
   computed: {
@@ -102,10 +102,10 @@ export default {
     document.querySelector('.diff-toggle-file-tree-button').addEventListener('click', this.toggleVisibility);
 
     this.hashChangeListener = () => {
-      this.selectedFile = window.location.hash;
+      this.store.selectedItem = window.location.hash;
     };
-    this.hashListener = window.addEventListener('hashchange', this.hashChangeListener);
-    this.selectedFile = window.location.hash;
+    this.hashChangeListener();
+    window.addEventListener('hashchange', this.hashChangeListener);
   },
   unmounted() {
     document.querySelector('.diff-toggle-file-tree-button').removeEventListener('click', this.toggleVisibility);

web_src/js/components/DiffFileTreeItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-show="show" :title="item.name">
     <!--title instead of tooltip above as the tooltip needs too much work with the current methods, i.e. not being loaded or staying open for "too long"-->
-    <div class="item" :class="[item.isFile ? 'filewrapper gt-p-1 gt-ac' : '', selectedFile === genCompleteFileHash(item.file?.NameHash) ? 'selected' : '']">
+    <div class="item" :class="[item.isFile ? 'filewrapper gt-p-1 gt-ac' : '', store.selectedItem === '#diff-' + item.file?.NameHash ? 'selected' : '']">
       <!-- Files -->
       <SvgIcon
         v-if="item.isFile"
@@ -32,14 +32,19 @@
         <span class="gt-ellipsis">{{ item.name }}</span>
       </div>
       <div v-show="!collapsed">
-        <DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem" class="list" :selected-file="selectedFile"/>
+        <DiffFileTreeItem v-for="childItem in item.children" :key="childItem.name" :item="childItem" class="list"/>
       </div>
     </div>
   </div>
 </template>
 
 <script>
 import {SvgIcon} from '../svg.js';
+import {reactive} from 'vue';
+
+export const store = reactive({
+  selectedItem: '',
+});
 
 export default {
   components: {SvgIcon},
@@ -53,13 +58,9 @@ export default {
       required: false,
       default: true
     },
-    selectedFile: {
-      type: String,
-      default: '',
-      required: true
-    }
   },
   data: () => ({
+    store,
     collapsed: false,
   }),
   methods: {
@@ -79,9 +80,6 @@ export default {
       };
       return diffTypes[pType];
     },
-    genCompleteFileHash(hash) {
-      return `#diff-${hash}`;
-    }
   },
 };
 </script>