Merge pull request #1038 from h3poteto/iss-1035

closes #1035 Add reload method in SideBar
2025-01-31 17:45:22 +01:00 · 2019-09-15 23:26:26 +09:00 · 2019-09-15 23:26:26 +09:00 · feaaf89931
commit feaaf89931
parent c6d244187e 0a3701a0ba
4 changed files with 82 additions and 41 deletions
--- a/src/renderer/components/TimelineSpace/Contents/SideBar.vue
+++ b/src/renderer/components/TimelineSpace/Contents/SideBar.vue
@ -1,24 +1,25 @@
 <template>
-<transition name="slide-detail">
-  <div id="side_bar" v-if="openSideBar" v-shortkey="shortcutEnabled ? {close: ['esc']} : {}" @shortkey="handleKey">
-    <div class="header">
-      <i class="el-icon-loading" v-show="loading"></i>
-      <i class="el-icon-close" @click="close"></i>
-    </div>
-    <div id="sidebar_scrollable">
-      <account-profile v-if="component === 1" v-on:change-loading="changeLoading"></account-profile>
-      <toot-detail v-else-if="component === 2"></toot-detail>
-      <div
-        class="loading"
-        v-loading="true"
-        :element-loading-text="$t('message.loading')"
-        element-loading-spinner="el-icon-loading"
-        :element-loading-background="backgroundColor"
-        v-else>
+  <transition name="slide-detail">
+    <div id="side_bar" v-if="openSideBar" v-shortkey="shortcutEnabled ? { close: ['esc'] } : {}" @shortkey="handleKey">
+      <div class="header">
+        <i class="el-icon-loading" v-show="loading"></i>
+        <i class="el-icon-refresh" @click="reload"></i>
+        <i class="el-icon-close" @click="close"></i>
+      </div>
+      <div id="sidebar_scrollable">
+        <account-profile v-if="component === 1" v-on:change-loading="changeLoading"></account-profile>
+        <toot-detail v-else-if="component === 2"></toot-detail>
+        <div
+          class="loading"
+          v-loading="true"
+          :element-loading-text="$t('message.loading')"
+          element-loading-spinner="el-icon-loading"
+          :element-loading-background="backgroundColor"
+          v-else
+        ></div>
      </div>
    </div>
-  </div>
-</transition>
+  </transition>
 </template>

 <script>
@ -38,7 +39,7 @@ export default {
      default: false
    }
  },
