HyperNet/Interactive
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ Reacting

Browse Source
This commit is contained in:
LittleSheep
2024-02-03 00:50:23 +08:00
parent 89521c15af
commit 56a9c765b9
8 changed files with 229 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
pkg/view/src/pages/feed.tsx
View File

@ -1,5 +1,5 @@
import { getAtk, useUserinfo } from "../stores/userinfo.tsx";
import { createSignal, For, Show } from "solid-js";
import { createEffect, createSignal, For, Show } from "solid-js";
import styles from "./feed.module.css";
@ -9,6 +9,7 @@ export default function DashboardPage() {
const [error, setError] = createSignal<string | null>(null);
const [loading, setLoading] = createSignal(true);
const [submitting, setSubmitting] = createSignal(false);
const [reacting, setReacting] = createSignal(false);
const [posts, setPosts] = createSignal<any[]>([]);
const [postCount, setPostCount] = createSignal(0);
@ -32,6 +33,8 @@ export default function DashboardPage() {
setLoading(false);
}
createEffect(() => readPosts(), [page()]);
async function doPost(evt: SubmitEvent) {
evt.preventDefault();
@ -62,7 +65,20 @@ export default function DashboardPage() {
setSubmitting(false);
}
readPosts();
async function reactPost(item: any, type: string) {
setReacting(true);
const res = await fetch(`/api/posts/${item.id}/react/${type}`, {
method: "POST",
headers: { "Authorization": `Bearer ${getAtk()}` }
});
if (res.status !== 201 && res.status !== 204) {
setError(await res.text());
} else {
await readPosts();
setError(null);
}
setReacting(false);
}
return (
<div class={`${styles.wrapper} container mx-auto`}>
@ -118,57 +134,69 @@ export default function DashboardPage() {
</form>
<div id="posts">
<Show when={!loading()} fallback={<span class="loading loading-lg loading-infinity"></span>}>
<For each={posts()}>
{item => <div class="post-item">
<For each={posts()}>
{item => <div class="post-item">
<div class="flex bg-base-200">
<div class="avatar">
<div class="w-12">
<Show when={item.author.avatar}
fallback={<span class="text-3xl">{item.author.name.substring(0, 1)}</span>}>
<img alt="avatar" src={item.author.avatar} />
</Show>
</div>
</div>
<div class="flex items-center px-5">
<div>
<h3 class="font-bold text-sm">{item.author.name}</h3>
<p class="text-xs">{item.author.description}</p>
</div>
<div class="flex bg-base-200">
<div class="avatar">
<div class="w-12">
<Show when={item.author.avatar}
fallback={<span class="text-3xl">{item.author.name.substring(0, 1)}</span>}>
<img alt="avatar" src={item.author.avatar} />
</Show>
</div>
</div>
<article class="py-5 px-7">
<h2 class="card-title">{item.title}</h2>
<article class="prose">{item.content}</article>
</article>
<div class="grid grid-cols-4 border-y border-base-200">
<div class="tooltip" data-tip="Daisuki">
<button type="button" class="btn btn-ghost btn-block">
<i class="fa-solid fa-thumbs-up"></i>
<code class="font-mono">0</code>
</button>
<div class="flex items-center px-5">
<div>
<h3 class="font-bold text-sm">{item.author.name}</h3>
<p class="text-xs">{item.author.description}</p>
</div>
<div class="tooltip" data-tip="Daikirai">
<button type="button" class="btn btn-ghost btn-block">
<i class="fa-solid fa-thumbs-down"></i>
<code class="font-mono">0</code>
</button>
</div>
<button type="button" class="btn btn-ghost">
<i class="fa-solid fa-reply"></i>
<span>Reply</span>
</button>
<button type="button" class="btn btn-ghost">
<i class="fa-solid fa-retweet"></i>
<span>Forward</span>
</div>
</div>
<article class="py-5 px-7">
<h2 class="card-title">{item.title}</h2>
<article class="prose">{item.content}</article>
</article>
<div class="grid grid-cols-4 border-y border-base-200">
<div class="tooltip" data-tip="Daisuki">
<button type="button" class="btn btn-ghost btn-block" disabled={reacting()}
onClick={() => reactPost(item, "like")}>
<i class="fa-solid fa-thumbs-up"></i>
<code class="font-mono">{item.like_count}</code>
</button>
</div>
</div>}
</For>
<div class="tooltip" data-tip="Daikirai">
<button type="button" class="btn btn-ghost btn-block" disabled={reacting()}
onClick={() => reactPost(item, "dislike")}>
<i class="fa-solid fa-thumbs-down"></i>
<code class="font-mono">{item.dislike_count}</code>
</button>
</div>
<button type="button" class="btn btn-ghost">
<i class="fa-solid fa-reply"></i>
<span>Reply</span>
</button>
<button type="button" class="btn btn-ghost">
<i class="fa-solid fa-retweet"></i>
<span>Forward</span>
</button>
</div>
</div>}
</For>
<Show when={loading()}>
<div class="w-full border-b border-base-200 pt-5 pb-7 text-center">
<p class="loading loading-lg loading-infinity"></p>
<p>Creating fake news...</p>
</div>
</Show>
</div>