refs #874 Divide component for Poll

src/renderer/components/molecules/Toot.vue

@@ -60,16 +60,7 @@
             </el-button>
           </div>
           <div class="content" v-show="isShowContent" v-html="status()" @click.capture.prevent="tootClick"></div>
-          <div class="poll" v-show="isShowContent" v-if="poll">
-            <ul class="poll-list">
-              <li v-for="(option, id) in poll.options" v-bind:key="id">
-                <el-radio v-model="pollRadio" :label="option.title">{{ option.title }}</el-radio>
-              </li>
-            </ul>
-            <el-button type="success">Vote</el-button>
-            {{ poll.votes_count }} votes,
-            until {{ parseDatetime(poll.expires_at, now) }}
-          </div>
+          <Poll v-show="isShowContent" v-if="poll" :poll="poll"></Poll>
         </div>
         <div class="attachments">
           <el-button v-show="sensitive && !isShowAttachments" class="show-sensitive" type="info" @click="showAttachments = true">
@@ -194,20 +185,21 @@ import DisplayStyle from '~/src/constants/displayStyle'
 import TimeFormat from '~/src/constants/timeFormat'
 import emojify from '~/src/renderer/utils/emojify'
 import FailoverImg from '~/src/renderer/components/atoms/FailoverImg'
+import Poll from '~/src/renderer/components/molecules/Toot/Poll'
 import { setInterval, clearInterval } from 'timers'
 
 export default {
   name: 'toot',
   components: {
-    FailoverImg
+    FailoverImg,
+    Poll
   },
   data() {
     return {
       showContent: this.$store.state.App.ignoreCW,
       showAttachments: this.$store.state.App.ignoreNFSW,
       hideAllAttachments: this.$store.state.App.hideAllAttachments,
-      now: Date.now(),
-      pollRadio: null
+      now: Date.now()
     }
   },
   props: {
@@ -640,17 +632,6 @@ export default {
         word-wrap: break-word;
       }
 
-      .poll {
-        .poll-list {
-          list-style: none;
-          padding-left: 16px;
-
-          li {
-            margin: 4px 0;
-          }
-        }
-      }
-
       .emojione {
         width: 20px;
         height: 20px;

src/renderer/components/molecules/Toot/Poll.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="poll">
+    <ul class="poll-list" v-if="poll">
+      <li v-for="(option, id) in poll.options" v-bind:key="id">
+        <el-radio v-model="pollRadio" :label="option.title">{{ option.title }}</el-radio>
+      </li>
+    </ul>
+    <el-button type="success">Vote</el-button>
+    {{ poll.votes_count }} votes,
+    until {{ parseDatetime(poll.expires_at, now) }}
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import moment from 'moment'
+import TimeFormat from '~/src/constants/timeFormat'
+
+export default {
+  data() {
+    return {
+      pollRadio: '',
+      now: Date.now()
+    }
+  },
+  props: {
+    poll: {
+      type: Object,
+      default: null
+    }
+  },
+  computed: {
+    ...mapState('App', {
+      timeFormat: state => state.timeFormat,
+      language: state => state.language
+    })
+  },
+  methods: {
+    parseDatetime(datetime, epoch) {
+      switch (this.timeFormat) {
+        case TimeFormat.Absolute.value:
+          return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
+        case TimeFormat.Relative.value:
+          moment.locale(this.language)
+          return moment(datetime).from(epoch)
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.poll {
+  .poll-list {
+    list-style: none;
+    padding-left: 16px;
+
+    li {
+      margin: 4px 0;
+    }
+  }
+}
+</style>