Skip to content
Snippets Groups Projects
Commit e8d6a04c authored by Yusuf Akgül's avatar Yusuf Akgül :hatching_chick:
Browse files

Merge branch 'main' of gitlab.bht-berlin.de:s86116/project_ss23

parents a78fe111 757906a4
No related branches found
No related tags found
No related merge requests found
Pipeline #36884 failed
Stage: build
Stage: test
Hide whitespace changes
Inline Side-by-side
Showing
with 452 additions and 71 deletions
app/(content)/(home)/home/[postid]/page.tsx 0 → 100644
+ 108
− 0
View file @ e8d6a04c
import CommentButton from "@/components/comment-button";
import LikeButton from "@/components/like-button";
import PostCommentForm from "@/components/post-comment";
import PostItem from "@/components/post-item";
import { db } from "@/lib/db";
import { Prisma } from "@prisma/client";
export const revalidate = 5; // revalidate this page every 5 seconds
type messageType = any // Prisma.PostUncheckedCreateInput
type messageItemProps = {
msg: messageType;
};
export default async function PostDetail({ params }: { params: { postid: string } }) {
const postid = params.postid
let comments = null
let message = null
try {
comments = await db.comment.findMany({
where: {
postId: postid
},
orderBy: {
createdAt: "desc"
},
include: {
user: true,
Like: true
},
})
message = await db.post.findUnique({
where: {
id: postid
},
include: {
user: true,
Comment: true,
Like: true,
},
})
} catch (error) {
console.log("the database is not running, try: 'npx prisma migrate dev --name init' if you want to use the database")
}
return (
<div>
<h1>Post Section</h1>
<p>This will be where all comments show up.</p>
<p>Needs a reload after posting!!</p>
<PostItem msg={message} />
<PostCommentForm postid={postid} />
{comments ?
<>
{comments.map((msg) => (
<CommentItem msg={msg} key={msg.id} />
))}
</>
:
<p>no comments / no database</p>}
</div>
)
}
const CommentItem = ({ msg }: any) => {
if (!msg.id) {
return <div></div>;
}
return (
<div className="flex border-b border-gray-200 py-4">
<div className="flex-shrink-0">
<div className="h-10 w-10 rounded-full bg-gray-300"></div>
</div>
<div className="ml-4 flex flex-col flex-grow">
<div>
<div className="flex items-center">
<span className="font-bold mr-2">{msg.user.name}</span>
<span className="text-gray-500 text-sm">
{formatDate(new Date(msg.createdAt!))}
</span>
</div>
<div className="text-gray-800">{msg.message}</div>
</div>
<div className="mt-4 flex">
<div className="bg-gray-200 rounded-lg py-10 px-20 mr-2">
</div>
</div>
<div className="flex justify-end" >
<LikeButton data={msg} />
</div>
</div>
</div>
);
};
function formatDate(date: Date) {
return date.toLocaleDateString("en-US", {
day: "numeric",
month: "short",
year: "numeric"
});
}
\ No newline at end of file
app/(content)/(home)/home/page.tsx
+ 12
− 50
View file @ e8d6a04c
import LikeButton from "@/components/like-button";
import PostItem from "@/components/post-item";
import PostMessageForm from "@/components/post-messages";
import { db } from "@/lib/db";
import { Prisma } from "@prisma/client";
/* export const revalidate = 5; */ // revalidate this page every 60 seconds
type messageType = Prisma.PostUncheckedCreateInput
type messageType = any // Prisma.PostUncheckedCreateInput
type messageItemProps = {
msg: messageType;
};
......@@ -15,7 +15,12 @@ export default async function HomePage() {
messages = await db.post.findMany({
orderBy: {
createdAt: "desc"
}
},
include: {
user: true,
Comment: true,
Like: true
},
})
} catch (error) {
......@@ -25,13 +30,13 @@ export default async function HomePage() {
return (
<div>
<h1>Home WIP</h1>
<p>This will be where all messages show up.</p>
<p>This will be where all Posts show up.</p>
<p>Needs a reload after posting!!</p>
<PostMessageForm data={messages} />
<PostMessageForm />
{messages ?
<>
{messages.map((msg) => (
<MessageItem msg={msg} key={msg.id} />
<PostItem msg={msg} key={msg.id} />
))}
</>
......@@ -41,46 +46,3 @@ export default async function HomePage() {
)
}
const MessageItem = ({ msg }: messageItemProps) => {
if (!msg.id) {
return <div></div>
}
return (
<div className="flex border-b border-gray-200 py-4">
<div className="flex-shrink-0">
<div className="h-10 w-10 rounded-full bg-gray-300"></div> {/* Profile picture */}
</div>
<div className="ml-4 flex flex-col">
<div>
<div className="flex items-center">
<span className="font-bold mr-2">{msg.userId}</span>
<span className="text-gray-500 text-sm">
{formatDate(new Date(msg.createdAt!))}
</span>
</div>
<div className="text-gray-800">{msg.content}</div>
</div>
<div className="mt-4">
<div className="flex items-center">
<div className="bg-gray-200 rounded-lg py-10 px-20 mr-2">
{/* potential Image */}
</div>
</div>
</div>
<LikeButton data={{
postId: msg.id,
userId: msg.userId
}} />
<span className="text-gray-600">Like Count: {msg.likeCount} | <span className="text-gray-600">ReplyButton (Number of Replies)</span></span>
</div>
</div>
);
};
function formatDate(date: Date) {
return date.toLocaleDateString("en-US", {
day: "numeric",
month: "short",
year: "numeric"
});
}
\ No newline at end of file
app/api/comments/route.ts 0 → 100644
+ 63
− 0
View file @ e8d6a04c
import { authOptions } from "@/lib/auth";
import { db } from "@/lib/db";
import { Prisma } from "@prisma/client";
import { getServerSession } from "next-auth/next";
import { revalidatePath } from "next/cache";
import { NextRequest, NextResponse } from "next/server";
type comment = Prisma.CommentUncheckedCreateInput
export async function POST(req: NextRequest) {
const session = await getServerSession(authOptions);
if (!session) {
return NextResponse.json({ status: 401 });
}
const userId = session.user.id
const data = await req.json()
console.log("router data: " + data.message, "status:")
try {
await db.comment.create({
data: {
message: data.message,
postId: data.postId,
userId: userId,
}
})
console.log("created")
const path = req.nextUrl.searchParams.get('path') || '/';
revalidatePath(path);
return NextResponse.json({ status: 201, message: 'Message Created' })
} catch (error: any) {
console.log("fail" + error);
}
console.log("post")
}
export async function GET(req: NextRequest, res: NextResponse) {
try {
const data = await req.json()
console.log("router data: " + data, "status:")
} catch (error) {
}
try {
const messages = await db.comment.findMany({
orderBy: {
createdAt: "desc"
}
})
return NextResponse.json({ status: 200, messages: messages })
} catch (error) {
console.log("fail" + error);
// res.status(400)
}
console.log("get")
}
\ No newline at end of file
app/api/likes/likeService.ts
+ 66
− 13
View file @ e8d6a04c
......@@ -14,35 +14,36 @@ export async function putLike(like: likeType): Promise<likeType | undefined> {
try {
const actualLike = await db.like.findFirst({
where: {
id: like.id,
// id: like.id,
postId: like.postId,
userId: like.userId
}
})
console.log("found like: ", actualLike?.id)
if (actualLike == null) {
console.log("like is null")
console.log("like is null", "postid:", like.postId, "so create it")
throw Error("Message was not liked by this user")
}
console.log("delete like", like.postId, "likeid: ", actualLike?.id)
await db.like.delete({
where: {
id: actualLike.id
}
})
const msg = await db.post.update({
where: {
id: like.postId
},
data: {
likeCount: { increment: -1 }
}
})
/* const msg = await db.post.update({
where: {
id: like.postId
},
data: {
likeCount: { increment: -1 }
}
}) */
return undefined;
} catch {
const createdLike = await db.like.create({
data: {
postId: like.postId,
......@@ -58,7 +59,59 @@ export async function putLike(like: likeType): Promise<likeType | undefined> {
likeCount: { increment: 1 }
}
})
}
}
export async function putLikeComment(like: likeType) {
// check if like exists by this user and for this post
// if exists delete
// if not create
try {
const actualLike = await db.like.findFirst({
where: {
// id: like.id,
postId: like.postId,
commentId: like.commentId,
userId: like.userId
}
})
console.log("found like: ", actualLike?.id)
if (actualLike == null) {
console.log("like is null", like.commentId, "so create it")
const createdLike = await db.like.create({
data: {
postId: like.postId,
userId: like.userId,
commentId: like.commentId
}
})
} else {
console.log("delete like", like.commentId, "postid:", like.postId, "likeid: ", actualLike?.id)
await db.like.delete({
where: {
id: actualLike.id
}
})
}
/* const msg = await db.comment.update({
where: {
id: like.postId
},
data: {
likeCount: { increment: -1 }
}
}) */
} catch {
return createdLike
/* const updatedMessage = await db.comment.update({
where: {
id: like.postId
},
data: {
likeCount: { increment: 1 }
}
}) */
}
}
\ No newline at end of file
app/api/likes/route.ts
+ 20
− 2
View file @ e8d6a04c
import { Prisma } from "@prisma/client";
import { NextRequest, NextResponse } from "next/server";
import { putLike } from "./likeService";
import { putLike, putLikeComment } from "./likeService";
import { getServerSession } from "next-auth/next";
import { authOptions } from "@/lib/auth";
import { revalidatePath } from "next/cache";
type like = Prisma.LikeUncheckedCreateInput
export async function PUT(req: NextRequest) {
const session = await getServerSession(authOptions);
if (!session) {
return NextResponse.json({ status: 401 });
}
const userId = session.user.id
const data: like = await req.json()
data.userId = userId;
console.log("router data: " + data, "status:")
try {
const msg = await putLike(data)
if (data.commentId == undefined) {
const msg = await putLike(data)
} else {
putLikeComment(data)
}
const path = req.nextUrl.searchParams.get('path') || '/';
revalidatePath(path);
return NextResponse.json({ status: 200, message: 'Like handled' })
} catch (error) {
......
components/comment-button.tsx 0 → 100644
+ 25
− 0
View file @ e8d6a04c
"use client"
import { Prisma } from "@prisma/client";
import { useRouter } from "next/navigation";
import { startTransition } from "react";
import { Icons } from "./icons";
import { Button } from "./ui/button";
import Link from "next/link";
export default function CommentButton(props: { data: any }) {
const postid = props.data.id
const replyCount = props.data.Comment.length
//const replyCount = props.data.likeCount
return (
<div>
<Link href={`/home/${postid}`}>
<Button type="submit" variant="ghost" size="lg" className="float-right" >
{replyCount}
<Icons.messagecircle className="h-3 w-3" />
</Button>
</Link>
</div>
)
}
\ No newline at end of file
components/like-button.tsx
+ 46
− 5
View file @ e8d6a04c
......@@ -7,16 +7,34 @@ import { Icons } from "./icons";
import { Button } from "./ui/button";
type likeType = Prisma.LikeUncheckedCreateInput
type postType = Prisma.PostUncheckedCreateInput
type commentType = Prisma.CommentUncheckedCreateInput
//type commentWithLikes = Prisma.CommentGetPayload<typeof commentWithPosts>
export default function LikeButton(props: { data: likeType }) {
export default function LikeButton(props: { data: any }) {
const router = useRouter();
const likeCount = props.data.Like.length
/* const likeCount = props.data.likeCount */
const likeArray = props.data.Like
/* const likeCount = countLikes(likeArray, props.data); */
async function postLike(e: any) {
e.preventDefault()
const msgLikeData = props.data;
const postLikeData = props.data;
const likeData = {} as likeType
likeData.userId = msgLikeData.userId
likeData.postId = msgLikeData.postId
if (postLikeData.postId == undefined) {
likeData.postId = postLikeData.id!
} else {
likeData.postId = postLikeData.postId
likeData.commentId = postLikeData.id
}
likeData.userId = postLikeData.userId
console.log(likeData.commentId)
const response = await fetch('http://localhost:3000/api/likes', {
method: 'PUT',
......@@ -35,9 +53,32 @@ export default function LikeButton(props: { data: likeType }) {
<div>
<form onSubmit={postLike}>
<Button type="submit" variant="ghost" size="lg" className="float-right" >
{likeCount}
<Icons.heart className="h-3 w-3" />
</Button>
</form>
</div>
)
}
\ No newline at end of file
}
function countLikes(likeArray: any, msg: any): number {
let likeCount = 0;
if (msg.postId == undefined) {
likeArray.forEach(function (like: any) {
if (like.postId == undefined) {
likeCount++;
}
})
} else {
likeArray.forEach(function (like: any) {
if (like.postId != undefined) {
likeCount++;
}
})
}
return likeCount;
}
components/post-comment.tsx 0 → 100644
+ 64
− 0
View file @ e8d6a04c
"use client"
import { Post, Prisma } from "@prisma/client";
import { useRouter } from "next/navigation";
import { startTransition, useEffect, useState } from "react";
type commentType = Prisma.CommentUncheckedCreateInput
export default function PostCommentForm(props: { postid: string }) {
const [formData, setFormData] = useState<commentType>({ message: "" } as commentType);
const router = useRouter();
const postid = props.postid
async function postComment(e: any) {
e.preventDefault()
formData.postId = postid;
const response = await fetch('http://localhost:3000/api/comments', {
method: 'POST',
body: JSON.stringify(formData)
})
startTransition(() => {
// Refresh the current route and fetch new data from the server without
// losing client-side browser or React state.
router.refresh();
});
return await response.json()
}
const characterCount = formData.message.length;
const isOverLimit = characterCount >= 1000;
const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const { value } = e.target;
setFormData({ ...formData, message: value });
};
return (
<div className="p-4 pb-20">
<form onSubmit={postComment}>
<textarea
placeholder="Write something..."
name="message"
value={formData.message}
onChange={handleInputChange}
className="w-full p-2 border border-gray-600 rounded-xl resize-none"
rows={5}
maxLength={1000}
></textarea>
<div className="flex justify-end mt-2">
<span className={`${isOverLimit ? "text-red-500" : "text-gray-500"} text-sm`}>
{characterCount}/{1000}
</span>
</div>
<button type="submit" className="mt-2 bg-gray-300 text-gray-800 px-4 py-2 rounded float-right">
Post
</button>
</form>
</div>
)
}
\ No newline at end of file
components/post-item.tsx 0 → 100644
+ 47
− 0
View file @ e8d6a04c
import CommentButton from "./comment-button";
import LikeButton from "./like-button";
type messageType = any // Prisma.PostUncheckedCreateInput
type messageItemProps = {
msg: messageType;
};
export default function PostItem({ msg }: any) {
if (!msg.id) {
return <div></div>;
}
return (
<div className="flex border-b border-gray-200 py-4">
<div className="flex-shrink-0">
<div className="h-10 w-10 rounded-full bg-gray-300"></div>
</div>
<div className="ml-4 flex flex-col flex-grow">
<div>
<div className="flex items-center">
<span className="font-bold mr-2">{msg.user.name}</span>
<span className="text-gray-500 text-sm">
{formatDate(new Date(msg.createdAt!))}
</span>
</div>
<div className="text-gray-800">{msg.content}</div>
</div>
<div className="mt-4 flex">
<div className="bg-gray-200 rounded-lg py-10 px-20 mr-2">
</div>
</div>
<div className="flex justify-end" >
<LikeButton data={msg} />
<CommentButton data={msg} />
</div>
</div>
</div>
)
};
function formatDate(date: Date) {
return date.toLocaleDateString("en-US", {
day: "numeric",
month: "short",
year: "numeric"
});
}
\ No newline at end of file
components/post-messages.tsx
+ 1
− 1
View file @ e8d6a04c
......@@ -6,7 +6,7 @@ import { startTransition, useEffect, useState } from "react";
type messageType = Prisma.PostUncheckedCreateInput
export default function PostMessageForm(props: { data: Post[] | null }) {
export default function PostMessageForm() {
const [formData, setFormData] = useState<messageType>({ content: "" } as messageType);
const router = useRouter();
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment