Ategon/Jamjar
1
0
Fork 0
mirror of https://github.com/Ategon/Jamjar.git synced 2025-02-12 06:16:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Compare commits

...

3 commits
2a89f75ac6 ... 2d6fead452

Author SHA1 Message Date
Ategon
2d6fead452 Remove extra loading 2025-01-27 19:36:09 -05:00
Ategon
2f71aa12ae Add instant feedback to like 2025-01-27 19:36:00 -05:00
Ategon
28461e257c Add new game asset icon 2025-01-27 19:22:43 -05:00
2 changed files with 33 additions and 38 deletions
public/images/tags
gameassets.png
src/components/posts
LikeButton.tsx

BIN
public/images/tags/gameassets.png
View file

Binary file not shown.
Side by side Swipe

Before

(image error) Size: 48 KiB

After

(image error) Size: 40 KiB

71
src/components/posts/LikeButton.tsx
View file

@ -2,7 +2,7 @@
import { Button } from "@nextui-org/react"; import { Button } from "@nextui-org/react";
import { PostType } from "@/types/PostType"; import { PostType } from "@/types/PostType";
import { Heart, LoaderCircle } from "lucide-react"; import { Heart } from "lucide-react";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import { getCookie } from "@/helpers/cookie"; import { getCookie } from "@/helpers/cookie";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
@ -11,7 +11,6 @@ import { useTheme } from "next-themes";
export default function LikeButton({ post }: { post: PostType }) { export default function LikeButton({ post }: { post: PostType }) {
const [likes, setLikes] = useState<number>(post.likes.length); const [likes, setLikes] = useState<number>(post.likes.length);
const [loading, setLoading] = useState<boolean>(false);
const [liked, setLiked] = useState<boolean>(false); const [liked, setLiked] = useState<boolean>(false);
const { theme } = useTheme(); const { theme } = useTheme();
const [reduceMotion, setReduceMotion] = useState<boolean>(false); const [reduceMotion, setReduceMotion] = useState<boolean>(false);
@ -43,11 +42,10 @@ export default function LikeButton({ post }: { post: PostType }) {
: "", : "",
}} }}
onPress={async () => { onPress={async () => {
if (loading || liked) { if (!getCookie("token")) {
return; redirect("/login");
} }
setLoading(true);
const response = await fetch( const response = await fetch(
process.env.NEXT_PUBLIC_MODE === "PROD" process.env.NEXT_PUBLIC_MODE === "PROD"
? "https://d2jam.com/api/v1/like" ? "https://d2jam.com/api/v1/like"
@ -66,49 +64,46 @@ export default function LikeButton({ post }: { post: PostType }) {
} }
); );
post.hasLiked = !post.hasLiked;
if (post.hasLiked) {
setLiked(true);
setTimeout(() => setLiked(false), 1000);
setLikes(likes + 1);
} else {
setLiked(false);
setLikes(likes - 1);
}
if (!response.ok) { if (!response.ok) {
setLoading(false);
if (response.status == 401) { if (response.status == 401) {
redirect("/login"); redirect("/login");
} else { } else {
post.hasLiked = !post.hasLiked;
toast.error("An error occurred"); toast.error("An error occurred");
return; return;
} }
} else {
const data = await response.json();
setLikes(parseInt(data.likes));
post.hasLiked = data.action === "like";
setLoading(false);
setLiked(data.action === "like");
setTimeout(() => setLiked(false), 1000);
} }
}} }}
> >
{loading ? ( <div className="flex gap-2 items-center" style={{ position: "relative" }}>
<LoaderCircle className="animate-spin" size={16} /> <Heart size={16} />
) : ( <Heart
<div size={16}
className="flex gap-2 items-center" className={
style={{ position: "relative" }} liked && !reduceMotion
> ? "animate-ping absolute top-0 left-0"
<Heart size={16} /> : "absolute top-0 left-0"
<Heart }
size={16} style={{
className={ position: "absolute",
liked && !reduceMotion top: "0",
? "animate-ping absolute top-0 left-0" left: "0",
: "absolute top-0 left-0" zIndex: "10",
} }}
style={{ />
position: "absolute", <p>{likes}</p>
top: "0", </div>
left: "0",
zIndex: "10",
}}
/>
<p>{likes}</p>
</div>
)}
</Button> </Button>
); );
} }