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">
|
||||
import Comment from '$lib/components/Comment.svelte';
|
||||
|
||||
export let id: number;
|
||||
export let title: string;
|
||||
export let version: number;
|
||||
export let producerUsername: string;
|
||||
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>
|
||||
|
||||
<article>
|
||||
|
@ -40,17 +29,7 @@
|
|||
{/if}
|
||||
|
||||
{#each comments as comment}
|
||||
<div>
|
||||
<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>
|
||||
<Comment content={comment.content} author={comment.author} createdAt={comment.createdAt} />
|
||||
<hr />
|
||||
{/each}
|
||||
|
||||
|
@ -64,13 +43,4 @@
|
|||
.track-title {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.comment-headline {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.comment-timestamp {
|
||||
color: gray;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue