fedward/custom-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add follower and following views

Browse source
This commit is contained in:
eal 2017-08-21 20:25:01 +03:00
parent dbad99cb4f
commit ccfc2e57d0
12 changed files with 229 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/status/status.vue
View file

@ -40,7 +40,7 @@
</div>
<div class="media-body">
<div class="base05 base05=border usercard" v-if="userExpanded">
<user-card-content :user="status.user"></user-card-content>
<user-card-content :user="status.user" :switcher="false"></user-card-content>
</div>
<div class="user-content">
<div class="media-heading">

32
src/components/timeline/timeline.js
View file

@ -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)) {

33
src/components/timeline/timeline.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="timeline panel panel-default">
<div class="timeline panel panel-default" v-if="viewing == 'statuses'">
<div class="panel-heading timeline-heading base01-background base04">
<div class="title">
{{title}}
@ -24,6 +24,30 @@
</div>
</div>
</div>
<div class="timeline panel panel-default" v-else-if="viewing == 'followers'">
<div class="panel-heading timeline-heading base01-background base04">
<div class="title">
Followers
</div>
</div>
<div class="panel-body">
<div class="timeline">
<user-card v-for="follower in followers" :user="follower" :showFollows="false"></user-card>
</div>
</div>
</div>
<div class="timeline panel panel-default" v-else-if="viewing == 'friends'">
<div class="panel-heading timeline-heading base01-background base04">
<div class="title">
Following
</div>
</div>
<div class="panel-body">
<div class="timeline">
<user-card v-for="friend in friends" :user="friend" :showFollows="true"></user-card>
</div>
</div>
</div>
</template>
<script src="./timeline.js"></script>
@ -65,6 +89,13 @@
}
}
.avatar {
padding-top: 0.3em;
width:32px;
height: 32px;
border-radius: 50%;
}
.new-status-notification {
position:relative;

23
src/components/user_card/user_card.js Normal file
View file

@ -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

61
src/components/user_card/user_card.vue Normal file
View file

@ -0,0 +1,61 @@
<template>
<div class="card base00-background base03-border">
<a href="#">
<img @click.prevent="toggleUserExpanded" class="avatar" :src="user.profile_image_url">
</a>
<div class="base05 base05=border usercard" v-if="userExpanded">
<user-card-content :user="user" :switcher="false"></user-card-content>
</div>
<div class="name-and-screen-name" v-else>
<div class="user-name">{{ user.name }}</div>
<a href="user.statusnet_profile_url"><div class="user-screen-name">@{{ user.screen_name }}</div></a>
</div>
<span class="follows-you" v-if="!userExpanded && showFollows">
<div class="follows" v-if="user.follows_you">
Follows you!
</div>
</span>
</div>
</template>
<script src="./user_card.js"></script>
<style lang="scss">
.name-and-screen-name {
margin-left: 0.7em;
min-width: 16em;
display:block;
margin-top:0.0em;
margin-right: 2em;
text-align: left;
}
.follows-you {
margin-left: 2em;
width:-webkit-fill-available;
width: -moz-webkit-fill-available;
}
.follows {
float: right;
}
.card {
display: flex;
flex: 1 0;
padding-top: 0.6em;
padding-right: 1em;
padding-bottom: 0.6em;
padding-left: 1em;
border-bottom: 1px solid;
margin: 0;
border-bottom-color: inherit;
}
.usercard {
width: -webkit-fill-available;
width: -moz-webkit-fill-available;
stretch: fill;
margin-left: 0.7em;
}
</style>

29
src/components/user_card_content/user_card_content.vue
View file

@ -40,17 +40,20 @@
</div>
<div class="panel-body profile-panel-body" :style="bodyStyle">
<div class="user-counts">
<div class="user-count">
<h5>Statuses</h5>
<span>{{user.statuses_count}} <br><span class="dailyAvg">{{dailyAvg}} per day</span></span>
<div class="user-count base04">
<a href="#" v-on:click.prevent="setProfileView('statuses')" v-if="switcher"><h5 class="base05">Statuses</h5></a>
<h5 v-else>Statuses</h5>
<span class="base05">{{user.statuses_count}} <br><span class="dailyAvg">{{dailyAvg}} per day</span></span>
</div>
<div class="user-count">
<h5>Following</h5>
<span>{{user.friends_count}}</span>
<a href="#" v-on:click.prevent="setProfileView('friends')" v-if="switcher"><h5 class="base05">Following</h5></a>
<h5 v-else>Following</h5>
<span class="base05">{{user.friends_count}}</span>
</div>
<div class="user-count">
<h5>Followers</h5>
<span>{{user.followers_count}}</span>
<a href="#" v-on:click.prevent="setProfileView('followers')" v-if="switcher"><h5 class="base05">Followers</h5></a>
<h5 v-else>Followers</h5>
<span class="base05">{{user.followers_count}}</span>
</div>
</div>
<p>{{user.description}}</p>
@ -60,7 +63,7 @@
<script>
export default {
props: [ 'user' ],
props: [ 'user', 'switcher' ],
computed: {
headingStyle () {
let color = this.$store.state.config.colors['base00']
@ -103,13 +106,18 @@
const store = this.$store
store.commit('setMuted', {user: this.user, muted: !this.user.muted})
store.state.api.backendInteractor.setUserMute(this.user)
},
setProfileView (v) {
const store = this.$store
store.commit('setProfileView', { v })
}
}
}
</script>
<style lang="scss">
@import '../../_variables.scss';
.profile-panel-background {
background-size: cover;
border-radius: 10px;
@ -230,6 +238,9 @@
font-weight: bolder;
margin: 0 0 0.25em;
}
a {
text-decoration: none;
}
}
.dailyAvg {

2
src/components/user_panel/user_panel.vue
View file

@ -2,7 +2,7 @@
<div class="user-panel">
<div v-if='user' class="panel panel-default">
<user-card-content :user="user"></user-card-content>
<user-card-content :user="user" :switcher="false"></user-card-content>
<div class="panel-footer base00-background">
<post-status-form v-if='user'></post-status-form>

4
src/components/user_profile/user_profile.js
View file

@ -20,11 +20,11 @@ const UserProfile = {
} else {
return false
}
}
},
},
components: {
UserCardContent,
Timeline
Timeline,
}
}

