First steps for user timeline.
This commit is contained in:
parent
a4493f05d3
commit
1e4e2e38b4
|
@ -21,13 +21,14 @@ const Timeline = {
|
|||
const showImmediately = this.timeline.visibleStatuses.length === 0
|
||||
|
||||
window.onscroll = this.scrollLoad
|
||||
|
||||
if (this.timelineName !== 'user') {
|
||||
timelineFetcher.fetchAndUpdate({
|
||||
store,
|
||||
credentials,
|
||||
timeline: this.timelineName,
|
||||
showImmediately
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showNewStatuses () {
|
||||
|
@ -36,6 +37,7 @@ const Timeline = {
|
|||
fetchOlderStatuses () {
|
||||
const store = this.$store
|
||||
const credentials = store.state.users.currentUser.credentials
|
||||
if (this.timelineName !== 'user') {
|
||||
store.commit('setLoading', { timeline: this.timelineName, value: true })
|
||||
timelineFetcher.fetchAndUpdate({
|
||||
store,
|
||||
|
@ -44,6 +46,7 @@ const Timeline = {
|
|||
older: true,
|
||||
showImmediately: true
|
||||
}).then(() => store.commit('setLoading', { timeline: this.timelineName, value: false }))
|
||||
}
|
||||
},
|
||||
scrollLoad (e) {
|
||||
let height = Math.max(document.body.offsetHeight, document.body.scrollHeight)
|
||||
|
|
|
@ -61,11 +61,14 @@
|
|||
props: [ 'user' ],
|
||||
computed: {
|
||||
headingStyle () {
|
||||
let color = this.$store.state.config.colors['base00']
|
||||
if (color) {
|
||||
let rgb = this.$store.state.config.colors['base00'].match(/\d+/g)
|
||||
return {
|
||||
backgroundColor: `rgb(${Math.floor(rgb[0] * 0.53)}, ${Math.floor(rgb[1] * 0.56)}, ${Math.floor(rgb[2] * 0.59)})`,
|
||||
backgroundImage: `url(${this.user.cover_photo})`
|
||||
}
|
||||
}
|
||||
},
|
||||
bodyStyle () {
|
||||
return {
|
||||
|
|
|
@ -1,16 +1,39 @@
|
|||
import UserCardContent from '../user_card_content/user_card_content.vue'
|
||||
import { find } from 'lodash'
|
||||
import Timeline from '../timeline/timeline.vue'
|
||||
import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
|
||||
|
||||
const UserProfile = {
|
||||
data: () => ({timeline: { visibleStatuses: [] }}),
|
||||
created () {
|
||||
this.$store.state.api.backendInteractor.getUser(this.userId)
|
||||
.then((user) => {
|
||||
if (!user.error) {
|
||||
this.$store.commit('addNewUsers', [user])
|
||||
}
|
||||
})
|
||||
const store = this.$store
|
||||
const credentials = store.state.users.currentUser.credentials
|
||||
const timelineData = this.timeline
|
||||
timelineFetcher.fetchStatuses({
|
||||
timelineData,
|
||||
credentials,
|
||||
timeline: 'user',
|
||||
userId: this.userId
|
||||
}).then((data) => {
|
||||
this.timeline.visibleStatuses = data
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
userId () {
|
||||
return parseInt(this.$route.params.id)
|
||||
},
|
||||
user () {
|
||||
const id = this.$route.params.id
|
||||
const user = find(this.$store.state.users.users, {id})
|
||||
return user
|
||||
return this.$store.state.users.usersObject[this.userId]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
UserCardContent
|
||||
UserCardContent,
|
||||
Timeline
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,7 +1,10 @@
|
|||
<template>
|
||||
<div v-if="user">
|
||||
<div class="user-profile panel panel-default base00-background">
|
||||
<user-card-content :user="user"></user-card-content>
|
||||
</div>
|
||||
<timeline :title="`${user.name} (${user.screen_name})`" :timeline="timeline" :timeline-name="'user'"></timeline>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./user_profile.js"></script>
|
||||
|
|
|
@ -4,6 +4,7 @@ const FRIENDS_TIMELINE_URL = '/api/statuses/friends_timeline.json'
|
|||
const ALL_FOLLOWING_URL = '/api/qvitter/allfollowing'
|
||||
const PUBLIC_TIMELINE_URL = '/api/statuses/public_timeline.json'
|
||||
const PUBLIC_AND_EXTERNAL_TIMELINE_URL = '/api/statuses/public_and_external_timeline.json'
|
||||
const USER_TIMELINE_URL = '/api/statuses/user_timeline.json'
|
||||
const FAVORITE_URL = '/api/favorites/create'
|
||||
const UNFAVORITE_URL = '/api/favorites/destroy'
|
||||
const RETWEET_URL = '/api/statuses/retweet'
|
||||
|
@ -18,7 +19,7 @@ const FOLLOWING_URL = '/api/friendships/create.json'
|
|||
const UNFOLLOWING_URL = '/api/friendships/destroy.json'
|
||||
const QVITTER_USER_PREF_URL = '/api/qvitter/set_profile_pref.json'
|
||||
const EXTERNAL_PROFILE_URL = '/api/externalprofile/show.json'
|
||||
// const USER_URL = '/api/users/show.json'
|
||||
const USER_URL = '/api/users/show.json'
|
||||
|
||||
const oldfetch = window.fetch
|
||||
|
||||
|
@ -43,6 +44,14 @@ const externalProfile = (profileUrl) => {
|
|||
}).then((data) => data.json())
|
||||
}
|
||||
|
||||
const getUser = ({id, credentials}) => {
|
||||
let url = `${USER_URL}?user_id=${id}`
|
||||
return fetch(url, {
|
||||
headers: authHeaders(credentials),
|
||||
method: 'GET'
|
||||
}).then((data) => data.json())
|
||||
}
|
||||
|
||||
const followUser = ({id, credentials}) => {
|
||||
let url = `${FOLLOWING_URL}?user_id=${id}`
|
||||
return fetch(url, {
|
||||
|
@ -98,24 +107,33 @@ const setUserMute = ({id, credentials, muted = true}) => {
|
|||
})
|
||||
}
|
||||
|
||||
const fetchTimeline = ({timeline, credentials, since = false, until = false}) => {
|
||||
const fetchTimeline = ({timeline, credentials, since = false, until = false, userId = false}) => {
|
||||
const timelineUrls = {
|
||||
public: PUBLIC_TIMELINE_URL,
|
||||
friends: FRIENDS_TIMELINE_URL,
|
||||
mentions: MENTIONS_URL,
|
||||
'publicAndExternal': PUBLIC_AND_EXTERNAL_TIMELINE_URL
|
||||
'publicAndExternal': PUBLIC_AND_EXTERNAL_TIMELINE_URL,
|
||||
user: USER_TIMELINE_URL
|
||||
}
|
||||
|
||||
let url = timelineUrls[timeline]
|
||||
let params = []
|
||||
|
||||
if (since) {
|
||||
url += `?since_id=${since}`
|
||||
params.push(['since_id', since])
|
||||
}
|
||||
|
||||
if (until) {
|
||||
url += `?max_id=${until}`
|
||||
params.push(['max_id', until])
|
||||
}
|
||||
|
||||
if (userId) {
|
||||
params.push(['user_id', userId])
|
||||
}
|
||||
|
||||
const queryString = new URLSearchParams(params).toString()
|
||||
url += `?${queryString}`
|
||||
|
||||
return fetch(url, { headers: authHeaders(credentials) }).then((data) => data.json())
|
||||
}
|
||||
|
||||
|
@ -207,7 +225,8 @@ const apiService = {
|
|||
fetchAllFollowing,
|
||||
setUserMute,
|
||||
fetchMutes,
|
||||
externalProfile
|
||||
externalProfile,
|
||||
getUser
|
||||
}
|
||||
|
||||
export default apiService
|
||||
|
|
|
@ -37,6 +37,7 @@ const backendInteractorService = (credentials) => {
|
|||
const fetchMutes = () => apiService.fetchMutes({credentials})
|
||||
|
||||
const externalProfile = (profileUrl) => apiService.externalProfile(profileUrl)
|
||||
const getUser = (id) => apiService.getUser({credentials, id})
|
||||
|
||||
const backendInteractorServiceInstance = {
|
||||
fetchStatus,
|
||||
|
@ -49,7 +50,8 @@ const backendInteractorService = (credentials) => {
|
|||
startFetching,
|
||||
setUserMute,
|
||||
fetchMutes,
|
||||
externalProfile
|
||||
externalProfile,
|
||||
getUser
|
||||
}
|
||||
|
||||
return backendInteractorServiceInstance
|
||||
|
|
|
@ -15,19 +15,28 @@ const update = ({store, statuses, timeline, showImmediately}) => {
|
|||
}
|
||||
|
||||
const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false, showImmediately = false}) => {
|
||||
const args = { timeline, credentials }
|
||||
const rootState = store.rootState || store.state
|
||||
const timelineData = rootState.statuses.timelines[camelCase(timeline)]
|
||||
|
||||
return fetchStatuses({timelineData, store, credentials, timeline, older})
|
||||
.then((statuses) => update({store, statuses, timeline, showImmediately}),
|
||||
() => store.dispatch('setError', { value: true }))
|
||||
}
|
||||
|
||||
const fetchStatuses = ({timelineData, credentials, timeline = 'friends', older = false, userId = false}) => {
|
||||
const args = { timeline, credentials }
|
||||
|
||||
if (older) {
|
||||
args['until'] = timelineData.minVisibleId
|
||||
} else {
|
||||
args['since'] = timelineData.maxId
|
||||
}
|
||||
|
||||
if (timeline === 'user') {
|
||||
args['userId'] = userId
|
||||
}
|
||||
|
||||
return apiService.fetchTimeline(args)
|
||||
.then((statuses) => update({store, statuses, timeline, showImmediately}),
|
||||
() => store.dispatch('setError', { value: true }))
|
||||
}
|
||||
|
||||
const startFetching = ({ timeline = 'friends', credentials, store }) => {
|
||||
|
@ -37,7 +46,8 @@ const startFetching = ({ timeline = 'friends', credentials, store }) => {
|
|||
}
|
||||
const timelineFetcher = {
|
||||
fetchAndUpdate,
|
||||
startFetching
|
||||
startFetching,
|
||||
fetchStatuses
|
||||
}
|
||||
|
||||
export default timelineFetcher
|
||||
|
|
Loading…
Reference in New Issue