✨ Pagination
This commit is contained in:
parent
807f7cff46
commit
1f4164e72a
@ -8,6 +8,7 @@ import (
|
||||
func RunMigration(source *gorm.DB) error {
|
||||
if err := source.AutoMigrate(
|
||||
&models.Account{},
|
||||
&models.AccountMembership{},
|
||||
&models.Realm{},
|
||||
&models.Category{},
|
||||
&models.Tag{},
|
||||
|
@ -1,5 +1,7 @@
|
||||
package models
|
||||
|
||||
import "time"
|
||||
|
||||
// Account profiles basically fetched from Hydrogen.Passport
|
||||
// But cache at here for better usage
|
||||
// At the same time this model can make relations between local models
|
||||
@ -17,3 +19,11 @@ type Account struct {
|
||||
Realms []Realm `json:"realms"`
|
||||
ExternalID uint `json:"external_id"`
|
||||
}
|
||||
|
||||
type AccountMembership struct {
|
||||
ID uint `json:"id" gorm:"primaryKey"`
|
||||
CreatedAt time.Time `json:"created_at"`
|
||||
UpdatedAt time.Time `json:"updated_at"`
|
||||
FollowerID uint
|
||||
FollowingID uint
|
||||
}
|
||||
|
@ -12,7 +12,11 @@ type Post struct {
|
||||
Categories []Category `gorm:"many2many:post_categories"`
|
||||
LikedAccounts []PostLike `json:"liked_accounts"`
|
||||
DislikedAccounts []PostDislike `json:"disliked_accounts"`
|
||||
RepostTo *Post `json:"repost_to" gorm:"foreignKey:RepostID"`
|
||||
ReplyTo *Post `json:"reply_to" gorm:"foreignKey:ReplyID"`
|
||||
PublishedAt time.Time `json:"published_at"`
|
||||
RepostID *uint `json:"repost_id"`
|
||||
ReplyID *uint `json:"reply_id"`
|
||||
RealmID *uint `json:"realm_id"`
|
||||
AuthorID uint `json:"author_id"`
|
||||
Author Account `json:"author"`
|
||||
|
@ -4,11 +4,9 @@ import (
|
||||
"code.smartsheep.studio/hydrogen/interactive/pkg/database"
|
||||
"code.smartsheep.studio/hydrogen/interactive/pkg/models"
|
||||
"code.smartsheep.studio/hydrogen/interactive/pkg/services"
|
||||
"fmt"
|
||||
"github.com/gofiber/fiber/v2"
|
||||
"github.com/google/uuid"
|
||||
"github.com/samber/lo"
|
||||
"github.com/spf13/viper"
|
||||
"strings"
|
||||
)
|
||||
|
||||
@ -17,7 +15,6 @@ func listPost(c *fiber.Ctx) error {
|
||||
offset := c.QueryInt("offset", 0)
|
||||
|
||||
var count int64
|
||||
var posts []*models.Post
|
||||
if err := database.C.
|
||||
Where(&models.Post{RealmID: nil}).
|
||||
Model(&models.Post{}).
|
||||
@ -25,48 +22,9 @@ func listPost(c *fiber.Ctx) error {
|
||||
return fiber.NewError(fiber.StatusInternalServerError, err.Error())
|
||||
}
|
||||
|
||||
if err := database.C.
|
||||
Where(&models.Post{RealmID: nil}).
|
||||
Limit(take).
|
||||
Offset(offset).
|
||||
Order("created_at desc").
|
||||
Preload("Author").
|
||||
Find(&posts).Error; err != nil {
|
||||
return fiber.NewError(fiber.StatusInternalServerError, err.Error())
|
||||
}
|
||||
|
||||
postIds := lo.Map(posts, func(item *models.Post, _ int) uint {
|
||||
return item.ID
|
||||
})
|
||||
|
||||
var reactInfo []struct {
|
||||
PostID uint
|
||||
LikeCount int64
|
||||
DislikeCount int64
|
||||
}
|
||||
|
||||
prefix := viper.GetString("database.prefix")
|
||||
database.C.Raw(fmt.Sprintf(`SELECT t.id as post_id,
|
||||
COALESCE(l.like_count, 0) AS like_count,
|
||||
COALESCE(d.dislike_count, 0) AS dislike_count
|
||||
FROM %sposts t
|
||||
LEFT JOIN (SELECT post_id, COUNT(*) AS like_count
|
||||
FROM %spost_likes
|
||||
GROUP BY post_id) l ON t.id = l.post_id
|
||||
LEFT JOIN (SELECT post_id, COUNT(*) AS dislike_count
|
||||
FROM %spost_dislikes
|
||||
GROUP BY post_id) d ON t.id = d.post_id
|
||||
WHERE t.id IN (?)`, prefix, prefix, prefix), postIds).Scan(&reactInfo)
|
||||
|
||||
postMap := lo.SliceToMap(posts, func(item *models.Post) (uint, *models.Post) {
|
||||
return item.ID, item
|
||||
})
|
||||
|
||||
for _, info := range reactInfo {
|
||||
if post, ok := postMap[info.PostID]; ok {
|
||||
post.LikeCount = info.LikeCount
|
||||
post.DislikeCount = info.DislikeCount
|
||||
}
|
||||
posts, err := services.ListPost(take, offset)
|
||||
if err != nil {
|
||||
return fiber.NewError(fiber.StatusBadRequest, err.Error())
|
||||
}
|
||||
|
||||
return c.JSON(fiber.Map{
|
||||
|
@ -57,6 +57,7 @@ func NewServer() {
|
||||
api := A.Group("/api").Name("API")
|
||||
{
|
||||
api.Get("/users/me", auth, getUserinfo)
|
||||
api.Get("/users/:accountId/follow", auth, doFollowAccount)
|
||||
|
||||
api.Get("/auth", doLogin)
|
||||
api.Get("/auth/callback", doPostLogin)
|
||||
|
@ -3,6 +3,7 @@ package server
|
||||
import (
|
||||
"code.smartsheep.studio/hydrogen/interactive/pkg/database"
|
||||
"code.smartsheep.studio/hydrogen/interactive/pkg/models"
|
||||
"code.smartsheep.studio/hydrogen/interactive/pkg/services"
|
||||
"github.com/gofiber/fiber/v2"
|
||||
)
|
||||
|
||||
@ -18,3 +19,27 @@ func getUserinfo(c *fiber.Ctx) error {
|
||||
|
||||
return c.JSON(data)
|
||||
}
|
||||
|
||||
func doFollowAccount(c *fiber.Ctx) error {
|
||||
user := c.Locals("principal").(models.Account)
|
||||
id, _ := c.ParamsInt("accountId", 0)
|
||||
|
||||
var account models.Account
|
||||
if err := database.C.Where(&models.Account{
|
||||
BaseModel: models.BaseModel{ID: uint(id)},
|
||||
}).First(&account).Error; err != nil {
|
||||
return fiber.NewError(fiber.StatusNotFound, err.Error())
|
||||
}
|
||||
|
||||
if _, ok := services.GetAccountFollowed(user, account); ok {
|
||||
if err := services.UnfollowAccount(user.ID, account.ID); err != nil {
|
||||
return fiber.NewError(fiber.StatusBadRequest, err.Error())
|
||||
}
|
||||
return c.SendStatus(fiber.StatusNoContent)
|
||||
} else {
|
||||
if err := services.FollowAccount(user.ID, account.ID); err != nil {
|
||||
return fiber.NewError(fiber.StatusBadRequest, err.Error())
|
||||
}
|
||||
return c.SendStatus(fiber.StatusCreated)
|
||||
}
|
||||
}
|
||||
|
32
pkg/services/accounts.go
Normal file
32
pkg/services/accounts.go
Normal file
@ -0,0 +1,32 @@
|
||||
package services
|
||||
|
||||
import (
|
||||
"code.smartsheep.studio/hydrogen/interactive/pkg/database"
|
||||
"code.smartsheep.studio/hydrogen/interactive/pkg/models"
|
||||
"errors"
|
||||
"gorm.io/gorm"
|
||||
)
|
||||
|
||||
func FollowAccount(followerId, followingId uint) error {
|
||||
relationship := models.AccountMembership{
|
||||
FollowerID: followerId,
|
||||
FollowingID: followingId,
|
||||
}
|
||||
return database.C.Create(&relationship).Error
|
||||
}
|
||||
|
||||
func UnfollowAccount(followerId, followingId uint) error {
|
||||
return database.C.Where(models.AccountMembership{
|
||||
FollowerID: followerId,
|
||||
FollowingID: followingId,
|
||||
}).Delete(&models.AccountMembership{}).Error
|
||||
}
|
||||
|
||||
func GetAccountFollowed(user models.Account, target models.Account) (models.AccountMembership, bool) {
|
||||
var relationship models.AccountMembership
|
||||
err := database.C.Model(&models.AccountMembership{}).
|
||||
Where(&models.AccountMembership{FollowerID: user.ID, FollowingID: target.ID}).
|
||||
Find(&relationship).
|
||||
Error
|
||||
return relationship, !errors.Is(err, gorm.ErrRecordNotFound)
|
||||
}
|
@ -4,9 +4,61 @@ import (
|
||||
"code.smartsheep.studio/hydrogen/interactive/pkg/database"
|
||||
"code.smartsheep.studio/hydrogen/interactive/pkg/models"
|
||||
"errors"
|
||||
"fmt"
|
||||
"github.com/samber/lo"
|
||||
"github.com/spf13/viper"
|
||||
"gorm.io/gorm"
|
||||
)
|
||||
|
||||
func ListPost(take int, offset int) ([]*models.Post, error) {
|
||||
var posts []*models.Post
|
||||
if err := database.C.
|
||||
Where(&models.Post{RealmID: nil}).
|
||||
Limit(take).
|
||||
Offset(offset).
|
||||
Order("created_at desc").
|
||||
Preload("Author").
|
||||
Find(&posts).Error; err != nil {
|
||||
return posts, err
|
||||
}
|
||||
|
||||
postIds := lo.Map(posts, func(item *models.Post, _ int) uint {
|
||||
return item.ID
|
||||
})
|
||||
|
||||
var reactInfo []struct {
|
||||
PostID uint
|
||||
LikeCount int64
|
||||
DislikeCount int64
|
||||
}
|
||||
|
||||
prefix := viper.GetString("database.prefix")
|
||||
database.C.Raw(fmt.Sprintf(`SELECT t.id as post_id,
|
||||
COALESCE(l.like_count, 0) AS like_count,
|
||||
COALESCE(d.dislike_count, 0) AS dislike_count
|
||||
FROM %sposts t
|
||||
LEFT JOIN (SELECT post_id, COUNT(*) AS like_count
|
||||
FROM %spost_likes
|
||||
GROUP BY post_id) l ON t.id = l.post_id
|
||||
LEFT JOIN (SELECT post_id, COUNT(*) AS dislike_count
|
||||
FROM %spost_dislikes
|
||||
GROUP BY post_id) d ON t.id = d.post_id
|
||||
WHERE t.id IN (?)`, prefix, prefix, prefix), postIds).Scan(&reactInfo)
|
||||
|
||||
postMap := lo.SliceToMap(posts, func(item *models.Post) (uint, *models.Post) {
|
||||
return item.ID, item
|
||||
})
|
||||
|
||||
for _, info := range reactInfo {
|
||||
if post, ok := postMap[info.PostID]; ok {
|
||||
post.LikeCount = info.LikeCount
|
||||
post.DislikeCount = info.DislikeCount
|
||||
}
|
||||
}
|
||||
|
||||
return posts, nil
|
||||
}
|
||||
|
||||
func NewPost(
|
||||
user models.Account,
|
||||
alias, title, content string,
|
||||
|
99
pkg/view/src/components/PostItem.tsx
Normal file
99
pkg/view/src/components/PostItem.tsx
Normal file
@ -0,0 +1,99 @@
|
||||
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 }) {
|
||||
const [reacting, setReacting] = createSignal(false);
|
||||
|
||||
const userinfo = useUserinfo();
|
||||
|
||||
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) {
|
||||
props.onError(await res.text());
|
||||
} else {
|
||||
props.onReact();
|
||||
props.onError(null);
|
||||
}
|
||||
setReacting(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<div class="post-item">
|
||||
|
||||
<div class="flex bg-base-200">
|
||||
<div class="avatar">
|
||||
<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>
|
||||
|
||||
<article 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="col-span-2 grid grid-cols-4">
|
||||
<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 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>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<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>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
3
pkg/view/src/components/PostList.module.css
Normal file
3
pkg/view/src/components/PostList.module.css
Normal file
@ -0,0 +1,3 @@
|
||||
.paginationControl {
|
||||
background-color: transparent !important;
|
||||
}
|
75
pkg/view/src/components/PostList.tsx
Normal file
75
pkg/view/src/components/PostList.tsx
Normal file
@ -0,0 +1,75 @@
|
||||
import { createMemo, createSignal, For, Show } from "solid-js";
|
||||
|
||||
import styles from "./PostList.module.css";
|
||||
|
||||
import PostPublish from "./PostPublish.tsx";
|
||||
import PostItem from "./PostItem.tsx";
|
||||
|
||||
export default function PostList(props: { onError: (message: string | null) => void }) {
|
||||
const [loading, setLoading] = createSignal(true);
|
||||
|
||||
const [posts, setPosts] = createSignal<any[]>([]);
|
||||
const [postCount, setPostCount] = createSignal(0);
|
||||
|
||||
const [page, setPage] = createSignal(1);
|
||||
const pageCount = createMemo(() => Math.ceil(postCount() / 10));
|
||||
|
||||
async function readPosts() {
|
||||
setLoading(true);
|
||||
const res = await fetch("/api/posts?" + new URLSearchParams({
|
||||
take: (10).toString(),
|
||||
offset: ((page() - 1) * 10).toString()
|
||||
}));
|
||||
if (res.status !== 200) {
|
||||
props.onError(await res.text());
|
||||
} else {
|
||||
const data = await res.json();
|
||||
setPosts(data["data"]);
|
||||
setPostCount(data["count"]);
|
||||
props.onError(null);
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
readPosts();
|
||||
|
||||
function changePage(pn: number) {
|
||||
setPage(pn);
|
||||
readPosts().then(() => {
|
||||
setTimeout(() => window.scrollTo({ top: 0, behavior: "smooth" }), 16);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div id="post-list">
|
||||
<PostPublish onPost={() => readPosts()} onError={props.onError} />
|
||||
|
||||
<div id="posts">
|
||||
<For each={posts()}>
|
||||
{item => <PostItem post={item} onReact={() => readPosts()} onError={props.onError} />}
|
||||
</For>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<div class="join">
|
||||
<button class={`join-item btn btn-ghost ${styles.paginationControl}`} disabled={page() <= 1}
|
||||
onClick={() => changePage(page() - 1)}>
|
||||
<i class="fa-solid fa-caret-left"></i>
|
||||
</button>
|
||||
<button class="join-item btn btn-ghost">Page {page()}</button>
|
||||
<button class={`join-item btn btn-ghost ${styles.paginationControl}`} disabled={page() >= pageCount()}
|
||||
onClick={() => changePage(page() + 1)}>
|
||||
<i class="fa-solid fa-caret-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
);
|
||||
}
|
4
pkg/view/src/components/PostPublish.module.css
Normal file
4
pkg/view/src/components/PostPublish.module.css
Normal file
@ -0,0 +1,4 @@
|
||||
.publishInput {
|
||||
outline-style: none !important;
|
||||
outline-width: 0 !important;
|
||||
}
|
81
pkg/view/src/components/PostPublish.tsx
Normal file
81
pkg/view/src/components/PostPublish.tsx
Normal file
@ -0,0 +1,81 @@
|
||||
import { createSignal, Show } from "solid-js";
|
||||
import { getAtk, useUserinfo } from "../stores/userinfo.tsx";
|
||||
|
||||
import styles from "./PostPublish.module.css";
|
||||
|
||||
export default function PostPublish(props: {
|
||||
replying?: any,
|
||||
reposting?: any,
|
||||
onError: (message: string | null) => void,
|
||||
onPost: () => void
|
||||
}) {
|
||||
const userinfo = useUserinfo();
|
||||
|
||||
const [submitting, setSubmitting] = createSignal(false);
|
||||
|
||||
async function doPost(evt: SubmitEvent) {
|
||||
evt.preventDefault();
|
||||
|
||||
const form = evt.target as HTMLFormElement;
|
||||
const data = Object.fromEntries(new FormData(form));
|
||||
if (!data.content) return;
|
||||
|
||||
setSubmitting(true);
|
||||
const res = await fetch("/api/posts", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": `Bearer ${getAtk()}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
alias: data.alias ?? crypto.randomUUID().replace(/-/g, ""),
|
||||
title: data.title,
|
||||
content: data.content
|
||||
})
|
||||
});
|
||||
if (res.status !== 200) {
|
||||
props.onError(await res.text());
|
||||
} else {
|
||||
form.reset();
|
||||
props.onPost();
|
||||
props.onError(null);
|
||||
}
|
||||
setSubmitting(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<form id="publish" onSubmit={doPost}>
|
||||
<div id="publish-identity" class="flex border-y border-base-200">
|
||||
<div class="avatar">
|
||||
<div class="w-12">
|
||||
<Show when={userinfo?.profiles?.avatar}
|
||||
fallback={<span class="text-3xl">{userinfo?.displayName.substring(0, 1)}</span>}>
|
||||
<img alt="avatar" src={userinfo?.profiles?.avatar} />
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-grow">
|
||||
<input name="title" class={`${styles.publishInput} input w-full`}
|
||||
placeholder="The describe for a long content (Optional)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<textarea name="content" class={`${styles.publishInput} textarea w-full`}
|
||||
placeholder="What's happend?!" />
|
||||
|
||||
<div id="publish-actions" class="flex justify-between border-y border-base-200">
|
||||
<div>
|
||||
<button type="button" class="btn btn-ghost">
|
||||
<i class="fa-solid fa-paperclip"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary" disabled={submitting()}>
|
||||
<Show when={submitting()} fallback={"Post a post"}>
|
||||
<span class="loading"></span>
|
||||
</Show>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
@ -1,8 +1,3 @@
|
||||
.publishInput {
|
||||
outline-style: none !important;
|
||||
outline-width: 0 !important;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
|
@ -1,84 +1,11 @@
|
||||
import { getAtk, useUserinfo } from "../stores/userinfo.tsx";
|
||||
import { createEffect, createSignal, For, Show } from "solid-js";
|
||||
|
||||
import styles from "./feed.module.css";
|
||||
|
||||
import PostList from "../components/PostList.tsx";
|
||||
|
||||
export default function DashboardPage() {
|
||||
const userinfo = useUserinfo();
|
||||
|
||||
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);
|
||||
|
||||
const [page, setPage] = createSignal(1);
|
||||
|
||||
async function readPosts() {
|
||||
setLoading(true);
|
||||
const res = await fetch("/api/posts?" + new URLSearchParams({
|
||||
take: (10).toString(),
|
||||
skip: ((page() - 1) * 10).toString()
|
||||
}));
|
||||
if (res.status !== 200) {
|
||||
setError(await res.text());
|
||||
} else {
|
||||
const data = await res.json();
|
||||
setPosts(data["data"]);
|
||||
setPostCount(data["count"]);
|
||||
setError(null);
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
createEffect(() => readPosts(), [page()]);
|
||||
|
||||
async function doPost(evt: SubmitEvent) {
|
||||
evt.preventDefault();
|
||||
|
||||
const form = evt.target as HTMLFormElement;
|
||||
const data = Object.fromEntries(new FormData(form));
|
||||
if (!data.content) return;
|
||||
|
||||
setSubmitting(true);
|
||||
const res = await fetch("/api/posts", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
"Authorization": `Bearer ${getAtk()}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
alias: data.alias ?? crypto.randomUUID().replace(/-/g, ""),
|
||||
title: data.title,
|
||||
content: data.content
|
||||
})
|
||||
});
|
||||
if (res.status !== 200) {
|
||||
setError(await res.text());
|
||||
} else {
|
||||
await readPosts();
|
||||
form.reset();
|
||||
setError(null);
|
||||
}
|
||||
setSubmitting(false);
|
||||
}
|
||||
|
||||
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`}>
|
||||
@ -98,107 +25,8 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
</Show>
|
||||
</div>
|
||||
|
||||
<form id="publish" onSubmit={doPost}>
|
||||
<div id="publish-identity" class="flex border-y border-base-200">
|
||||
<div class="avatar">
|
||||
<div class="w-12">
|
||||
<Show when={userinfo?.profiles?.avatar}
|
||||
fallback={<span class="text-3xl">{userinfo?.displayName.substring(0, 1)}</span>}>
|
||||
<img alt="avatar" src={userinfo?.profiles?.avatar} />
|
||||
</Show>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-grow">
|
||||
<input name="title" class={`${styles.publishInput} input w-full`}
|
||||
placeholder="The describe for a long content (Optional)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<textarea name="content" class={`${styles.publishInput} textarea w-full`}
|
||||
placeholder="What's happend?!" />
|
||||
|
||||
<div id="publish-actions" class="flex justify-between border-y border-base-200">
|
||||
<div>
|
||||
<button type="button" class="btn btn-ghost">
|
||||
<i class="fa-solid fa-paperclip"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary" disabled={submitting()}>
|
||||
<Show when={submitting()} fallback={"Post a post"}>
|
||||
<span class="loading"></span>
|
||||
</Show>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="posts">
|
||||
<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>
|
||||
</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 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>
|
||||
|
||||
<PostList onError={setError} />
|
||||
|
||||
</div>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user