Centralise the avatar link generation

src/api/base.js

@@ -1,4 +1,5 @@
 export default {
+  baseAvatarUrl: 'https://cdn.libravatar.org/avatar',
   baseUrl: 'http://localhost:8080/v1',
 
   buildQueryString (filters) {

src/api/user.js

@@ -1,4 +1,5 @@
 import Axios from 'axios'
+import SHA256 from 'crypto-js/sha256'
 
 import base from './base.js'
 
@@ -16,6 +17,15 @@ export default {
     return user
   },
 
+  getAvatarUrl (user, size) {
+    if (!size) {
+      size = 30
+    }
+    // TODO: Allow user to select email or openid for hashing
+    const hash = SHA256(user.openid)
+    return `${base.baseAvatarUrl}/${hash}?s=${size}&d=retro`
+  },
+
   async browse (params) {
     const query = base.buildQueryString(params)
     const { data: users } = await Axios.get(`${USERS_URL}?${query}`)

src/components/UserLinkInline.vue

@@ -6,8 +6,6 @@
 </template>
 
 <script>
-import SHA256 from 'crypto-js/sha256'
-
 import user from '@/api/user.js'
 
 export default {
@@ -28,10 +26,7 @@ export default {
   methods: {
     async getUser (userId) {
       this.user = await user.get(userId)
-
-      // TODO: Allow user to select email or openid for hashing
-      const emailHash = SHA256(this.user.openid)
-      this.avatar = `https://cdn.libravatar.org/avatar/${emailHash}?s=30&d=retro`
+      this.avatar = user.getAvatarUrl(this.user, 30)
     }
   }
 }

src/views/UserDetail.vue

@@ -6,19 +6,17 @@
         <h1>{{ user.full_name }}</h1>
         <p class="metadata">{{ user.email }}</p>
       </div>
-      <ul class="tabs">
-        <li class="tab" :class="{ active: currentTab === tab }" v-for="tab in tabs" :key="tab.name" @click="currentTab = tab">
-          {{ tab.name }}
-        </li>
-      </ul>
-      <component :is="currentTab.component" :user="user"></component>
     </div>
+    <ul class="tabs">
+      <li class="tab" :class="{ active: currentTab === tab }" v-for="tab in tabs" :key="tab.name" @click="currentTab = tab">
+        {{ tab.name }}
+      </li>
+    </ul>
+    <component :is="currentTab.component" :user="user"></component>
   </div>
 </template>
 
 <script>
-import SHA256 from 'crypto-js/sha256'
-
 import user from '@/api/user.js'
 
 import UserTabActivity from '@/components/UserTabActivity.vue'
@@ -67,9 +65,7 @@ export default {
   methods: {
     async getUser (userId) {
       this.user = await user.get(userId)
-      // TODO: Allow user to select email or openid for hashing
-      const emailHash = SHA256(this.user.openid)
-      this.avatar = `https://cdn.libravatar.org/avatar/${emailHash}?s=200&d=retro`
+      this.avatar = user.getAvatarUrl(this.user, 200)
     }
   }
 }