97 lines
2.6 KiB
Svelte
97 lines
2.6 KiB
Svelte
<script>
|
|
import { SendIcon } from "svelte-feather-icons";
|
|
import request from "../request";
|
|
import { apiRoute } from "../storage";
|
|
import { messagesStoreProvider, overlayStore, smallViewport, userInfoStore } from "../stores";
|
|
|
|
export let channel;
|
|
let messageInput = "";
|
|
|
|
$: messages = messagesStoreProvider.getStore(channel.id);
|
|
|
|
const sendMessage = async () => {
|
|
if (messageInput.trim() === "" || !$userInfoStore)
|
|
return;
|
|
|
|
// 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
|
|
});
|
|
|
|
if (res.success && res.ok) {
|
|
messages.setMessage(optimisticMessageId, res.json);
|
|
} else {
|
|
messages.deleteMessage({
|
|
id: optimisticMessageId
|
|
});
|
|
overlayStore.open("toast", {
|
|
message: "Couldn't send message"
|
|
});
|
|
}
|
|
};
|
|
|
|
const onKeydown = async (e) => {
|
|
if (e.code !== "Enter")
|
|
return;
|
|
|
|
await sendMessage();
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.message-input-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: var(--space-norm);
|
|
}
|
|
|
|
.message-input {
|
|
height: 3em;
|
|
width: 100%;
|
|
background-color : var(--background-color-2);
|
|
border: none;
|
|
color: currentColor;
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-sm);
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|
|
|
|
.message-input::placeholder {
|
|
color: var(--foreground-color-3);
|
|
}
|
|
|
|
.send-button {
|
|
margin-left: var(--space-sm);
|
|
}
|
|
</style>
|
|
|
|
<div class="message-input-container">
|
|
<input
|
|
placeholder={`Send something interesting to #${channel.name}`}
|
|
type="text"
|
|
class="message-input"
|
|
on:keydown={ onKeydown }
|
|
bind:value={ messageInput }
|
|
>
|
|
{#if $smallViewport}
|
|
<button class="icon-button send-button" on:click="{ sendMessage }">
|
|
<SendIcon />
|
|
</button>
|
|
{/if}
|
|
</div>
|