From 9ca805a99110d5521933b2a4b2a60c8691de82c8 Mon Sep 17 00:00:00 2001 From: taehoon Date: Mon, 25 Feb 2019 22:51:04 -0500 Subject: [PATCH] Add new FollowCard component --- src/components/follow_card/follow_card.js | 45 +++++++++++++++++++++ src/components/follow_card/follow_card.vue | 40 ++++++++++++++++++ src/components/user_profile/user_profile.js | 6 +-- 3 files changed, 88 insertions(+), 3 deletions(-) create mode 100644 src/components/follow_card/follow_card.js create mode 100644 src/components/follow_card/follow_card.vue diff --git a/src/components/follow_card/follow_card.js b/src/components/follow_card/follow_card.js new file mode 100644 index 00000000..85e6a6d2 --- /dev/null +++ b/src/components/follow_card/follow_card.js @@ -0,0 +1,45 @@ +import BasicUserCard from '../basic_user_card/basic_user_card.vue' +import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate' + +const FollowCard = { + props: [ + 'user', + 'noFollowsYou' + ], + data () { + return { + progress: false, + requestSent: false, + updated: false + } + }, + components: { + BasicUserCard + }, + computed: { + isMe () { return this.$store.state.users.currentUser.id === this.user.id }, + following () { return this.updated ? this.updated.following : this.user.following }, + showFollow () { + return !this.following || this.updated && !this.updated.following + } + }, + methods: { + followUser () { + this.progress = true + requestFollow(this.user, this.$store).then(({ sent, updated }) => { + this.progress = false + this.requestSent = sent + this.updated = updated + }) + }, + unfollowUser () { + this.progress = true + requestUnfollow(this.user, this.$store).then(({ updated }) => { + this.progress = false + this.updated = updated + }) + } + } +} + +export default FollowCard diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue new file mode 100644 index 00000000..dcb85d62 --- /dev/null +++ b/src/components/follow_card/follow_card.vue @@ -0,0 +1,40 @@ + + + diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index 643727de..7708141c 100644 --- a/src/components/user_profile/user_profile.js +++ b/src/components/user_profile/user_profile.js @@ -1,7 +1,7 @@ import { compose } from 'vue-compose' import get from 'lodash/get' import UserCardContent from '../user_card_content/user_card_content.vue' -import UserCard from '../user_card/user_card.vue' +import FollowCard from '../follow_card/follow_card.vue' import Timeline from '../timeline/timeline.vue' import withLoadMore from '../../hocs/with_load_more/with_load_more' import withList from '../../hocs/with_list/with_list' @@ -15,7 +15,7 @@ const FollowerList = compose( additionalPropNames: ['userId'] }), withList({ getEntryProps: user => ({ user }) }) -)(UserCard) +)(FollowCard) const FriendList = compose( withLoadMore({ @@ -26,7 +26,7 @@ const FriendList = compose( additionalPropNames: ['userId'] }), withList({ getEntryProps: user => ({ user }) }) -)(UserCard) +)(FollowCard) const UserProfile = { data () {