Follow and Following

This commit is contained in:
2024-02-03 20:44:16 +08:00
parent 6c52a862a5
commit df60a112ae
5 changed files with 66 additions and 10 deletions

View File

@ -1,11 +1,14 @@
import { createSignal } from "solid-js";
import { createSignal, Show } from "solid-js";
import styles from "./NameCard.module.css";
import { getAtk } from "../stores/userinfo.tsx";
export default function NameCard(props: { accountId: number, onError: (messasge: string | null) => void }) {
const [info, setInfo] = createSignal<any>(null);
const [isFollowing, setIsFollowing] = createSignal(false);
const [_, setLoading] = createSignal(true);
const [submitting, setSubmitting] = createSignal(false);
async function readInfo() {
setLoading(true);
@ -19,7 +22,36 @@ export default function NameCard(props: { accountId: number, onError: (messasge:
setLoading(false);
}
async function readIsFollowing() {
setLoading(true);
const res = await fetch(`/api/users/${props.accountId}/follow`, {
method: "GET",
headers: { Authorization: `Bearer ${getAtk()}` }
});
if (res.status === 200) {
const data = await res.json();
setIsFollowing(data["is_followed"]);
}
setLoading(false);
}
async function follow() {
setSubmitting(true);
const res = await fetch(`/api/users/${props.accountId}/follow`, {
method: "POST",
headers: { "Authorization": `Bearer ${getAtk()}` }
});
if (res.status !== 201 && res.status !== 204) {
props.onError(await res.text());
} else {
await readIsFollowing();
props.onError(null);
}
setSubmitting(false);
}
readInfo();
readIsFollowing();
return (
<div class="relative">
@ -36,10 +68,17 @@ export default function NameCard(props: { accountId: number, onError: (messasge:
<div id="actions" class="flex justify-end">
<div>
<button type="button" class="btn btn-primary">
<i class="fa-solid fa-plus"></i>
Follow
</button>
<Show when={isFollowing()} fallback={
<button type="button" class="btn btn-primary" disabled={submitting()} onClick={() => follow()}>
<i class="fa-solid fa-plus"></i>
Follow
</button>
}>
<button type="button" class="btn btn-accent" disabled={submitting()} onClick={() => follow()}>
<i class="fa-solid fa-check"></i>
Followed
</button>
</Show>
</div>
</div>

View File

@ -46,7 +46,7 @@ export default function PostPublish(props: {
return (
<form id="publish" onSubmit={doPost}>
<div id="publish-identity" class="flex border-y border-base-200">
<div class="avatar">
<div class="avatar pl-[20px]">
<div class="w-12">
<Show when={userinfo?.profiles?.avatar}
fallback={<span class="text-3xl">{userinfo?.displayName.substring(0, 1)}</span>}>