diff options
Diffstat (limited to 'hi-ui/src/lib')
| -rw-r--r-- | hi-ui/src/lib/apiServer.js | 57 | ||||
| -rw-r--r-- | hi-ui/src/lib/components/Message.svelte | 10 | ||||
| -rw-r--r-- | hi-ui/src/lib/store.js | 2 | ||||
| -rw-r--r-- | hi-ui/src/lib/store/channels.js | 4 | ||||
| -rw-r--r-- | hi-ui/src/lib/store/logins.js | 22 | ||||
| -rw-r--r-- | hi-ui/src/lib/store/messages.js | 29 |
6 files changed, 89 insertions, 35 deletions
diff --git a/hi-ui/src/lib/apiServer.js b/hi-ui/src/lib/apiServer.js index 9a51715..f6d6148 100644 --- a/hi-ui/src/lib/apiServer.js +++ b/hi-ui/src/lib/apiServer.js @@ -1,5 +1,5 @@ import axios from 'axios'; -import { activeChannel, channelsList, messages } from '$lib/store'; +import { activeChannel, channelsList, logins, messages } from '$lib/store'; export const apiServer = axios.create({ baseURL: '/api/', @@ -25,8 +25,8 @@ export async function createChannel(name) { return apiServer.post('/channels', { name }); } -export async function postToChannel(channelId, message) { - return apiServer.post(`/channels/${channelId}`, { message }); +export async function postToChannel(channelId, body) { + return apiServer.post(`/channels/${channelId}`, { body }); } export async function deleteMessage(messageId) { @@ -55,22 +55,47 @@ export function subscribeToEvents(resume_point) { const data = JSON.parse(evt.data); switch (data.type) { - case 'created': - channelsList.update((value) => value.addChannel(data.channel)) + case 'login': + onLoginEvent(data); break; - case 'message': - messages.update((value) => value.addMessage(data)); - break; - case 'message_deleted': - messages.update((value) => value.deleteMessage(data.channel.id, data.message)); + case 'channel': + onChannelEvent(data); break; - case 'deleted': - activeChannel.update((value) => value.deleteChannel(data.channel)); - channelsList.update((value) => value.deleteChannel(data.channel)); - messages.update((value) => value.deleteChannel(data.channel)); - break; - default: + case 'message': + onMessageEvent(data); break; } } } + +function onLoginEvent(data) { + switch (data.event) { + case 'created': + logins.update((value) => value.addLogin(data.id, data.name)) + break; + } +} + +function onChannelEvent(data) { + switch (data.event) { + case 'created': + channelsList.update((value) => value.addChannel(data.id, data.name)) + break; + case 'deleted': + activeChannel.update((value) => value.deleteChannel(data.id)); + channelsList.update((value) => value.deleteChannel(data.id)); + messages.update((value) => value.deleteChannel(data.id)); + break; + } +} + +function onMessageEvent(data) { + switch (data.event) { + case 'sent': + messages.update((value) => value.addMessage(data.channel, data.id, data.at, data.sender, data.body)); + break; + case 'deleted': + messages.update((value) => value.deleteMessage(data.id)); + break; + } +} diff --git a/hi-ui/src/lib/components/Message.svelte b/hi-ui/src/lib/components/Message.svelte index 5b51492..d040433 100644 --- a/hi-ui/src/lib/components/Message.svelte +++ b/hi-ui/src/lib/components/Message.svelte @@ -1,23 +1,25 @@ <script> import SvelteMarkdown from 'svelte-markdown'; - import { currentUser } from '$lib/store'; + import { currentUser, logins } from '$lib/store'; import { deleteMessage } from '$lib/apiServer'; export let at; // XXX: Omitted for now. export let sender; - export let message; + export let body; let timestamp = new Date(at).toTimeString(); + let name; + $: name = $logins.get(sender); </script> <div class="card card-hover m-4 relative"> <span class="chip variant-soft sticky top-o left-0"> <!-- TODO: should this show up for only the first of a run? --> - @{sender.name}: + @{name}: </span> <span class="timestamp chip variant-soft absolute top-0 right-0">{at}</span> <section class="p-4"> - <SvelteMarkdown source={message.body} /> + <SvelteMarkdown source={body} /> </section> </div> diff --git a/hi-ui/src/lib/store.js b/hi-ui/src/lib/store.js index 5e28195..b964b4b 100644 --- a/hi-ui/src/lib/store.js +++ b/hi-ui/src/lib/store.js @@ -1,8 +1,10 @@ import { writable } from 'svelte/store'; import { ActiveChannel, Channels } from '$lib/store/channels'; import { Messages } from '$lib/store/messages'; +import { Logins } from '$lib/store/logins'; export const currentUser = writable(null); export const activeChannel = writable(new ActiveChannel()); +export const logins = writable(new Logins()); export const channelsList = writable(new Channels()); export const messages = writable(new Messages()); diff --git a/hi-ui/src/lib/store/channels.js b/hi-ui/src/lib/store/channels.js index 20702cc..bb6c86c 100644 --- a/hi-ui/src/lib/store/channels.js +++ b/hi-ui/src/lib/store/channels.js @@ -9,8 +9,8 @@ export class Channels { return this; } - addChannel(channel) { - this.channels = [...this.channels, channel]; + addChannel(id, name) { + this.channels = [...this.channels, { id, name }]; this.sort(); return this; } diff --git a/hi-ui/src/lib/store/logins.js b/hi-ui/src/lib/store/logins.js new file mode 100644 index 0000000..5b45206 --- /dev/null +++ b/hi-ui/src/lib/store/logins.js @@ -0,0 +1,22 @@ +export class Logins { + constructor() { + this.logins = {}; + } + + addLogin(id, name) { + this.logins[id] = name; + return this; + } + + setLogins(logins) { + this.logins = {}; + for (let { id, name } of logins) { + this.addLogin(id, name); + } + return this; + } + + get(id) { + return this.logins[id]; + } +} diff --git a/hi-ui/src/lib/store/messages.js b/hi-ui/src/lib/store/messages.js index 560b9e1..931b8fb 100644 --- a/hi-ui/src/lib/store/messages.js +++ b/hi-ui/src/lib/store/messages.js @@ -4,28 +4,31 @@ export class Messages { } inChannel(channel) { - return this.channels[channel] || []; + return this.channels[channel] = (this.channels[channel] || []); } - addMessage(message) { - let { - channel, - ...payload - } = message; - let channel_id = channel.id; - this.updateChannel(channel_id, (messages) => [...messages, payload]); + addMessage(channel, id, at, sender, body) { + this.updateChannel(channel, (messages) => [...messages, { id, at, sender, body }]); return this; } - addMessages(channel, payloads) { - this.updateChannel(channel, (messages) => [...messages, ...payloads]); + setMessages(messages) { + this.channels = {}; + for (let { channel, id, at, sender, body } of messages) { + this.inChannel(channel).push({ id, at, sender, body, }); + } + for (let channel in this.channels) { + this.channels[channel].sort((a, b) => a.at - b.at); + } return this; } - deleteMessage(channel, message) { - let messages = this.messages(channel).filter((msg) => msg.message.id != message); - this.channels[channel] = messages; + deleteMessage(message) { + for (let channel in this.channels) { + this.updateChannel(channel, (messages) => messages.filter((msg) => msg.id != message)); + } + return this; } deleteChannel(id) { |