Merge pull request #3589 from Human-Connection/2244-order-tags-in-cloud-alphabetically

feat: 🍰 Alphabetically sorting tags using compute functions on index and more…

webapp/components/utils/PostHelpers.js

@@ -33,3 +33,18 @@ export function deletePostMutation(postId) {
     },
   }
 }
+
+export function sortTagsAlphabetically(tags) {
+  // Make sure the property is valid.
+  if (!tags || !tags.length) return false
+  /*  Using .slice(0) to make a shallow copy. Otherwise a vue/no-side-effects-in-computed-properties error
+      would be thrown because sort() sorts in place. A shallow copy is fine because only first level objects are
+      affected by the sort, the original tags object remains unchanged.
+  */
+  return tags.slice(0).sort(function (a, b) {
+    // Converting to lowercase to make sort case insensitive.
+    const tagA = a.id.toLowerCase()
+    const tagB = b.id.toLowerCase()
+    return tagA < tagB ? -1 : tagA > tagB ? 1 : 0
+  })
+}

webapp/pages/post/_id/_slug/index.spec.js

@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 import Vue from 'vue'
 import PostSlug from './index.vue'
 import CommentList from '~/components/CommentList/CommentList'
+import HcHashtag from '~/components/Hashtag/Hashtag'
 
 config.stubs['client-only'] = '<span><slot /></span>'
 config.stubs['nuxt-link'] = '<span><slot /></span>'
@@ -143,5 +144,48 @@ describe('PostSlug', () => {
         })
       })
     })
+
+    describe('tags shown in tag cloud', () => {
+      beforeEach(async () => {
+        // Create backendData with tags, not alphabetically sorted.
+        backendData.post.tags = [
+          { id: 'c' },
+          { id: 'qw' },
+          { id: 'BQ' },
+          { id: '42' },
+          { id: 'Bw' },
+          { id: 'a' },
+        ]
+
+        wrapper = await Wrapper()
+      })
+
+      it('are present', async () => {
+        // Get length from backendData and compare against number of tags present in component.
+        expect(wrapper.findAll(HcHashtag).length).toBe(backendData.post.tags.length)
+      })
+
+      it('are alphabetically ordered', async () => {
+        // Get all HcHastag components
+        const wrappers = wrapper.findAll(HcHashtag).wrappers
+        // Exctract ID properties (tag names) from component.
+        const ids = []
+        wrappers.forEach((x) => {
+          ids.push({
+            id: x.props().id,
+          })
+        })
+        // Compare extracted IDs with solution.
+        const idsAlphabetically = [
+          { id: '42' },
+          { id: 'a' },
+          { id: 'BQ' },
+          { id: 'Bw' },
+          { id: 'c' },
+          { id: 'qw' },
+        ]
+        expect(ids).toStrictEqual(idsAlphabetically)
+      })
+    })
   })
 })

webapp/pages/post/_id/_slug/index.vue

@@ -64,7 +64,7 @@
       <!-- Tags -->
       <div v-if="post.tags && post.tags.length" class="tags">
         <ds-space margin="xx-small" />
-        <hc-hashtag v-for="tag in post.tags" :key="tag.id" :id="tag.id" />
+        <hc-hashtag v-for="tag in sortedTags" :key="tag.id" :id="tag.id" />
       </div>
       <ds-space margin-top="x-large">
         <ds-flex :gutter="{ lg: 'small' }">
@@ -116,7 +116,11 @@ import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import HcShoutButton from '~/components/ShoutButton.vue'
 import CommentForm from '~/components/CommentForm/CommentForm'
 import CommentList from '~/components/CommentList/CommentList'
-import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostHelpers'
+import {
+  postMenuModalsData,
+  deletePostMutation,
+  sortTagsAlphabetically,
+} from '~/components/utils/PostHelpers'
 import PostQuery from '~/graphql/PostQuery'
 import HcEmotions from '~/components/Emotions/Emotions'
 import PostMutations from '~/graphql/PostMutations'
@@ -179,6 +183,9 @@ export default {
       if (!author) return false
       return this.$store.getters['auth/user'].id === author.id
     },
+    sortedTags() {
+      return sortTagsAlphabetically(this.post.tags)
+    },
   },
   methods: {
     reply(message) {

webapp/pages/post/_id/_slug/more-info.vue

@@ -14,7 +14,7 @@
       <h3>
         {{ $t('post.moreInfo.titleOfHashtagsSection') }}
       </h3>
-      <hc-hashtag v-for="tag in post.tags" :key="tag.id" :id="tag.id" />
+      <hc-hashtag v-for="tag in sortedTags" :key="tag.id" :id="tag.id" />
     </template>
     <h3>{{ $t('post.moreInfo.titleOfRelatedContributionsSection') }}</h3>
     <ds-section>
@@ -44,6 +44,7 @@ import HcHashtag from '~/components/Hashtag/Hashtag'
 import { relatedContributions } from '~/graphql/PostQuery'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
+import { sortTagsAlphabetically } from '~/components/utils/PostHelpers'
 
 export default {
   transition: {
@@ -62,6 +63,9 @@ export default {
     post() {
       return this.Post ? this.Post[0] || {} : {}
     },
+    sortedTags() {
+      return sortTagsAlphabetically(this.post.tags)
+    },
   },
   methods: {
     removePostFromList(deletedPost) {