refactor: Move comment to separate component
This commit is contained in:
parent
e55386e301
commit
81f8ab6b77
2 changed files with 44 additions and 33 deletions
41
src/lib/components/Comment.svelte
Normal file
41
src/lib/components/Comment.svelte
Normal file
|
@ -0,0 +1,41 @@
|
||||||
|
<script lang="ts">
|
||||||
|
export let content: string;
|
||||||
|
export let author: string;
|
||||||
|
export let createdAt: Date;
|
||||||
|
|
||||||
|
// TODO: Relative formatting (ie. 6 days ago, 3 moonths ago)
|
||||||
|
const formatDateTime = (datetime: Date) => {
|
||||||
|
/*
|
||||||
|
If the date is today, then return LocaleTimeString
|
||||||
|
If the date is /not/ today, then return LocaleDateString
|
||||||
|
*/
|
||||||
|
if (new Date().toDateString() === datetime.toDateString()) {
|
||||||
|
return datetime.toLocaleTimeString();
|
||||||
|
}
|
||||||
|
|
||||||
|
return datetime.toLocaleDateString();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="comment-headline">
|
||||||
|
<small>{author}</small>
|
||||||
|
<small class="comment-timestamp">
|
||||||
|
<abbr title={createdAt.toLocaleString()}>
|
||||||
|
{formatDateTime(createdAt)}
|
||||||
|
</abbr>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
<p>{content}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.comment-headline {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-timestamp {
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,22 +1,11 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import Comment from '$lib/components/Comment.svelte';
|
||||||
|
|
||||||
export let id: number;
|
export let id: number;
|
||||||
export let title: string;
|
export let title: string;
|
||||||
export let version: number;
|
export let version: number;
|
||||||
export let producerUsername: string;
|
export let producerUsername: string;
|
||||||
export let comments: { author: string; content: string; createdAt: Date }[];
|
export let comments: { author: string; content: string; createdAt: Date }[];
|
||||||
|
|
||||||
// TODO: Relative formatting (ie. 6 days ago, 3 moonths ago)
|
|
||||||
const formatDateTime = (datetime: Date) => {
|
|
||||||
/*
|
|
||||||
If the date is today, then return LocaleTimeString
|
|
||||||
If the date is /not/ today, then return LocaleDateString
|
|
||||||
*/
|
|
||||||
if (new Date().toDateString() === datetime.toDateString()) {
|
|
||||||
return datetime.toLocaleTimeString();
|
|
||||||
}
|
|
||||||
|
|
||||||
return datetime.toLocaleDateString();
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<article>
|
<article>
|
||||||
|
@ -40,17 +29,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#each comments as comment}
|
{#each comments as comment}
|
||||||
<div>
|
<Comment content={comment.content} author={comment.author} createdAt={comment.createdAt} />
|
||||||
<div class="comment-headline">
|
|
||||||
<small>{comment.author}</small>
|
|
||||||
<small class="comment-timestamp">
|
|
||||||
<abbr title={comment.createdAt.toLocaleString()}>
|
|
||||||
{formatDateTime(comment.createdAt)}
|
|
||||||
</abbr>
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
<p>{comment.content}</p>
|
|
||||||
</div>
|
|
||||||
<hr />
|
<hr />
|
||||||
{/each}
|
{/each}
|
||||||
|
|
||||||
|
@ -64,13 +43,4 @@
|
||||||
.track-title {
|
.track-title {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-headline {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.comment-timestamp {
|
|
||||||
color: gray;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue