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

aaaaaaaaa

parent 53b9dffd
No related branches found
No related tags found
1 merge request!27aaaaaaaaa
Pipeline #37004 failed
Stage: build
Stage: test
Hide whitespace changes
Inline Side-by-side
Showing
with 610 additions and 463 deletions
app/(content)/(gaming)/games/[gameid]/page.tsx
+ 5
− 8
View file @ afb953c8
......@@ -2,12 +2,12 @@ import AddGameToList from "@/components/addGameToList";
import { AspectRatio } from "@/components/ui/aspect-ratio";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { db } from "@/lib/db";
import { getGame } from "@/lib/igdb";
import { getCurrentUser } from "@/lib/session";
import { formatDate } from "@/lib/utils";
import { IGame } from "@/types/igdb-types";
import Image from "next/image";
import { db } from "@/lib/db";
// renders a single game detail page
export default async function GameDetail({ params }: { params: { gameid: string } }) {
......@@ -22,9 +22,6 @@ export default async function GameDetail({ params }: { params: { gameid: string
}
})
/* console.log(user) */
const companies = data[0].involved_companies.map((company) => {
if (company !== data[0].involved_companies[0]) {
return `, ${company.company.name}`
......@@ -33,9 +30,7 @@ export default async function GameDetail({ params }: { params: { gameid: string
})
return (
<div className="main-content h-full">
<Card className="w-full h-full overflow-hidden">
<div className="h-64 overflow-hidden">
<AspectRatio ratio={889 / 500}>
......@@ -85,7 +80,10 @@ export default async function GameDetail({ params }: { params: { gameid: string
</div>
</div>
<div className="px-6 md:px-12">
{/* <div className="border-b border-gray-400 dark:border-gray-200" /> */}
<div className="border-b border-gray-400 dark:border-gray-200" />
<div className="p-6 w-full flex justify-center">
{user && <AddGameToList userGameList={fullUser?.favGameList!} gameId={params.gameid} />}
</div>
{/* comments */}
</div>
</Card >
......@@ -108,7 +106,6 @@ export default async function GameDetail({ params }: { params: { gameid: string
</div>
</Card>
</div>
<AddGameToList userGameList={fullUser?.favGameList!} gameId={params.gameid} />
</div >
)
}
\ No newline at end of file
app/(content)/(home)/home/[postid]/page.tsx
+ 8
− 97
View file @ afb953c8
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;
};
// import { PostCommentForm } from "@/components/comment-gweets";
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 className="main-content px-3 pb-3">
<div className="lg:col-span-1">
{/* <PostCommentForm postid={postid} /> */}
</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 className="side-content">
<div className="flex-col">
</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
+ 8
− 33
View file @ afb953c8
import PostItem from "@/components/post-item";
import { PostMessageForm } from "@/components/post-messages";
import { Card } from "@/components/ui/card";
import { db } from "@/lib/db";
import { PostGweets } from "@/components/post-gweets";
export default async function HomePage() {
let messages = null
try {
messages = await db.post.findMany({
orderBy: {
createdAt: "desc"
},
include: {
user: true,
Comment: true,
Like: true
},
})
} catch (error) {
throw new Error("the database is not running, check your .env file")
}
return (
// <div className="main-content px-3">
<div className="relative md:gap-10 lg:grid lg:grid-cols-[1fr_240px] px-3">
<PostMessageForm />
<div className="main-content px-3 pb-3">
<div className="lg:col-span-1">
<PostGweets />
</div>
<Card className="w-full h-full overflow-hidden p-6 md:p-12">
{messages ? messages.map((msg) => (
<PostItem msg={msg} key={msg.id} />
))
:
<p>There are no messages currently</p>}
</Card>
<div className="side-content">
<div className="flex-col">
{/* <div className="side-content"> */}
<div className="hidden lg:block flex-col">
a
</div>
</div>
</div>
)
......
app/(content)/(user)/[userid]/page.tsx
+ 4
− 1
View file @ afb953c8
......@@ -21,7 +21,10 @@ export default async function User({ params }: { params: { userid: string } }) {
}
})
const favoritegames = await getFavoriteGames(fullUser?.favGameList!)
let favoritegames = undefined
if (fullUser?.favGameList?.length !== 0) {
favoritegames = await getFavoriteGames(fullUser?.favGameList!)
}
return (
<div className="main-content h-full">
......
app/api/comments/route.ts
+ 32
− 29
View file @ afb953c8
import { authOptions } from "@/lib/auth";
import { db } from "@/lib/db";
import { Prisma } from "@prisma/client";
import { getServerSession } from "next-auth/next";
import { getCurrentUser } from "@/lib/session";
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);
const user = await getCurrentUser();
if (!session) {
return NextResponse.json({ status: 401 });
if (!user) {
return NextResponse.json({ status: 401, message: 'Unauthorized' });
}
const userId = session.user.id
const data = await req.json()
console.log("router data: " + data.message, "status:")
const userId = user.id;
const content = await req.json()
try {
await db.comment.create({
data: {
message: data.message,
postId: data.postId,
message: content.gweet,
postId: content.postId,
userId: userId,
}
})
console.log("created")
const path = req.nextUrl.searchParams.get('path') || '/';
revalidatePath(path);
return NextResponse.json({ status: 201, message: 'Message Created' })
return NextResponse.json({ status: 201, message: 'Comment Created' })
} catch (error: any) {
console.log("fail" + error);
return NextResponse.json({ status: 500, message: error.message })
}
console.log("post")
}
export async function GET(req: NextRequest, res: NextResponse) {
export async function GET(req: NextRequest): Promise<NextResponse> {
const pa = req.nextUrl.searchParams;
try {
const data = await req.json()
console.log("router data: " + data, "status:")
} catch (error) {
const p = pa.get('postid')
}
if (!p) {
return NextResponse.json({ status: 400, message: 'Bad Request' })
}
try {
const messages = await db.comment.findMany({
const message = await db.post.findUnique({
where: {
id: p
},
include: {
user: true,
},
})
const comments = await db.comment.findMany({
where: {
postId: p
},
orderBy: {
createdAt: "desc"
}
})
return NextResponse.json({ status: 200, messages: messages })
return NextResponse.json(comments);
} catch (error) {
console.log("fail" + error);
// res.status(400)
return NextResponse.json(error, { status: 500 });
}
console.log("get")
}
\ No newline at end of file
app/api/gameList/route.ts
+ 1
− 4
View file @ afb953c8
......@@ -13,11 +13,9 @@ export async function PUT(req: NextRequest) {
const userId = user.id;
const data = await req.json()
data.gameId = parseInt(data.gameId)
console.log(data);
console.log(userId);
try {
if (data.add) {
console.log("add true")
await db.user.update({
where: {
id: userId
......@@ -28,7 +26,6 @@ export async function PUT(req: NextRequest) {
}
}
})
console.log("gameList updated")
} else {
const user = await db.user.findFirst({
where: {
......
app/api/messages/route.ts
+ 19
− 2
View file @ afb953c8
......@@ -13,8 +13,6 @@ export async function POST(req: NextRequest) {
const userId = user.id;
const content = await req.json()
console.log(content);
console.log(userId);
try {
await db.post.create({
data: {
......@@ -30,4 +28,23 @@ export async function POST(req: NextRequest) {
} catch (error: any) {
return NextResponse.json({ status: 500, message: error.message })
}
}
export async function GET() {
try {
const messages = await db.post.findMany({
orderBy: {
createdAt: "desc"
},
include: {
user: true,
Comment: true,
Like: true
},
})
return NextResponse.json(messages);
} catch (error) {
return NextResponse.json(error, { status: 500 });
}
}
\ No newline at end of file
components/addGameToList.tsx
+ 9
− 10
View file @ afb953c8
"use client"
import { Post, Prisma } from "@prisma/client";
import { useRouter } from "next/navigation";
import { startTransition, useEffect, useState } from "react";
import { startTransition } from "react";
import { Button } from "./ui/button";
export default function AddGameToList(props: { userGameList: Number[], gameId: string }) {
......@@ -50,25 +50,24 @@ export default function AddGameToList(props: { userGameList: Number[], gameId: s
let button = <div></div>;
try {
if (!props.userGameList.includes(parseFloat(props.gameId))) {
button = (
<form onSubmit={addGame}>
<button type="submit" className="mt-2 bg-gray-300 text-gray-800 px-4 py-2 rounded float-right">
AddGame
</button>
<Button type="submit" size="lg">
Add Game To List
</Button>
</form>
)
} else {
button = (
<form onSubmit={removeGame}>
<button type="submit" className="mt-2 bg-gray-300 text-gray-800 px-4 py-2 rounded float-right">
Remove Game
</button>
<Button type="submit" size="lg" variant={"secondary"}>
Remove Game From List
</Button>
</form>
)
}
} catch (error) {
throw new Error("Failed to fetch comments");
}
return (
......
components/comment-button.tsx deleted 100644 → 0
+ 0
− 25
View file @ 53b9dffd
"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/comment-gweets.tsx 0 → 100644
+ 172
− 0
View file @ afb953c8
// "use client"
// import { zodResolver } from "@hookform/resolvers/zod";
// import { useForm } from "react-hook-form";
// import * as z from "zod";
// import { Button } from "@/components/ui/button";
// import {
// Form,
// FormControl,
// FormDescription,
// FormField,
// FormItem,
// FormLabel,
// FormMessage,
// } from "@/components/ui/form";
// import { Textarea } from "@/components/ui/textarea";
// import { toast } from "@/components/ui/use-toast";
// import { FormEvent, Fragment, useEffect, useState } from "react";
// import CommentItem from "./comment-item";
// import { Icons } from "./icons";
// import { Card } from "./ui/card";
// import { Separator } from "./ui/separator";
// import { Skeleton } from "./ui/skeleton";
// const FormSchema = z.object({
// gweet: z
// .string()
// .min(1, { message: "Come on post something...", })
// .max(1000, { message: "Gweets cannot be more that 1000 characters.", }),
// })
// export function PostCommentForm(props: { postid: string }) {
// const [isGweetLoading, setIsGweetLoading] = useState<boolean>(false);
// const [isLoading, setIsLoading] = useState<boolean>(false);
// const [messages, setMessages] = useState<any[]>([]);
// const form = useForm<z.infer<typeof FormSchema>>({
// resolver: zodResolver(FormSchema),
// })
// async function onCommentGweet(data: z.infer<typeof FormSchema>) {
// setIsGweetLoading(true);
// await fetch('/api/comments', {
// method: 'POST',
// body: JSON.stringify(props.postid)
// })
// toast({
// title: "Your comment is being processed...",
// description: (
// <pre className="mt-2 w-[340px] rounded-md bg-slate-600 p-4">
// <code className="text-white">{JSON.stringify(data, null, 2)}</code>
// </pre>
// ),
// })
// setIsGweetLoading(false);
// form.setValue('gweet', '');
// await fetchMessages();
// }
// async function fetchMessages() {
// setIsLoading(true);
// try {
// const res = await fetch(`/api/comments?postid=${props.postid}`);
// if (!res.ok) {
// throw new Error("Failed to fetch comments");
// }
// const data = await res.json();
// setMessages(data);
// } catch (error) {
// return toast({
// variant: "destructive",
// title: "Uh oh! Something went wrong.",
// description: "Failed to fetch messages. Please try again.",
// });
// }
// setIsLoading(false);
// }
// useEffect(() => {
// fetchMessages();
// }, []);
// async function onSubmit(event: FormEvent<HTMLFormElement>) {
// event.preventDefault();
// await fetchMessages();
// }
// // console.log((messages[0] as IPost).user.image);
// return (
// <div>
// {/* <PostItem msg={(messages[0])} /> */}
// <Form {...form}>
// <form onSubmit={form.handleSubmit(onCommentGweet)} className="space-y-6">
// <FormField
// control={form.control}
// name="gweet"
// render={({ field }) => (
// <FormItem>
// <FormLabel>Comment</FormLabel>
// <FormControl>
// <Textarea
// placeholder="What's on your mind?"
// className="resize-none"
// disabled={isGweetLoading}
// {...field}
// />
// </FormControl>
// <FormDescription>
// Your comment will be public, and everyone can see them.
// </FormDescription>
// <FormMessage />
// </FormItem>
// )}
// />
// <Button type="submit" disabled={isGweetLoading}>Submit</Button>
// </form>
// </Form>
// <Card className="w-full h-full overflow-hidden p-6 md:p-12 mt-12">
// <form onSubmit={onSubmit}>
// <Button disabled={isLoading} type="submit" className="w-full mb-6">
// {isLoading && (
// <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
// )}
// Load More
// </Button>
// {messages.length > 0 ? (
// messages.map((message: any) => (
// <Fragment key={message.id}>
// <CommentItem msg={message} />
// <Separator className="mt-3 mb-6" />
// </Fragment>
// ))
// ) : (
// <>
// {Array.from({ length: 4 }, (_, i) => i + 1).map((i) => (
// <>
// <div className="flex">
// <Skeleton className="h-10 w-10 rounded-full" />
// <div className="ml-4 flex flex-col flex-grow">
// <div>
// <div className="flex items-center">
// <div className="mx-auto w-full space-y-6">
// <Skeleton className="h-[30px] w-1/4" />
// <Skeleton className="h-[20px] w-2/3" />
// <Skeleton className="h-[20px] w-full" />
// </div>
// </div>
// </div>
// </div>
// </div>
// <Separator className="mt-3 mb-6" />
// </>
// ))}
// </>
// )}
// </form>
// </Card>
// </div>
// )
// }
\ No newline at end of file
components/comment-item.tsx 0 → 100644
+ 27
− 0
View file @ afb953c8
// import { formatTimeElapsed } from "@/lib/utils";
// import { UserAvatar } from "./user-avatar";
// export default function CommentItem({ msg }: { msg: any }) {
// return (
// <div className="flex">
// <UserAvatar
// user={{ name: msg.user.username || null, image: msg.user.image || null }}
// className="h-10 w-10"
// />
// <div className="ml-4 flex flex-col flex-grow">
// <div>
// <div className="flex items-center">
// <h1 className="font-bold mr-2">{msg.user.name}</h1>
// <h1 className="text-sky-500 text-sm">
// @{msg.user.username}
// </h1>
// <h1 className="text-gray-500 text-sm ml-auto">
// {formatTimeElapsed(msg.createdAt)}
// </h1>
// </div>
// <h1>{msg.message}</h1>
// </div>
// </div>
// </div>
// )
// }
\ No newline at end of file
components/like-button.tsx deleted 100644 → 0
+ 0
− 84
View file @ 53b9dffd
"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";
type likeType = Prisma.LikeUncheckedCreateInput
type postType = Prisma.PostUncheckedCreateInput
type commentType = Prisma.CommentUncheckedCreateInput
//type commentWithLikes = Prisma.CommentGetPayload<typeof commentWithPosts>
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 postLikeData = props.data;
const likeData = {} as likeType
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',
body: JSON.stringify(likeData)
})
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()
}
return (
<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>
)
}
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-button.tsx 0 → 100644
+ 17
− 0
View file @ afb953c8
// import Link from "next/link";
// import { Icons } from "./icons";
// import { Button } from "./ui/button";
// export default function CommentButton(props: { data: any }) {
// const postid = props.data.id
// const replyCount = props.data.Comment.length
// return (
// <Link href={`/home/${postid}`}>
// <Button type="submit" variant="ghost" size="lg" className="px-6 py-3" >
// <span className="pr-1">{replyCount}</span>
// <Icons.messagecircle className="h-5 w-5" />
// </Button>
// </Link>
// )
// }
\ No newline at end of file
components/post-comment.tsx deleted 100644 → 0
+ 0
− 64
View file @ 53b9dffd
"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-gweets.tsx 0 → 100644
+ 178
− 0
View file @ afb953c8
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import * as z from "zod"
import { Button } from "@/components/ui/button"
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form"
import { Textarea } from "@/components/ui/textarea"
import { toast } from "@/components/ui/use-toast"
import { useSession } from "next-auth/react"
import { FormEvent, Fragment, useEffect, useState } from "react"
import { Icons } from "./icons"
import PostItem from "./post-item"
import { Card } from "./ui/card"
import { Separator } from "./ui/separator"
import { Skeleton } from "./ui/skeleton"
const FormSchema = z.object({
gweet: z
.string()
.min(1, { message: "Come on post something...", })
.max(1000, { message: "Gweets cannot be more that 1000 characters.", }),
})
export function PostGweets() {
const [isGweetLoading, setIsGweetLoading] = useState<boolean>(false);
const [isLoading, setIsLoading] = useState<boolean>(false);
const [messages, setMessages] = useState<any[]>([]);
const user = useSession();
useEffect(() => {
fetchMessages();
}, []);
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
})
async function onGweet(data: z.infer<typeof FormSchema>) {
setIsGweetLoading(true);
await fetch('/api/messages', {
method: 'POST',
body: JSON.stringify(data),
next: { tags: ['collection'] }
})
toast({
title: "Your gweet is being processed...",
description: (
<pre className="mt-2 w-[340px] rounded-md bg-slate-600 p-4">
<code className="text-white">{JSON.stringify(data, null, 2)}</code>
</pre>
),
})
setIsGweetLoading(false);
form.setValue('gweet', '');
await fetchMessages();
}
async function fetchMessages() {
setIsLoading(true);
try {
const res = await fetch(`/api/messages`);
if (!res.ok) {
throw new Error("Failed to fetch messages");
}
const data = await res.json();
setMessages(data);
} catch (error) {
return toast({
variant: "destructive",
title: "Uh oh! Something went wrong.",
description: "Failed to fetch messages. Please try again.",
});
}
setIsLoading(false);
}
async function onSubmit(event: FormEvent<HTMLFormElement>) {
event.preventDefault();
await fetchMessages();
}
return (
<div>
<Form {...form}>
<form onSubmit={form.handleSubmit(onGweet)} className="space-y-6">
<FormField
control={form.control}
name="gweet"
render={({ field }) => (
<FormItem>
<FormLabel>Gweet</FormLabel>
<FormControl>
<Textarea
placeholder="What's on your mind?"
className="resize-none"
disabled={isGweetLoading || !user.data?.user}
{...field}
/>
</FormControl>
<FormDescription>
Your gweets will be public, and everyone can see them.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit" disabled={isGweetLoading || !user.data?.user}>Submit</Button>
</form>
</Form>
<Card className="w-full h-full overflow-hidden p-6 md:p-12 mt-12">
<form onSubmit={onSubmit}>
<Button disabled={isLoading} type="submit" className="w-full mb-6">
{isLoading && (
<Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
)}
Load More
</Button>
{messages.length > 0 ? (
messages.map((message: any) => (
<Fragment key={message.id}>
<PostItem msg={message} />
<Separator className="mt-3 mb-6" />
</Fragment>
))
) : (
<>
{Array.from({ length: 4 }, (_, i) => i + 1).map((i) => (
<>
<div className="flex">
<Skeleton className="h-10 w-10 rounded-full" />
<div className="ml-4 flex flex-col flex-grow">
<div>
<div className="flex items-center">
<div className="mx-auto w-full space-y-6">
<Skeleton className="h-[30px] w-1/4" />
<Skeleton className="h-[20px] w-2/3" />
<Skeleton className="h-[20px] w-full" />
</div>
</div>
</div>
<div className="flex justify-end space-x-3 mt-3" >
<Skeleton key={i} className="h-10 w-20 rounded-full" />
<Skeleton key={i} className="h-10 w-20 rounded-full" />
</div>
</div>
</div>
<Separator className="mt-3 mb-6" />
</>
))}
</>
)}
</form>
</Card>
</div>
)
}
\ No newline at end of file
components/post-item.tsx
+ 22
− 23
View file @ afb953c8
import { formatDate } from "@/lib/utils";
import CommentButton from "./comment-button";
import LikeButton from "./like-button";
import { formatTimeElapsed } from "@/lib/utils";
import { IPost } from "@/types/prisma-item";
// import CommentButton from "./post-comment-button";
// import LikeButton from "./post-like-button";
import { UserAvatar } from "./user-avatar";
export default function PostItem({ msg }: { msg: any }) {
if (!msg.id) {
return <div></div>;
}
export default function PostItem({ msg }: { msg: IPost }) {
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="flex">
<UserAvatar
user={{ name: msg.user.username || null, image: msg.user.image || null }}
className="h-10 w-10"
/>
<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(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">
<h1 className="font-bold mr-2">{msg.user.name}</h1>
<h1 className="text-sky-500 text-sm">
@{msg.user.username}
</h1>
<h1 className="text-gray-500 text-sm ml-auto">
{formatTimeElapsed(msg.createdAt)}
</h1>
</div>
<h1>{msg.content}</h1>
</div>
<div className="flex justify-end" >
{/* <div className="flex justify-end" >
<LikeButton data={msg} />
<CommentButton data={msg} />
</div>
</div> */}
</div>
</div>
)
};
\ No newline at end of file
}
\ No newline at end of file
components/post-like-button.tsx 0 → 100644
+ 75
− 0
View file @ afb953c8
// "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";
// type likeType = Prisma.LikeUncheckedCreateInput
// type postType = Prisma.PostUncheckedCreateInput
// type commentType = Prisma.CommentUncheckedCreateInput
// // type commentWithLikes = Prisma.CommentGetPayload<typeof commentWithPosts>
// export default function LikeButton(props: { data: any }) {
// const router = useRouter();
// const likeCount = props.data.Like.length
// // const likeCount = countLikes(likeArray, props.data);
// async function postLike(e: any) {
// e.preventDefault()
// const postLikeData = props.data;
// const likeData = {} as likeType
// if (postLikeData.postId == undefined) {
// likeData.postId = postLikeData.id!
// } else {
// likeData.postId = postLikeData.postId
// likeData.commentId = postLikeData.id
// }
// likeData.userId = postLikeData.userId
// const response = await fetch('/api/likes', {
// method: 'PUT',
// body: JSON.stringify(likeData)
// })
// 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()
// }
// return (
// <form onSubmit={postLike}>
// <Button type="submit" variant="ghost" size="lg" className="px-6 py-3" >
// <span className="pr-1">{likeCount}</span>
// <Icons.heart className="h-5 w-5" />
// </Button>
// </form>
// )
// }
// 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-messages.tsx deleted 100644 → 0
+ 0
− 77
View file @ 53b9dffd
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import * as z from "zod"
import { Button } from "@/components/ui/button"
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form"
import { Textarea } from "@/components/ui/textarea"
import { toast } from "@/components/ui/use-toast"
const FormSchema = z.object({
gweet: z
.string()
.min(1, { message: "Come on post something...", })
.max(1000, { message: "Gweets cannot be more that 1000 characters.", }),
})
export function PostMessageForm() {
const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema),
})
async function onSubmit(data: z.infer<typeof FormSchema>) {
await fetch('/api/messages', {
method: 'POST',
body: JSON.stringify(data),
next: { tags: ['collection'] }
})
toast({
title: "Your gweet is being processed...",
description: (
<pre className="mt-2 w-[340px] rounded-md bg-slate-600 p-4">
<code className="text-white">{JSON.stringify(data, null, 2)}</code>
</pre>
),
})
}
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
<FormField
control={form.control}
name="gweet"
render={({ field }) => (
<FormItem>
<FormLabel>Gweet</FormLabel>
<FormControl>
<Textarea
placeholder="What's on your mind?"
className="resize-none"
{...field}
/>
</FormControl>
<FormDescription>
Your gweets will be public, and everyone can see them.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit">Submit</Button>
</form>
</Form>
)
}
\ No newline at end of file
components/ui/separator.tsx 0 → 100644
+ 31
− 0
View file @ afb953c8
"use client"
import * as React from "react"
import * as SeparatorPrimitive from "@radix-ui/react-separator"
import { cn } from "@/lib/utils"
const Separator = React.forwardRef<
React.ElementRef<typeof SeparatorPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
>(
(
{ className, orientation = "horizontal", decorative = true, ...props },
ref
) => (
<SeparatorPrimitive.Root
ref={ref}
decorative={decorative}
orientation={orientation}
className={cn(
"shrink-0 bg-border",
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
className
)}
{...props}
/>
)
)
Separator.displayName = SeparatorPrimitive.Root.displayName
export { Separator }
lib/igdb.ts
+ 2
− 6
View file @ afb953c8
......@@ -104,9 +104,6 @@ export async function getGame(id: number): Promise<IGame[]> {
export async function getFavoriteGames(gamelist: Number[]): Promise<IGame[]> {
const auth = await getToken();
const url = new URL(`${IGDB_BASE_URL}/games`);
let gamelistString = gamelist.toString()
console.log("ID STRING:", gamelistString)
const response = await fetch(url, {
method: 'POST',
......@@ -116,12 +113,11 @@ export async function getFavoriteGames(gamelist: Number[]): Promise<IGame[]> {
},
body:
`fields name, cover.image_id; limit ${limit};
where id = (${gamelistString});
where id = (${gamelist.toString()});
`
});
console.log(response)
if (!response.ok) {
if (!response.ok) {
throw new Error(`Error fetching games: ${response.statusText}`);
}
......
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