refs #3301 Rewrite TimelineSpace with composition API

src/renderer/components/TimelineSpace.vue

@@ -18,150 +18,154 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
-import { mapState, mapGetters } from 'vuex'
+import { defineComponent, computed, ref, onMounted, onBeforeUnmount } from 'vue'
-import SideMenu from './TimelineSpace/SideMenu'
+import { useRoute } from 'vue-router'
-import HeaderMenu from './TimelineSpace/HeaderMenu'
+import { ElMessage } from 'element-plus'
-import Contents from './TimelineSpace/Contents'
+import { useI18next } from 'vue3-i18next'
-import Modals from './TimelineSpace/Modals'
+import SideMenu from './TimelineSpace/SideMenu.vue'
+import HeaderMenu from './TimelineSpace/HeaderMenu.vue'
+import Contents from './TimelineSpace/Contents.vue'
+import Modals from './TimelineSpace/Modals.vue'
 import Mousetrap from 'mousetrap'
-import ReceiveDrop from './TimelineSpace/ReceiveDrop'
+import ReceiveDrop from './TimelineSpace/ReceiveDrop.vue'
 import { AccountLoadError } from '@/errors/load'
 import { TimelineFetchError } from '@/errors/fetch'
 import { NewTootAttachLength } from '@/errors/validations'
-import { EventEmitter } from '~/src/renderer/components/event'
+import { EventEmitter } from '@/components/event'
+import { useStore } from '@/store'
+import { ACTION_TYPES } from '@/store/TimelineSpace'
+import { ACTION_TYPES as SIDEBAR_ACTION } from '@/store/TimelineSpace/Contents/SideBar'
+import { MUTATION_TYPES as GLOBAL_HEADER_MUTATION } from '@/store/GlobalHeader'
+import { MUTATION_TYPES as JUMP_MUTATION } from '@/store/TimelineSpace/Modals/Jump'
+import { ACTION_TYPES as NEW_TOOT_ACTION } from '@/store/TimelineSpace/Modals/NewToot'
 
