feat: Render comments on TrackCard
This commit is contained in:
parent
11b9280a51
commit
714078980c
4 changed files with 74 additions and 1 deletions
|
@ -2,6 +2,19 @@
|
|||
export let title: string;
|
||||
export let version: number;
|
||||
export let producerUsername: string;
|
||||
export let comments: { author: string; content: string; createdAt: Date }[];
|
||||
|
||||
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>
|
||||
|
@ -13,8 +26,38 @@
|
|||
This is a track card.
|
||||
|
||||
<footer>
|
||||
{#if comments.length === 0}
|
||||
<small><em>No comments yet.</em></small>
|
||||
{/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>
|
||||
<hr />
|
||||
{/each}
|
||||
|
||||
<label for="comment">
|
||||
<input type="text" name="comment" placeholder="Leave some feedback" />
|
||||
</label>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.comment-headline {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.comment-timestamp {
|
||||
color: gray;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -6,6 +6,11 @@ export interface Database {
|
|||
title: string;
|
||||
version: number;
|
||||
producer: string;
|
||||
comments: {
|
||||
author: string;
|
||||
content: string;
|
||||
createdAt: Date;
|
||||
};
|
||||
}[]
|
||||
>;
|
||||
|
||||
|
|
|
@ -17,6 +17,21 @@ export class DatabasePrisma implements Database {
|
|||
username: true
|
||||
}
|
||||
},
|
||||
versions: {
|
||||
select: {
|
||||
comments: {
|
||||
select: {
|
||||
content: true,
|
||||
createdAt: true,
|
||||
author: {
|
||||
select: {
|
||||
username: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
_count: {
|
||||
select: {
|
||||
versions: true
|
||||
|
@ -32,7 +47,16 @@ export class DatabasePrisma implements Database {
|
|||
return {
|
||||
title: track.title,
|
||||
version: track._count.versions,
|
||||
producer: track.producer.username
|
||||
producer: track.producer.username,
|
||||
comments: track.versions.flatMap((v) => {
|
||||
return v.comments.map((c) => {
|
||||
return {
|
||||
author: c.author.username,
|
||||
content: c.content,
|
||||
createdAt: c.createdAt
|
||||
};
|
||||
});
|
||||
})
|
||||
};
|
||||
});
|
||||
|
||||
|
|
|
@ -19,6 +19,7 @@
|
|||
title={track.title}
|
||||
version={track.version}
|
||||
producerUsername={track.producer}
|
||||
comments={track.comments}
|
||||
/>
|
||||
{/each}
|
||||
{:else}
|
||||
|
|
Loading…
Reference in a new issue