Add Messages route
Now you can see a list of all your messages (including chats and groupchats)!
This commit is contained in:
parent
b74dbf5212
commit
e9145a46b8
4 changed files with 111 additions and 1 deletions
|
@ -5,6 +5,7 @@
|
|||
|
||||
import Home from './routes/Home.svelte'
|
||||
import Login from './routes/Login.svelte'
|
||||
import Messages from './routes/Messages.svelte'
|
||||
import Redirect from './routes/Redirect.svelte'
|
||||
|
||||
import { titleStore, softkeysStore } from './stores.ts'
|
||||
|
@ -19,6 +20,7 @@
|
|||
const routes = {
|
||||
'/': Home,
|
||||
'/login': Login,
|
||||
'/messages': Messages,
|
||||
'*': Redirect,
|
||||
}
|
||||
|
||||
|
|
39
src/components/ListItem.svelte
Normal file
39
src/components/ListItem.svelte
Normal file
|
@ -0,0 +1,39 @@
|
|||
<script>
|
||||
export let text = 'List Item'
|
||||
export let subtext = ''
|
||||
export let indicator = false
|
||||
export let tabindex = -1
|
||||
export let autofocus = false
|
||||
export let fullheight = false
|
||||
</script>
|
||||
|
||||
<div class="list-item-indicator focusable{fullheight ? ' fullheight' : ''}" {tabindex} {autofocus}>
|
||||
{#if text}
|
||||
<p class="list-item-indicator__text">{text}</p>
|
||||
{/if}
|
||||
{#if subtext}
|
||||
<p class="list-item-indicator__subtext">{subtext}</p>
|
||||
{/if}
|
||||
{#if indicator}
|
||||
<span class="list-item-indicator__indicator"></span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.list-item-indicator__text,
|
||||
.list-item-indicator__subtext {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fullheight {
|
||||
height: auto;
|
||||
min-height: 6rem;
|
||||
}
|
||||
|
||||
.fullheight .list-item-indicator__text,
|
||||
.fullheight .list-item-indicator__subtext {
|
||||
white-space: normal;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
|
@ -3,13 +3,13 @@
|
|||
import Input from '../components/Input.svelte'
|
||||
import Checkbox from '../components/Checkbox.svelte'
|
||||
|
||||
import { pop } from 'svelte-spa-router'
|
||||
import {
|
||||
titleStore,
|
||||
softkeysStore,
|
||||
xmppConnected,
|
||||
} from '../stores.ts'
|
||||
|
||||
import { push, pop } from 'svelte-spa-router'
|
||||
import converse from '../converse.js'
|
||||
|
||||
let xmppConnecting = false
|
||||
|
@ -67,6 +67,13 @@
|
|||
let advancedSettings
|
||||
let boshURL
|
||||
let wsURL
|
||||
|
||||
$: {
|
||||
if ($xmppConnected) {
|
||||
// Navigate to chat screen when connected
|
||||
push('/messages')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<Text>
|
||||
|
|
62
src/routes/Messages.svelte
Normal file
62
src/routes/Messages.svelte
Normal file
|
@ -0,0 +1,62 @@
|
|||
<script lang="ts">
|
||||
import Text from '../components/Text.svelte'
|
||||
import ListItem from '../components/ListItem.svelte'
|
||||
|
||||
import { push } from 'svelte-spa-router'
|
||||
import { _converse } from '@converse/headless/core'
|
||||
|
||||
import {
|
||||
titleStore,
|
||||
softkeysStore,
|
||||
xmppConnected,
|
||||
} from '../stores.ts'
|
||||
|
||||
titleStore.update(() => 'Convo')
|
||||
|
||||
softkeysStore.update((k) => {
|
||||
k.left.label = 'new'
|
||||
k.left.callback = () => {}
|
||||
|
||||
k.center.label = 'Open'
|
||||
k.center.callback = () => {}
|
||||
|
||||
k.right.label = 'Options'
|
||||
k.right.callback = () => {}
|
||||
|
||||
return k
|
||||
})
|
||||
|
||||
// Run this and unsubscribe after one
|
||||
// second. (The xmppConnected.subscribe function
|
||||
// returns the unsubscribe callback, which we
|
||||
// then call with setTimeout after 1000 ms)
|
||||
setTimeout(xmppConnected.subscribe(value => {
|
||||
if (!value) {
|
||||
push('/redirect') // redirects to home
|
||||
}
|
||||
}), 1000)
|
||||
|
||||
let chatboxes = []
|
||||
|
||||
_converse.on('chatBoxesFetched', () => {
|
||||
chatboxes = _converse.chatboxes?.toArray() || []
|
||||
})
|
||||
|
||||
_converse.on('message', () => {
|
||||
chatboxes = _converse.chatboxes?.toArray() || []
|
||||
})
|
||||
</script>
|
||||
|
||||
{#if !chatboxes.length}
|
||||
<Text>
|
||||
<p>You have no conversations. How about starting one?</p>
|
||||
</Text>
|
||||
{:else}
|
||||
{#each chatboxes as convo, index}
|
||||
<ListItem
|
||||
text={convo.attributes.nickname || convo.attributes.id}
|
||||
subtext={convo.messages?.last()?.attributes?.body || undefined}
|
||||
tabindex={index}
|
||||
/>
|
||||
{/each}
|
||||
{/if}
|
Loading…
Reference in a new issue