trafficlunar/tomodachi-share
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: get miis from database and client like button

Browse source
This commit is contained in:
trafficlunar 2025-03-29 22:48:35 +00:00
parent 7b799405dc
commit 8625321ece
5 changed files with 89 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
prisma/migrations/20250329220850_/migration.sql Normal file
View file

@ -0,0 +1,2 @@
-- AlterTable
ALTER TABLE "miis" ADD COLUMN "tags" TEXT[];

3
prisma/schema.prisma
View file

@ -62,8 +62,9 @@ model Session {
model Mii {
id BigInt @id @default(autoincrement())
userId String
name String
name String @db.VarChar(64)
pictures String[]
tags String[]
likes Int @default(0)
createdAt DateTime @default(now())

31
src/app/components/like-button.tsx Normal file
View file

@ -0,0 +1,31 @@
"use client";
import { useState } from "react";
import { redirect } from "next/navigation";
import { Icon } from "@iconify/react";
interface Props {
likes: number;
isLoggedIn: boolean;
}
export default function LikeButton({ likes, isLoggedIn }: Props) {
const [isLiked, setIsLiked] = useState(false);
const [likesState, setLikesState] = useState(likes);
const onClick = () => {
if (!isLoggedIn) redirect("/login");
setIsLiked((prev) => !prev);
setLikesState((prev) => (isLiked ? prev - 1 : prev + 1));
// todo: update database
};
return (
<button onClick={onClick} className="flex items-center gap-2 text-xl text-red-400 mt-1 cursor-pointer">
<Icon icon={isLiked ? "icon-park-solid:like" : "icon-park-outline:like"} />
<span>{likesState}</span>
</button>
);
}

2
src/app/layout.tsx
View file

@ -23,7 +23,7 @@ export default function RootLayout({
<body className={`${lexend.className} antialiased flex flex-col items-center`}>
<Header />
<div className="px-4 py-8">{children}</div>
<div className="px-4 py-8 max-w-7xl w-full">{children}</div>
</body>
</html>
);

53
src/app/page.tsx
View file

@ -1,22 +1,59 @@
export default function Page() {
import { auth } from "@/lib/auth";
import { prisma } from "@/lib/prisma";
import LikeButton from "./components/like-button";
export default async function Page() {
const session = await auth();
const miiCount = prisma.mii.count();
const miis = await prisma.mii.findMany({
orderBy: { createdAt: "desc" },
});
return (
<div className="max-w-7xl grid grid-cols-4 gap-4 max-lg:grid-cols-3 max-sm:grid-cols-2 max-[25rem]:grid-cols-1">
{/* testing purposes only */}
{[...Array(12)].map((_, index) => (
<div className="w-full">
<div className="flex justify-between items-end mb-2">
<p className="text-lg">
<span className="font-extrabold">{miiCount}</span> Miis
</p>
<div className="flex gap-2">
<div className="pill gap-2">
<label htmlFor="sort">Filter:</label>
<span>todo</span>
</div>
<div className="pill gap-2">
<label htmlFor="sort">Sort:</label>
<select name="sort">
<option value="likes">Likes</option>
<option value="newest">Newest</option>
</select>
</div>
</div>
</div>
<div className="grid grid-cols-4 gap-4 max-lg:grid-cols-3 max-sm:grid-cols-2 max-[25rem]:grid-cols-1">
{miis.map((mii) => (
<div
key={index}
key={mii.id}
className="bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3 transition hover:scale-105 hover:bg-cyan-100 hover:border-cyan-600"
>
<img src="https://placehold.co/600x400" alt="mii" className="rounded-xl" />
<div className="p-4">
<h3 className="font-bold text-2xl">Frieren</h3>
<h3 className="font-bold text-2xl">{mii.name}</h3>
<div id="tags" className="flex gap-1 mt-1 *:px-2 *:py-1 *:bg-orange-300 *:rounded-full *:text-xs">
<span>Anime</span>
<span>Test</span>
{mii.tags.map((tag) => (
<span key={tag}>{tag}</span>
))}
</div>
<LikeButton likes={mii.likes} isLoggedIn={session?.user != null} />
</div>
</div>
))}
</div>
</div>
);
}