Reply & Repost

This commit is contained in:
2024-02-04 00:24:04 +08:00
parent df60a112ae
commit 47ce718085
7 changed files with 208 additions and 78 deletions

View File

@ -1,7 +1,16 @@
import { createSignal, Show } from "solid-js";
import { getAtk, useUserinfo } from "../stores/userinfo.tsx";
export default function PostItem(props: { post: any, onError: (message: string | null) => void, onReact: () => void }) {
export default function PostItem(props: {
post: any,
noAuthor?: boolean,
noControl?: boolean,
onRepost?: (post: any) => void,
onReply?: (post: any) => void,
onEdit?: (post: any) => void,
onError: (message: string | null) => void,
onReact: () => void
}) {
const [reacting, setReacting] = createSignal(false);
const userinfo = useUserinfo();
@ -23,79 +32,111 @@ export default function PostItem(props: { post: any, onError: (message: string |
return (
<div class="post-item">
<a href={`/accounts/${props.post.author.id}`}>
<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>}>
<img alt="avatar" src={props.post.author.avatar} />
</Show>
<Show when={!props.noAuthor}>
<a href={`/accounts/${props.post.author.id}`}>
<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>}>
<img alt="avatar" src={props.post.author.avatar} />
</Show>
</div>
</div>
<div class="flex items-center px-5">
<div>
<h3 class="font-bold text-sm">{props.post.author.name}</h3>
<p class="text-xs">{props.post.author.description}</p>
</div>
</div>
</div>
<div class="flex items-center px-5">
<div>
<h3 class="font-bold text-sm">{props.post.author.name}</h3>
<p class="text-xs">{props.post.author.description}</p>
</div>
</div>
</div>
</a>
</a>
</Show>
<article class="py-5 px-7">
<div class="py-5 px-7">
<h2 class="card-title">{props.post.title}</h2>
<article class="prose">{props.post.content}</article>
</article>
<div class="grid grid-cols-3 border-y border-base-200">
<div class="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")}>
<i class="fa-solid fa-thumbs-up"></i>
<code class="font-mono">{props.post.like_count}</code>
</button>
<Show when={props.post.repost_to}>
<p class="text-xs mt-3 mb-2">
<i class="fa-solid fa-retweet me-2"></i>
Reposted a post
</p>
<div class="border border-base-200">
<PostItem
noControl
post={props.post.repost_to}
onError={props.onError}
onReact={props.onReact}
/>
</div>
<div class="tooltip" data-tip="Daikirai">
<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>
</Show>
<Show when={props.post.reply_to}>
<p class="text-xs mt-3 mb-2">
<i class="fa-solid fa-reply me-2"></i>
Replied a post
</p>
<div class="border border-base-200">
<PostItem
noControl
post={props.post.reply_to}
onError={props.onError}
onReact={props.onReact}
/>
</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">
<i class="fa-solid fa-reply"></i>
</button>
</div>
<div class="tooltip" data-tip="Repost">
<button type="button" class="btn btn-ghost btn-block">
<i class="fa-solid fa-retweet"></i>
</button>
</div>
<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">
<Show when={userinfo?.profiles?.id === props.post.author_id}>
<li><a>Edit</a></li>
</Show>
<li><a>Report</a></li>
</ul>
</div>
</div>
</Show>
</div>
<Show when={!props.noControl}>
<div class="grid grid-cols-3 border-y border-base-200">
<div class="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")}>
<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")}>
<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="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="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">
<Show when={userinfo?.profiles?.id === props.post.author_id}>
<li><a onClick={() => props.onEdit && props.onEdit(props.post)}>Edit</a></li>
</Show>
<li><a>Report</a></li>
</ul>
</div>
</div>
</div>
</Show>
</div>
);
}

View File

