frontend: separate app component from chat view

This commit is contained in:
hippoz 2022-02-03 00:15:27 +02:00
parent ea18f74503
commit 9ad3b04da5
Signed by: hippoz
GPG key ID: 7C52899193467641
4 changed files with 56 additions and 45 deletions

View file

@ -1,8 +1,6 @@
<script> <script>
import { apiClient } from "../api/common"; import { apiClient } from "../api/common";
import MessageEntry from "./MessageEntry.svelte"; import ChatView from "./ChatView.svelte";
import MessageList from "./MessageList.svelte";
import SelectedGuildInfoDisplay from "./SelectedGuildInfoDisplay.svelte";
let messageStore = {}; let messageStore = {};
let selectedGuild = null; let selectedGuild = null;
@ -47,7 +45,6 @@
poll(); poll();
}); });
$: selectedChannelMessages = selectedGuild ? ((messageStore[selectedGuild.id] || [])[selectedChannel.id] || []) : [];
function onTextEntryMessage(event) { function onTextEntryMessage(event) {
if (!selectedGuild || !selectedChannel) { if (!selectedGuild || !selectedChannel) {
@ -87,34 +84,9 @@
} }
</script> </script>
<style> <ChatView
.message-list-container { messageStore={messageStore}
height: 580px; selectedChannel={selectedChannel}
overflow-y: auto; selectedGuild={selectedGuild}
padding: 8px; on:entermessage={onTextEntryMessage}
padding-left: 0; />
margin-top: 4px;
}
main {
box-sizing: border-box;
width: 820px;
margin: 0 auto;
}
@media (max-width: 820px) {
main {
width: 100%;
}
}
</style>
<main>
<div class="card full-card">
<SelectedGuildInfoDisplay guild={selectedGuild} channel={selectedChannel} />
<div class="message-list-container">
<MessageList messages={selectedChannelMessages} />
</div>
</div>
<MessageEntry on:sendmessage={onTextEntryMessage} />
</main>

View file

@ -0,0 +1,46 @@
<script>
import MessageEntry from "./MessageEntry.svelte";
import MessageList from "./MessageList.svelte";
export let messageStore = {};
export let selectedChannel;
export let selectedGuild;
$: selectedChannelMessages = selectedGuild ? ((messageStore[selectedGuild.id] || [])[selectedChannel.id] || []) : [];
</script>
<style>
.message-list-container {
height: 580px;
overflow-y: auto;
padding: 8px;
padding-left: 0;
margin-top: 4px;
}
.main-panel-header {
font-size: 1.1em;
}
main {
box-sizing: border-box;
width: 820px;
margin: 0 auto;
}
@media (max-width: 820px) {
main {
width: 100%;
}
}
</style>
<main>
<div class="card full-card">
<span class="main-panel-header">{(selectedGuild ? selectedGuild.name : "[no guild]")}{(selectedChannel ? selectedChannel.name : "[no channel]")}</span>
<div class="message-list-container">
<MessageList messages={selectedChannelMessages} />
</div>
</div>
<MessageEntry on:entermessage placeholder="Go on, type something interesting!" />
</main>

View file

@ -1,6 +1,7 @@
<script> <script>
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
export let placeholder;
let text = ""; let text = "";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -8,11 +9,11 @@
function onKeydown(e) { function onKeydown(e) {
if (e.code === "Enter") { if (e.code === "Enter") {
if (text.trim() !== "") { if (text.trim() !== "") {
dispatch("sendmessage", text); dispatch("entermessage", text);
text = ""; text = "";
} }
} }
} }
</script> </script>
<input class="separated-card card full-card" placeholder="Go on, type something interesting!" on:keydown={onKeydown} bind:value={text} /> <input class="separated-card card full-card" placeholder={placeholder} on:keydown={onKeydown} bind:value={text} />

View file

@ -1,8 +0,0 @@
<script>
export let guild;
export let channel;
</script>
{#if guild && channel}
<span>{guild.name}{channel.name}</span>
{/if}