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
|
const showImmediately = this.timeline.visibleStatuses.length === 0
|
||||||
|
|
||||||
window.onscroll = this.scrollLoad
|
window.onscroll = this.scrollLoad
|
||||||
|
if (this.timelineName !== 'user') {
|
||||||
timelineFetcher.fetchAndUpdate({
|
timelineFetcher.fetchAndUpdate({
|
||||||
store,
|
store,
|
||||||
credentials,
|
credentials,
|
||||||
timeline: this.timelineName,
|
timeline: this.timelineName,
|
||||||
showImmediately
|
showImmediately
|
||||||
})
|
})
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
showNewStatuses () {
|
showNewStatuses () {
|
||||||
|
@ -36,14 +37,16 @@ const Timeline = {
|
||||||
fetchOlderStatuses () {
|
fetchOlderStatuses () {
|
||||||
const store = this.$store
|
const store = this.$store
|
||||||
const credentials = store.state.users.currentUser.credentials
|
const credentials = store.state.users.currentUser.credentials
|
||||||
store.commit('setLoading', { timeline: this.timelineName, value: true })
|
if (this.timelineName !== 'user') {
|
||||||
timelineFetcher.fetchAndUpdate({
|
store.commit('setLoading', { timeline: this.timelineName, value: true })
|
||||||
store,
|
timelineFetcher.fetchAndUpdate({
|
||||||
credentials,
|
store,
|
||||||
timeline: this.timelineName,
|
credentials,
|
||||||
older: true,
|
timeline: this.timelineName,
|
||||||
showImmediately: true
|
older: true,
|
||||||
}).then(() => store.commit('setLoading', { timeline: this.timelineName, value: false }))
|
showImmediately: true
|
||||||
|
}).then(() => store.commit('setLoading', { timeline: this.timelineName, value: false }))
|
||||||
|
}
|
||||||
},
|
},
|
||||||
scrollLoad (e) {
|
scrollLoad (e) {
|
||||||
let height = Math.max(document.body.offsetHeight, document.body.scrollHeight)
|
let height = Math.max(document.body.offsetHeight, document.body.scrollHeight)
|
||||||
|
|
|
@ -61,10 +61,13 @@
|
||||||
props: [ 'user' ],
|
props: [ 'user' ],
|
||||||
computed: {
|
computed: {
|
||||||
headingStyle () {
|
headingStyle () {
|
||||||
let rgb = this.$store.state.config.colors['base00'].match(/\d+/g)
|
let color = this.$store.state.config.colors['base00']
|
||||||
return {
|
if (color) {
|
||||||
backgroundColor: `rgb(${Math.floor(rgb[0] * 0.53)}, ${Math.floor(rgb[1] * 0.56)}, ${Math.floor(rgb[2] * 0.59)})`,
|
let rgb = this.$store.state.config.colors['base00'].match(/\d+/g)
|
||||||
backgroundImage: `url(${this.user.cover_photo})`
|
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 () {
|
bodyStyle () {
|
||||||
|
|
|
@ -1,16 +1,39 @@
|
||||||
import UserCardContent from '../user_card_content/user_card_content.vue'
|
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 = {
|
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: {
|
computed: {
|
||||||
|
userId () {
|
||||||
|
return parseInt(this.$route.params.id)
|
||||||
|
},
|
||||||
user () {
|
user () {
|
||||||
const id = this.$route.params.id
|
return this.$store.state.users.usersObject[this.userId]
|
||||||
const user = find(this.$store.state.users.users, {id})
|
|
||||||
return user
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
UserCardContent
|
UserCardContent,
|
||||||
|
Timeline
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="user-profile panel panel-default base00-background">
|
<div v-if="user">
|
||||||
<user-card-content :user="user"></user-card-content>
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -4,6 +4,7 @@ const FRIENDS_TIMELINE_URL = '/api/statuses/friends_timeline.json'
|
||||||
const ALL_FOLLOWING_URL = '/api/qvitter/allfollowing'
|
const ALL_FOLLOWING_URL = '/api/qvitter/allfollowing'
|
||||||
const PUBLIC_TIMELINE_URL = '/api/statuses/public_timeline.json'
|
const PUBLIC_TIMELINE_URL = '/api/statuses/public_timeline.json'
|
||||||
const PUBLIC_AND_EXTERNAL_TIMELINE_URL = '/api/statuses/public_and_external_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 FAVORITE_URL = '/api/favorites/create'
|
||||||
const UNFAVORITE_URL = '/api/favorites/destroy'
|
const UNFAVORITE_URL = '/api/favorites/destroy'
|
||||||
const RETWEET_URL = '/api/statuses/retweet'
|
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 UNFOLLOWING_URL = '/api/friendships/destroy.json'
|
||||||
const QVITTER_USER_PREF_URL = '/api/qvitter/set_profile_pref.json'
|
const QVITTER_USER_PREF_URL = '/api/qvitter/set_profile_pref.json'
|
||||||
const EXTERNAL_PROFILE_URL = '/api/externalprofile/show.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
|
const oldfetch = window.fetch
|
||||||
|
|
||||||
|
@ -43,6 +44,14 @@ const externalProfile = (profileUrl) => {
|
||||||
}).then((data) => data.json())
|
}).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}) => {
|
const followUser = ({id, credentials}) => {
|
||||||
let url = `${FOLLOWING_URL}?user_id=${id}`
|
let url = `${FOLLOWING_URL}?user_id=${id}`
|
||||||
return fetch(url, {
|
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 = {
|
const timelineUrls = {
|
||||||
public: PUBLIC_TIMELINE_URL,
|
public: PUBLIC_TIMELINE_URL,
|
||||||
friends: FRIENDS_TIMELINE_URL,
|
friends: FRIENDS_TIMELINE_URL,
|
||||||
mentions: MENTIONS_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 url = timelineUrls[timeline]
|
||||||
|
let params = []
|
||||||
|
|
||||||
if (since) {
|
if (since) {
|
||||||
url += `?since_id=${since}`
|
params.push(['since_id', since])
|
||||||
}
|
}
|
||||||
|
|
||||||
if (until) {
|
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())
|
return fetch(url, { headers: authHeaders(credentials) }).then((data) => data.json())
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -207,7 +225,8 @@ const apiService = {
|
||||||
fetchAllFollowing,
|
fetchAllFollowing,
|
||||||
setUserMute,
|
setUserMute,
|
||||||
fetchMutes,
|
fetchMutes,
|
||||||
externalProfile
|
externalProfile,
|
||||||
|
getUser
|
||||||
}
|
}
|
||||||
|
|
||||||
export default apiService
|
export default apiService
|
||||||
|
|
|
@ -37,6 +37,7 @@ const backendInteractorService = (credentials) => {
|
||||||
const fetchMutes = () => apiService.fetchMutes({credentials})
|
const fetchMutes = () => apiService.fetchMutes({credentials})
|
||||||
|
|
||||||
const externalProfile = (profileUrl) => apiService.externalProfile(profileUrl)
|
const externalProfile = (profileUrl) => apiService.externalProfile(profileUrl)
|
||||||
|
const getUser = (id) => apiService.getUser({credentials, id})
|
||||||
|
|
||||||
const backendInteractorServiceInstance = {
|
const backendInteractorServiceInstance = {
|
||||||
fetchStatus,
|
fetchStatus,
|
||||||
|
@ -49,7 +50,8 @@ const backendInteractorService = (credentials) => {
|
||||||
startFetching,
|
startFetching,
|
||||||
setUserMute,
|
setUserMute,
|
||||||
fetchMutes,
|
fetchMutes,
|
||||||
externalProfile
|
externalProfile,
|
||||||
|
getUser
|
||||||
}
|
}
|
||||||
|
|
||||||
return backendInteractorServiceInstance
|
return backendInteractorServiceInstance
|
||||||
|
|
|
@ -15,19 +15,28 @@ const update = ({store, statuses, timeline, showImmediately}) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false, showImmediately = false}) => {
|
const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false, showImmediately = false}) => {
|
||||||
const args = { timeline, credentials }
|
|
||||||
const rootState = store.rootState || store.state
|
const rootState = store.rootState || store.state
|
||||||
const timelineData = rootState.statuses.timelines[camelCase(timeline)]
|
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) {
|
if (older) {
|
||||||
args['until'] = timelineData.minVisibleId
|
args['until'] = timelineData.minVisibleId
|
||||||
} else {
|
} else {
|
||||||
args['since'] = timelineData.maxId
|
args['since'] = timelineData.maxId
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (timeline === 'user') {
|
||||||
|
args['userId'] = userId
|
||||||
|
}
|
||||||
|
|
||||||
return apiService.fetchTimeline(args)
|
return apiService.fetchTimeline(args)
|
||||||
.then((statuses) => update({store, statuses, timeline, showImmediately}),
|
|
||||||
() => store.dispatch('setError', { value: true }))
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const startFetching = ({ timeline = 'friends', credentials, store }) => {
|
const startFetching = ({ timeline = 'friends', credentials, store }) => {
|
||||||
|
@ -37,7 +46,8 @@ const startFetching = ({ timeline = 'friends', credentials, store }) => {
|
||||||
}
|
}
|
||||||
const timelineFetcher = {
|
const timelineFetcher = {
|
||||||
fetchAndUpdate,
|
fetchAndUpdate,
|
||||||
startFetching
|
startFetching,
|
||||||
|
fetchStatuses
|
||||||
}
|
}
|
||||||
|
|
||||||
export default timelineFetcher
|
export default timelineFetcher
|
||||||
|
|
Loading…
Reference in New Issue