add ability to post a reply
This commit is contained in:
parent
d5aa18ddb6
commit
e3850beddf
|
@ -35,12 +35,18 @@ export async function postStatus (realm, text, inReplyToId, mediaIds,
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
store.set({postingStatus: true})
|
store.set({
|
||||||
|
postingStatus: true,
|
||||||
|
postedStatusForRealm: null
|
||||||
|
})
|
||||||
try {
|
try {
|
||||||
let status = await postStatusToServer(instanceName, accessToken, text,
|
let status = await postStatusToServer(instanceName, accessToken, text,
|
||||||
inReplyToId, mediaIds, sensitive, spoilerText, visibility)
|
inReplyToId, mediaIds, sensitive, spoilerText, visibility)
|
||||||
addStatusOrNotification(instanceName, 'home', status)
|
addStatusOrNotification(instanceName, 'home', status)
|
||||||
store.clearComposeData(realm)
|
store.clearComposeData(realm)
|
||||||
|
store.set({
|
||||||
|
postedStatusForRealm: realm
|
||||||
|
})
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
toast.say('Unable to post status: ' + (e.message || ''))
|
toast.say('Unable to post status: ' + (e.message || ''))
|
||||||
} finally {
|
} finally {
|
||||||
|
|
|
@ -61,6 +61,13 @@
|
||||||
import { postStatus } from '../../_actions/statuses'
|
import { postStatus } from '../../_actions/statuses'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
oncreate() {
|
||||||
|
this.observe('postedStatusForRealm', postedStatusForRealm => {
|
||||||
|
if (postedStatusForRealm === this.get('realm')) {
|
||||||
|
window.history.back()
|
||||||
|
}
|
||||||
|
}, {init: false})
|
||||||
|
},
|
||||||
components: {
|
components: {
|
||||||
ComposeAuthor,
|
ComposeAuthor,
|
||||||
ComposeToolbar,
|
ComposeToolbar,
|
||||||
|
@ -86,7 +93,8 @@
|
||||||
},
|
},
|
||||||
overLimit: (length) => length > CHAR_LIMIT,
|
overLimit: (length) => length > CHAR_LIMIT,
|
||||||
contentWarningShown: (composeData) => composeData.contentWarningShown,
|
contentWarningShown: (composeData) => composeData.contentWarningShown,
|
||||||
contentWarning: (composeData) => composeData.contentWarning || ''
|
contentWarning: (composeData) => composeData.contentWarning || '',
|
||||||
|
postedStatusForRealm: ($postedStatusForRealm) => $postedStatusForRealm
|
||||||
},
|
},
|
||||||
transitions: {
|
transitions: {
|
||||||
slide
|
slide
|
||||||
|
@ -101,7 +109,9 @@
|
||||||
let realm = this.get('realm')
|
let realm = this.get('realm')
|
||||||
let mediaIds = media.map(_ => _.data.id)
|
let mediaIds = media.map(_ => _.data.id)
|
||||||
|
|
||||||
/* no await */ postStatus(realm, text, null, mediaIds,
|
let inReplyTo = realm === 'home' ? null : realm
|
||||||
|
|
||||||
|
/* no await */ postStatus(realm, text, inReplyTo, mediaIds,
|
||||||
sensitive, contentWarning, postPrivacyKey)
|
sensitive, contentWarning, postPrivacyKey)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -157,7 +157,9 @@
|
||||||
return `${$currentInstance}/${timelineType}/${timelineValue}/${notification ? notification.id : ''}/${status.id}`
|
return `${$currentInstance}/${timelineType}/${timelineValue}/${notification ? notification.id : ''}/${status.id}`
|
||||||
},
|
},
|
||||||
originalAccount: (originalStatus) => originalStatus.account,
|
originalAccount: (originalStatus) => originalStatus.account,
|
||||||
isStatusInOwnThread: (timelineType, timelineValue, statusId) => timelineType === 'status' && timelineValue === statusId,
|
isStatusInOwnThread: (timelineType, timelineValue, statusId) => {
|
||||||
|
return (timelineType === 'status' || timelineType === 'reply') && timelineValue === statusId
|
||||||
|
},
|
||||||
isStatusInNotification: (status, notification) => notification && notification.status && notification.type !== 'mention' && notification.status.id === status.id,
|
isStatusInNotification: (status, notification) => notification && notification.status && notification.type !== 'mention' && notification.status.id === status.id,
|
||||||
spoilerShown: ($spoilersShown, contextualStatusId) => !!$spoilersShown[contextualStatusId],
|
spoilerShown: ($spoilersShown, contextualStatusId) => !!$spoilersShown[contextualStatusId],
|
||||||
visibility: (originalStatus) => originalStatus.visibility,
|
visibility: (originalStatus) => originalStatus.visibility,
|
||||||
|
|
|
@ -2,6 +2,9 @@
|
||||||
<IconButton
|
<IconButton
|
||||||
label="Reply"
|
label="Reply"
|
||||||
href="#fa-reply"
|
href="#fa-reply"
|
||||||
|
disabled="{{disableReply}}"
|
||||||
|
delegateKey="{{replyKey}}"
|
||||||
|
ref:replyNode
|
||||||
/>
|
/>
|
||||||
<IconButton
|
<IconButton
|
||||||
label="{{reblogLabel}}"
|
label="{{reblogLabel}}"
|
||||||
|
@ -41,15 +44,18 @@
|
||||||
import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
|
import { registerClickDelegate, unregisterClickDelegate } from '../../_utils/delegate'
|
||||||
import { setFavorited } from '../../_actions/favorite'
|
import { setFavorited } from '../../_actions/favorite'
|
||||||
import { setReblogged } from '../../_actions/reblog'
|
import { setReblogged } from '../../_actions/reblog'
|
||||||
|
import { goto } from 'sapper/runtime.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
oncreate() {
|
oncreate() {
|
||||||
registerClickDelegate(this.get('favoriteKey'), () => this.onFavoriteClick())
|
registerClickDelegate(this.get('favoriteKey'), () => this.onFavoriteClick())
|
||||||
registerClickDelegate(this.get('reblogKey'), () => this.onReblogClick())
|
registerClickDelegate(this.get('reblogKey'), () => this.onReblogClick())
|
||||||
|
registerClickDelegate(this.get('replyKey'), () => this.onReplyClick())
|
||||||
},
|
},
|
||||||
ondestroy() {
|
ondestroy() {
|
||||||
unregisterClickDelegate(this.get('favoriteKey'))
|
unregisterClickDelegate(this.get('favoriteKey'))
|
||||||
unregisterClickDelegate(this.get('reblogKey'))
|
unregisterClickDelegate(this.get('reblogKey'))
|
||||||
|
unregisterClickDelegate(this.get('replyKey'))
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
IconButton
|
IconButton
|
||||||
|
@ -65,6 +71,10 @@
|
||||||
let statusId = this.get('statusId')
|
let statusId = this.get('statusId')
|
||||||
let reblogged = this.get('reblogged')
|
let reblogged = this.get('reblogged')
|
||||||
/* no await */ setReblogged(statusId, !reblogged)
|
/* no await */ setReblogged(statusId, !reblogged)
|
||||||
|
},
|
||||||
|
onReplyClick() {
|
||||||
|
let statusId = this.get('statusId')
|
||||||
|
goto(`/statuses/${statusId}/reply`)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -105,8 +115,10 @@
|
||||||
return status.favourited
|
return status.favourited
|
||||||
},
|
},
|
||||||
statusId: (status) => status.id,
|
statusId: (status) => status.id,
|
||||||
|
disableReply: (statusId, timelineType, timelineValue) => timelineType === 'reply' && statusId === timelineValue,
|
||||||
favoriteKey: (statusId, timelineType, timelineValue) => `fav-${timelineType}-${timelineValue}-${statusId}`,
|
favoriteKey: (statusId, timelineType, timelineValue) => `fav-${timelineType}-${timelineValue}-${statusId}`,
|
||||||
reblogKey: (statusId, timelineType, timelineValue) => `reblog-${timelineType}-${timelineValue}-${statusId}`,
|
reblogKey: (statusId, timelineType, timelineValue) => `reblog-${timelineType}-${timelineValue}-${statusId}`,
|
||||||
|
replyKey: (statusId, timelineType, timelineValue) => `reply-${timelineType}-${timelineValue}-${statusId}`,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
|
@ -0,0 +1,53 @@
|
||||||
|
<:Head>
|
||||||
|
<title>Pinafore – Reply</title>
|
||||||
|
</:Head>
|
||||||
|
|
||||||
|
<Layout page='reply' >
|
||||||
|
<DynamicPageBanner title=""/>
|
||||||
|
<div class="reply-container">
|
||||||
|
{{#if status}}
|
||||||
|
<Status index="0"
|
||||||
|
length="1"
|
||||||
|
timelineType="reply"
|
||||||
|
timelineValue="{{params.statusId}}"
|
||||||
|
:status
|
||||||
|
/>
|
||||||
|
<ComposeBox realm="{{params.statusId}}" />
|
||||||
|
{{else}}
|
||||||
|
<LoadingPage />
|
||||||
|
{{/if}}
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
<style>
|
||||||
|
.reply-container {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 20px;
|
||||||
|
min-height: 60vh;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
import Layout from '../../_components/Layout.html'
|
||||||
|
import { store } from '../../_store/store.js'
|
||||||
|
import DynamicPageBanner from '../../_components/DynamicPageBanner.html'
|
||||||
|
import LoadingPage from '../../_components/LoadingPage.html'
|
||||||
|
import ComposeBox from '../../_components/compose/ComposeBox.html'
|
||||||
|
import Status from '../../_components/status/Status.html'
|
||||||
|
import { database } from '../../_database/database'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
async oncreate() {
|
||||||
|
let statusId = this.get('params').statusId
|
||||||
|
let instanceName = this.store.get('currentInstance')
|
||||||
|
let status = await database.getStatus(instanceName, statusId)
|
||||||
|
this.set({status})
|
||||||
|
},
|
||||||
|
store: () => store,
|
||||||
|
components: {
|
||||||
|
Layout,
|
||||||
|
DynamicPageBanner,
|
||||||
|
LoadingPage,
|
||||||
|
ComposeBox,
|
||||||
|
Status
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
Loading…
Reference in New Issue