mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
Merge pull request #213 from Human-Connection/distinct-shouts-and-follows
Fix follow and shout status
This commit is contained in:
Grzegorz Leoniec
GitHub
commit
243d604abc
@ -107,7 +107,9 @@
|
||||
<ds-flex-item :width="{base: 3}">
|
||||
<hc-follow-button
|
||||
:follow-id="author.id"
|
||||
@update="voted = true"
|
||||
:is-followed="author.followedByCurrentUser"
|
||||
@optimistic="follow => author.followedByCurrentUser = follow"
|
||||
@update="follow => author.followedByCurrentUser = follow"
|
||||
/>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item :width="{base: 1}">
|
||||
@ -139,21 +141,12 @@ export default {
|
||||
trunc: { type: Number, default: null },
|
||||
showAuthorPopover: { type: Boolean, default: true }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
voted: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
itsMe() {
|
||||
return this.author.slug === this.$store.getters['auth/user'].slug
|
||||
},
|
||||
fanCount() {
|
||||
let count = Number(this.author.followedByCount) || 0
|
||||
if (this.voted) {
|
||||
// NOTE: this is used for presentation
|
||||
count += 1
|
||||
}
|
||||
return count
|
||||
},
|
||||
author() {
|
||||
|
||||
@ -2,12 +2,15 @@
|
||||
<ds-button
|
||||
:disabled="disabled || !followId"
|
||||
:loading="loading"
|
||||
icon="plus"
|
||||
primary
|
||||
:icon="icon"
|
||||
:primary="isFollowed && !hovered"
|
||||
:danger="isFollowed && hovered"
|
||||
fullwidth
|
||||
@click.prevent="follow"
|
||||
@mouseenter.native="onHover"
|
||||
@mouseleave.native="hovered = false"
|
||||
@click.prevent="toggle"
|
||||
>
|
||||
Folgen
|
||||
{{ label }}
|
||||
</ds-button>
|
||||
</template>
|
||||
|
||||
@ -18,37 +21,69 @@ export default {
|
||||
name: 'HcFollowButton',
|
||||
|
||||
props: {
|
||||
followId: { type: String, default: null }
|
||||
followId: { type: String, default: null },
|
||||
isFollowed: { type: Boolean, default: false }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
disabled: false,
|
||||
loading: false
|
||||
loading: false,
|
||||
hovered: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
icon() {
|
||||
if (this.isFollowed && this.hovered) {
|
||||
return 'close'
|
||||
} else {
|
||||
return this.isFollowed ? 'check' : 'plus'
|
||||
}
|
||||
},
|
||||
label() {
|
||||
if (this.isFollowed) {
|
||||
return this.$t('followButton.following')
|
||||
} else {
|
||||
return this.$t('followButton.follow')
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isFollowed() {
|
||||
this.loading = false
|
||||
this.hovered = false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
follow() {
|
||||
this.loading = true
|
||||
onHover() {
|
||||
if (!this.disabled && !this.loading) {
|
||||
this.hovered = true
|
||||
}
|
||||
},
|
||||
toggle() {
|
||||
const follow = !this.isFollowed
|
||||
const mutation = follow ? 'follow' : 'unfollow'
|
||||
|
||||
this.hovered = false
|
||||
|
||||
this.$emit('optimistic', follow)
|
||||
|
||||
this.$apollo
|
||||
.mutate({
|
||||
mutation: gql`
|
||||
mutation($myId: ID!, $followId: ID!) {
|
||||
AddUserFollowing(from: { id: $myId }, to: { id: $followId }) {
|
||||
from {
|
||||
id
|
||||
}
|
||||
}
|
||||
mutation($id: ID!) {
|
||||
${mutation}(id: $id, type: User)
|
||||
}
|
||||
`,
|
||||
variables: {
|
||||
myId: this.$store.getters['auth/user'].id,
|
||||
followId: this.followId
|
||||
id: this.followId
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
this.loading = false
|
||||
this.disabled = true
|
||||
this.$emit('update')
|
||||
.then(res => {
|
||||
// this.$emit('optimistic', follow ? res.data.follow : follow)
|
||||
this.$emit('update', follow)
|
||||
})
|
||||
.catch(() => {
|
||||
this.$emit('optimistic', !follow)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,20 +4,25 @@
|
||||
style="text-align: center"
|
||||
>
|
||||
<ds-button
|
||||
:disabled="disabled || loading"
|
||||
danger
|
||||
:loading="loading"
|
||||
:disabled="disabled"
|
||||
:ghost="!shouted"
|
||||
:primary="shouted"
|
||||
size="x-large"
|
||||
icon="bullhorn"
|
||||
@click="shout"
|
||||
@click="toggle"
|
||||
/>
|
||||
<ds-space margin-bottom="xx-small" />
|
||||
<ds-text color="soft">
|
||||
<ds-text
|
||||
color="soft"
|
||||
class="shout-button-text"
|
||||
>
|
||||
<ds-heading
|
||||
style="display: inline"
|
||||
tag="h3"
|
||||
>
|
||||
{{ shoutedCount }}x
|
||||
</ds-heading> Empfohlen
|
||||
</ds-heading> {{ $t('shoutButton.shouted') }}
|
||||
</ds-text>
|
||||
</ds-space>
|
||||
</template>
|
||||
@ -28,41 +33,69 @@ import gql from 'graphql-tag'
|
||||
export default {
|
||||
props: {
|
||||
count: { type: Number, default: 0 },
|
||||
postId: { type: String, default: null }
|
||||
postId: { type: String, default: null },
|
||||
isShouted: { type: Boolean, default: false },
|
||||
disabled: { type: Boolean, default: false }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
disabled: false,
|
||||
shoutedCount: this.count
|
||||
shoutedCount: this.count,
|
||||
shouted: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isShouted: {
|
||||
immediate: true,
|
||||
handler: function(shouted) {
|
||||
this.shouted = shouted
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
shout() {
|
||||
this.loading = true
|
||||
toggle() {
|
||||
const shout = !this.shouted
|
||||
const mutation = shout ? 'shout' : 'unshout'
|
||||
const count = shout ? this.shoutedCount + 1 : this.shoutedCount - 1
|
||||
|
||||
const backup = {
|
||||
shoutedCount: this.shoutedCount,
|
||||
shouted: this.shouted
|
||||
}
|
||||
|
||||
this.shoutedCount = count
|
||||
this.shouted = shout
|
||||
|
||||
this.$apollo
|
||||
.mutate({
|
||||
mutation: gql`
|
||||
mutation($myId: ID!, $postId: ID!) {
|
||||
AddUserShouted(from: { id: $myId }, to: { id: $postId }) {
|
||||
from {
|
||||
id
|
||||
}
|
||||
}
|
||||
mutation($id: ID!) {
|
||||
${mutation}(id: $id, type: Post)
|
||||
}
|
||||
`,
|
||||
variables: {
|
||||
myId: this.$store.getters['auth/user'].id,
|
||||
postId: this.postId
|
||||
id: this.postId
|
||||
}
|
||||
})
|
||||
.then(() => {
|
||||
.then(res => {
|
||||
if (res && res.data) {
|
||||
this.$emit('update', shout)
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.shoutedCount = backup.shoutedCount
|
||||
this.shouted = backup.shouted
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false
|
||||
this.disabled = true
|
||||
this.shoutedCount++
|
||||
this.$emit('update')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.shout-button-text {
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -29,6 +29,7 @@ export default app => {
|
||||
slug
|
||||
avatar
|
||||
followedByCount
|
||||
followedByCurrentUser
|
||||
contributionsCount
|
||||
commentsCount
|
||||
badges {
|
||||
@ -41,12 +42,14 @@ export default app => {
|
||||
}
|
||||
}
|
||||
followedByCount
|
||||
followedByCurrentUser
|
||||
followedBy(first: 7) {
|
||||
id
|
||||
name
|
||||
slug
|
||||
avatar
|
||||
followedByCount
|
||||
followedByCurrentUser
|
||||
contributionsCount
|
||||
commentsCount
|
||||
badges {
|
||||
|
||||
@ -17,6 +17,13 @@
|
||||
"moreInfo": "Was ist Human Connection?",
|
||||
"hello": "Hallo"
|
||||
},
|
||||
"followButton": {
|
||||
"follow": "Folgen",
|
||||
"following": "Folge Ich"
|
||||
},
|
||||
"shoutButton": {
|
||||
"shouted": "empfohlen"
|
||||
},
|
||||
"profile": {
|
||||
"name": "Mein Profil",
|
||||
"memberSince": "Mitglied seit",
|
||||
|
||||
@ -17,6 +17,13 @@
|
||||
"moreInfo": "What is Human Connection?",
|
||||
"hello": "Hello"
|
||||
},
|
||||
"followButton": {
|
||||
"follow": "Follow",
|
||||
"following": "Following"
|
||||
},
|
||||
"shoutButton": {
|
||||
"shouted": "shouted"
|
||||
},
|
||||
"profile": {
|
||||
"name": "My Profile",
|
||||
"memberSince": "Member since",
|
||||
|
||||
@ -108,6 +108,7 @@ export default {
|
||||
shoutedCount
|
||||
commentsCount
|
||||
followedByCount
|
||||
followedByCurrentUser
|
||||
location {
|
||||
name: name${this.$i18n.locale().toUpperCase()}
|
||||
}
|
||||
|
||||
@ -28,7 +28,9 @@
|
||||
<ds-space margin="xx-large" />
|
||||
<hc-shout-button
|
||||
v-if="post.author"
|
||||
:disabled="isAuthor(post.author.id)"
|
||||
:count="post.shoutedCount"
|
||||
:is-shouted="post.shoutedByCurrentUser"
|
||||
:post-id="post.id"
|
||||
/>
|
||||
<!-- Categories -->
|
||||
@ -188,9 +190,10 @@ export default {
|
||||
contributionsCount
|
||||
commentsCount
|
||||
followedByCount
|
||||
followedByCurrentUser
|
||||
location {
|
||||
name: name${this.$i18n.locale().toUpperCase()}
|
||||
}
|
||||
name: name${this.$i18n.locale().toUpperCase()}
|
||||
}
|
||||
badges {
|
||||
id
|
||||
key
|
||||
@ -215,6 +218,7 @@ export default {
|
||||
contributionsCount
|
||||
commentsCount
|
||||
followedByCount
|
||||
followedByCurrentUser
|
||||
location {
|
||||
name: name${this.$i18n.locale().toUpperCase()}
|
||||
}
|
||||
@ -231,6 +235,7 @@ export default {
|
||||
icon
|
||||
}
|
||||
shoutedCount
|
||||
shoutedByCurrentUser
|
||||
}
|
||||
}
|
||||
`)
|
||||
|
||||
@ -109,6 +109,7 @@ export default {
|
||||
avatar
|
||||
contributionsCount
|
||||
followedByCount
|
||||
followedByCurrentUser
|
||||
commentsCount
|
||||
location {
|
||||
name: name${this.$i18n.locale().toUpperCase()}
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
<ds-flex>
|
||||
<ds-flex-item>
|
||||
<no-ssr>
|
||||
<ds-number :label="$t('profile.following')">
|
||||
<ds-number :label="$t('profile.followers')">
|
||||
<hc-count-to
|
||||
slot="count"
|
||||
:end-val="followedByCount"
|
||||
@ -71,7 +71,7 @@
|
||||
</ds-flex-item>
|
||||
<ds-flex-item>
|
||||
<no-ssr>
|
||||
<ds-number :label="$t('profile.followers')">
|
||||
<ds-number :label="$t('profile.following')">
|
||||
<hc-count-to
|
||||
slot="count"
|
||||
:end-val="Number(user.followingCount) || 0"
|
||||
@ -86,7 +86,9 @@
|
||||
<hc-follow-button
|
||||
v-if="!myProfile"
|
||||
:follow-id="user.id"
|
||||
@update="voted = true && fetchUser()"
|
||||
:is-followed="user.followedByCurrentUser"
|
||||
@optimistic="follow => user.followedByCurrentUser = follow"
|
||||
@update="follow => fetchUser()"
|
||||
/>
|
||||
</ds-space>
|
||||
<template v-if="user.about">
|
||||
@ -335,10 +337,6 @@ export default {
|
||||
},
|
||||
followedByCount() {
|
||||
let count = Number(this.user.followedByCount) || 0
|
||||
if (this.voted) {
|
||||
// NOTE: this is used for presentation
|
||||
count += 1
|
||||
}
|
||||
return count
|
||||
},
|
||||
user() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user