-  data () {
+  data() {
    return {
      loading: false
    }
@ -49,21 +50,24 @@ export default {
      component: state => state.TimelineSpace.Contents.SideBar.component,
      backgroundColor: state => state.App.theme.background_color
    }),
-    shortcutEnabled: function () {
+    shortcutEnabled: function() {
      return !this.overlaid
    }
  },
-  beforeDestroy () {
+  beforeDestroy() {
    this.close()
  },
  methods: {
-    close () {
+    close() {
      this.$store.dispatch('TimelineSpace/Contents/SideBar/close')
    },
-    changeLoading (value) {
+    changeLoading(value) {
      this.loading = value
    },
-    handleKey (event) {
+    reload() {
+      this.$store.dispatch('TimelineSpace/Contents/SideBar/reload')
+    },
+    handleKey(event) {
      switch (event.srcKey) {
        case 'close':
          this.close()
@ -89,12 +93,17 @@ export default {
    border-top: solid 1px var(--theme-border-color);
    border-bottom: solid 1px var(--theme-border-color);
    text-align: right;
-    height: 30px;
+    height: 36px;
    box-sizing: border-box;
+    font-size: 18px;

    .el-icon-close {
      cursor: pointer;
    }
+
+    .el-icon-refresh {
+      cursor: pointer;
+    }
  }

  #sidebar_scrollable {
@ -107,10 +116,13 @@ export default {
  }
 }

-.slide-detail-enter-active, .slide-detail-leave-active {
+.slide-detail-enter-active,
+.slide-detail-leave-active {
  transition: all 0.5s;
 }
-.slide-detail-enter, .slide-detail-leave-to {
+
+.slide-detail-enter,
+.slide-detail-leave-to {
  margin-right: -360px;
  opacity: 0;
 }
--- a/src/renderer/store/TimelineSpace/Contents/SideBar.ts
+++ b/src/renderer/store/TimelineSpace/Contents/SideBar.ts
@ -3,12 +3,15 @@ import TootDetail, { TootDetailState } from './SideBar/TootDetail'
 import { Module, MutationTree, ActionTree } from 'vuex'
 import { RootState } from '@/store'

+enum Component {
+  Blank,
+  AccountProfile,
+  TootDetail
+}
+
 export type SideBarState = {
  openSideBar: boolean
-  // 0: blank
-  // 1: account-profile
-  // 2: toot-detail
-  component: number
+  component: Component
 }

 type SideBarModule = {
@ -20,7 +23,7 @@ export type SideBarModuleState = SideBarModule & SideBarState

 const state = (): SideBarState => ({
  openSideBar: false,
-  component: 0
+  component: Component.Blank
 })

 export const MUTATION_TYPES = {
@ -32,7 +35,7 @@ const mutations: MutationTree<SideBarState> = {
  [MUTATION_TYPES.CHANGE_OPEN_SIDEBAR]: (state, value: boolean) => {
    state.openSideBar = value
  },
-  [MUTATION_TYPES.CHANGE_COMPONENT]: (state, value: number) => {
+  [MUTATION_TYPES.CHANGE_COMPONENT]: (state, value: Component) => {
    state.component = value
  }
 }
@ -41,13 +44,20 @@ const actions: ActionTree<SideBarState, RootState> = {
  close: ({ dispatch, commit }) => {
    dispatch('TimelineSpace/Contents/SideBar/AccountProfile/close', {}, { root: true })
    commit(MUTATION_TYPES.CHANGE_OPEN_SIDEBAR, false)
-    commit(MUTATION_TYPES.CHANGE_COMPONENT, 0)
+    commit(MUTATION_TYPES.CHANGE_COMPONENT, Component.Blank)
+  },
+  reload: ({ state, dispatch }) => {
+    if (state.component === Component.AccountProfile) {
+      dispatch('TimelineSpace/Contents/SideBar/AccountProfile/reload', {}, { root: true })
+    } else if (state.component === Component.TootDetail) {
+      dispatch('TimelineSpace/Contents/SideBar/TootDetail/reload', {}, { root: true })
+    }
  },
  openAccountComponent: ({ commit }) => {
-    commit(MUTATION_TYPES.CHANGE_COMPONENT, 1)
+    commit(MUTATION_TYPES.CHANGE_COMPONENT, Component.AccountProfile)
  },
  openTootComponent: ({ commit }) => {
-    commit(MUTATION_TYPES.CHANGE_COMPONENT, 2)
+    commit(MUTATION_TYPES.CHANGE_COMPONENT, Component.TootDetail)
  }
 }

--- a/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile.ts
+++ b/src/renderer/store/TimelineSpace/Contents/SideBar/AccountProfile.ts
@ -74,37 +74,53 @@ const actions: ActionTree<AccountProfileState, RootState> = {
    commit(MUTATION_TYPES.CHANGE_RELATIONSHIP, res.data[0])
    return res.data
  },
-  follow: async ({ commit, rootState }, account: Account) => {
+  reload: async ({ dispatch, state, commit }) => {
+    commit(MUTATION_TYPES.CHANGE_LOADING, true)
+    Promise.all([
+      dispatch('fetchRelationship', state.account),
+      dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Timeline/fetchTimeline', state.account, { root: true }),
+      dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Followers/fetchFollowers', state.account, { root: true }),
+      dispatch('TimelineSpace/Contents/SideBar/AccountProfile/Follows/fetchFollows', state.account, { root: true })
+    ]).finally(() => {
+      commit(MUTATION_TYPES.CHANGE_LOADING, false)
+    })
+  },
+  follow: async ({ commit, rootState, dispatch }, account: Account) => {
    const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
    const res: Response<Relationship> = await client.post<Relationship>(`/accounts/${account.id}/follow`)
    commit(MUTATION_TYPES.CHANGE_RELATIONSHIP, res.data)
+    dispatch('fetchRelationship', account)
    return res.data
  },
-  unfollow: async ({ commit, rootState }, account: Account) => {
+  unfollow: async ({ commit, rootState, dispatch }, account: Account) => {
    const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
    const res: Response<Relationship> = await client.post<Relationship>(`/accounts/${account.id}/unfollow`)
    commit(MUTATION_TYPES.CHANGE_RELATIONSHIP, res.data)
+    dispatch('fetchRelationship', account)
    return res.data
  },
  close: ({ commit }) => {
    commit(MUTATION_TYPES.CHANGE_ACCOUNT, null)
  },
-  unmute: async ({ rootState, commit }, account: Account) => {
+  unmute: async ({ rootState, commit, dispatch }, account: Account) => {
    const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
    const res: Response<Relationship> = await client.post<Relationship>(`/accounts/${account.id}/unmute`)
    commit(MUTATION_TYPES.CHANGE_RELATIONSHIP, res.data)
+    dispatch('fetchRelationship', account)
    return res.data
  },
-  block: async ({ rootState, commit }, account: Account) => {
+  block: async ({ rootState, commit, dispatch }, account: Account) => {
    const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
    const res: Response<Relationship> = await client.post<Relationship>(`/accounts/${account.id}/block`)
    commit(MUTATION_TYPES.CHANGE_RELATIONSHIP, res.data)
+    dispatch('fetchRelationship', account)
    return res.data
  },
-  unblock: async ({ rootState, commit }, account: Account) => {
+  unblock: async ({ rootState, commit, dispatch }, account: Account) => {
    const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
    const res: Response<Relationship> = await client.post<Relationship>(`/accounts/${account.id}/unblock`)
    commit(MUTATION_TYPES.CHANGE_RELATIONSHIP, res.data)
+    dispatch('fetchRelationship', account)
    return res.data
  }
 }
--- a/src/renderer/store/TimelineSpace/Contents/SideBar/TootDetail.ts
+++ b/src/renderer/store/TimelineSpace/Contents/SideBar/TootDetail.ts
@ -126,6 +126,9 @@ const actions: ActionTree<TootDetailState, RootState> = {
    commit(MUTATION_TYPES.UPDATE_ANCESTORS, res.data.ancestors)
    commit(MUTATION_TYPES.UPDATE_DESCENDANTS, res.data.descendants)
    return res.data
+  },
+  reload: async ({ state, dispatch }) => {
+    await dispatch('fetchToot', state.message)
  }
 }