add store "pipe" method to modify data

frontend/src/components/Message.svelte

@@ -13,7 +13,7 @@
 
         replyString += `@${message.author_username}: `;
 
-        setMessageInputEvent.update(replyString);
+        setMessageInputEvent.emit(replyString);
     };
 </script>
 

frontend/src/components/MessageInput.svelte

@@ -2,7 +2,7 @@
     import { onDestroy, onMount } from "svelte";
     import request from "../request";
     import { apiRoute, getItem } from "../storage";
-    import { messagesStoreProvider, overlayStore, selectedChannel, setMessageInputEvent, smallViewport, typingStore, userInfoStore } from "../stores";
+    import { messagesStoreProvider, overlayStore, selectedChannel, sendMessageAction, setMessageInputEvent, smallViewport, typingStore, userInfoStore } from "../stores";
 
     export let channel;
     let messageInput = "";
@@ -41,37 +41,11 @@
 
     const sendMessage = async () => {
         messageTextarea.focus();
-
+        sendMessageAction.emit({
-        if (messageInput.trim() === "" || !$userInfoStore)
+            channelId: channel.id,
-            return;
+            content: messageInput
-
+        });
-        // optimistically add message to store
-        const optimisticMessageId = Math.floor(Math.random() * 999999);
-        const optimisticMessage = {
-            id: optimisticMessageId,
-            content: messageInput,
-            channel_id: channel.id,
-            author_id: $userInfoStore.id,
-            author_username: $userInfoStore.username,
-            created_at: Date.now().toString(),
-            _isPending: true
-        };
-        messages.addMessage(optimisticMessage);
         messageInput = "";
-
-        const res = await request("POST", apiRoute(`channels/${channel.id}/messages`), true, {
-            content: optimisticMessage.content,
-            optimistic_id: optimisticMessageId
-        });
-        
-        if (res.success && res.ok) {
-            messages.setMessage(optimisticMessageId, res.json);
-        } else {
-            messages.deleteMessage({
-                id: optimisticMessageId
-            });
-            overlayStore.toast("Couldn't send message");
-        }
     };
 
     const onKeydown = async (e) => {
@@ -100,10 +74,10 @@
         }
     };
     onMount(focusTextarea);
-    unsubscribers.push(selectedChannel.watch(focusTextarea));
+    unsubscribers.push(selectedChannel.on(focusTextarea));
 
     // Handle the setMessageInput event
-    unsubscribers.push(setMessageInputEvent.watch((value) => {
+    unsubscribers.push(setMessageInputEvent.on((value) => {
         messageInput = value;
         if (messageTextarea) {
             messageTextarea.focus();

frontend/src/stores.js

@@ -10,6 +10,7 @@ let storeCallbackQueue = [];
 class Store {
     constructor(value=null, name="[no name]") {
         this._handlers = new Set();
+        this._pipes = new Set();
         this.value = value;
         this.name = name;
         this._isInBatch = false;
@@ -20,7 +21,7 @@ class Store {
     }
 
     // like subscribe, but without initially calling the handler
-    watch(handler) {
+    on(handler) {
         storeLog(`[Watch] (${this.name})`, "handler:", handler);
 
         this._handlers.add(handler);
@@ -42,6 +43,16 @@ class Store {
         };
     }
 
+    pipe(handler) {
+        storeLog(`[Pipe] (${this.name})`, "handler:", handler);
+
+        this._pipes.add(handler);
+        return () => {
+            storeLog(`[Remove Pipe] (${this.name})`);
+            this._pipes.delete(handler);
+        };
+    }
+
     set(value) {
         if (value === this.value)
             return;
@@ -51,7 +62,7 @@ class Store {
     }
 
     // like set(), but without checking if the value is the same
-    update(value) {
+    emit(value) {
         this.value = value;
         this.updated();
     }
@@ -87,6 +98,8 @@ class Store {
             return;
         }
 
+        this.value = this._applyPipes(this.value);
+
         storeLog(`[Update] (${this.name}) Will queue ${this._handlers.size} handlers`, "value:", this.value, "handlers:", this._handlers);
 
         const isRootNode = storeCallbackQueue.length === 0;
@@ -98,12 +111,25 @@ class Store {
             this.flushCallbackQueue();
         }
     }
+
+    _applyPipes(value) {
+        this._pipes.forEach(p => {
+            value = p(value);
+        });
+        return value;
+    }
+}
+
+function createAction(name, handler) {
+    const store = new Store(null, name);
+    store.on(handler);
+    return store;
 }
 
 class StorageItemStore extends Store {
     constructor(key) {
         super(getItem(key), `StorageItemStore[key=${key}]`);
-        this.watch(e => setItem(key, e));
+        this.on(e => setItem(key, e));
     }
 }
 
@@ -637,7 +663,40 @@ export const typingStore = new TypingStore();
 export const presenceStore = new PresenceStore();
 export const unreadStore = new UnreadStore();
 export const pluginStore = new PluginStore();
+
 export const setMessageInputEvent = new Store(null, "event:setMessageInput");
+export const sendMessageAction = createAction("sendMessageAction", async ({channelId, content}) => {
+    if (content.trim() === "" || !userInfoStore.value)
+        return;
+
+    // optimistically add message to store
+    const optimisticMessageId = Math.floor(Math.random() * 999999);
+    const optimisticMessage = {
+        id: optimisticMessageId,
+        content: content,
+        channel_id: channelId,
+        author_id: userInfoStore.value.id,
+        author_username: userInfoStore.value.username,
+        created_at: Date.now().toString(),
+        _isPending: true
+    };
+    const messagesStoreForChannel = messagesStoreProvider.getStore(channelId);
+    messagesStoreForChannel.addMessage(optimisticMessage);
+
+    const res = await request("POST", apiRoute(`channels/${channelId}/messages`), true, {
+        content: optimisticMessage.content,
+        optimistic_id: optimisticMessageId
+    });
+
+    if (res.success && res.ok) {
+        messagesStoreForChannel.setMessage(optimisticMessageId, res.json);
+    } else {
+        messagesStoreForChannel.deleteMessage({
+            id: optimisticMessageId
+        });
+        overlayStore.toast("Couldn't send message");
+    }
+});
 
 export const allStores = {
     selectedChannel,
@@ -655,10 +714,12 @@ export const allStores = {
     typingStore,
     presenceStore,
     unreadStore,
+    pluginStore,
     setMessageInputEvent,
+    sendMessageAction,
 };
 
-selectedChannel.watch((newSelectedChannel) => {
+selectedChannel.on((newSelectedChannel) => {
     if (getItem("ui:stateful:presistSelectedChannel")) {
         setItem("state:openChannelId", newSelectedChannel.id);
     }