qwertyasdfgh
/
twitter-clone
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remake the repost system so we can show reposts in the feed

This commit is contained in:
Joonas 2023-11-16 13:43:07 +02:00
parent 63436727ed
commit 60317adb2a
7 changed files with 138 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/components/Post.tsx
View File

@ -11,13 +11,31 @@ export function Poster({
name,
pfp,
className,
style = "normal",
}: {
username: string;
name: string | null;
pfp: string;
className?: string;
style?: "normal" | "compact";
}) {
return (
return style === "compact" ? (
<div>
<img
className={`peer/image rounded-full border w-6`}
src={
pfp
? `
/uploads/${encodeURIComponent(pfp)}`
: `/uploads/default.png`
}
alt="pfp"
/>
<Card className="!p-3 hidden peer-hover/image:flex hover:flex !absolute !w-fit">
<Poster username={username} pfp={pfp} name={name} />
</Card>
</div>
) : (
<div className={`flex break-all items-center gap-3 ${className}`}>
<img
className="rounded-full border w-12"
@ -61,7 +79,7 @@ export function Post({
const fetcher = useFetcher();
const liked = post.likes.filter((like) => like.id === userId).length > 0;
const reposted =
post.reposts.filter((repost) => repost.id === userId).length > 0;
post.reposts.filter((repost) => repost.userId === userId).length > 0;
return (
<div
@ -75,6 +93,22 @@ export function Post({
) : (
""
)}
{post.reposters?.length > 0 ? (
<div className="flex gap-1 items-center">
{post.reposters.map((user) => (
<Poster
style="compact"
key={user.id}
name={user.name}
username={user.username}
pfp={user.pfp}
/>
))}
<Text type="subtitle">reposted this</Text>
</div>
) : (
""
)}
<div className="flex items-center">
<Poster
pfp={post.author.pfp}

33
app/models/repost.server.ts
View File

@ -14,14 +14,10 @@ export async function repost(postId: number, id: number) {
return errors;
}
const repost = await prisma.user.update({
where: {
id: id,
},
const repost = await prisma.repost.create({
data: {
reposts: {
connect: { id: postId },
},
userId: id,
postId: postId,
},
});
@ -36,27 +32,32 @@ export async function unRepost(postId: number, id: number) {
const errors = {};
const post = await getPostById(postId);
if (!post) {
errors.repost = "Post doesn't exist";
}
const repost = await prisma.repost.findFirst({
where: {
userId: id,
postId: postId,
},
});
if (!repost) {
errors.repost = "Repost doesn't exist";
}
if (Object.values(errors).some(Boolean)) {
return errors;
}
const repost = await prisma.user.update({
const repostQ = await prisma.repost.delete({
where: {
id: id,
},
data: {
reposts: {
disconnect: { id: postId },
},
id: repost.id,
},
});
if (!repost) {
if (!repostQ) {
errors.repost = "Something went wrong";
}

33
app/routes/home.tsx
View File

@ -105,25 +105,26 @@ export async function loader({ request }: LoaderFunctionArgs) {
if (!session.has("userId")) {
return redirect("/");
}
const userId = session.get("userId");
const following = await prisma.user.findFirst({
where: { id: session.get("userId") },
where: { id: userId },
select: { following: { select: { id: true } } },
});
const followingArr = [...following.following.map((user) => user.id)];
const feed = await prisma.post.findMany({
where: {
OR: [
{
userId: {
in: [...following.following.map((user) => user.id)],
in: followingArr,
},
},
{
reposts: {
some: {
id: {
in: [...following.following.map((user) => user.id)],
userId: {
in: followingArr,
},
},
},
@ -141,12 +142,20 @@ export async function loader({ request }: LoaderFunctionArgs) {
pfp: true,
},
},
likes: {
reposts: {
select: {
id: true,
userId: true,
user: {
select: {
id: true,
username: true,
pfp: true,
name: true,
},
},
},
},
reposts: {
likes: {
select: {
id: true,
},
@ -157,6 +166,14 @@ export async function loader({ request }: LoaderFunctionArgs) {
},
});
feed.forEach((post) => {
const filter = post.reposts.filter((user) =>
followingArr.includes(user.userId)
);
const reposters = filter.map((repost) => repost.user);
post.reposters = reposters;
});
return feed;
}

31
app/routes/users.$username.tsx
View File

@ -85,6 +85,9 @@ export async function loader({ params }: LoaderFunctionArgs) {
reposts: {
select: {
id: true,
userId: true,
postId: true,
user: true,
},
},
author: {
@ -96,6 +99,9 @@ export async function loader({ params }: LoaderFunctionArgs) {
},
},
},
orderBy: {
createdAt: "desc",
},
},
likes: {
select: {
@ -110,6 +116,9 @@ export async function loader({ params }: LoaderFunctionArgs) {
reposts: {
select: {
id: true,
userId: true,
postId: true,
user: true,
},
},
author: {
@ -125,24 +134,14 @@ export async function loader({ params }: LoaderFunctionArgs) {
reposts: {
select: {
id: true,
text: true,
userId: true,
postId: true,
createdAt: true,
likes: {
user: true,
post: {
select: {
id: true,
},
},
reposts: {
select: {
id: true,
},
},
author: {
select: {
id: true,
username: true,
name: true,
pfp: true,
text: true,
},
},
},
@ -165,6 +164,8 @@ export async function loader({ params }: LoaderFunctionArgs) {
throw Error(`User ${params.username} not found`);
}
console.log(data);
return data;
}

2
app/routes/users._index.tsx
View File

@ -7,7 +7,7 @@ import { getUsers } from "~/models/user.server";
import type { UserWithRelations } from "~/utils/prisma.server";
export async function loader() {
return await getUsers();
return await getUsers(10);
}
export default function UsersIndex() {

21
prisma/migrations/20231116073650_reposts_refactor/migration.sql Normal file
View File

@ -0,0 +1,21 @@
/*
Warnings:
- You are about to drop the `_UserReposts` table. If the table is not empty, all the data it contains will be lost.
*/
-- DropTable
PRAGMA foreign_keys=off;
DROP TABLE "_UserReposts";
PRAGMA foreign_keys=on;
-- CreateTable
CREATE TABLE "Repost" (
"id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
"userId" INTEGER NOT NULL,
"postId" INTEGER NOT NULL,
"createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
"updatedAt" DATETIME NOT NULL,
CONSTRAINT "Repost_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE RESTRICT ON UPDATE CASCADE,
CONSTRAINT "Repost_postId_fkey" FOREIGN KEY ("postId") REFERENCES "Post" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
);

33
prisma/schema.prisma
View File

@ -11,29 +11,40 @@ datasource db {
}
model User {
id Int @id @default(autoincrement())
username String @unique
id Int @id @default(autoincrement())
username String @unique
password String
name String?
desc String?
pfp String
posts Post[] @relation("UserPosts")
likes Post[] @relation("UserLikes")
reposts Post[] @relation("UserReposts")
following User[] @relation("UserFollows")
followedBy User[] @relation("UserFollows")
posts Post[] @relation("UserPosts")
likes Post[] @relation("UserLikes")
reposts Repost[]
following User[] @relation("UserFollows")
followedBy User[] @relation("UserFollows")
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
model Post {
id Int @id @default(autoincrement())
id Int @id @default(autoincrement())
text String
author User @relation("UserPosts", fields: [userId], references: [id])
author User @relation("UserPosts", fields: [userId], references: [id])
userId Int
likes User[] @relation("UserLikes")
reposts User[] @relation("UserReposts")
likes User[] @relation("UserLikes")
reposts Repost[]
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
model Repost {
id Int @id @default(autoincrement())
user User @relation(fields: [userId], references: [id])
userId Int
post Post @relation(fields: [postId], references: [id])
postId Int
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt