use mixins instead of duplicate methods

webapp/components/User/index.vue

@@ -38,7 +38,7 @@
           >
             <ds-avatar
               :image="user.avatar"
-              :name="userName()"
+              :name="userName(user.name)"
               style="display: inline-block; vertical-align: middle;"
               size="32px"
             />
@@ -47,7 +47,7 @@
             <b
               class="username"
               style="vertical-align: middle;"
-            >{{ userName(18) }}</b>
+            >{{ userName(user.name,18) }}</b>
           </div>
           <!-- Time -->
           <div
@@ -141,9 +141,10 @@
 import { mapGetters } from 'vuex'
 
 import HcRelativeDateTime from '~/components/RelativeDateTime'
-import HcFollowButton from '~/components/FollowButton.vue'
+import HcFollowButton from '~/components/FollowButton'
-import HcBadges from '~/components/Badges.vue'
+import HcBadges from '~/components/Badges'
 import Dropdown from '~/components/Dropdown'
+import userName from '~/components/_mixins/userName'
 
 export default {
   name: 'HcUser',
@@ -153,6 +154,7 @@ export default {
     HcBadges,
     Dropdown
   },
+  mixins: [userName],
   props: {
     user: { type: Object, default: null },
     trunc: { type: Number, default: null },
@@ -174,18 +176,6 @@ export default {
       if (!(id && slug)) return ''
       return { name: 'profile-id-slug', params: { slug, id } }
     }
-  },
-  methods: {
-    // TODO method this is a duplicate from /pages/profile/_id/_slug.vue
-    // where to put this?
-    userName(maxLength) {
-      // Return Anonymous if no Username is given
-      if (!this.user.name) {
-        return this.$t('profile.userAnonym')
-      }
-      // Return full Username or truncated Username
-      return maxLength ? this.user.name.substring(0, maxLength) : this.user.name
-    }
   }
 }
 </script>

webapp/components/_mixins/userName.js

@@ -0,0 +1,12 @@
+export default {
+  methods: {
+    userName(userName, maxLength) {
+      // Return Anonymous if no Username is given
+      if (!userName) {
+        return this.$t('profile.userAnonym')
+      }
+      // Return full Username or truncated Username
+      return maxLength ? userName.substring(0, maxLength) : userName
+    }
+  }
+}

webapp/layouts/blank.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import seo from '~/components/mixins/seo'
+import seo from '~/components/_mixins/seo'
 
 export default {
   mixins: [seo]

webapp/layouts/default.vue

@@ -59,7 +59,7 @@
                 >
                   <div class="avatar-menu-popover">
                     {{ $t('login.hello') }}
-                    <b>{{ userName() }}</b>
+                    <b>{{ userName(user.name) }}</b>
                     <template v-if="user.role !== 'user'">
                       <ds-text
                         color="softer"
@@ -119,7 +119,8 @@ import LocaleSwitch from '~/components/LocaleSwitch'
 import Dropdown from '~/components/Dropdown'
 import SearchInput from '~/components/SearchInput.vue'
 import Modal from '~/components/Modal'
-import seo from '~/components/mixins/seo'
+import seo from '~/components/_mixins/seo'
+import userName from '~/components/_mixins/userName'
 
 export default {
   components: {
@@ -129,7 +130,7 @@ export default {
     Modal,
     LocaleSwitch
   },
-  mixins: [seo],
+  mixins: [seo, userName],
   data() {
     return {
       mobileSearchVisible: false
@@ -196,16 +197,6 @@ export default {
         return this.$route.path === url
       }
       return this.$route.path.indexOf(url) === 0
-    },
-    // TODO method this is a duplicate from /pages/profile/_id/_slug.vue
-    // where to put this?
-    userName(maxLength) {
-      // Return Anonymous if no Username is given
-      if (!this.user.name) {
-        return this.$t('profile.userAnonym')
-      }
-      // Return full Username or truncated Username
-      return maxLength ? this.user.name.substring(0, maxLength) : this.user.name
     }
   }
 }

webapp/pages/profile/_id/_slug.vue

@@ -16,7 +16,7 @@
         >
           <ds-avatar
             :image="user.avatar"
-            :name="userName()"
+            :name="userName(user.name)"
             class="profile-avatar"
             size="120px"
           />
@@ -34,7 +34,7 @@
               align="center"
               no-margin
             >
-              {{ userName() }}
+              {{ userName(user.name) }}
             </ds-heading>
             <ds-text
               v-if="user.location"
@@ -122,7 +122,7 @@
               tag="h5"
               color="soft"
             >
-              Wem folgt {{ userName(15) }}?
+              Wem folgt {{ userName(user.name,15) }}?
             </ds-text>
           </ds-space>
           <template v-if="user.following && user.following.length">
@@ -153,7 +153,7 @@
           </template>
           <template v-else>
             <p style="text-align: center; opacity: .5;">
-              {{ userName() }} folgt niemandem
+              {{ userName(user.name) }} folgt niemandem
             </p>
           </template>
         </ds-card>
@@ -167,7 +167,7 @@
               tag="h5"
               color="soft"
             >
-              Wer folgt {{ userName(15) }}?
+              Wer folgt {{ userName(user.name,15) }}?
             </ds-text>
           </ds-space>
           <template v-if="user.followedBy && user.followedBy.length">
@@ -198,7 +198,7 @@
           </template>
           <template v-else>
             <p style="text-align: center; opacity: .5;">
-              niemand folgt {{ userName() }}
+              niemand folgt {{ userName(user.name) }}
             </p>
           </template>
         </ds-card>
@@ -207,9 +207,7 @@
           margin="large"
         >
           <ds-card style="position: relative; height: auto;">
-            <ds-space
+            <ds-space margin="x-small">
-              margin="x-small"
-            >
               <ds-text
                 tag="h5"
                 color="soft"
@@ -223,9 +221,7 @@
                   margin="x-small"
                 >
                   <a :href="link.url">
-                    <ds-avatar
+                    <ds-avatar :image="link.favicon" />
-                      :image="link.favicon"
-                    />
                     {{ link.username }}
                   </a>
                 </ds-space>
@@ -330,6 +326,7 @@ import HcBadges from '~/components/Badges.vue'
 import HcLoadMore from '~/components/LoadMore.vue'
 import HcEmpty from '~/components/Empty.vue'
 import ContentMenu from '~/components/ContentMenu'
+import userName from '~/components/_mixins/userName'
 
 export default {
   components: {
@@ -342,6 +339,7 @@ export default {
     HcEmpty,
     ContentMenu
   },
+  mixins: [userName],
   transition: {
     name: 'slide-up',
     mode: 'out-in'
@@ -430,14 +428,6 @@ export default {
         },
         fetchPolicy: 'cache-and-network'
       })
-    },
-    userName(maxLength) {
-      // Return Anonymous if no Username is given
-      if (!this.user.name) {
-        return this.$t('profile.userAnonym')
-      }
-      // Return full Username or truncated Username
-      return maxLength ? this.user.name.substring(0, maxLength) : this.user.name
     }
   },
   apollo: {