split status preview popover into a separate component

1 files changed, 43 insertions, 0 deletions

diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
new file mode 100644
index 00000000..91b64f72
--- /dev/null
+++ b/src/components/status_popover/status_popover.js
@@ -0,0 +1,43 @@
+import { find } from 'lodash'
+
+const StatusPopover = {
+  name: 'StatusPopover',
+  props: [
+    'statusId'
+  ],
+  data () {
+    return {
+      preview: null,
+      popperOptions: {
+        modifiers: {
+          preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
+        }
+      }
+    }
+  },
+  components: {
+    Status: () => import('../status/status.vue')
+  },
+  methods: {
+    enter () {
+      const id = this.statusId
+      const statuses = this.$store.state.statuses.allStatuses
+
+      if (!this.preview) {
+        // if we have the status somewhere already
+        this.preview = find(statuses, { id })
+        // or if we have to fetch it
+        if (!this.preview) {
+          this.$store.state.api.backendInteractor.fetchStatus({ id }).then((status) => {
+            this.preview = status
+            this.$nextTick(this.$refs.popper.updatePopper)
+          })
+        }
+      } else if (this.preview.id !== id) {
+        this.preview = find(statuses, 'id')
+      }
+    }
+  }
+}
+
+export default StatusPopover