💄 Optimized post controls
This commit is contained in:
parent
b0c9368530
commit
c1b444fbeb
@ -5,19 +5,19 @@ import * as marked from "marked";
|
||||
import DOMPurify from "dompurify";
|
||||
|
||||
export default function PostItem(props: {
|
||||
post: any,
|
||||
noClick?: boolean,
|
||||
noAuthor?: boolean,
|
||||
noControl?: boolean,
|
||||
noRelated?: boolean,
|
||||
noContent?: boolean,
|
||||
onRepost?: (post: any) => void,
|
||||
onReply?: (post: any) => void,
|
||||
onEdit?: (post: any) => void,
|
||||
onDelete?: (post: any) => void,
|
||||
onSearch?: (filter: any) => void,
|
||||
onError: (message: string | null) => void,
|
||||
onReact: () => void
|
||||
post: any;
|
||||
noClick?: boolean;
|
||||
noAuthor?: boolean;
|
||||
noControl?: boolean;
|
||||
noRelated?: boolean;
|
||||
noContent?: boolean;
|
||||
onRepost?: (post: any) => void;
|
||||
onReply?: (post: any) => void;
|
||||
onEdit?: (post: any) => void;
|
||||
onDelete?: (post: any) => void;
|
||||
onSearch?: (filter: any) => void;
|
||||
onError: (message: string | null) => void;
|
||||
onReact: () => void;
|
||||
}) {
|
||||
const [reacting, setReacting] = createSignal(false);
|
||||
|
||||
@ -27,7 +27,7 @@ export default function PostItem(props: {
|
||||
setReacting(true);
|
||||
const res = await fetch(`/api/posts/${item.id}/react/${type}`, {
|
||||
method: "POST",
|
||||
headers: { "Authorization": `Bearer ${getAtk()}` }
|
||||
headers: { Authorization: `Bearer ${getAtk()}` },
|
||||
});
|
||||
if (res.status !== 201 && res.status !== 204) {
|
||||
props.onError(await res.text());
|
||||
@ -38,9 +38,7 @@ export default function PostItem(props: {
|
||||
setReacting(false);
|
||||
}
|
||||
|
||||
const content = (
|
||||
<article class="prose" innerHTML={DOMPurify.sanitize(marked.parse(props.post.content) as string)} />
|
||||
);
|
||||
const content = <article class="prose" innerHTML={DOMPurify.sanitize(marked.parse(props.post.content) as string)} />;
|
||||
|
||||
return (
|
||||
<div class="post-item">
|
||||
@ -49,8 +47,10 @@ export default function PostItem(props: {
|
||||
<div class="flex bg-base-200">
|
||||
<div class="avatar pl-[20px]">
|
||||
<div class="w-12">
|
||||
<Show when={props.post.author.avatar}
|
||||
fallback={<span class="text-3xl">{props.post.author.name.substring(0, 1)}</span>}>
|
||||
<Show
|
||||
when={props.post.author.avatar}
|
||||
fallback={<span class="text-3xl">{props.post.author.name.substring(0, 1)}</span>}
|
||||
>
|
||||
<img alt="avatar" src={props.post.author.avatar} />
|
||||
</Show>
|
||||
</div>
|
||||
@ -69,27 +69,25 @@ export default function PostItem(props: {
|
||||
<div class="px-7 py-5">
|
||||
<h2 class="card-title">{props.post.title}</h2>
|
||||
<Show when={!props.noClick} fallback={content}>
|
||||
<a href={`/posts/${props.post.alias}`}>
|
||||
{content}
|
||||
</a>
|
||||
<a href={`/posts/${props.post.alias}`}>{content}</a>
|
||||
</Show>
|
||||
|
||||
<div class="mt-2 flex gap-2">
|
||||
<For each={props.post.categories}>
|
||||
{item =>
|
||||
{(item) => (
|
||||
<a href={`/search?category=${item.alias}`} class="badge badge-primary">
|
||||
<i class="fa-solid fa-layer-group me-1.5"></i>
|
||||
{item.name}
|
||||
</a>
|
||||
}
|
||||
)}
|
||||
</For>
|
||||
<For each={props.post.tags}>
|
||||
{item =>
|
||||
{(item) => (
|
||||
<a href={`/search?tag=${item.alias}`} class="badge badge-accent">
|
||||
<i class="fa-regular fa-tag me-1.5"></i>
|
||||
{item.name}
|
||||
</a>
|
||||
}
|
||||
)}
|
||||
</For>
|
||||
</div>
|
||||
|
||||
@ -105,12 +103,7 @@ export default function PostItem(props: {
|
||||
Reposted a post
|
||||
</p>
|
||||
<div class="border border-base-200 mb-5">
|
||||
<PostItem
|
||||
noControl
|
||||
post={props.post.repost_to}
|
||||
onError={props.onError}
|
||||
onReact={props.onReact}
|
||||
/>
|
||||
<PostItem noControl post={props.post.repost_to} onError={props.onError} onReact={props.onReact} />
|
||||
</div>
|
||||
</Show>
|
||||
<Show when={!props.noRelated && props.post.reply_to}>
|
||||
@ -119,12 +112,7 @@ export default function PostItem(props: {
|
||||
Replied a post
|
||||
</p>
|
||||
<div class="border border-base-200 mb-5">
|
||||
<PostItem
|
||||
noControl
|
||||
post={props.post.reply_to}
|
||||
onError={props.onError}
|
||||
onReact={props.onReact}
|
||||
/>
|
||||
<PostItem noControl post={props.post.reply_to} onError={props.onError} onReact={props.onReact} />
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
@ -133,58 +121,85 @@ export default function PostItem(props: {
|
||||
<Show when={!props.noControl}>
|
||||
<div class="relative">
|
||||
<Show when={!userinfo?.isLoggedIn}>
|
||||
<div
|
||||
class="px-7 py-2.5 h-12 w-full opacity-0 transition-opacity hover:opacity-100 bg-base-100 border-t border-base-200 z-[1] absolute top-0 left-0">
|
||||
<div class="px-7 py-2.5 h-12 w-full opacity-0 transition-opacity hover:opacity-100 bg-base-100 border-t border-base-200 z-[1] absolute top-0 left-0">
|
||||
<b>Login!</b> To access entire platform.
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<div class="grid grid-cols-3 border-y border-base-200">
|
||||
<div class="grid grid-cols-2">
|
||||
<div class="max-md:col-span-2 md:col-span-1 grid grid-cols-2">
|
||||
<div class="tooltip" data-tip="Daisuki">
|
||||
<button type="button" class="btn btn-ghost btn-block" disabled={reacting()}
|
||||
onClick={() => reactPost(props.post, "like")}>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-block"
|
||||
disabled={reacting()}
|
||||
onClick={() => reactPost(props.post, "like")}
|
||||
>
|
||||
<i class="fa-solid fa-thumbs-up"></i>
|
||||
<code class="font-mono">{props.post.like_count}</code>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="tooltip" data-tip="Daikirai">
|
||||
<button type="button" class="btn btn-ghost btn-block" disabled={reacting()}
|
||||
onClick={() => reactPost(props.post, "dislike")}>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-block"
|
||||
disabled={reacting()}
|
||||
onClick={() => reactPost(props.post, "dislike")}
|
||||
>
|
||||
<i class="fa-solid fa-thumbs-down"></i>
|
||||
<code class="font-mono">{props.post.dislike_count}</code>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-2 flex justify-end">
|
||||
<div class="tooltip" data-tip="Reply">
|
||||
<button type="button" class="btn btn-ghost btn-block"
|
||||
onClick={() => props.onReply && props.onReply(props.post)}>
|
||||
<i class="fa-solid fa-reply"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="max-md:col-span-1 md:col-span-2 flex justify-end">
|
||||
<section class="max-md:hidden">
|
||||
<div class="tooltip" data-tip="Reply">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-block"
|
||||
onClick={() => props.onReply && props.onReply(props.post)}
|
||||
>
|
||||
<i class="fa-solid fa-reply"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="tooltip" data-tip="Repost">
|
||||
<button type="button" class="btn btn-ghost btn-block"
|
||||
onClick={() => props.onRepost && props.onRepost(props.post)}>
|
||||
<i class="fa-solid fa-retweet"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="tooltip" data-tip="Repost">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-ghost btn-block"
|
||||
onClick={() => props.onRepost && props.onRepost(props.post)}
|
||||
>
|
||||
<i class="fa-solid fa-retweet"></i>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="dropdown dropdown-end">
|
||||
<div tabIndex="0" role="button" class="btn btn-ghost w-12">
|
||||
<i class="fa-solid fa-ellipsis-vertical"></i>
|
||||
</div>
|
||||
<ul tabIndex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
|
||||
<li class="md:hidden">
|
||||
<a onClick={() => props.onReply && props.onReply(props.post)}>Reply</a>
|
||||
</li>
|
||||
<li class="md:hidden">
|
||||
<a onClick={() => props.onRepost && props.onRepost(props.post)}>Repost</a>
|
||||
</li>
|
||||
<Show when={userinfo?.profiles?.id === props.post.author_id}>
|
||||
<li><a onClick={() => props.onDelete && props.onDelete(props.post)}>Delete</a></li>
|
||||
<li>
|
||||
<a onClick={() => props.onDelete && props.onDelete(props.post)}>Delete</a>
|
||||
</li>
|
||||
</Show>
|
||||
<Show when={userinfo?.profiles?.id === props.post.author_id}>
|
||||
<li><a onClick={() => props.onEdit && props.onEdit(props.post)}>Edit</a></li>
|
||||
<li>
|
||||
<a onClick={() => props.onEdit && props.onEdit(props.post)}>Edit</a>
|
||||
</li>
|
||||
</Show>
|
||||
<li><a>Report</a></li>
|
||||
<li>
|
||||
<a>Report</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user