From ccfc2e57d0e265bddc88d5ace30428268f3b1df1 Mon Sep 17 00:00:00 2001 From: eal Date: Mon, 21 Aug 2017 20:25:01 +0300 Subject: [PATCH] Add follower and following views --- src/components/status/status.vue | 2 +- src/components/timeline/timeline.js | 32 +++++++++- src/components/timeline/timeline.vue | 33 +++++++++- src/components/user_card/user_card.js | 23 +++++++ src/components/user_card/user_card.vue | 61 +++++++++++++++++++ .../user_card_content/user_card_content.vue | 29 ++++++--- src/components/user_panel/user_panel.vue | 2 +- src/components/user_profile/user_profile.js | 4 +- src/components/user_profile/user_profile.vue | 2 +- src/modules/statuses.js | 46 ++++++++++++-- src/services/api/api.service.js | 14 ++++- .../backend_interactor_service.js | 9 ++- 12 files changed, 229 insertions(+), 28 deletions(-) create mode 100644 src/components/user_card/user_card.js create mode 100644 src/components/user_card/user_card.vue diff --git a/src/components/status/status.vue b/src/components/status/status.vue index e582a80d..04c4235f 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -40,7 +40,7 @@
- +
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index 3dc07f9e..7a590865 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -1,20 +1,32 @@ import Status from '../status/status.vue' import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js' import StatusOrConversation from '../status_or_conversation/status_or_conversation.vue' +import UserCard from '../user_card/user_card.vue' const Timeline = { props: [ 'timeline', 'timelineName', 'title', + 'showingStatuses', 'userId' ], computed: { - timelineError () { return this.$store.state.statuses.error } + timelineError () { return this.$store.state.statuses.error }, + followers () { + return this.timeline.followers + }, + friends () { + return this.timeline.friends + }, + viewing () { + return this.timeline.viewing + } }, components: { Status, - StatusOrConversation + StatusOrConversation, + UserCard }, created () { const store = this.$store @@ -30,6 +42,12 @@ const Timeline = { showImmediately, userId: this.userId }) + + // don't fetch followers for public, friend, twkn + if (this.timelineName === 'user') { + this.fetchFriends() + this.fetchFollowers() + } }, methods: { showNewStatuses () { @@ -48,6 +66,16 @@ const Timeline = { userId: this.userId }).then(() => store.commit('setLoading', { timeline: this.timelineName, value: false })) }, + fetchFollowers() { + const id = this.userId + this.$store.state.api.backendInteractor.fetchFollowers({ id }) + .then((followers) => this.$store.dispatch('addFollowers', { followers })) + }, + fetchFriends() { + const id = this.userId + this.$store.state.api.backendInteractor.fetchFriends({ id }) + .then((friends) => this.$store.dispatch('addFriends', { friends })) + }, scrollLoad (e) { let height = Math.max(document.body.offsetHeight, document.body.scrollHeight) if (this.timeline.loading === false && this.$store.state.config.autoLoad && (window.innerHeight + window.pageYOffset) >= (height - 750)) { diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index a9162120..bf64b935 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -1,5 +1,5 @@ @@ -65,6 +89,13 @@ } } + .avatar { + padding-top: 0.3em; + width:32px; + height: 32px; + border-radius: 50%; + } + .new-status-notification { position:relative; diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js new file mode 100644 index 00000000..a7a871c3 --- /dev/null +++ b/src/components/user_card/user_card.js @@ -0,0 +1,23 @@ +import UserCardContent from '../user_card_content/user_card_content.vue' + +const UserCard = { + props: [ + 'user', + 'showFollows' + ], + data () { + return { + userExpanded: false + } + }, + components: { + UserCardContent + }, + methods: { + toggleUserExpanded () { + this.userExpanded = !this.userExpanded + } + } +} + +export default UserCard diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue new file mode 100644 index 00000000..5e886eb8 --- /dev/null +++ b/src/components/user_card/user_card.vue @@ -0,0 +1,61 @@ + + + + + diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 8dcff3c5..b0b5849b 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -40,17 +40,20 @@
-
-
Statuses
- {{user.statuses_count}}
{{dailyAvg}} per day
+
+
Statuses
+
Statuses
+ {{user.statuses_count}}
{{dailyAvg}} per day
-
Following
- {{user.friends_count}} +
Following
+
Following
+ {{user.friends_count}}
-
Followers
- {{user.followers_count}} +
Followers
+
Followers
+ {{user.followers_count}}

{{user.description}}

@@ -60,7 +63,7 @@