-export default {
+export default defineComponent({
   name: 'timeline-space',
   components: { SideMenu, HeaderMenu, Modals, Contents, ReceiveDrop },
-  data() {
+  setup() {
-    return {
+    const space = 'TimelineSpace'
-      dropTarget: null,
+    const store = useStore()
-      droppableVisible: false
+    const route = useRoute()
-    }
+    const i18n = useI18next()
-  },
+
-  computed: {
+    const dropTarget = ref<any>(null)
-    ...mapState({
+    const droppableVisible = ref<boolean>(false)
-      loading: state => state.TimelineSpace.loading,
+
-      collapse: state => state.TimelineSpace.SideMenu.collapse
+    const loading = computed(() => store.state.TimelineSpace.loading)
-    }),
+    const collapse = computed(() => store.state.TimelineSpace.SideMenu.collapse)
-    ...mapGetters('TimelineSpace/Modals', ['modalOpened']),
+    // const modalOpened = computed(() => store.getters[`TimelineSpace/Modals/modalOpened`])
-    shortcutEnabled: function () {
+    // const shortcutEnabled = computed(() => !modalOpened.value)
-      return !this.modalOpened
+
-    }
+    onMounted(async () => {
-  },
+      store.dispatch(`TimelineSpace/Contents/SideBar/${SIDEBAR_ACTION.CLOSE}`)
-  async created() {
+      await initialize().finally(() => {
-    this.$store.dispatch('TimelineSpace/Contents/SideBar/close')
+        store.commit(`GlobalHeader/${GLOBAL_HEADER_MUTATION.UPDATE_CHANGING}`, false)
-    await this.initialize().finally(() => {
+      })
-      this.$store.commit('GlobalHeader/updateChanging', false)
+      ;(window as any).addEventListener('dragenter', onDragEnter)
+      ;(window as any).addEventListener('dragleave', onDragLeave)
+      ;(window as any).addEventListener('dragover', onDragOver)
+      ;(window as any).addEventListener('drop', handleDrop)
+      Mousetrap.bind(['command+t', 'ctrl+t'], () => {
+        store.commit(`TimelineSpace/Modals/Jump/${JUMP_MUTATION.CHANGE_MODAL}`, true)
+      })
     })
-  },
+    onBeforeUnmount(() => {
-  mounted() {
+      ;(window as any).removeEventListener('dragenter', onDragEnter)
-    window.addEventListener('dragenter', this.onDragEnter)
+      ;(window as any).removeEventListener('dragleave', onDragLeave)
-    window.addEventListener('dragleave', this.onDragLeave)
+      ;(window as any).removeEventListener('dragover', onDragOver)
-    window.addEventListener('dragover', this.onDragOver)
+      ;(window as any).removeEventListener('drop', handleDrop)
-    window.addEventListener('drop', this.handleDrop)
+      store.dispatch(`${space}/${ACTION_TYPES.STOP_STREAMINGS}`)
-    Mousetrap.bind(['command+t', 'ctrl+t'], () => {
+      store.dispatch(`${space}/${ACTION_TYPES.UNBIND_STREAMINGS}`)
-      this.$store.commit('TimelineSpace/Modals/Jump/changeModal', true)
     })
-  },
+
-  beforeUnmount() {
+    const clear = async () => {
-    window.removeEventListener('dragenter', this.onDragEnter)
+      store.dispatch(`${space}/${ACTION_TYPES.UNBIND_STREAMINGS}`)
-    window.removeEventListener('dragleave', this.onDragLeave)
+      await store.dispatch(`${space}/${ACTION_TYPES.CLEAR_ACCOUNT}`)
-    window.removeEventListener('dragover', this.onDragOver)
+      store.dispatch(`${space}/${ACTION_TYPES.CLEAR_CONTENTS_TIMELINES}`)
-    window.removeEventListener('drop', this.handleDrop)
+      await store.dispatch(`${space}/${ACTION_TYPES.REMOVE_SHORTCUT_EVENTS}`)
-    this.$store.dispatch('TimelineSpace/stopStreamings')
+      await store.dispatch(`${space}/${ACTION_TYPES.CLEAR_UNREAD}`)
-    this.$store.dispatch('TimelineSpace/unbindStreamings')
-  },
-  methods: {
-    async clear() {
-      this.$store.dispatch('TimelineSpace/unbindStreamings')
-      await this.$store.dispatch('TimelineSpace/clearAccount')
-      this.$store.dispatch('TimelineSpace/clearContentsTimelines')
-      await this.$store.dispatch('TimelineSpace/removeShortcutEvents')
-      await this.$store.dispatch('TimelineSpace/clearUnread')
       return 'clear'
-    },
+    }
-    async initialize() {
+    const initialize = async () => {
-      await this.clear()
+      await clear()
 
       try {
-        await this.$store.dispatch('TimelineSpace/initLoad', this.$route.params.id)
+        await store.dispatch(`${space}/${ACTION_TYPES.INIT_LOAD}`, route.params.id)
       } catch (err) {
         if (err instanceof AccountLoadError) {
-          this.$message({
+          ElMessage({
-            message: this.$t('message.account_load_error'),
+            message: i18n.t('message.account_load_error'),
             type: 'error'
           })
         } else if (err instanceof TimelineFetchError) {
-          this.$message({
+          ElMessage({
-            message: this.$t('message.timeline_fetch_error'),
+            message: i18n.t('message.timeline_fetch_error'),
             type: 'error'
           })
         }
       }
 
-      await this.$store.dispatch('TimelineSpace/prepareSpace')
+      await store.dispatch(`${space}/${ACTION_TYPES.PREPARE_SPACE}`)
-    },
+    }
-    handleDrop(e) {
+    const handleDrop = (e: DragEvent) => {
       e.preventDefault()
       e.stopPropagation()
-      this.droppableVisible = false
+      droppableVisible.value = false
-      if (e.dataTransfer.files.item(0) === null || e.dataTransfer.files.item(0) === undefined) {
+      if (e.dataTransfer?.files.item(0) === null || e.dataTransfer?.files.item(0) === undefined) {
         return false
       }
-      const file = e.dataTransfer.files.item(0)
+      const file = e.dataTransfer?.files.item(0)
-      if (!file.type.includes('image') && !file.type.includes('video')) {
+      if (file === null || (!file.type.includes('image') && !file.type.includes('video'))) {
-        this.$message({
+        ElMessage({
-          message: this.$t('validation.new_toot.attach_image'),
+          message: i18n.t('validation.new_toot.attach_image'),
           type: 'error'
         })
         return false
       }
-      this.$store.dispatch('TimelineSpace/Modals/NewToot/openModal')
+      store.dispatch(`TimelineSpace/Modals/NewToot/${NEW_TOOT_ACTION.OPEN_MODAL}`)
-      this.$store
+      store
-        .dispatch('TimelineSpace/Modals/NewToot/uploadImage', file)
+        .dispatch(`TimelineSpace/Modals/NewToot/${NEW_TOOT_ACTION.UPLOAD_IMAGE}`, file)
         .then(() => {
           EventEmitter.emit('image-uploaded')
         })
         .catch(err => {
           if (err instanceof NewTootAttachLength) {
-            this.$message({
+            ElMessage({
-              message: this.$t('validation.new_toot.attach_length', { max: 4 }),
+              message: i18n.t('validation.new_toot.attach_length', { max: 4 }),
               type: 'error'
             })
           } else {
-            this.$message({
+            ElMessage({
-              message: this.$t('message.attach_error'),
+              message: i18n.t('message.attach_error'),
               type: 'error'
             })
           }
         })
       return false
-    },
+    }
-    onDragEnter(e) {
+    const onDragEnter = (e: DragEvent) => {
-      if (e.dataTransfer.types.indexOf('Files') >= 0) {
+      if (e.dataTransfer && e.dataTransfer.types.indexOf('Files') >= 0) {
-        this.dropTarget = e.target
+        dropTarget.value = e.target
-        this.droppableVisible = true
+        droppableVisible.value = true
-      }
-    },
-    onDragLeave(e) {
-      if (e.target === this.dropTarget) {
-        this.droppableVisible = false
-      }
-    },
-    onDragOver(e) {
-      e.preventDefault()
-    },
-    handleKey(event) {
-      switch (event.srcKey) {
-        case 'help':
-          this.$store.commit('TimelineSpace/Modals/Shortcut/changeModal', true)
-          break
       }
     }
+    const onDragLeave = (e: DragEvent) => {
+      if (e.target === dropTarget.value) {
+        droppableVisible.value = false
+      }
+    }
+    const onDragOver = (e: DragEvent) => {
+      e.preventDefault()
+    }
+
+    return {
+      loading,
+      collapse,
+      droppableVisible
+    }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>