removed unused masto api, added initial version of interactions timeline

This commit is contained in:
Henry Jameson 2019-05-14 22:38:16 +03:00
parent 2322610b62
commit 543604fd2d
11 changed files with 76 additions and 29 deletions

View file

@ -3,7 +3,7 @@ import PublicAndExternalTimeline from 'components/public_and_external_timeline/p
import FriendsTimeline from 'components/friends_timeline/friends_timeline.vue' import FriendsTimeline from 'components/friends_timeline/friends_timeline.vue'
import TagTimeline from 'components/tag_timeline/tag_timeline.vue' import TagTimeline from 'components/tag_timeline/tag_timeline.vue'
import ConversationPage from 'components/conversation-page/conversation-page.vue' import ConversationPage from 'components/conversation-page/conversation-page.vue'
import Mentions from 'components/mentions/mentions.vue' import Interactions from 'components/interactions/interactions.vue'
import DMs from 'components/dm_timeline/dm_timeline.vue' import DMs from 'components/dm_timeline/dm_timeline.vue'
import UserProfile from 'components/user_profile/user_profile.vue' import UserProfile from 'components/user_profile/user_profile.vue'
import Settings from 'components/settings/settings.vue' import Settings from 'components/settings/settings.vue'
@ -34,7 +34,7 @@ export default (store) => {
{ name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline }, { name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline },
{ name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } }, { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
{ name: 'external-user-profile', path: '/users/:id', component: UserProfile }, { name: 'external-user-profile', path: '/users/:id', component: UserProfile },
{ name: 'mentions', path: '/users/:username/mentions', component: Mentions }, { name: 'mentions', path: '/users/:username/interactions', component: Interactions },
{ name: 'dms', path: '/users/:username/dms', component: DMs }, { name: 'dms', path: '/users/:username/dms', component: DMs },
{ name: 'settings', path: '/settings', component: Settings }, { name: 'settings', path: '/settings', component: Settings },
{ name: 'registration', path: '/registration', component: Registration }, { name: 'registration', path: '/registration', component: Registration },

View file

@ -0,0 +1,25 @@
import Notifications from '../notifications/notifications.vue'
const tabModeDict = {
mentions: ['mention'],
'likes+repeats': ['repeat', 'like'],
follows: ['follow']
}
const Interactions = {
data () {
return {
filterMode: tabModeDict['mentions']
}
},
methods: {
onModeSwitch(index, dataset) {
this.filterMode = tabModeDict[dataset.filter]
}
},
components: {
Notifications
}
}
export default Interactions

View file

@ -0,0 +1,25 @@
<template>
<div class="panel panel-default">
<div class="panel-heading">
<div class="title">
Interactions
</div>
</div>
<tab-switcher
ref="tabSwitcher"
:onSwitch="onModeSwitch"
>
<span data-tab-dummy data-filter="mentions" :label="$t('MENTIONS')"/>
<span data-tab-dummy data-filter="likes+repeats" :label="$t('LIKES AND REPEATS')"/>
<span data-tab-dummy data-filter="follows" :label="$t('FOLLOWS')"/>
</tab-switcher>
<Notifications
ref="notifications"
:noHeading="true"
:minimalMode="true"
:filterMode="filterMode"
/>
</div>
</template>
<script src="./interactions.js"></script>

View file

@ -1,5 +1,5 @@
<template> <template>
<Timeline :title="$t('nav.mentions')" v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/> <Timeline :title="$t('nav.interactions')" v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/>
</template> </template>
<script src="./mentions.js"></script> <script src="./mentions.js"></script>

View file

@ -9,7 +9,7 @@
</li> </li>
<li v-if='currentUser'> <li v-if='currentUser'>
<router-link :to="{ name: 'mentions', params: { username: currentUser.screen_name } }"> <router-link :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
{{ $t("nav.mentions") }} {{ $t("nav.interactions") }}
</router-link> </router-link>
</li> </li>
<li v-if='currentUser'> <li v-if='currentUser'>

View file

@ -8,7 +8,7 @@ import {
const Notifications = { const Notifications = {
props: [ props: [
'noHeading' 'noHeading', 'minimalMode', 'filterMode'
], ],
data () { data () {
return { return {
@ -16,6 +16,9 @@ const Notifications = {
} }
}, },
computed: { computed: {
mainClass () {
return this.minimalMode ? '' : 'panel panel-default'
},
notifications () { notifications () {
return notificationsFromStore(this.$store) return notificationsFromStore(this.$store)
}, },
@ -26,7 +29,8 @@ const Notifications = {
return unseenNotificationsFromStore(this.$store) return unseenNotificationsFromStore(this.$store)
}, },
visibleNotifications () { visibleNotifications () {
return visibleNotificationsFromStore(this.$store) console.log(this.filterMode)
return visibleNotificationsFromStore(this.$store, this.filterMode)
}, },
unseenCount () { unseenCount () {
return this.unseenNotifications.length return this.unseenNotifications.length

View file

@ -1,6 +1,6 @@
<template> <template>
<div class="notifications"> <div class="notifications">
<div class="panel panel-default"> <div :class="mainClass">
<div v-if="!noHeading" class="panel-heading"> <div v-if="!noHeading" class="panel-heading">
<div class="title"> <div class="title">
{{$t('notifications.notifications')}} {{$t('notifications.notifications')}}
@ -12,7 +12,7 @@
<button v-if="unseenCount" @click.prevent="markAsSeen" class="read-button">{{$t('notifications.read')}}</button> <button v-if="unseenCount" @click.prevent="markAsSeen" class="read-button">{{$t('notifications.read')}}</button>
</div> </div>
<div class="panel-body"> <div class="panel-body">
<div v-for="notification in visibleNotifications" :key="notification.id" class="notification" :class='{"unseen": !notification.seen}'> <div v-for="notification in visibleNotifications" :key="notification.id" class="notification" :class='{"unseen": !minimalMode && !notification.seen}'>
<div class="notification-overlay"></div> <div class="notification-overlay"></div>
<notification :notification="notification"></notification> <notification :notification="notification"></notification>
</div> </div>

View file

@ -4,15 +4,18 @@ import './tab_switcher.scss'
export default Vue.component('tab-switcher', { export default Vue.component('tab-switcher', {
name: 'TabSwitcher', name: 'TabSwitcher',
props: ['renderOnlyFocused'], props: ['renderOnlyFocused', 'onSwitch'],
data () { data () {
return { return {
active: this.$slots.default.findIndex(_ => _.tag) active: this.$slots.default.findIndex(_ => _.tag)
} }
}, },
methods: { methods: {
activateTab (index) { activateTab (index, dataset) {
return () => { return () => {
if (typeof this.onSwitch === 'function') {
this.onSwitch.call(null, index, this.$slots.default[index].elm.dataset)
}
this.active = index this.active = index
} }
} }
@ -37,7 +40,11 @@ export default Vue.component('tab-switcher', {
return ( return (
<div class={ classesWrapper.join(' ')}> <div class={ classesWrapper.join(' ')}>
<button disabled={slot.data.attrs.disabled} onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button> <button
disabled={slot.data.attrs.disabled}
onClick={this.activateTab(index)}
class={classesTab.join(' ')}>
{slot.data.attrs.label}</button>
</div> </div>
) )
}) })

View file

@ -1,7 +1,5 @@
/* eslint-env browser */ /* eslint-env browser */
const LOGIN_URL = '/api/account/verify_credentials.json' const LOGIN_URL = '/api/account/verify_credentials.json'
const ALL_FOLLOWING_URL = '/api/qvitter/allfollowing'
const MENTIONS_URL = '/api/statuses/mentions.json'
const REGISTRATION_URL = '/api/account/register.json' const REGISTRATION_URL = '/api/account/register.json'
const BG_UPDATE_URL = '/api/qvitter/update_background_image.json' const BG_UPDATE_URL = '/api/qvitter/update_background_image.json'
const EXTERNAL_PROFILE_URL = '/api/externalprofile/show.json' const EXTERNAL_PROFILE_URL = '/api/externalprofile/show.json'
@ -308,13 +306,6 @@ const fetchFollowers = ({id, maxId, sinceId, limit = 20, credentials}) => {
.then((data) => data.map(parseUser)) .then((data) => data.map(parseUser))
} }
const fetchAllFollowing = ({username, credentials}) => {
const url = `${ALL_FOLLOWING_URL}/${username}.json`
return fetch(url, { headers: authHeaders(credentials) })
.then((data) => data.json())
.then((data) => data.map(parseUser))
}
const fetchFollowRequests = ({credentials}) => { const fetchFollowRequests = ({credentials}) => {
const url = FOLLOW_REQUESTS_URL const url = FOLLOW_REQUESTS_URL
return fetch(url, { headers: authHeaders(credentials) }) return fetch(url, { headers: authHeaders(credentials) })
@ -434,7 +425,6 @@ const fetchTimeline = ({timeline, credentials, since = false, until = false, use
const timelineUrls = { const timelineUrls = {
public: MASTODON_PUBLIC_TIMELINE, public: MASTODON_PUBLIC_TIMELINE,
friends: MASTODON_USER_HOME_TIMELINE_URL, friends: MASTODON_USER_HOME_TIMELINE_URL,
mentions: MENTIONS_URL,
dms: MASTODON_DIRECT_MESSAGES_TIMELINE_URL, dms: MASTODON_DIRECT_MESSAGES_TIMELINE_URL,
notifications: MASTODON_USER_NOTIFICATIONS_URL, notifications: MASTODON_USER_NOTIFICATIONS_URL,
'publicAndExternal': MASTODON_PUBLIC_TIMELINE, 'publicAndExternal': MASTODON_PUBLIC_TIMELINE,
@ -726,7 +716,6 @@ const apiService = {
postStatus, postStatus,
deleteStatus, deleteStatus,
uploadMedia, uploadMedia,
fetchAllFollowing,
fetchMutes, fetchMutes,
muteUser, muteUser,
unmuteUser, unmuteUser,

View file

@ -23,10 +23,6 @@ const backendInteractorService = (credentials) => {
return apiService.fetchFollowers({id, maxId, sinceId, limit, credentials}) return apiService.fetchFollowers({id, maxId, sinceId, limit, credentials})
} }
const fetchAllFollowing = ({username}) => {
return apiService.fetchAllFollowing({username, credentials})
}
const fetchUser = ({id}) => { const fetchUser = ({id}) => {
return apiService.fetchUser({id, credentials}) return apiService.fetchUser({id, credentials})
} }
@ -134,7 +130,6 @@ const backendInteractorService = (credentials) => {
unblockUser, unblockUser,
fetchUser, fetchUser,
fetchUserRelationship, fetchUserRelationship,
fetchAllFollowing,
verifyCredentials: apiService.verifyCredentials, verifyCredentials: apiService.verifyCredentials,
startFetchingTimeline, startFetchingTimeline,
startFetchingNotifications, startFetchingNotifications,

View file

@ -25,11 +25,13 @@ const sortById = (a, b) => {
} }
} }
export const visibleNotificationsFromStore = store => { export const visibleNotificationsFromStore = (store, types) => {
// map is just to clone the array since sort mutates it and it causes some issues // map is just to clone the array since sort mutates it and it causes some issues
let sortedNotifications = notificationsFromStore(store).map(_ => _).sort(sortById) let sortedNotifications = notificationsFromStore(store).map(_ => _).sort(sortById)
sortedNotifications = sortBy(sortedNotifications, 'seen') sortedNotifications = sortBy(sortedNotifications, 'seen')
return sortedNotifications.filter((notification) => visibleTypes(store).includes(notification.type)) return sortedNotifications.filter(
(notification) => (types || visibleTypes(store)).includes(notification.type)
)
} }
export const unseenNotificationsFromStore = store => export const unseenNotificationsFromStore = store =>