From 080786c9458ba8b9db1ea63732824a3e297e10dc Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 25 Feb 2019 04:51:23 -0500
Subject: Rewrite FollowList using hocs

---
 src/components/user_profile/user_profile.js | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

(limited to 'src/components/user_profile/user_profile.js')

diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index ebf6c61a..9f9d43e4 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -1,8 +1,32 @@
+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 Timeline from '../timeline/timeline.vue'
-import FollowList from '../follow_list/follow_list.vue'
+import withLoadMore from '../../hocs/with_load_more/with_load_more'
+import withList from '../../hocs/with_list/with_list'
+
+const FollowerList = compose(
+  withLoadMore({
+    fetch: (props, $store) => $store.dispatch('addFollowers', props.userId),
+    select: (props, $store) => get($store.getters.userById(props.userId), 'followers', []),
+    destory: (props, $store) => $store.dispatch('clearFollowers', props.userId),
+    childPropName: 'entries',
+    additionalPropNames: ['userId']
+  }),
+  withList({ getEntryProps: user => ({ user }) })
+)(UserCard)
+
+const FriendList = compose(
+  withLoadMore({
+    fetch: (props, $store) => $store.dispatch('addFriends', props.userId),
+    select: (props, $store) => get($store.getters.userById(props.userId), 'friends', []),
+    destory: (props, $store) => $store.dispatch('clearFriends', props.userId),
+    childPropName: 'entries',
+    additionalPropNames: ['userId']
+  }),
+  withList({ getEntryProps: user => ({ user }) })
+)(UserCard)
 
 const UserProfile = {
   data () {
@@ -123,7 +147,8 @@ const UserProfile = {
     UserCardContent,
     UserCard,
     Timeline,
-    FollowList
+    FollowerList,
+    FriendList
   }
 }
 
-- 
cgit v1.2.3-70-g09d2


From bb1fac4bc202c58064ee94d124967db463b3178e Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 25 Feb 2019 07:36:38 -0500
Subject: Remove needless component local registration

---
 src/components/user_profile/user_profile.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/components/user_profile/user_profile.js')

diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 9f9d43e4..643727de 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -145,7 +145,6 @@ const UserProfile = {
   },
   components: {
     UserCardContent,
-    UserCard,
     Timeline,
     FollowerList,
     FriendList
-- 
cgit v1.2.3-70-g09d2


From 9ca805a99110d5521933b2a4b2a60c8691de82c8 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 25 Feb 2019 22:51:04 -0500
Subject: 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

(limited to 'src/components/user_profile/user_profile.js')

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 @@
+<template>
+  <basic-user-card :user="user">
+    <template slot="secondary-area">
+      <div class="follow-box">
+        <button
+          v-if="showFollow"
+          class="btn btn-default"
+          @click="followUser"
+          :disabled="progress"
+          :title="requestSent ? $t('user_card.follow_again') : ''"
+        >
+          <template v-if="progress">
+            {{ $t('user_card.follow_progress') }}
+          </template>
+          <template v-else-if="requestSent">
+            {{ $t('user_card.follow_sent') }}
+          </template>
+          <template v-else>
+            {{ $t('user_card.follow') }}
+          </template>
+        </button>
+        <button v-if="following" class="btn btn-default pressed" @click="unfollowUser" :disabled="progress">
+          <template v-if="progress">
+            {{ $t('user_card.follow_progress') }}
+          </template>
+          <template v-else>
+            {{ $t('user_card.follow_unfollow') }}
+          </template>
+        </button>
+      </div>
+    </template>
+    <template slot="third-area">
+      <span class="faint" v-if="!noFollowsYou && user.follows_you">
+        {{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }}
+      </span>
+    </template>
+  </basic-user-card>
+</template>
+
+<script src="./follow_card.js"></script>
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 () {
-- 
cgit v1.2.3-70-g09d2