2
src/components/user_profile/user_profile.vue
View file

@ -1,7 +1,7 @@
<template>
<div>
<div v-if="user" class="user-profile panel panel-default base00-background">
<user-card-content :user="user"></user-card-content>
<user-card-content :user="user" :switcher="true"></user-card-content>
</div>
<Timeline :title="'User Timeline'" v-bind:timeline="timeline" v-bind:timeline-name="'user'" :user-id="userId"/>
</div>

46
src/modules/statuses.js
View file

@ -19,7 +19,10 @@ export const defaultState = {
newStatusCount: 0,
maxId: 0,
minVisibleId: 0,
loading: false
loading: false,
followers: [],
friends: [],
viewing: 'statuses'
},
public: {
statuses: [],
@ -30,7 +33,10 @@ export const defaultState = {
newStatusCount: 0,
maxId: 0,
minVisibleId: 0,
loading: false
loading: false,
followers: [],
friends: [],
viewing: 'statuses'
},
user: {
statuses: [],
@ -41,7 +47,10 @@ export const defaultState = {
newStatusCount: 0,
maxId: 0,
minVisibleId: 0,
loading: false
loading: false,
followers: [],
friends: [],
viewing: 'statuses'
},
publicAndExternal: {
statuses: [],
@ -52,7 +61,10 @@ export const defaultState = {
newStatusCount: 0,
maxId: 0,
minVisibleId: 0,
loading: false
loading: false,
followers: [],
friends: [],
viewing: 'statuses'
},
friends: {
statuses: [],
@ -63,7 +75,10 @@ export const defaultState = {
newStatusCount: 0,
maxId: 0,
minVisibleId: 0,
loading: false
loading: false,
followers: [],
friends: [],
viewing: 'statuses'
}
}
}
@ -316,7 +331,10 @@ export const mutations = {
newStatusCount: 0,
maxId: 0,
minVisibleId: 0,
loading: false
loading: false,
followers: [],
friends: [],
viewing: 'statuses'
}
state.timelines[timeline] = emptyTimeline
@ -343,6 +361,16 @@ export const mutations = {
setError (state, { value }) {
state.error = value
},
setProfileView (state, { v }) {
// load followers / friends only when needed
state.timelines['user'].viewing = v
},
addFriends (state, { friends }) {
state.timelines['user'].friends = friends
},
addFollowers (state, { followers }) {
state.timelines['user'].followers = followers
},
markNotificationsAsSeen (state, notifications) {
each(notifications, (notification) => {
notification.seen = true
@ -359,6 +387,12 @@ const statuses = {
setError ({ rootState, commit }, { value }) {
commit('setError', { value })
},
addFriends ({ rootState, commit }, { friends }) {
commit('addFriends', { friends })
},
addFollowers ({ rootState, commit }, { followers }) {
commit('addFollowers', { followers })
},
deleteStatus ({ rootState, commit }, status) {
commit('setDeleted', { status })
apiService.deleteStatus({ id: status.id, credentials: rootState.users.currentUser.credentials })

14
src/services/api/api.service.js
View file

@ -13,6 +13,7 @@ const STATUS_URL = '/api/statuses/show'
const MEDIA_UPLOAD_URL = '/api/statusnet/media/upload'
const CONVERSATION_URL = '/api/statusnet/conversation'
const MENTIONS_URL = '/api/statuses/mentions.json'
const FOLLOWERS_URL = '/api/statuses/followers.json'
const FRIENDS_URL = '/api/statuses/friends.json'
const FOLLOWING_URL = '/api/friendships/create.json'
const UNFOLLOWING_URL = '/api/friendships/destroy.json'
@ -114,8 +115,15 @@ const unfollowUser = ({id, credentials}) => {
}).then((data) => data.json())
}
const fetchFriends = ({credentials}) => {
return fetch(FRIENDS_URL, { headers: authHeaders(credentials) })
const fetchFriends = ({id, credentials}) => {
let url = `${FRIENDS_URL}?user_id=${id}`
return fetch(url, { headers: authHeaders(credentials) })
.then((data) => data.json())
}
const fetchFollowers = ({id, credentials}) => {
let url = `${FOLLOWERS_URL}?user_id=${id}`
return fetch(url, { headers: authHeaders(credentials) })
.then((data) => data.json())
}
@ -169,7 +177,6 @@ const fetchTimeline = ({timeline, credentials, since = false, until = false, use
if (since) {
params.push(['since_id', since])
}
if (until) {
params.push(['max_id', until])
}
@ -261,6 +268,7 @@ const apiService = {
fetchConversation,
fetchStatus,
fetchFriends,
fetchFollowers,
followUser,
unfollowUser,
favorite,

9
src/services/backend_interactor_service/backend_interactor_service.js
View file

@ -10,8 +10,12 @@ const backendInteractorService = (credentials) => {
return apiService.fetchConversation({id, credentials})
}
const fetchFriends = () => {
return apiService.fetchFriends({credentials})
const fetchFriends = ({id}) => {
return apiService.fetchFriends({id, credentials})
}
const fetchFollowers = ({id}) => {
return apiService.fetchFollowers({id, credentials})
}
const fetchAllFollowing = ({username}) => {
@ -44,6 +48,7 @@ const backendInteractorService = (credentials) => {
fetchStatus,
fetchConversation,
fetchFriends,
fetchFollowers,
followUser,
unfollowUser,
fetchAllFollowing,