User profile filter parameters - replies, repeats, pinned

This commit is contained in:
smitten 2023-08-07 08:35:03 -04:00
parent 1cf5ac4497
commit 60973335a5
Signed by: smitten
GPG key ID: 1DDD22F13552A07A
8 changed files with 99 additions and 56 deletions

View file

@ -3,6 +3,7 @@ import UserCard from '../user_card/user_card.vue'
import FollowCard from '../follow_card/follow_card.vue'
import Timeline from '../timeline/timeline.vue'
import Conversation from '../conversation/conversation.vue'
import Checkbox from 'src/components/checkbox/checkbox.vue'
import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
import RichContent from 'src/components/rich_content/rich_content.jsx'
import List from '../list/list.vue'
@ -55,7 +56,12 @@ const UserProfile = {
followsTab: 'users',
footerRef: null,
note: null,
noteLoading: false
noteLoading: false,
showPinned: true,
filterParams: {
showReplies: false,
showRepeats: true,
}
}
},
created () {
@ -70,10 +76,22 @@ const UserProfile = {
},
computed: {
timeline () {
return this.$store.state.statuses.timelines.user
const { user, pinned } = this.$store.state.statuses.timelines
if (!this.showPinned) {
return user
}
return {
...user,
statuses: [...pinned.statuses, ...user.statuses],
visibleStatuses: [...pinned.visibleStatuses, ...user.visibleStatuses],
statusesObject: {
...pinned.statusesObject,
...user.statusesObject,
}
}
},
replies () {
return this.$store.state.statuses.timelines.replies
hasPinned () {
return !!(this.user.pinnedStatusIds || []).length
},
favorites () {
return this.$store.state.statuses.timelines.favorites
@ -118,16 +136,27 @@ const UserProfile = {
if (this.isUs) timelineTabMap['favorites'] = 'favorites'
const timeline = timelineTabMap[nextTab]
const fetchArgs = { timeline: timeline, userId: this.userId }
if (timeline === 'user') {
const params = []
if (!this.filterParams.showReplies) {
params.push(['exclude_replies', 1])
}
if (!this.filterParams.showRepeats) {
params.push(['exclude_reblogs', 1])
}
fetchArgs.params = params
}
if (timeline) {
this.stopFetching()
this.$store.dispatch('startFetchingTimeline', { timeline: timeline, userId: this.userId })
this.$store.dispatch('startFetchingTimeline', fetchArgs)
}
},
load (userNameOrId) {
const loadById = (userId) => {
this.userId = userId
const timelines = ['user', 'favorites', 'replies', 'media']
const timelines = ['pinned', 'user', 'favorites', 'media']
timelines.forEach((timeline) => {
this.$store.commit('clearTimeline', { timeline: timeline })
})
@ -165,7 +194,6 @@ const UserProfile = {
},
stopFetching () {
this.$store.dispatch('stopFetchingTimeline', 'user')
this.$store.dispatch('stopFetchingTimeline', 'replies')
this.$store.dispatch('stopFetchingTimeline', 'favorites')
this.$store.dispatch('stopFetchingTimeline', 'media')
},
@ -198,6 +226,15 @@ const UserProfile = {
}, 1500)
},
watch: {
filterParams: {
handler () {
// Clear the user timeline if previously fetched posts may not be relevant anymore
this.$store.dispatch('stopFetchingTimeline', 'user')
this.$store.commit('clearTimeline', { timeline: 'user', excludeUserId: true })
this.onRouteChange(null, this.tab)
},
deep: true
},
'$route.params.id': function (newVal) {
if (isUserPage(this.$route) && newVal) {
this.switchUser(newVal)
@ -215,16 +252,17 @@ const UserProfile = {
}
},
components: {
Checkbox,
Conversation,
FollowCard,
FollowedTagCard,
UserCard,
Timeline,
FollowedTagList,
FollowerList,
FriendList,
FollowCard,
TabSwitcher,
Conversation,
RichContent,
FollowedTagList
TabSwitcher,
Timeline,
UserCard
}
}

View file

@ -75,31 +75,26 @@
:render-only-focused="true"
:on-switch="onTabSwitch"
>
<Timeline
key="statuses"
:label="$t('user_card.statuses')"
:count="user.statuses_count"
:embedded="true"
:title="$t('user_profile.timeline_title')"
:timeline="timeline"
timeline-name="user"
:user-id="userId"
:pinned-status-ids="user.pinnedStatusIds"
:in-profile="true"
:footer-slipgate="footerRef"
/>
<Timeline
key="replies"
:label="$t('user_card.replies')"
:count="user.statuses_count"
:embedded="true"
:title="$t('user_card.replies')"
:timeline="replies"
timeline-name="replies"
:user-id="userId"
:in-profile="true"
:footer-slipgate="footerRef"
/>
<div key="statuses" :label="$t('user_card.statuses')">
<div class="user-post-filters">
<Checkbox v-model="filterParams.showReplies">{{ $t('user_card.with_replies') }}</Checkbox>
<Checkbox v-model="filterParams.showRepeats">{{ $t('user_card.with_repeats') }}</Checkbox>
<Checkbox :disabled="!hasPinned" v-model="showPinned">{{ $t('user_card.with_pinned') }}</Checkbox>
</div>
<Timeline
key="statuses"
:label="$t('user_card.statuses')"
:count="user.statuses_count"
:embedded="true"
:title="$t('user_profile.timeline_title')"
:timeline="timeline"
timeline-name="user"
:user-id="userId"
:pinned-status-ids="user.pinnedStatusIds"
:in-profile="true"
:footer-slipgate="footerRef"
/>
</div>
<div
v-if="followsTabVisible"
key="followees"
@ -268,6 +263,14 @@
}
}
.user-post-filters {
display: flex;
flex-direction: row;
grid-gap: 1em;
justify-content: center;
padding: 0.75em;
}
.userlist-placeholder {
display: flex;
justify-content: center;

View file

@ -1179,10 +1179,13 @@
"per_day": "per day",
"remote_follow": "Remote follow",
"remove_follower": "Remove follower",
"replies": "With Replies",
"with_pinned": "With Pinned",
"with_replies": "With Replies",
"with_repeats": "With Repeats",
"report": "Report",
"requested_by": "Has requested to follow you",
"show_repeats": "Show repeats",
"pinned": "Pinned",
"statuses": "Posts",
"subscribe": "Subscribe",
"unblock": "Unblock",

View file

@ -208,12 +208,13 @@ const api = {
timeline = 'friends',
tag = false,
userId = false,
listId = false
listId = false,
params
}) {
if (store.state.fetchers[timeline]) return
const fetcher = store.state.backendInteractor.startFetchingTimeline({
timeline, store, userId, listId, tag
timeline, store, userId, listId, tag, params
})
store.commit('addFetcher', { fetcherName: timeline, fetcher })
},

View file

@ -65,7 +65,7 @@ export const defaultState = () => ({
bookmarks: emptyTl(),
list: emptyTl(),
bubble: emptyTl(),
replies: emptyTl()
pinned: emptyTl(),
}
})
@ -184,7 +184,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
// This makes sure that user timeline won't get data meant for other
// user. I.e. opening different user profiles makes request which could
// return data late after user already viewing different user profile
if ((timeline === 'user' || timeline === 'media' || timeline === 'replies') && timelineObject.userId !== userId) {
if ((timeline === 'user' || timeline === 'media') && timelineObject.userId !== userId) {
return
}
@ -641,7 +641,7 @@ const statuses = {
},
fetchPinnedStatuses ({ rootState, dispatch }, userId) {
rootState.api.backendInteractor.fetchPinnedStatuses({ id: userId })
.then(statuses => dispatch('addNewStatuses', { statuses, timeline: 'user', userId, showImmediately: true, noIdUpdate: true }))
.then(statuses => dispatch('addNewStatuses', { statuses, timeline: 'pinned', userId, showImmediately: true, noIdUpdate: true }))
},
pinStatus ({ rootState, dispatch }, statusId) {
return rootState.api.backendInteractor.pinOwnStatus({ id: statusId })

View file

@ -695,7 +695,8 @@ const fetchTimeline = ({
listId = false,
tag = false,
withMuted = false,
replyVisibility = 'all'
replyVisibility = 'all',
params = []
}) => {
const timelineUrls = {
public: MASTODON_PUBLIC_TIMELINE,
@ -713,11 +714,10 @@ const fetchTimeline = ({
bookmarks: MASTODON_BOOKMARK_TIMELINE_URL
}
const isNotifications = timeline === 'notifications'
const params = []
let url = timelineUrls[timeline]
if (timeline === 'user' || timeline === 'media' || timeline === 'replies') {
if (timeline === 'user' || timeline === 'media') {
url = url(userId)
}
@ -749,9 +749,6 @@ const fetchTimeline = ({
if (replyVisibility !== 'all') {
params.push(['reply_visibility', replyVisibility])
}
if (timeline === 'user') {
params.push(['exclude_replies', 1])
}
params.push(['limit', 20])

View file

@ -7,8 +7,8 @@ import configFetcher from '../config_fetcher/config_fetcher.service.js'
import reportsFetcher from '../reports_fetcher/reports_fetcher.service.js'
const backendInteractorService = credentials => ({
startFetchingTimeline ({ timeline, store, userId = false, listId = false, tag }) {
return timelineFetcher.startFetching({ timeline, store, credentials, userId, listId, tag })
startFetchingTimeline ({ timeline, store, userId = false, listId = false, tag, params }) {
return timelineFetcher.startFetching({ timeline, store, credentials, userId, listId, tag, params })
},
fetchTimeline (args) {

View file

@ -26,9 +26,10 @@ const fetchAndUpdate = ({
listId = false,
tag = false,
until,
since
since,
params
}) => {
const args = { timeline, credentials }
const args = { timeline, credentials, params }
const rootState = store.rootState || store.state
const { getters } = store
const timelineData = rootState.statuses.timelines[camelCase(timeline)]
@ -78,13 +79,13 @@ const fetchAndUpdate = ({
})
}
const startFetching = ({ timeline = 'friends', credentials, store, userId = false, listId = false, tag = false }) => {
const startFetching = ({ timeline = 'friends', credentials, store, userId = false, listId = false, tag = false, params }) => {
const rootState = store.rootState || store.state
const timelineData = rootState.statuses.timelines[camelCase(timeline)]
const showImmediately = timelineData.visibleStatuses.length === 0
timelineData.userId = userId
timelineData.listId = listId
fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, listId, tag })
fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, listId, tag, params })
const boundFetchAndUpdate = () =>
fetchAndUpdate({ timeline, credentials, store, userId, listId, tag })
return promiseInterval(boundFetchAndUpdate, 20000)