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 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 }[];
|
||||||
|
|
||||||
|
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>
|
||||||
|
@ -13,8 +26,38 @@
|
||||||
This is a track card.
|
This is a track card.
|
||||||
|
|
||||||
<footer>
|
<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">
|
<label for="comment">
|
||||||
<input type="text" name="comment" placeholder="Leave some feedback" />
|
<input type="text" name="comment" placeholder="Leave some feedback" />
|
||||||
</label>
|
</label>
|
||||||
</footer>
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.comment-headline {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-timestamp {
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
@ -6,6 +6,11 @@ export interface Database {
|
||||||
title: string;
|
title: string;
|
||||||
version: number;
|
version: number;
|
||||||
producer: string;
|
producer: string;
|
||||||
|
comments: {
|
||||||
|
author: string;
|
||||||
|
content: string;
|
||||||
|
createdAt: Date;
|
||||||
|
};
|
||||||
}[]
|
}[]
|
||||||
>;
|
>;
|
||||||
|
|
||||||
|
|
|
@ -17,6 +17,21 @@ export class DatabasePrisma implements Database {
|
||||||
username: true
|
username: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
versions: {
|
||||||
|
select: {
|
||||||
|
comments: {
|
||||||
|
select: {
|
||||||
|
content: true,
|
||||||
|
createdAt: true,
|
||||||
|
author: {
|
||||||
|
select: {
|
||||||
|
username: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
_count: {
|
_count: {
|
||||||
select: {
|
select: {
|
||||||
versions: true
|
versions: true
|
||||||
|
@ -32,7 +47,16 @@ export class DatabasePrisma implements Database {
|
||||||
return {
|
return {
|
||||||
title: track.title,
|
title: track.title,
|
||||||
version: track._count.versions,
|
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}
|
title={track.title}
|
||||||
version={track.version}
|
version={track.version}
|
||||||
producerUsername={track.producer}
|
producerUsername={track.producer}
|
||||||
|
comments={track.comments}
|
||||||
/>
|
/>
|
||||||
{/each}
|
{/each}
|
||||||
{:else}
|
{:else}
|
||||||
|
|
Loading…
Reference in a new issue