Skip to content
Snippets Groups Projects
Commit 5fd4276b authored by DESKTOP-9FO96TP\hehexd's avatar DESKTOP-9FO96TP\hehexd
Browse files

added (post)comment button, comment api, actual name to Posts

parent 09cbfbc4
No related branches found
No related tags found
1 merge request!23Tweet comments
Pipeline #36687 failed
Stage: build
Stage: test
Hide whitespace changes
Inline Side-by-side
app/(content)/(home)/home/[postid]/page.tsx 0 → 100644
+ 109
− 0
View file @ 5fd4276b
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 commentType = Prisma.CommentUncheckedCreateInput
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: messageType | null = null
try {
comments = await db.comment.findMany({
where: {
postId: postid
},
orderBy: {
createdAt: "desc"
},
include: {
user: true,
},
})
message = await db.post.findUnique({
where: {
id: postid
},
include: {
user: true,
Comment: 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 }: 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 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">
{/* potential Image */}
</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
− 47
View file @ 5fd4276b
import CommentButton from "@/components/comment-button";
import LikeButton from "@/components/like-button";
import PostItem from "@/components/post-item";
import MessageItem 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 +19,11 @@ export default async function HomePage() {
messages = await db.post.findMany({
orderBy: {
createdAt: "desc"
}
},
include: {
user: true,
Comment: true
},
})
} catch (error) {
......@@ -25,13 +33,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} />
{messages ?
<>
{messages.map((msg) => (
<MessageItem msg={msg} key={msg.id} />
<PostItem msg={msg} key={msg.id} />
))}
</>
......@@ -41,46 +49,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
+ 64
− 0
View file @ 5fd4276b
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: comment = await req.json()
console.log("router data: " + data.message, "status:")
try {
await db.comment.create({
/* data: data */
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
components/comment-button.tsx 0 → 100644
+ 28
− 0
View file @ 5fd4276b
"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";
type commentType = Prisma.CommentUncheckedCreateInput
type postType = Prisma.PostSelect
export default function CommentButton(props: { data: any }) {
const postid = props.data.id
const replyCount = props.data.Comment.length
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
+ 6
− 4
View file @ 5fd4276b
......@@ -7,16 +7,17 @@ import { Icons } from "./icons";
import { Button } from "./ui/button";
type likeType = Prisma.LikeUncheckedCreateInput
type postType = Prisma.PostUncheckedCreateInput
export default function LikeButton(props: { data: likeType }) {
export default function LikeButton(props: { data: any }) {
const router = useRouter();
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
likeData.userId = postLikeData.userId
likeData.postId = postLikeData.id!
const response = await fetch('http://localhost:3000/api/likes', {
method: 'PUT',
......@@ -35,6 +36,7 @@ export default function LikeButton(props: { data: likeType }) {
<div>
<form onSubmit={postLike}>
<Button type="submit" variant="ghost" size="lg" className="float-right" >
{props.data.likeCount}
<Icons.heart className="h-3 w-3" />
</Button>
</form>
......
components/post-comment.tsx 0 → 100644
+ 64
− 0
View file @ 5fd4276b
"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
+ 48
− 0
View file @ 5fd4276b
import CommentButton from "./comment-button";
import LikeButton from "./like-button";
type messageType = any // Prisma.PostUncheckedCreateInput
type messageItemProps = {
msg: messageType;
};
export default function PostItem({ 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 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">
{/* potential Image */}
</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
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