From 8edd5625ad5dde0ef1637d5c89e9901b3ee65d73 Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Sat, 5 Oct 2024 20:12:25 -0400 Subject: Provide named operations for stored state. --- hi-ui/src/apiServer.js | 37 +++--------------- hi-ui/src/lib/ActiveChannel.svelte | 12 ++---- hi-ui/src/lib/Channel.svelte | 4 +- hi-ui/src/lib/ChannelList.svelte | 4 +- hi-ui/src/lib/CreateChannelForm.svelte | 2 +- hi-ui/src/lib/MessageInput.svelte | 4 +- hi-ui/src/store.js | 8 ++-- hi-ui/src/store/channels.js | 71 ++++++++++++++++++++++++++++++++++ hi-ui/src/store/messages.js | 35 +++++++++++++++++ 9 files changed, 127 insertions(+), 50 deletions(-) create mode 100644 hi-ui/src/store/channels.js create mode 100644 hi-ui/src/store/messages.js (limited to 'hi-ui/src') diff --git a/hi-ui/src/apiServer.js b/hi-ui/src/apiServer.js index 5e521de..6273576 100644 --- a/hi-ui/src/apiServer.js +++ b/hi-ui/src/apiServer.js @@ -1,5 +1,5 @@ import axios from 'axios'; -import { activeChannel, channelsList, events } from './store'; +import { activeChannel, channelsList, messages } from './store'; export const apiServer = axios.create({ baseURL: '/api/', @@ -39,7 +39,6 @@ export async function deleteMessage(messageId) { export function subscribeToEvents() { const evtSource = new EventSource("/api/events"); - events.update(() => []); // TODO: this should process all incoming events and store them. // TODO: eventually we'll need to handle expiring old info, so as not to use // infinite browser memory. @@ -61,39 +60,15 @@ export function subscribeToEvents() { case 'created': break; case 'message': - events.update((value) => { - const eventList = [...value, data]; - eventList.sort((a, b) => a.at - b.at); - return eventList; - }); + messages.update((value) => value.addMessage(data)); break; case 'message_deleted': - events.update((value) => { - const eventList = value.map((el) => { - if (el.message?.id === data.message) { - el.message.body = '«…»'; - return el - } else { - return el; - } - }); - return eventList; - }); + messages.update((value) => value.deleteMessage(data.channel.id, data.message)); break; case 'deleted': - activeChannel.update((value) => { - if (value?.id === data.channel) { - return null; - } - return value; - }); - channelsList.update((value) => { - const channelIndex = value.map((e) => e.id).indexOf(data.channel); - if (channelIndex !== -1) { - value.splice(channelIndex, 1); - } - return value; - }); + activeChannel.update((value) => value.deleteChannel(data.channel)); + channelsList.update((value) => value.deleteChannel(data.channel)); + messages.update((value) => value.deleteChannel(data.channel)); break; default: break; diff --git a/hi-ui/src/lib/ActiveChannel.svelte b/hi-ui/src/lib/ActiveChannel.svelte index 84f9119..d2d92fb 100644 --- a/hi-ui/src/lib/ActiveChannel.svelte +++ b/hi-ui/src/lib/ActiveChannel.svelte @@ -1,15 +1,9 @@
- {#each messages as message} + {#each messageList as message}
diff --git a/hi-ui/src/lib/Channel.svelte b/hi-ui/src/lib/Channel.svelte index 7826c46..ad07594 100644 --- a/hi-ui/src/lib/Channel.svelte +++ b/hi-ui/src/lib/Channel.svelte @@ -6,11 +6,11 @@ let active = false; activeChannel.subscribe((value) => { - active = value ? value.id == id : false; + active = value.is(id); }); function activate() { - activeChannel.update(() => ({ id, name })); + activeChannel.update((value) => value.set(id)); } diff --git a/hi-ui/src/lib/ChannelList.svelte b/hi-ui/src/lib/ChannelList.svelte index 9f88e24..5577d94 100644 --- a/hi-ui/src/lib/ChannelList.svelte +++ b/hi-ui/src/lib/ChannelList.svelte @@ -9,12 +9,12 @@ let loading = true; channelsList.subscribe((value) => { - channels = value; + channels = value.channels; }); onMount(async () => { let channels = await listChannels(); - channelsList.update(() => channels.data); + channelsList.update((value) => value.setChannels(channels.data)); loading = false; }); diff --git a/hi-ui/src/lib/CreateChannelForm.svelte b/hi-ui/src/lib/CreateChannelForm.svelte index 70dc13d..aa415fd 100644 --- a/hi-ui/src/lib/CreateChannelForm.svelte +++ b/hi-ui/src/lib/CreateChannelForm.svelte @@ -10,7 +10,7 @@ disabled = true; const response = await createChannel(name); if (200 <= response.status && response.status < 300) { - channelsList.update((value) => [...value, response.data]); + channelsList.update((value) => value.addChannel(response.data)); name = ''; } disabled = false; diff --git a/hi-ui/src/lib/MessageInput.svelte b/hi-ui/src/lib/MessageInput.svelte index 9a8475c..b899221 100644 --- a/hi-ui/src/lib/MessageInput.svelte +++ b/hi-ui/src/lib/MessageInput.svelte @@ -8,12 +8,12 @@ let self; let input; - $: disabled = $activeChannel == null; + $: disabled = !$activeChannel.isSet(); async function handleSubmit(event) { disabled = true; // TODO try/catch: - await postToChannel($activeChannel?.id, input); + await postToChannel($activeChannel.get(), input); input = ''; disabled = false; await tick(); diff --git a/hi-ui/src/store.js b/hi-ui/src/store.js index a9d9421..4e6b4f1 100644 --- a/hi-ui/src/store.js +++ b/hi-ui/src/store.js @@ -1,6 +1,8 @@ import { writable } from 'svelte/store'; +import { ActiveChannel, Channels } from './store/channels'; +import { Messages } from './store/messages'; export const currentUser = writable(null); -export const activeChannel = writable(null); -export const channelsList = writable([]); -export const events = writable([]); +export const activeChannel = writable(new ActiveChannel()); +export const channelsList = writable(new Channels()); +export const messages = writable(new Messages()); diff --git a/hi-ui/src/store/channels.js b/hi-ui/src/store/channels.js new file mode 100644 index 0000000..20702cc --- /dev/null +++ b/hi-ui/src/store/channels.js @@ -0,0 +1,71 @@ +export class Channels { + constructor() { + this.channels = []; + } + + setChannels(channels) { + this.channels = [...channels]; + this.sort(); + return this; + } + + addChannel(channel) { + this.channels = [...this.channels, channel]; + this.sort(); + return this; + } + + deleteChannel(id) { + const channelIndex = this.channels.map((e) => e.id).indexOf(id); + if (channelIndex !== -1) { + this.channels.splice(channelIndex, 1); + } + return this; + } + + sort() { + this.channels.sort((a, b) => { + if (a.name < b.name) { + return -1; + } else if (a.name > b.name) { + return 1; + } + return 0; + }); + } +} + +export class ActiveChannel { + constructor() { + this.channel = null; + } + + isSet() { + return this.channel !== null; + } + + get() { + return this.channel; + } + + is(id) { + return this.channel === id; + } + + set(id) { + this.channel = id; + return this; + } + + deleteChannel(id) { + if (this.is(id)) { + return this.clear(); + } + return this; + } + + clear() { + this.channel = null; + return this; + } +} diff --git a/hi-ui/src/store/messages.js b/hi-ui/src/store/messages.js new file mode 100644 index 0000000..d1f19d3 --- /dev/null +++ b/hi-ui/src/store/messages.js @@ -0,0 +1,35 @@ +export class Messages { + constructor() { + this.channels = {}; + } + + inChannel(channel) { + return this.channels[channel] || []; + } + + addMessage(message) { + let { + channel, + ...payload + } = message; + let channel_id = channel.id; + this.updateChannel(channel_id, (messages) => [...messages, payload]); + return this; + } + + deleteMessage(channel, message) { + let messages = this.messages(channel).filter((msg) => msg.message.id != message); + this.channels[channel] = messages; + } + + deleteChannel(id) { + delete this.channels[id]; + return this; + } + + updateChannel(channel, callback) { + let messages = callback(this.inChannel(channel)); + messages.sort((a, b) => a.at - b.at); + this.channels[channel] = messages; + } +} -- cgit v1.2.3