pinafore/routes/pinned.html

75 lines
2.1 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<:Head>
<title>Pinafore Pinned toots</title>
</:Head>
<Layout page='pinned'>
<DynamicPageBanner title="Pinned toots" icon="#fa-thumb-tack" />
<div class="pinned-toots-page">
{{#if loading}}
<LoadingPage />
{{elseif statuses && statuses.length}}
<ul class="pinned-toots-results">
{{#each statuses as status, index}}
<StatusSearchResult :status :index length="{{statuses.length}}" />
{{/each}}
</ul>
{{/if}}
</div>
</Layout>
<style>
.pinned-toots-page {
min-height: 60vh;
padding: 20px 20px;
position: relative;
}
.pinned-toots-results {
list-style: none;
box-sizing: border-box;
border: 1px solid var(--main-border);
border-radius: 2px;
}
@media (max-width: 767px) {
.pinned-toots-page {
padding: 20px 10px;
}
}
</style>
<script>
import Layout from './_components/Layout.html'
import { store } from './_store/store'
import LoadingPage from './_components/LoadingPage.html'
import StatusSearchResult from './_components/search/StatusSearchResult.html'
import { toast } from './_utils/toast'
import DynamicPageBanner from './_components/DynamicPageBanner.html'
import { getPinnedStatuses } from './_api/pinnedStatuses'
import { updateVerifyCredentialsForInstance } from './_actions/instances'
export default {
async oncreate() {
let accountsFetcher = this.get('accountsFetcher')
try {
let currentInstance = this.store.get('currentInstance')
await updateVerifyCredentialsForInstance(currentInstance)
let accessToken = this.store.get('accessToken')
let verifyCredentials = this.store.get('currentVerifyCredentials')
let statuses = await getPinnedStatuses(currentInstance, accessToken, verifyCredentials.id)
this.set({ statuses: statuses })
} catch (e) {
toast.say('Error: ' + (e.name || '') + ' ' + (e.message || ''))
} finally {
this.set({loading: false})
}
},
data: () => ({
loading: true,
accounts: []
}),
store: () => store,
components: {
Layout,
LoadingPage,
StatusSearchResult,
DynamicPageBanner
}
}
</script>