WIP: Morse/issue 53

src/api/accounts.ts

@@ -22,8 +22,8 @@ interface updateAccountFormData {
   }
 }
 
-async function fetchAccountInfoById () {
-
+async function fetchAccountInfoById (id: string): Promise<{ data: mastodonentities.Account }> {
+  return Vue.http.get(patchApiUri(`/api/v1/accounts/${id}`)) as any
 }
 
 async function fetchCurrentUserAccountInfo (): Promise<{ data: mastodonentities.AuthenticatedAccount }> {

src/api/streaming.ts

@@ -144,7 +144,7 @@ class Streaming {
     if (store.state.statusMap[newStatus.id]) return
 
     // update status map
-    store.commit('updateStatusMap', { [newStatus.id]: newStatus })
+    store.dispatch('updateStatusMap', { [newStatus.id]: newStatus })
     if (timeLineType === TimeLineTypes.HOME) {
       prepareRootStatus(newStatus)
     }

src/components/Drawer/index.vue

@@ -180,14 +180,14 @@
     async onBaseRouteItemClick (clickedRouterValue: string) {
       if (clickedRouterValue === 'profile') {
         // todo
-        // this.$router.push({
-        //   name: this.$routersInfo.accounts.name,
-        //   params: {
-        //     accountId: this.currentUserAccount.id
-        //   }
-        // })
-
-        return window.open(this.currentUserAccount.url, '_blank')
+        this.$router.push({
+          name: this.$routersInfo.accounts.name,
+          params: {
+            accountId: this.currentUserAccount.id
+          }
+        })
+
+        // return window.open(this.currentUserAccount.url, '_blank')
       } else {
 
         const targetPath = baseRouterInfoList.find(routerInfo => routerInfo.value === clickedRouterValue).to

src/index.ts

@@ -56,9 +56,9 @@ if (window.Notification) {
 
 ThemeManager.setTheme(store.state.appStatus.settings.theme)
 
-if ('serviceWorker' in navigator) {
-  navigator.serviceWorker.register('/sw.js')
-}
+// if ('serviceWorker' in navigator) {
+//   navigator.serviceWorker.register('/sw.js')
+// }
 
 new Vue({
   el: '#app',

src/interface/store.ts

@@ -31,6 +31,10 @@ export namespace cuckoostore {
       [statusId: string]: mastodonentities.Status
     }
 
+    accountMap: {
+      [accountId: string]: mastodonentities.Account
+    }
+
     notifications: Array<mastodonentities.Notification>
 
     relationships: {

src/pages/Accounts/AccountHeader.vue

@@ -1,27 +1,61 @@
 <template>
-  <div class="account-header">
-
+  <div class="account-header" :style="{ backgroundImage: `url(${profileCoverImageSrc})` }">
+    <div class="user-info-area">
+      <div class="left-area">
+        <mu-avatar class="account-avatar" slot="avatar" size="34">
+          <img :src="account.avatar">
+        </mu-avatar>
+      </div>
+      <div class="right-area"></div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-  import { Vue, Component } from 'vue-property-decorator'
+  import { Vue, Component, Prop } from 'vue-property-decorator'
   import {  } from 'vuex-class'
+  import { mastodonentities } from "@/interface"
+
+  const defaultUserProfileCover = 'https://lh3.googleusercontent.com/c5dqxl-2uHZ82ah9p7yxrVF1ZssrJNSV_15Nu0TUZwzCWqmtoLxCUJgEzLGtxsrJ6-v6R6rKU_-FYm881TTiMCJ_=w530-h298-n-rw-no'
 
   @Component({})
   class AccountHeader extends Vue {
 
     $route
 
-    mounted () {
-      const accountId = this.$route.params.accountId
-    }
+    @Prop() account: mastodonentities.Account
 
+    get profileCoverImageSrc () {
+      return this.account.header.endsWith('missing.png') ? defaultUserProfileCover : this.account.header
+    }
   }
 
   export default AccountHeader
 </script>
 
 <style lang="less" scoped>
+  .account-header {
+    width: 100%;
+    margin: 0 auto;
+    background-size: cover;
+    background-position: 50%;
+  }
+
+  @media (min-width: 0px){
+    .account-header {
+      height: 280px;
+      max-width: 530px;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .account-header {
+      height: 380px;
+      max-width: 1084px;
+      box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14);
+      border-radius: 2px;
+      overflow: hidden;
+    }
+  }
 
-</style>
+</style>

src/pages/Accounts/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="account-container">
-    <account-header />
+  <div class="account-container" v-loading="!account">
+    <account-header v-if="account" :account="account"/>
   </div>
 </template>
 
 <script lang="ts">
   import { Vue, Component } from 'vue-property-decorator'
-  import { } from 'vuex-class'
+  import { State, Action } from 'vuex-class'
   import AccountHeader from './AccountHeader'
 
   @Component({
@@ -16,11 +16,46 @@
   })
   class Accounts extends Vue {
 
+    $route
+
+    $progress
+
+    @State('accountMap') accountMap
+
+    @Action('fetchAccountInfoById') fetchAccountInfoById
+
+    get account () {
+      return this.accountMap[this.$route.params.accountId]
+    }
+
+    mounted () {
+      this.fetchTargetAccountInfo()
+    }
+
+    async fetchTargetAccountInfo () {
+      this.$progress.start()
+      await this.fetchAccountInfoById(this.$route.params.accountId)
+      this.$progress.done()
+    }
   }
 
   export default Accounts
 </script>
 
 <style lang="less" scoped>
+  .account-container {
+    margin: 0 auto;
+  }
 
+  @media (min-width: 0px){
+    .account-container {
+      width: 100%;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .account-container {
+      width: 85%;
+    }
+  }
 </style>

src/store/actions/accounts.ts

@@ -2,6 +2,15 @@ import * as Api from '@/api'
 import { mastodonentities } from "@/interface"
 
 const accounts = {
+  async fetchAccountInfoById ({ commit }, id: string) {
+    try {
+      const result = await Api.accounts.fetchAccountInfoById(id)
+      commit('updateAccountMap', { [result.data.id]: result.data })
+    } catch (e) {
+
+    }
+  },
+
   async followAccountById ({ commit }, id: string) {
     try {
       const result = await Api.accounts.followAccountById(id)

src/store/actions/index.ts

@@ -22,6 +22,8 @@ const actions = {
       const accountInfo: mastodonentities.AuthenticatedAccount = result.data
 
       commit('updateCurrentUserAccount', accountInfo)
+      commit('updateAccountMap', { [accountInfo.id]: accountInfo })
+
       // sync settings
       commit('updatePostPrivacy', accountInfo.source.privacy)
       commit('updatePostMediaAsSensitiveMode', accountInfo.source.sensitive)

src/store/actions/statuses.ts

@@ -1,5 +1,6 @@
 import * as api from '@/api'
 import { TimeLineTypes } from '@/constant'
+import { mastodonentities } from "@/interface"
 
 interface postStatusFormData {
   // The text of the status
@@ -22,7 +23,7 @@ const statuses = {
   async fetchStatusById ({ commit, dispatch }, statusId: string) {
     try {
       const result = await api.statuses.getStatusById(statusId)
-      commit('updateStatusMap', { [statusId]: result.data })
+      dispatch('updateStatusMap', { [statusId]: result.data })
       dispatch('updateContextMap', statusId)
     } catch (e) {
       throw new Error(e)
@@ -58,7 +59,7 @@ const statuses = {
     }
   },
 
-  async updateContextMap ({ commit }, statusId: string) {
+  async updateContextMap ({ commit, dispatch }, statusId: string) {
     if (!statusId) throw new Error('unknown status id!')
 
     try {
@@ -74,7 +75,7 @@ const statuses = {
       const newStatusMap = {}
       ancestors.forEach(status => newStatusMap[status.id] = status)
       descendants.forEach(status => newStatusMap[status.id] = status)
-      commit('updateStatusMap', newStatusMap)
+      dispatch('updateStatusMap', newStatusMap)
     } catch (e) {
 
     }
@@ -100,7 +101,7 @@ const statuses = {
       }
 
       // update status map
-      commit('updateStatusMap', { [result.data.id]: result.data })
+      dispatch('updateStatusMap', { [result.data.id]: result.data })
 
     } catch (e) {
       throw new Error(e)
@@ -120,6 +121,17 @@ const statuses = {
     } catch (e) {
 
     }
+  },
+
+  async updateStatusMap ({ commit }, newStatusMap: { [statusId: string]: mastodonentities.Status }) {
+    commit('updateStatusMap', newStatusMap)
+
+    const newAccountMap = {}
+    Object.keys(newStatusMap).forEach(statusId => {
+      newAccountMap[newStatusMap[statusId].account.id] = newStatusMap[statusId].account
+    })
+
+    commit('updateAccountMap', newAccountMap)
   }
 }
 

src/store/actions/timelines.ts

@@ -65,14 +65,14 @@ export default {
 
           Object.keys(newContextMap).length && commit('updateContextMap', newContextMap)
           // also update status map
-          Object.keys(newStatusMap).length && commit('updateStatusMap', newStatusMap)
+          Object.keys(newStatusMap).length && dispatch('updateStatusMap', newStatusMap)
         })
       }
 
       // update status map
       const newStatusMap = {}
       result.data.forEach(status => newStatusMap[status.id] = status)
-      commit('updateStatusMap', newStatusMap)
+      dispatch('updateStatusMap', newStatusMap)
 
       commit(mutationName, { newStatusIdList: result.data.map(status => status.id), timeLineType, hashName })
 

src/store/index.ts

@@ -39,6 +39,8 @@ const state: cuckoostore.stateInfo = {
 
   statusMap: getLocalSetting('statusMap', {}),
 
+  accountMap: {},
+
   customEmojis: getLocalSetting('customEmojis', []),
 
   notifications: [],

src/store/mutations/index.ts

@@ -134,6 +134,12 @@ const mutations = {
     })
   },
 
+  updateAccountMap (state: cuckoostore.stateInfo, newAccountMap) {
+    Object.keys(newAccountMap).forEach(accountId => {
+      Vue.set(state.accountMap, accountId, newAccountMap[accountId])
+    })
+  },
+
   ...oAuthInfoMutations,
   ...timelinesMutations,
   ...statusesMutations,