Skip to content

Commit

Permalink
Make reactions removable
Browse files Browse the repository at this point in the history 
Co-authored-by: syuilo <syuilotan@yahoo.co.jp>

Resolve #367, resolve #2260, close #3503
  • Loading branch information
@AyaMorisawa
AyaMorisawa committed Dec 26, 2018
1 parent dfc6ef4 commit 9b746f3
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 15 deletions.
21 changes: 21 additions & 0 deletions src/client/app/common/scripts/note-subscriber.ts
View file
Expand Up @@ -95,6 +95,7 @@ export default prop => ({
Vue.set(this.$_ns_target.reactionCounts, reaction, 0);
}

// Increment the count
this.$_ns_target.reactionCounts[reaction]++;

if (body.userId == this.$store.state.i.id) {
Expand All @@ -103,6 +104,26 @@ export default prop => ({
break;
}

case 'unreacted': {
const reaction = body.reaction;

if (this.$_ns_target.reactionCounts == null) {
return;
}

if (this.$_ns_target.reactionCounts[reaction] == null) {
return;
}

// Decrement the count
if (this.$_ns_target.reactionCounts[reaction] > 0) this.$_ns_target.reactionCounts[reaction]--;

if (body.userId == this.$store.state.i.id) {
Vue.set(this.$_ns_target, 'myReaction', null);
}
break;
}

case 'pollVoted': {
if (body.userId == this.$store.state.i.id) return;
const choice = body.choice;
Expand Down
44 changes: 29 additions & 15 deletions src/client/app/common/views/components/reactions-viewer.vue
View file
@@ -1,16 +1,16 @@
<template>
<div class="mk-reactions-viewer">
<template v-if="reactions">
<span :class="{ reacted: note.myReaction == 'like' }" @click="react('like')" v-if="reactions.like" v-particle><mk-reaction-icon reaction="like" ref="like"/><span>{{ reactions.like }}</span></span>
<span :class="{ reacted: note.myReaction == 'love' }" @click="react('love')" v-if="reactions.love" v-particle><mk-reaction-icon reaction="love" ref="love"/><span>{{ reactions.love }}</span></span>
<span :class="{ reacted: note.myReaction == 'laugh' }" @click="react('laugh')" v-if="reactions.laugh" v-particle><mk-reaction-icon reaction="laugh" ref="laugh"/><span>{{ reactions.laugh }}</span></span>
<span :class="{ reacted: note.myReaction == 'hmm' }" @click="react('hmm')" v-if="reactions.hmm" v-particle><mk-reaction-icon reaction="hmm" ref="hmm"/><span>{{ reactions.hmm }}</span></span>
<span :class="{ reacted: note.myReaction == 'surprise' }" @click="react('surprise')" v-if="reactions.surprise" v-particle><mk-reaction-icon reaction="surprise" ref="surprise"/><span>{{ reactions.surprise }}</span></span>
<span :class="{ reacted: note.myReaction == 'congrats' }" @click="react('congrats')" v-if="reactions.congrats" v-particle><mk-reaction-icon reaction="congrats" ref="congrats"/><span>{{ reactions.congrats }}</span></span>
<span :class="{ reacted: note.myReaction == 'angry' }" @click="react('angry')" v-if="reactions.angry" v-particle><mk-reaction-icon reaction="angry" ref="angry"/><span>{{ reactions.angry }}</span></span>
<span :class="{ reacted: note.myReaction == 'confused' }" @click="react('confused')" v-if="reactions.confused" v-particle><mk-reaction-icon reaction="confused" ref="confused"/><span>{{ reactions.confused }}</span></span>
<span :class="{ reacted: note.myReaction == 'rip' }" @click="react('rip')" v-if="reactions.rip" v-particle><mk-reaction-icon reaction="rip" ref="rip"/><span>{{ reactions.rip }}</span></span>
<span :class="{ reacted: note.myReaction == 'pudding' }" @click="react('pudding')" v-if="reactions.pudding" v-particle><mk-reaction-icon reaction="pudding" ref="pudding"/><span>{{ reactions.pudding }}</span></span>
<span :class="{ reacted: note.myReaction == 'like' }" @click="toggleReaction('like')" v-if="reactions.like" v-particle><mk-reaction-icon reaction="like" ref="like"/><span>{{ reactions.like }}</span></span>
<span :class="{ reacted: note.myReaction == 'love' }" @click="toggleReaction('love')" v-if="reactions.love" v-particle><mk-reaction-icon reaction="love" ref="love"/><span>{{ reactions.love }}</span></span>
<span :class="{ reacted: note.myReaction == 'laugh' }" @click="toggleReaction('laugh')" v-if="reactions.laugh" v-particle><mk-reaction-icon reaction="laugh" ref="laugh"/><span>{{ reactions.laugh }}</span></span>
<span :class="{ reacted: note.myReaction == 'hmm' }" @click="toggleReaction('hmm')" v-if="reactions.hmm" v-particle><mk-reaction-icon reaction="hmm" ref="hmm"/><span>{{ reactions.hmm }}</span></span>
<span :class="{ reacted: note.myReaction == 'surprise' }" @click="toggleReaction('surprise')" v-if="reactions.surprise" v-particle><mk-reaction-icon reaction="surprise" ref="surprise"/><span>{{ reactions.surprise }}</span></span>
<span :class="{ reacted: note.myReaction == 'congrats' }" @click="toggleReaction('congrats')" v-if="reactions.congrats" v-particle><mk-reaction-icon reaction="congrats" ref="congrats"/><span>{{ reactions.congrats }}</span></span>
<span :class="{ reacted: note.myReaction == 'angry' }" @click="toggleReaction('angry')" v-if="reactions.angry" v-particle><mk-reaction-icon reaction="angry" ref="angry"/><span>{{ reactions.angry }}</span></span>
<span :class="{ reacted: note.myReaction == 'confused' }" @click="toggleReaction('confused')" v-if="reactions.confused" v-particle><mk-reaction-icon reaction="confused" ref="confused"/><span>{{ reactions.confused }}</span></span>
<span :class="{ reacted: note.myReaction == 'rip' }" @click="toggleReaction('rip')" v-if="reactions.rip" v-particle><mk-reaction-icon reaction="rip" ref="rip"/><span>{{ reactions.rip }}</span></span>
<span :class="{ reacted: note.myReaction == 'pudding' }" @click="toggleReaction('pudding')" v-if="reactions.pudding" v-particle><mk-reaction-icon reaction="pudding" ref="pudding"/><span>{{ reactions.pudding }}</span></span>
</template>
</div>
</template>
Expand Down Expand Up @@ -60,11 +60,25 @@ export default Vue.extend({
}
},
methods: {
react(reaction: string) {
this.$root.api('notes/reactions/create', {
noteId: this.note.id,
reaction: reaction
});
toggleReaction(reaction: string) {
const oldReaction = this.note.myReaction;
if (oldReaction) {
this.$root.api('notes/reactions/delete', {
noteId: this.note.id
}).then(() => {
if (oldReaction !== reaction) {
this.$root.api('notes/reactions/create', {
noteId: this.note.id,
reaction: reaction
});
}
});
} else {
this.$root.api('notes/reactions/create', {
noteId: this.note.id,
reaction: reaction
});
}
},
anime(reaction: string) {
if (this.$store.state.device.reduceMotion) return;
Expand Down
13 changes: 13 additions & 0 deletions src/server/api/endpoints/notes/reactions/delete.ts
View file
Expand Up @@ -2,6 +2,8 @@ import $ from 'cafy'; import ID, { transform } from '../../../../../misc/cafy-id
import Reaction from '../../../../../models/note-reaction';
import Note from '../../../../../models/note';
import define from '../../../define';
import { publishNoteStream } from '../../../../../stream';
const ms = require('ms');

export const meta = {
desc: {
Expand All @@ -13,6 +15,12 @@ export const meta = {

kind: 'reaction-write',

limit: {
duration: ms('1hour'),
max: 5,
minInterval: ms('3sec')
},

params: {
noteId: {
validator: $.type(ID),
Expand Down Expand Up @@ -60,4 +68,9 @@ export default define(meta, (ps, user) => new Promise(async (res, rej) => {
Note.update({ _id: note._id }, {
$inc: dec
});

publishNoteStream(note._id, 'unreacted', {
reaction: exist.reaction,
userId: user._id
});
}));

0 comments on commit 9b746f3

Please sign in to comment.