[ci skip] formalise repo_preview component and logic

app/assets/javascripts/repo/components/repo.vue

@@ -4,6 +4,7 @@ import RepoCommitSection from './repo_commit_section.vue';
 import RepoTabs from './repo_tabs.vue';
 import RepoFileButtons from './repo_file_buttons.vue';
 import RepoBinaryViewer from './repo_binary_viewer.vue';
+import RepoPreview from './repo_preview.vue';
 import RepoMixin from '../mixins/repo_mixin';
 import PopupDialog from '../../vue_shared/components/popup_dialog.vue';
 import Store from '../stores/repo_store';
@@ -21,16 +22,11 @@ export default {
     'repo-editor': MonacoLoaderHelper.repoEditorLoader,
     'repo-commit-section': RepoCommitSection,
     'popup-dialog': PopupDialog,
-    preview: { // POC
-      data: () => Store,
-      template: '<div v-html="activeFile.html"></div>',
-    },
+    'repo-preview': RepoPreview,
   },
 
   mounted() {
-    RepoHelper.getContent().then(() => {
-
-    }).catch(RepoHelper.loadingError);
+    RepoHelper.getContent().catch(RepoHelper.loadingError);
   },
 
   methods: {

app/assets/javascripts/repo/components/repo_preview.vue

+<script>
+import RepoStore from '../stores/repo_store';
+
+export default {
+  data: () => RepoStore,
+}
+</script>
+
+<template>
+<div v-html="activeFile.html"></div>
+</template>

app/assets/javascripts/repo/helpers/repo_helper.js

@@ -165,9 +165,9 @@ const RepoHelper = {
           // file might be undefined
           const rawUrl = RepoHelper.getRawURLFromBlobURL(file.url || Service.url);
           RepoHelper.setBinaryDataAsBase64(rawUrl, data);
-          Store.currentBlobView = 'preview';
+          Store.setViewToPreview();
         } else {
-          if (Store.currentBlobView !== 'preview') {
+          if (!Store.isPreviewView()) {
             Service.getRaw(data.raw_path)
             .then((rawResponse) => {
               Store.blobRaw = rawResponse.data;

app/assets/javascripts/repo/stores/repo_store.js

@@ -20,7 +20,7 @@ const RepoStore = {
   submodules: [],
   blobRaw: '',
   blobRendered: '',
-  currentBlobView: 'preview',
+  currentBlobView: 'repo-preview',
   openedFiles: [],
   tabSize: 100,
   defaultTabSize: 100,
@@ -211,7 +211,11 @@ const RepoStore = {
   },
 
   toggleBlobView() {
-    RepoStore.currentBlobView = RepoStore.currentBlobView === 'preview' ? 'repo-editor' : 'preview';
+    RepoStore.currentBlobView = RepoStore.isPreviewView() ? 'repo-editor' : 'repo-preview';
+  },
+
+  setViewToPreview() {
+    RepoStore.currentBlobView = 'repo-preview';
   },
 
   // getters
@@ -219,5 +223,9 @@ const RepoStore = {
   isActiveFile(file) {
     return file && file.url === RepoStore.activeFile.url;
   },
+
+  isPreviewView() {
+    return RepoStore.currentBlobView === 'repo-preview';
+  },
 };
 export default RepoStore;