@ -5,13 +5,16 @@ import PostItem from "./PostItem.tsx";
export default function PostList(props: {
info: { data: any[], count: number } | null,
onRepost?: (post: any) => void,
onReply?: (post: any) => void,
onEdit?: (post: any) => void,
onUpdate: (pn: number) => Promise<void>,
onError: (message: string | null) => void
}) {
const [loading, setLoading] = createSignal(true);
const posts = createMemo(() => props.info?.data)
const postCount = createMemo<number>(() => props.info?.count ?? 0)
const posts = createMemo(() => props.info?.data);
const postCount = createMemo<number>(() => props.info?.count ?? 0);
const [page, setPage] = createSignal(1);
const pageCount = createMemo(() => Math.ceil(postCount() / 10));
@ -35,7 +38,14 @@ export default function PostList(props: {
<div id="post-list">
<div id="posts">
<For each={posts()}>
{item => <PostItem post={item} onReact={() => readPosts()} onError={props.onError} />}
{item => <PostItem
post={item}
onRepost={props.onRepost}
onReply={props.onReply}
onEdit={props.onEdit}
onReact={() => readPosts()}
onError={props.onError}
/>}
</For>
<div class="flex justify-center">

View File

@ -6,6 +6,7 @@ import styles from "./PostPublish.module.css";
export default function PostPublish(props: {
replying?: any,
reposting?: any,
editing?: any,
onError: (message: string | null) => void,
onPost: () => void
}) {
@ -30,7 +31,9 @@ export default function PostPublish(props: {
body: JSON.stringify({
alias: data.alias ?? crypto.randomUUID().replace(/-/g, ""),
title: data.title,
content: data.content
content: data.content,
repost_to: props.reposting?.id,
reply_to: props.replying?.id,
})
});
if (res.status !== 200) {
@ -60,6 +63,26 @@ export default function PostPublish(props: {
</div>
</div>
<Show when={props.reposting}>
<div role="alert" class="px-5 py-3 bg-base-200">
<i class="fa-solid fa-circle-info me-3"></i>
You are reposting a post from <b>{props.reposting?.author?.name}</b>
</div>
</Show>
<Show when={props.replying}>
<div role="alert" class="px-5 py-3 bg-base-200">
<i class="fa-solid fa-circle-info me-3"></i>
You are replying a post from <b>{props.replying?.author?.name}</b>
</div>
</Show>
<Show when={props.editing}>
<div role="alert" class="px-5 py-3 bg-base-200">
<i class="fa-solid fa-circle-info me-3"></i>
You are editing a post published at{" "}
<b>{new Date(props.editing?.created_at).toLocaleString()}</b>
</div>
</Show>
<textarea name="content" class={`${styles.publishInput} textarea w-full`}
placeholder="What's happend?!" />

View File

@ -2,6 +2,7 @@ import { createSignal, Show } from "solid-js";
import PostList from "../components/PostList.tsx";
import PostPublish from "../components/PostPublish.tsx";
import { createStore } from "solid-js/store";
export default function DashboardPage() {
const [error, setError] = createSignal<string | null>(null);
@ -23,6 +24,12 @@ export default function DashboardPage() {
}
}
const [publishMeta, setPublishMeta] = createStore<any>({
replying: null,
reposting: null,
editing: null
});
return (
<>
<div id="alerts">
@ -38,9 +45,22 @@ export default function DashboardPage() {
</Show>
</div>
<PostPublish onPost={() => readPosts()} onError={setError} />
<PostPublish
replying={publishMeta.replying}
reposting={publishMeta.reposting}
editing={publishMeta.editing}
onPost={() => readPosts()}
onError={setError}
/>
<PostList info={info()} onUpdate={readPosts} onError={setError} />
<PostList
info={info()}
onUpdate={readPosts}
onError={setError}
onRepost={(item) => setPublishMeta({ reposting: item, replying: null, editing: null })}
onReply={(item) => setPublishMeta({ reposting: null, replying: item, editing: null })}
onEdit={(item) => setPublishMeta({ reposting: null, replying: null, editing: item })}
/>
</>
);
}