mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
963cbbef32
@mattwr18 I prefer (I believe it's even best practice) that a delete
mutation should return the deleted object. If you run the delete
mutation again, it should return `null` because there is no object like
that anymore. That way the client knows if a delete mutation has changed
any state in the database.
Also I fixed another bug in the resolver. If your graphql mutation looks
like this:
```gql
mutation {
RemovePostEmotions(to:{ id:"p15"}, data:{emotion: angry}) {
from {
id
name
}
to {
id
title
}
emotion
}
}
```
Then you get errors because your resolver does not return the name for
the user or the title for the post anymore. Just use spread operator...
and it's fixed.
116 lines
3.1 KiB
Vue
116 lines
3.1 KiB
Vue
<template>
|
|
<ds-flex :gutter="{ lg: 'large' }" class="emotions-flex">
|
|
<div v-for="emotion in Object.keys(PostsEmotionsCountByEmotion)" :key="emotion">
|
|
<ds-flex-item :width="{ lg: '100%' }">
|
|
<hc-emotions-button
|
|
@toggleEmotion="toggleEmotion"
|
|
:PostsEmotionsCountByEmotion="PostsEmotionsCountByEmotion"
|
|
:iconPath="iconPath(emotion)"
|
|
:emotion="emotion"
|
|
/>
|
|
</ds-flex-item>
|
|
</div>
|
|
</ds-flex>
|
|
</template>
|
|
<script>
|
|
import gql from 'graphql-tag'
|
|
import { mapGetters } from 'vuex'
|
|
import HcEmotionsButton from '~/components/EmotionsButton/EmotionsButton'
|
|
import { PostsEmotionsByCurrentUser } from '~/graphql/PostQuery.js'
|
|
import PostMutations from '~/graphql/PostMutations.js'
|
|
|
|
export default {
|
|
components: {
|
|
HcEmotionsButton,
|
|
},
|
|
props: {
|
|
post: { type: Object, default: () => {} },
|
|
},
|
|
data() {
|
|
return {
|
|
selectedEmotions: [],
|
|
PostsEmotionsCountByEmotion: { funny: 0, happy: 0, surprised: 0, cry: 0, angry: 0 },
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
currentUser: 'auth/user',
|
|
}),
|
|
},
|
|
created() {
|
|
Object.keys(this.PostsEmotionsCountByEmotion).map(emotion => {
|
|
this.emotionsCount(emotion)
|
|
})
|
|
},
|
|
methods: {
|
|
iconPath(emotion) {
|
|
if (this.isActive(emotion)) {
|
|
return `/img/svg/emoji/${emotion}_color.svg`
|
|
}
|
|
return `/img/svg/emoji/${emotion}.svg`
|
|
},
|
|
toggleEmotion(emotion) {
|
|
this.$apollo
|
|
.mutate({
|
|
mutation: this.isActive(emotion)
|
|
? PostMutations().RemovePostEmotionsMutation
|
|
: PostMutations().AddPostEmotionsMutation,
|
|
variables: {
|
|
to: { id: this.post.id },
|
|
data: { emotion },
|
|
},
|
|
})
|
|
.then(() => {
|
|
this.isActive(emotion)
|
|
? this.PostsEmotionsCountByEmotion[emotion]--
|
|
: this.PostsEmotionsCountByEmotion[emotion]++
|
|
|
|
const index = this.selectedEmotions.indexOf(emotion)
|
|
if (index > -1) {
|
|
this.selectedEmotions.splice(index, 1)
|
|
} else {
|
|
this.selectedEmotions.push(emotion)
|
|
}
|
|
})
|
|
},
|
|
isActive(emotion) {
|
|
const index = this.selectedEmotions.indexOf(emotion)
|
|
if (index > -1) {
|
|
return true
|
|
}
|
|
return false
|
|
},
|
|
emotionsCount(emotion) {
|
|
this.$apollo
|
|
.query({
|
|
query: gql`
|
|
query($postId: ID!, $data: _EMOTEDInput!) {
|
|
PostsEmotionsCountByEmotion(postId: $postId, data: $data)
|
|
}
|
|
`,
|
|
variables: { postId: this.post.id, data: { emotion } },
|
|
fetchPolicy: 'no-cache',
|
|
})
|
|
.then(({ data: { PostsEmotionsCountByEmotion } }) => {
|
|
this.PostsEmotionsCountByEmotion[emotion] = PostsEmotionsCountByEmotion
|
|
})
|
|
},
|
|
},
|
|
apollo: {
|
|
PostsEmotionsByCurrentUser: {
|
|
query() {
|
|
return PostsEmotionsByCurrentUser()
|
|
},
|
|
variables() {
|
|
return {
|
|
postId: this.post.id,
|
|
}
|
|
},
|
|
result({ data: { PostsEmotionsByCurrentUser } }) {
|
|
this.selectedEmotions = PostsEmotionsByCurrentUser
|
|
},
|
|
},
|
|
},
|
|
}
|
|
</script>
|