data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

make statuses robust against duplicates, remove duplicate from test

Browse source
This commit is contained in:
Nolan Lawson 2018-03-15 20:04:24 -07:00
parent a5ca99c2f0
commit a25dd048b6
14 changed files with 128 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
bin/mastodon-data.js
View file

@ -186,10 +186,6 @@ export const actions = times(30, i => ({
privacy: 'unlisted'
}
},
{
user: 'admin',
boost: 'notification-of-unlisted-message'
},
{
user: 'admin',
boost: 'foobar-this-is-unlisted'

16
routes/_components/status/Notification.html
View file

@ -10,7 +10,8 @@
aria-posinset="{{index}}" aria-setsize="{{length}}"
>
<div class="follow-notification-offset">
<StatusHeader :status :notification isStatusInNotification="true" />
<StatusHeader :notification :notificationId :status :statusId :timelineType
:account :accountId :uuid isStatusInNotification="true" />
</div>
</article>
{{/if}}
@ -35,10 +36,23 @@
<script>
import Status from './Status.html'
import StatusHeader from './StatusHeader.html'
import { store } from '../../_store/store'
export default {
components: {
Status,
StatusHeader
},
store: () => store,
computed: {
account: (notification) => notification.account,
accountId: (account) => account.id,
notificationId: (notification) => notification.id,
status: (notification) => notification.status,
statusId: (status) => status && status.id,
uuid: ($currentInstance, timelineType, timelineValue, notificationId, statusId) => {
return `${$currentInstance}/${timelineType}/${timelineValue}/${notificationId}/${statusId || ''}`
},
}
}
</script>

60
routes/_components/status/Status.html
View file

@ -7,29 +7,34 @@
aria-label="{{ariaLabel}}"
on:recalculateHeight>
{{#if showHeader}}
<StatusHeader :notification :status :isStatusInNotification :timelineType />
<StatusHeader :notification :notificationId :status :statusId :timelineType
:account :accountId :uuid :isStatusInNotification />
{{/if}}
<StatusAuthorName status="{{originalStatus}}" :isStatusInOwnThread :isStatusInNotification />
<StatusAuthorHandle status="{{originalStatus}}" :isStatusInNotification />
<StatusAuthorName :isStatusInNotification :isStatusInOwnThread :originalAccountId
:originalAccount :uuid />
<StatusAuthorHandle :isStatusInNotification :originalAccount />
{{#if !isStatusInOwnThread}}
<StatusRelativeDate status="{{originalStatus}}" :isStatusInNotification />
<StatusRelativeDate :isStatusInNotification :originalStatus :originalStatusId :uuid />
{{/if}}
<StatusSidebar status="{{originalStatus}}" :isStatusInOwnThread />
<StatusSidebar :isStatusInOwnThread :originalAccount />
{{#if originalStatus.spoiler_text}}
<StatusSpoiler status="{{originalStatus}}" :isStatusInOwnThread :contextualStatusId :isStatusInNotification
<StatusSpoiler :isStatusInOwnThread :isStatusInNotification
:originalStatus :uuid
on:recalculateHeight />
{{/if}}
{{#if !originalStatus.spoiler_text || spoilerShown}}
<StatusContent status="{{originalStatus}}" :isStatusInOwnThread :isStatusInNotification />
<StatusContent :isStatusInOwnThread :isStatusInNotification
:originalStatus :uuid />
{{/if}}
{{#if originalStatus.media_attachments && originalStatus.media_attachments.length}}
<StatusMediaAttachments status="{{originalStatus}}" :timelineType :timelineValue
on:recalculateHeight :contextualStatusId />
<StatusMediaAttachments :originalStatus :uuid
on:recalculateHeight />
{{/if}}
{{#if isStatusInOwnThread}}
<StatusDetails status="{{originalStatus}}" />
<StatusDetails :originalStatus :originalStatusId />
{{/if}}
<StatusToolbar status="{{originalStatus}}" :isStatusInOwnThread />
<StatusToolbar :originalStatus :originalStatusId :originalAccountId
:isStatusInOwnThread :uuid />
</article>
<style>
@ -147,26 +152,35 @@
parentElement.parentElement.localName !== 'button') {
e.preventDefault()
e.stopPropagation()
goto(`/statuses/${this.get('statusId')}`)
goto(`/statuses/${this.get('originalStatusId')}`)
}
}
},
computed: {
originalStatus: (status) => status.reblog ? status.reblog : status,
statusId: (originalStatus) => originalStatus.id,
delegateKey: (statusId) => `status-${statusId}`,
contextualStatusId: ($currentInstance, timelineType, timelineValue, status, notification) => {
return `${$currentInstance}/${timelineType}/${timelineValue}/${notification ? notification.id : ''}/${status.id}`
originalStatusId: (originalStatus) => originalStatus.id,
statusId: (status) => status.id,
notificationId: (notification) => notification && notification.id,
account: (notification, status) => {
return (notification && notification.account) || status.account
},
accountId: (account) => account.id,
originalAccount: (originalStatus) => originalStatus.account,
isStatusInOwnThread: (timelineType, timelineValue, statusId) => {
return (timelineType === 'status' || timelineType === 'reply') && timelineValue === statusId
originalAccountId: (originalAccount) => originalAccount.id,
uuid: ($currentInstance, timelineType, timelineValue, notificationId, statusId) => {
return `${$currentInstance}/${timelineType}/${timelineValue}/${notificationId || ''}/${statusId}`
},
isStatusInNotification: (status, notification) => notification && notification.status && notification.type !== 'mention' && notification.status.id === status.id,
spoilerShown: ($spoilersShown, contextualStatusId) => !!$spoilersShown[contextualStatusId],
visibility: (originalStatus) => originalStatus.visibility,
ariaLabel: (originalAccount, visibility) => {
return (visibility === 'direct' ? 'Direct message' : 'Status') +
delegateKey: (uuid) => `status-${uuid}`,
isStatusInOwnThread: (timelineType, timelineValue, originalStatusId) => {
return (timelineType === 'status' || timelineType === 'reply') && timelineValue === originalStatusId
},
isStatusInNotification: (originalStatusId, notification) => {
return notification && notification.status &&
notification.type !== 'mention' && notification.status.id === originalStatusId
},
spoilerShown: ($spoilersShown, uuid) => !!$spoilersShown[uuid],
ariaLabel: (originalAccount, originalStatus) => {
return (originalStatus.visibility === 'direct' ? 'Direct message' : 'Status') +
` by ${originalAccount.display_name || originalAccount.username}`
},
showHeader: (notification, status, timelineType) => {

2
routes/_components/status/StatusAuthorHandle.html
View file

@ -1,5 +1,5 @@
<span class="status-author-handle {{isStatusInNotification ? 'status-in-notification' : '' }}">
{{'@' + status.account.acct}}
{{'@' + originalAccount.acct}}
</span>
<style>
.status-author-handle {

7
routes/_components/status/StatusAuthorName.html
View file

@ -1,8 +1,8 @@
<a class="status-author-name {{isStatusInNotification ? 'status-in-notification' : '' }} {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}"
href="/accounts/{{status.account.id}}"
href="/accounts/{{originalAccountId}}"
focus-key="{{focusKey}}"
>
{{status.account.display_name || status.account.username}}
{{originalAccount.display_name || originalAccount.username}}
</a>
<style>
.status-author-name {
@ -35,8 +35,7 @@
<script>
export default {
computed: {
statusId: (status) => status.id,
focusKey: (statusId) => `status-author-name-${statusId}`
focusKey: (uuid) => `status-author-name-${uuid}`
}
}
</script>

27
routes/_components/status/StatusContent.html
View file

@ -66,11 +66,11 @@
},
store: () => store,
computed: {
massagedContent: (status, $autoplayGifs) => {
let content = status.content
massagedContent: (originalStatus, $autoplayGifs) => {
let content = originalStatus.content
// emojify
if (status.emojis && status.emojis.length) {
for (let emoji of status.emojis) {
if (originalStatus.emojis && originalStatus.emojis.length) {
for (let emoji of originalStatus.emojis) {
let { shortcode, url, static_url } = emoji
let urlToUse = $autoplayGifs ? url : static_url
let shortcodeWithColons = `:${shortcode}:`
@ -87,8 +87,7 @@
content = `<p>${content}</p>`
}
return content
},
statusId: (status) => status.id
}
},
methods: {
hydrateContent() {
@ -96,30 +95,30 @@
return
}
let node = this.refs.node
let status = this.get('status')
let statusId = this.get('statusId')
let originalStatus = this.get('originalStatus')
let uuid = this.get('uuid')
let count = 0
mark('hydrateContent')
if (status.tags && status.tags.length) {
if (originalStatus.tags && originalStatus.tags.length) {
let anchorTags = node.querySelectorAll('a[class~=hashtag][href^=http]')
for (let tag of status.tags) {
for (let tag of originalStatus.tags) {
for (let anchorTag of anchorTags) {
if (anchorTag.getAttribute('href').endsWith(`/tags/${tag.name}`)) {
anchorTag.setAttribute('href', `/tags/${tag.name}`)
anchorTag.setAttribute('focus-key', `status-content-link-${statusId}-${++count}`)
anchorTag.setAttribute('focus-key', `status-content-link-${uuid}-${++count}`)
anchorTag.removeAttribute('target')
anchorTag.removeAttribute('rel')
}
}
}
}
if (status.mentions && status.mentions.length) {
if (originalStatus.mentions && originalStatus.mentions.length) {
let anchorTags = node.querySelectorAll('a[class~=mention][href^=http]')
for (let mention of status.mentions) {
for (let mention of originalStatus.mentions) {
for (let anchorTag of anchorTags) {
if (anchorTag.getAttribute('href') === mention.url) {
anchorTag.setAttribute('href', `/accounts/${mention.id}`)
anchorTag.setAttribute('focus-key', `status-content-link-${statusId}-${++count}`)
anchorTag.setAttribute('focus-key', `status-content-link-${uuid}-${++count}`)
anchorTag.removeAttribute('target')
anchorTag.removeAttribute('rel')
}

17
routes/_components/status/StatusDetails.html
View file

@ -1,14 +1,18 @@
<div class="status-details">
<ExternalLink class="status-absolute-date" href="{{status.url}}" showIcon="true">
<ExternalLink class="status-absolute-date" href="{{originalStatus.url}}" showIcon="true">
<time datetime={{createdAtDate}} title="{{formattedDate}}">{{formattedDate}}</time>
</ExternalLink>
<a class="status-favs-reblogs" href="/statuses/{{statusId}}/reblogs" aria-label="{{favoritesLabel}}">
<a class="status-favs-reblogs"
href="/statuses/{{originalStatusId}}/reblogs"
aria-label="{{favoritesLabel}}">
<svg>
<use xlink:href="#fa-retweet"/>
</svg>
<span>{{numReblogs}}</span>
</a>
<a class="status-favs-reblogs" href="/statuses/{{statusId}}/favorites" aria-label="{{reblogsLabel}}">
<a class="status-favs-reblogs"
href="/statuses/{{originalStatusId}}/favorites"
aria-label="{{reblogsLabel}}">
<svg>
<use xlink:href="#fa-star" />
</svg>
@ -91,10 +95,9 @@
export default {
computed: {
statusId: (status) => status.id,
createdAtDate: (status) => status.created_at,
numReblogs: (status) => status.reblogs_count || 0,
numFavs: (status) => status.favourites_count || 0,
createdAtDate: (originalStatus) => originalStatus.created_at,
numReblogs: (originalStatus) => originalStatus.reblogs_count || 0,
numFavs: (originalStatus) => originalStatus.favourites_count || 0,
formattedDate: (createdAtDate) => formatter.format(new Date(createdAtDate)),
reblogsLabel: (numReblogs) => {
// TODO: intl

14
routes/_components/status/StatusHeader.html
View file

@ -6,9 +6,9 @@
{{#if timelineType === 'pinned'}}
Pinned toot
{{else}}
<a href="/accounts/{{account.id}}"
<a href="/accounts/{{accountId}}"
focus-key="{{focusKey}}" >
{{account.display_name || ('@' + account.username)}}
{{account.display_name || account.username}}
</a>
{{#if notification && notification.type === 'reblog'}}
boosted your status
@ -68,9 +68,7 @@
<script>
export default {
computed: {
statusId: (status) => status && status.id,
notificationId: (notification) => notification && notification.id,
focusKey: (statusId, notificationId) => `status-header-${statusId}-${notificationId}`,
focusKey: (uuid) => `status-header-${uuid}`,
icon: (notification, status, timelineType) => {
if (timelineType === 'pinned') {
return '#fa-thumb-tack'
@ -80,12 +78,6 @@
return '#fa-user-plus'
}
return '#fa-star'
},
account: (notification, status) => {
if (notification && notification.account) {
return notification.account
}
return status.account
}
}
}

18
routes/_components/status/StatusMediaAttachments.html
View file

@ -1,4 +1,4 @@
{{#if status.sensitive || $markMediaAsSensitive}}
{{#if sensitive }}
<div class="status-sensitive-media-container {{sensitiveShown ? 'status-sensitive-media-shown' : 'status-sensitive-media-hidden'}}"
>
{{#if sensitiveShown}}
@ -12,7 +12,7 @@
</svg>
</div>
</button>
<MediaAttachments mediaAttachments="{{mediaAttachments}}" sensitive="{{status.sensitive}}"/>
<MediaAttachments :mediaAttachments :sensitive />
{{else}}
<button type="button"
class="status-sensitive-media-button"
@ -31,7 +31,7 @@
{{/if}}
</div>
{{else}}
<MediaAttachments mediaAttachments="{{mediaAttachments}}" sensitive="{{status.sensitive}}"/>
<MediaAttachments :mediaAttachments :sensitive />
{{/if}}
<style>
.status-sensitive-media-container {
@ -140,16 +140,16 @@
},
store: () => store,
computed: {
mediaAttachments: (status) => status.media_attachments,
sensitiveShown: ($sensitivesShown, contextualStatusId) => !!$sensitivesShown[contextualStatusId],
statusId: (status) => status.id,
delegateKey: (statusId) => `sensitive-${statusId}`,
mediaAttachments: (originalStatus) => originalStatus.media_attachments,
sensitiveShown: ($sensitivesShown, uuid) => !!$sensitivesShown[uuid],
sensitive: (originalStatus, $markMediaAsSensitive) => originalStatus.sensitive || $markMediaAsSensitive,
delegateKey: (uuid) => `sensitive-${uuid}`,
},
methods: {
onClickSensitiveMediaButton() {
let contextualStatusId = this.get('contextualStatusId')
let uuid = this.get('uuid')
let $sensitivesShown = this.store.get('sensitivesShown') || {}
$sensitivesShown[contextualStatusId] = !$sensitivesShown[contextualStatusId]
$sensitivesShown[uuid] = !$sensitivesShown[uuid]
this.store.set({'sensitivesShown': $sensitivesShown})
this.fire('recalculateHeight')
}

12
routes/_components/status/StatusRelativeDate.html
View file

@ -1,8 +1,11 @@
<a class="status-relative-date {{isStatusInNotification ? 'status-in-notification' : '' }}"
href="/statuses/{{status.id}}"
href="/statuses/{{originalStatusId}}"
focus-key="{{focusKey}}"
>
<time datetime={{createdAtDate}} title="{{relativeDate}}" aria-label="{{relativeDate}} – click to show thread">{{relativeDate}}</time>
<time datetime={{createdAtDate}} title="{{relativeDate}}"
aria-label="{{relativeDate}} – click to show thread">
{{relativeDate}}
</time>
</a>
<style>
.status-relative-date {
@ -32,15 +35,14 @@
export default {
computed: {
createdAtDate: (status) => status.created_at,
statusId: (status) => status.id,
createdAtDate: (originalStatus) => originalStatus.created_at,
relativeDate: (createdAtDate) => {
mark('compute relativeDate')
let res = timeagoInstance.format(createdAtDate)
stop('compute relativeDate')
return res
},
focusKey: (statusId) => `status-relative-date-${statusId}`
focusKey: (uuid) => `status-relative-date-${uuid}`
}
}
</script>

2
routes/_components/status/StatusSidebar.html
View file

@ -1,4 +1,4 @@
<Avatar account={{status.account}}
<Avatar account={{originalAccount}}
className="status-sidebar"
size="{{isStatusInOwnThread ? 'medium' : 'small'}}" />
<style>

11
routes/_components/status/StatusSpoiler.html
View file

@ -1,5 +1,5 @@
<div class="status-spoiler {{isStatusInNotification ? 'status-in-notification' : ''}} {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
<p>{{status.spoiler_text}}</p>
<p>{{originalStatus.spoiler_text}}</p>
</div>
<div class="status-spoiler-button {{isStatusInOwnThread ? 'status-in-own-thread' : ''}}">
<button type="button" delegate-key="{{delegateKey}}">
@ -51,15 +51,14 @@
},
store: () => store,
computed: {
spoilerShown: ($spoilersShown, contextualStatusId) => !!$spoilersShown[contextualStatusId],
statusId: (status) => status.id,
delegateKey: (statusId) => `spoiler-${statusId}`
spoilerShown: ($spoilersShown, uuid) => !!$spoilersShown[uuid],
delegateKey: (uuid) => `spoiler-${uuid}`
},
methods: {
onClickSpoilerButton() {
let contextualStatusId = this.get('contextualStatusId')
let uuid = this.get('uuid')
let $spoilersShown = this.store.get('spoilersShown')
$spoilersShown[contextualStatusId] = !$spoilersShown[contextualStatusId]
$spoilersShown[uuid] = !$spoilersShown[uuid]
this.store.set({'spoilersShown': $spoilersShown})
this.fire('recalculateHeight')
}

48
routes/_components/status/StatusToolbar.html
View file

@ -65,30 +65,30 @@
store: () => store,
methods: {
onFavoriteClick() {
let statusId = this.get('statusId')
let originalStatusId = this.get('originalStatusId')
let favorited = this.get('favorited')
/* no await */ setFavorited(statusId, !favorited)
/* no await */ setFavorited(originalStatusId, !favorited)
},
onReblogClick() {
let statusId = this.get('statusId')
let originalStatusId = this.get('originalStatusId')
let reblogged = this.get('reblogged')
/* no await */ setReblogged(statusId, !reblogged)
/* no await */ setReblogged(originalStatusId, !reblogged)
},
onReplyClick() {
let statusId = this.get('statusId')
goto(`/statuses/${statusId}/reply`)
let originalStatusId = this.get('originalStatusId')
goto(`/statuses/${originalStatusId}/reply`)
},
async onOptionsClick() {
let statusId = this.get('statusId')
let accountId = this.get('accountId')
let updateRelationshipPromise = updateProfileAndRelationship(accountId)
let originalStatusId = this.get('originalStatusId')
let originalAccountId = this.get('originalAccountId')
let updateRelationshipPromise = updateProfileAndRelationship(originalAccountId)
let dialogs = await importDialogs()
await updateRelationshipPromise
dialogs.showStatusOptionsDialog(statusId)
dialogs.showStatusOptionsDialog(originalStatusId)
}
},
computed: {
visibility: (status) => status.visibility,
visibility: (originalStatus) => originalStatus.visibility,
reblogLabel: (visibility) => {
switch (visibility) {
case 'private':
@ -112,24 +112,22 @@
reblogDisabled: (visibility) => {
return visibility === 'private' || visibility === 'direct'
},
reblogged: (status, $currentStatusModifications) => {
if ($currentStatusModifications && status.id in $currentStatusModifications.reblogs) {
return $currentStatusModifications.reblogs[status.id]
reblogged: (originalStatusId, $currentStatusModifications, originalStatus) => {
if ($currentStatusModifications && originalStatusId in $currentStatusModifications.reblogs) {
return $currentStatusModifications.reblogs[originalStatusId]
}
return status.reblogged
return originalStatus.reblogged
},
favorited: (status, $currentStatusModifications) => {
if ($currentStatusModifications && status.id in $currentStatusModifications.favorites) {
return $currentStatusModifications.favorites[status.id]
favorited: (originalStatusId, $currentStatusModifications, originalStatus) => {
if ($currentStatusModifications && originalStatusId in $currentStatusModifications.favorites) {
return $currentStatusModifications.favorites[originalStatusId]
}
return status.favourited
return originalStatus.favourited
},
statusId: (status) => status.id,
accountId: (status) => status.account.id,
favoriteKey: (statusId) => `fav-${statusId}`,
reblogKey: (statusId) => `reblog-${statusId}`,
replyKey: (statusId) => `reply-${statusId}`,
optionsKey: (statusId) => `options-${statusId}`,
favoriteKey: (uuid) => `fav-${uuid}`,
reblogKey: (uuid) => `reblog-${uuid}`,
replyKey: (uuid) => `reply-${uuid}`,
optionsKey: (uuid) => `options-${uuid}`,
}
}
</script>

2
routes/_components/timeline/Timeline.html
View file

@ -244,7 +244,7 @@
if (activeElement) {
let focusKey = activeElement.getAttribute('focus-key')
if (focusKey) {
lastFocusedElementSelector = `[focus-key=${focusKey}]`
lastFocusedElementSelector = `[focus-key=${JSON.stringify(focusKey)}]`
}
}
console.log('saving focus to ', lastFocusedElementSelector)