diff --git a/webapp/components/utils/PostHelpers.js b/webapp/components/utils/PostHelpers.js index 5ff912a97..403e49622 100644 --- a/webapp/components/utils/PostHelpers.js +++ b/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 + }) +} diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue index e552062f4..e3f82e5ce 100644 --- a/webapp/pages/post/_id/_slug/index.vue +++ b/webapp/pages/post/_id/_slug/index.vue @@ -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' @@ -180,18 +184,7 @@ export default { return this.$store.getters['auth/user'].id === author.id }, sortedTags() { - // Make sure the property is valid. - if (!this.post.tags || !this.post.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 this.post.tags object remains unchanged. - */ - return this.post.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 - }) + return sortTagsAlphabetically(this.post.tags) }, }, methods: { diff --git a/webapp/pages/post/_id/_slug/more-info.vue b/webapp/pages/post/_id/_slug/more-info.vue index ac1a6694d..b99552667 100644 --- a/webapp/pages/post/_id/_slug/more-info.vue +++ b/webapp/pages/post/_id/_slug/more-info.vue @@ -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: { @@ -63,18 +64,7 @@ export default { return this.Post ? this.Post[0] || {} : {} }, sortedTags() { - // Make sure the property is valid. - if (!this.post.tags || !this.post.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 this.post.tags object remains unchanged. - */ - return this.post.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 - }) + return sortTagsAlphabetically(this.post.tags) }, }, methods: {