mirror of
https://github.com/aaronpo97/the-biergarten-app.git
synced 2026-02-16 10:42:08 +00:00
Refactored api services into sep files. Client fix
Fixed hydration errors in beers/[id] by implementing timeDistanceState
This commit is contained in:
@@ -1,36 +1,30 @@
|
|||||||
import BeerPostQueryResult from '@/services/BeerPost/types/BeerPostQueryResult';
|
|
||||||
import { Dispatch, FunctionComponent, SetStateAction } from 'react';
|
|
||||||
import { z } from 'zod';
|
|
||||||
import FormLabel from '@/components/ui/forms/FormLabel';
|
|
||||||
import FormError from '@/components/ui/forms/FormError';
|
|
||||||
import FormTextArea from '@/components/ui/forms/FormTextArea';
|
|
||||||
import { SubmitHandler, useForm } from 'react-hook-form';
|
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
|
||||||
import Button from '@/components/ui/forms/Button';
|
|
||||||
import FormInfo from '@/components/ui/forms/FormInfo';
|
|
||||||
// @ts-expect-error
|
|
||||||
import ReactStars from 'react-rating-stars-component';
|
|
||||||
import FormSegment from '@/components/ui/forms/FormSegment';
|
|
||||||
import BeerCommentQueryResult from '@/services/BeerPost/types/BeerCommentQueryResult';
|
|
||||||
import BeerCommentValidationSchema from '@/validation/CreateBeerCommentValidationSchema';
|
|
||||||
import sendCreateBeerCommentRequest from '@/requests/sendCreateBeerCommentRequest';
|
import sendCreateBeerCommentRequest from '@/requests/sendCreateBeerCommentRequest';
|
||||||
|
import { BeerCommentQueryResultArrayT } from '@/services/BeerComment/schema/BeerCommentQueryResult';
|
||||||
|
import BeerCommentValidationSchema from '@/services/BeerComment/schema/CreateBeerCommentValidationSchema';
|
||||||
|
import BeerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { useRouter } from 'next/router';
|
||||||
|
import { Dispatch, SetStateAction, FunctionComponent, useState, useEffect } from 'react';
|
||||||
|
import { Rating } from 'react-daisyui';
|
||||||
|
import { useForm, SubmitHandler } from 'react-hook-form';
|
||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
|
import Button from '../ui/forms/Button';
|
||||||
|
import FormError from '../ui/forms/FormError';
|
||||||
|
import FormInfo from '../ui/forms/FormInfo';
|
||||||
|
import FormLabel from '../ui/forms/FormLabel';
|
||||||
|
import FormSegment from '../ui/forms/FormSegment';
|
||||||
|
import FormTextArea from '../ui/forms/FormTextArea';
|
||||||
|
|
||||||
interface BeerCommentFormProps {
|
interface BeerCommentFormProps {
|
||||||
beerPost: BeerPostQueryResult;
|
beerPost: BeerPostQueryResult;
|
||||||
setComments: Dispatch<SetStateAction<BeerCommentQueryResult[]>>;
|
setComments: Dispatch<SetStateAction<BeerCommentQueryResultArrayT>>;
|
||||||
}
|
}
|
||||||
|
|
||||||
const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({
|
const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({ beerPost }) => {
|
||||||
beerPost,
|
const { register, handleSubmit, formState, reset, setValue } = useForm<
|
||||||
setComments,
|
z.infer<typeof BeerCommentValidationSchema>
|
||||||
}) => {
|
>({
|
||||||
const {
|
|
||||||
register,
|
|
||||||
handleSubmit,
|
|
||||||
formState: { errors },
|
|
||||||
reset,
|
|
||||||
setValue,
|
|
||||||
} = useForm<z.infer<typeof BeerCommentValidationSchema>>({
|
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
beerPostId: beerPost.id,
|
beerPostId: beerPost.id,
|
||||||
rating: 0,
|
rating: 0,
|
||||||
@@ -38,22 +32,31 @@ const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({
|
|||||||
resolver: zodResolver(BeerCommentValidationSchema),
|
resolver: zodResolver(BeerCommentValidationSchema),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const [rating, setRating] = useState(0);
|
||||||
|
useEffect(() => {
|
||||||
|
setRating(0);
|
||||||
|
reset({ beerPostId: beerPost.id, rating: 0, content: '' });
|
||||||
|
}, [beerPost.id, reset]);
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
const onSubmit: SubmitHandler<z.infer<typeof BeerCommentValidationSchema>> = async (
|
const onSubmit: SubmitHandler<z.infer<typeof BeerCommentValidationSchema>> = async (
|
||||||
data,
|
data,
|
||||||
) => {
|
) => {
|
||||||
setValue('rating', 0);
|
setValue('rating', 0);
|
||||||
|
setRating(0);
|
||||||
await sendCreateBeerCommentRequest(data);
|
await sendCreateBeerCommentRequest(data);
|
||||||
setComments((prev) => prev);
|
|
||||||
reset();
|
reset();
|
||||||
|
router.replace(router.asPath, undefined, { scroll: false });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const { errors } = formState;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
<form onSubmit={handleSubmit(onSubmit)}>
|
||||||
<FormInfo>
|
<FormInfo>
|
||||||
<FormLabel htmlFor="content">Leave a comment</FormLabel>
|
<FormLabel htmlFor="content">Leave a comment</FormLabel>
|
||||||
<FormError>{errors.content?.message}</FormError>
|
<FormError>{errors.content?.message}</FormError>
|
||||||
</FormInfo>
|
</FormInfo>
|
||||||
|
|
||||||
<FormSegment>
|
<FormSegment>
|
||||||
<FormTextArea
|
<FormTextArea
|
||||||
id="content"
|
id="content"
|
||||||
@@ -63,20 +66,23 @@ const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({
|
|||||||
error={!!errors.content?.message}
|
error={!!errors.content?.message}
|
||||||
/>
|
/>
|
||||||
</FormSegment>
|
</FormSegment>
|
||||||
|
|
||||||
<FormInfo>
|
<FormInfo>
|
||||||
<FormLabel htmlFor="rating">Rating</FormLabel>
|
<FormLabel htmlFor="rating">Rating</FormLabel>
|
||||||
<FormError>{errors.rating?.message}</FormError>
|
<FormError>{errors.rating?.message}</FormError>
|
||||||
</FormInfo>
|
</FormInfo>
|
||||||
<ReactStars
|
<Rating
|
||||||
id="rating"
|
value={rating}
|
||||||
count={5}
|
onChange={(value) => {
|
||||||
size={34}
|
setRating(value);
|
||||||
activeColor="#ffd700"
|
setValue('rating', value);
|
||||||
edit={true}
|
}}
|
||||||
value={0}
|
>
|
||||||
onChange={(value: 1 | 2 | 3 | 4 | 5) => setValue('rating', value)}
|
<Rating.Item name="rating-1" className="mask mask-star" />
|
||||||
/>
|
<Rating.Item name="rating-1" className="mask mask-star" />
|
||||||
|
<Rating.Item name="rating-1" className="mask mask-star" />
|
||||||
|
<Rating.Item name="rating-1" className="mask mask-star" />
|
||||||
|
<Rating.Item name="rating-1" className="mask mask-star" />
|
||||||
|
</Rating>
|
||||||
<Button type="submit">Submit</Button>
|
<Button type="submit">Submit</Button>
|
||||||
</form>
|
</form>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,13 +1,17 @@
|
|||||||
import BeerPostQueryResult from '@/services/BeerPost/types/BeerPostQueryResult';
|
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import formatDistanceStrict from 'date-fns/formatDistanceStrict';
|
import formatDistanceStrict from 'date-fns/formatDistanceStrict';
|
||||||
import format from 'date-fns/format';
|
import format from 'date-fns/format';
|
||||||
import { useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import { FaRegThumbsUp, FaThumbsUp } from 'react-icons/fa';
|
import { FaRegThumbsUp, FaThumbsUp } from 'react-icons/fa';
|
||||||
|
import BeerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
|
||||||
|
|
||||||
const BeerInfoHeader: React.FC<{ beerPost: BeerPostQueryResult }> = ({ beerPost }) => {
|
const BeerInfoHeader: React.FC<{ beerPost: BeerPostQueryResult }> = ({ beerPost }) => {
|
||||||
const createdAtDate = new Date(beerPost.createdAt);
|
const createdAtDate = new Date(beerPost.createdAt);
|
||||||
const timeDistance = formatDistanceStrict(createdAtDate, Date.now());
|
const [timeDistance, setTimeDistance] = useState('');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setTimeDistance(formatDistanceStrict(new Date(beerPost.createdAt), new Date()));
|
||||||
|
}, [beerPost.createdAt]);
|
||||||
|
|
||||||
const [isLiked, setIsLiked] = useState(false);
|
const [isLiked, setIsLiked] = useState(false);
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { FunctionComponent } from 'react';
|
import BeerRecommendationQueryResult from '@/services/BeerPost/schema/BeerReccomendationQueryResult';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import BeerRecommendationQueryResult from '@/services/BeerPost/types/BeerReccomendationQueryResult';
|
import { FunctionComponent } from 'react';
|
||||||
|
|
||||||
interface BeerRecommendationsProps {
|
interface BeerRecommendationsProps {
|
||||||
beerRecommendations: BeerRecommendationQueryResult[];
|
beerRecommendations: BeerRecommendationQueryResult[];
|
||||||
@@ -14,7 +14,7 @@ const BeerRecommendations: FunctionComponent<BeerRecommendationsProps> = ({
|
|||||||
{beerRecommendations.map((beerPost) => (
|
{beerRecommendations.map((beerPost) => (
|
||||||
<div key={beerPost.id} className="w-full">
|
<div key={beerPost.id} className="w-full">
|
||||||
<div>
|
<div>
|
||||||
<Link href={`/beers/${beerPost.id}`} className="link-hover">
|
<Link className="link-hover" href={`/beers/${beerPost.id}`} scroll={false}>
|
||||||
<h2 className="text-2xl font-bold">{beerPost.name}</h2>
|
<h2 className="text-2xl font-bold">{beerPost.name}</h2>
|
||||||
</Link>
|
</Link>
|
||||||
<Link href={`/breweries/${beerPost.brewery.id}`} className="link-hover">
|
<Link href={`/breweries/${beerPost.brewery.id}`} className="link-hover">
|
||||||
|
|||||||
@@ -1,26 +1,35 @@
|
|||||||
import BeerCommentQueryResult from '@/services/BeerPost/types/BeerCommentQueryResult';
|
import { BeerCommentQueryResultT } from '@/services/BeerComment/schema/BeerCommentQueryResult';
|
||||||
import formatDistanceStrict from 'date-fns/formatDistanceStrict';
|
import { formatDistanceStrict } from 'date-fns';
|
||||||
// @ts-expect-error
|
import { useEffect, useState } from 'react';
|
||||||
import ReactStars from 'react-rating-stars-component';
|
import { Rating } from 'react-daisyui';
|
||||||
|
|
||||||
const CommentCard: React.FC<{
|
const CommentCard: React.FC<{
|
||||||
comment: BeerCommentQueryResult;
|
comment: BeerCommentQueryResultT;
|
||||||
}> = ({ comment }) => {
|
}> = ({ comment }) => {
|
||||||
const timeDistance = formatDistanceStrict(new Date(comment.createdAt), new Date());
|
const [timeDistance, setTimeDistance] = useState('');
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setTimeDistance(formatDistanceStrict(new Date(comment.createdAt), new Date()));
|
||||||
|
}, [comment.createdAt]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="card-body h-56">
|
<div className="card-body h-[1/9]">
|
||||||
<div className="flex justify-between">
|
<div className="flex justify-between">
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-2xl font-semibold">{comment.postedBy.username}</h3>
|
<h3 className="text-2xl font-semibold">{comment.postedBy.username}</h3>
|
||||||
<h4 className="italic">posted {timeDistance} ago</h4>
|
<h4 className="italic">posted {timeDistance} ago</h4>
|
||||||
</div>
|
</div>
|
||||||
<ReactStars
|
<Rating value={comment.rating}>
|
||||||
count={5}
|
{Array.from({ length: 5 }).map((val, index) => (
|
||||||
size={24}
|
<Rating.Item
|
||||||
activeColor="#ffd700"
|
name="rating-1"
|
||||||
edit={false}
|
className="mask mask-star cursor-default"
|
||||||
value={comment.rating}
|
disabled
|
||||||
/>
|
aria-disabled
|
||||||
|
key={index}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Rating>
|
||||||
</div>
|
</div>
|
||||||
<p>{comment.content}</p>
|
<p>{comment.content}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,13 +1,12 @@
|
|||||||
import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
|
|
||||||
import { BeerType } from '@prisma/client';
|
|
||||||
|
|
||||||
import { FunctionComponent } from 'react';
|
|
||||||
import { SubmitHandler, useForm } from 'react-hook-form';
|
|
||||||
import { z } from 'zod';
|
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
|
||||||
import BeerPostValidationSchema from '@/validation/CreateBeerPostValidationSchema';
|
|
||||||
import Router from 'next/router';
|
|
||||||
import sendCreateBeerPostRequest from '@/requests/sendCreateBeerPostRequest';
|
import sendCreateBeerPostRequest from '@/requests/sendCreateBeerPostRequest';
|
||||||
|
import BeerPostValidationSchema from '@/services/BeerPost/schema/CreateBeerPostValidationSchema';
|
||||||
|
import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
|
||||||
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
|
import { BeerType } from '@prisma/client';
|
||||||
|
import router from 'next/router';
|
||||||
|
import { FunctionComponent } from 'react';
|
||||||
|
import { useForm, SubmitHandler } from 'react-hook-form';
|
||||||
|
import { z } from 'zod';
|
||||||
import Button from './ui/forms/Button';
|
import Button from './ui/forms/Button';
|
||||||
import FormError from './ui/forms/FormError';
|
import FormError from './ui/forms/FormError';
|
||||||
import FormInfo from './ui/forms/FormInfo';
|
import FormInfo from './ui/forms/FormInfo';
|
||||||
@@ -52,7 +51,7 @@ const BeerForm: FunctionComponent<BeerFormProps> = ({
|
|||||||
case 'create': {
|
case 'create': {
|
||||||
try {
|
try {
|
||||||
const response = await sendCreateBeerPostRequest(data);
|
const response = await sendCreateBeerPostRequest(data);
|
||||||
Router.push(`/beers/${response.id}`);
|
router.push(`/beers/${response.id}`);
|
||||||
break;
|
break;
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
// eslint-disable-next-line no-console
|
// eslint-disable-next-line no-console
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import BeerPostQueryResult from '@/services/BeerPost/types/BeerPostQueryResult';
|
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import { FC } from 'react';
|
import { FC } from 'react';
|
||||||
import Image from 'next/image';
|
import Image from 'next/image';
|
||||||
|
import BeerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
|
||||||
|
|
||||||
const BeerCard: FC<{ post: BeerPostQueryResult }> = ({ post }) => {
|
const BeerCard: FC<{ post: BeerPostQueryResult }> = ({ post }) => {
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -24,10 +24,10 @@ const Navbar = () => {
|
|||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<nav className="navbar bg-base-300">
|
<nav className="navbar bg-primary">
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<Link className="btn-ghost btn text-3xl normal-case" href="/">
|
<Link className="btn-ghost btn text-3xl normal-case" href="/">
|
||||||
<span className="cursor-pointer text-xl font-bold">Aaron William Po</span>
|
<span className="cursor-pointer text-xl font-bold">The Biergarten App</span>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div className="hidden flex-none lg:block">
|
<div className="hidden flex-none lg:block">
|
||||||
|
|||||||
332
package-lock.json
generated
332
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
11
package.json
11
package.json
@@ -18,34 +18,35 @@
|
|||||||
"@prisma/client": "^4.8.1",
|
"@prisma/client": "^4.8.1",
|
||||||
"date-fns": "^2.29.3",
|
"date-fns": "^2.29.3",
|
||||||
"next": "13.1.2",
|
"next": "13.1.2",
|
||||||
"pino-pretty": "^9.1.1",
|
|
||||||
"pino": "^8.8.0",
|
"pino": "^8.8.0",
|
||||||
|
"pino-pretty": "^9.1.1",
|
||||||
|
"react": "18.2.0",
|
||||||
|
"react-daisyui": "^3.0.2",
|
||||||
"react-dom": "18.2.0",
|
"react-dom": "18.2.0",
|
||||||
"react-hook-form": "^7.42.1",
|
"react-hook-form": "^7.42.1",
|
||||||
"react-icons": "^4.7.1",
|
"react-icons": "^4.7.1",
|
||||||
"react-rating-stars-component": "^2.2.0",
|
"react-rating-stars-component": "^2.2.0",
|
||||||
"react": "18.2.0",
|
|
||||||
"typescript": "4.9.4",
|
"typescript": "4.9.4",
|
||||||
"zod": "^3.20.2"
|
"zod": "^3.20.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@faker-js/faker": "^7.6.0",
|
"@faker-js/faker": "^7.6.0",
|
||||||
"@types/node": "18.11.18",
|
"@types/node": "18.11.18",
|
||||||
"@types/react-dom": "18.0.10",
|
|
||||||
"@types/react": "18.0.26",
|
"@types/react": "18.0.26",
|
||||||
|
"@types/react-dom": "18.0.10",
|
||||||
"autoprefixer": "^10.4.13",
|
"autoprefixer": "^10.4.13",
|
||||||
"daisyui": "^2.47.0",
|
"daisyui": "^2.47.0",
|
||||||
"dotenv-cli": "^6.0.0",
|
"dotenv-cli": "^6.0.0",
|
||||||
|
"eslint": "8.32.0",
|
||||||
"eslint-config-airbnb-base": "15.0.0",
|
"eslint-config-airbnb-base": "15.0.0",
|
||||||
"eslint-config-airbnb-typescript": "17.0.0",
|
"eslint-config-airbnb-typescript": "17.0.0",
|
||||||
"eslint-config-next": "^13.0.7",
|
"eslint-config-next": "^13.0.7",
|
||||||
"eslint-config-prettier": "^8.3.0",
|
"eslint-config-prettier": "^8.3.0",
|
||||||
"eslint-plugin-react": "^7.31.11",
|
"eslint-plugin-react": "^7.31.11",
|
||||||
"eslint": "8.32.0",
|
|
||||||
"postcss": "^8.4.21",
|
"postcss": "^8.4.21",
|
||||||
|
"prettier": "^2.8.1",
|
||||||
"prettier-plugin-jsdoc": "^0.4.2",
|
"prettier-plugin-jsdoc": "^0.4.2",
|
||||||
"prettier-plugin-tailwindcss": "^0.2.1",
|
"prettier-plugin-tailwindcss": "^0.2.1",
|
||||||
"prettier": "^2.8.1",
|
|
||||||
"prisma": "^4.8.1",
|
"prisma": "^4.8.1",
|
||||||
"tailwindcss": "^3.2.4",
|
"tailwindcss": "^3.2.4",
|
||||||
"ts-node": "^10.9.1"
|
"ts-node": "^10.9.1"
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
import DBClient from '@/prisma/DBClient';
|
|
||||||
import { NextApiHandler } from 'next';
|
|
||||||
|
|
||||||
import { z } from 'zod';
|
|
||||||
import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
|
|
||||||
import ServerError from '@/config/util/ServerError';
|
import ServerError from '@/config/util/ServerError';
|
||||||
import BeerCommentValidationSchema from '@/validation/CreateBeerCommentValidationSchema';
|
import createNewBeerComment from '@/services/BeerComment/createNewBeerComment';
|
||||||
|
import { BeerCommentQueryResultT } from '@/services/BeerComment/schema/BeerCommentQueryResult';
|
||||||
|
import BeerCommentValidationSchema from '@/services/BeerComment/schema/CreateBeerCommentValidationSchema';
|
||||||
|
import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
|
||||||
|
import { NextApiHandler } from 'next';
|
||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
const handler: NextApiHandler<z.infer<typeof APIResponseValidationSchema>> = async (
|
const handler: NextApiHandler<z.infer<typeof APIResponseValidationSchema>> = async (
|
||||||
req,
|
req,
|
||||||
@@ -21,35 +21,18 @@ const handler: NextApiHandler<z.infer<typeof APIResponseValidationSchema>> = asy
|
|||||||
if (!cleanedReqBody.success) {
|
if (!cleanedReqBody.success) {
|
||||||
throw new ServerError('Invalid request body', 400);
|
throw new ServerError('Invalid request body', 400);
|
||||||
}
|
}
|
||||||
|
|
||||||
const user = await DBClient.instance.user.findFirstOrThrow();
|
|
||||||
|
|
||||||
const { content, rating, beerPostId } = cleanedReqBody.data;
|
const { content, rating, beerPostId } = cleanedReqBody.data;
|
||||||
const newBeerComment = await DBClient.instance.beerComment.create({
|
|
||||||
data: {
|
const newBeerComment: BeerCommentQueryResultT = await createNewBeerComment({
|
||||||
content,
|
content,
|
||||||
rating,
|
rating,
|
||||||
beerPost: { connect: { id: beerPostId } },
|
beerPostId,
|
||||||
postedBy: { connect: { id: user.id } },
|
|
||||||
},
|
|
||||||
select: {
|
|
||||||
id: true,
|
|
||||||
content: true,
|
|
||||||
rating: true,
|
|
||||||
postedBy: {
|
|
||||||
select: {
|
|
||||||
id: true,
|
|
||||||
username: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
createdAt: true,
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
res.status(201).json({
|
res.status(201).json({
|
||||||
message: 'Beer comment created successfully',
|
message: 'Beer comment created successfully',
|
||||||
statusCode: 201,
|
statusCode: 201,
|
||||||
payload: newBeerComment.id,
|
payload: newBeerComment,
|
||||||
success: true,
|
success: true,
|
||||||
});
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
|||||||
@@ -1,10 +1,9 @@
|
|||||||
import BeerPostValidationSchema from '@/validation/CreateBeerPostValidationSchema';
|
|
||||||
import DBClient from '@/prisma/DBClient';
|
|
||||||
import { NextApiHandler } from 'next';
|
|
||||||
|
|
||||||
import { z } from 'zod';
|
|
||||||
import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
|
|
||||||
import ServerError from '@/config/util/ServerError';
|
import ServerError from '@/config/util/ServerError';
|
||||||
|
import createNewBeerPost from '@/services/BeerPost/createNewBeerPost';
|
||||||
|
import BeerPostValidationSchema from '@/services/BeerPost/schema/CreateBeerPostValidationSchema';
|
||||||
|
import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
|
||||||
|
import { NextApiHandler } from 'next';
|
||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
const handler: NextApiHandler<z.infer<typeof APIResponseValidationSchema>> = async (
|
const handler: NextApiHandler<z.infer<typeof APIResponseValidationSchema>> = async (
|
||||||
req,
|
req,
|
||||||
@@ -23,30 +22,13 @@ const handler: NextApiHandler<z.infer<typeof APIResponseValidationSchema>> = asy
|
|||||||
}
|
}
|
||||||
|
|
||||||
const { name, description, typeId, abv, ibu, breweryId } = cleanedReqBody.data;
|
const { name, description, typeId, abv, ibu, breweryId } = cleanedReqBody.data;
|
||||||
const user = await DBClient.instance.user.findFirstOrThrow();
|
const newBeerPost = await createNewBeerPost({
|
||||||
|
name,
|
||||||
const newBeerPost = await DBClient.instance.beerPost.create({
|
description,
|
||||||
data: {
|
abv,
|
||||||
name,
|
ibu,
|
||||||
description,
|
typeId,
|
||||||
abv,
|
breweryId,
|
||||||
ibu,
|
|
||||||
type: {
|
|
||||||
connect: {
|
|
||||||
id: typeId,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
postedBy: {
|
|
||||||
connect: {
|
|
||||||
id: user.id,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
brewery: {
|
|
||||||
connect: {
|
|
||||||
id: breweryId,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
res.status(201).json({
|
res.status(201).json({
|
||||||
|
|||||||
@@ -1,20 +1,19 @@
|
|||||||
import { GetServerSideProps, NextPage } from 'next';
|
import BeerCommentForm from '@/components/BeerById/BeerCommentForm';
|
||||||
import BeerPostQueryResult from '@/services/BeerPost/types/BeerPostQueryResult';
|
|
||||||
import getBeerPostById from '@/services/BeerPost/getBeerPostById';
|
|
||||||
import Layout from '@/components/ui/Layout';
|
|
||||||
import Head from 'next/head';
|
|
||||||
|
|
||||||
import Image from 'next/image';
|
|
||||||
import BeerInfoHeader from '@/components/BeerById/BeerInfoHeader';
|
import BeerInfoHeader from '@/components/BeerById/BeerInfoHeader';
|
||||||
|
import BeerRecommendations from '@/components/BeerById/BeerRecommendations';
|
||||||
import CommentCard from '@/components/BeerById/CommentCard';
|
import CommentCard from '@/components/BeerById/CommentCard';
|
||||||
import { useState } from 'react';
|
import Layout from '@/components/ui/Layout';
|
||||||
|
import getAllBeerComments from '@/services/BeerComment/getAllBeerComments';
|
||||||
|
import { BeerCommentQueryResultArrayT } from '@/services/BeerComment/schema/BeerCommentQueryResult';
|
||||||
|
import getBeerPostById from '@/services/BeerPost/getBeerPostById';
|
||||||
|
import getBeerRecommendations from '@/services/BeerPost/getBeerRecommendations';
|
||||||
|
import BeerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
|
||||||
import { BeerPost } from '@prisma/client';
|
import { BeerPost } from '@prisma/client';
|
||||||
import BeerCommentQueryResult from '@/services/BeerPost/types/BeerCommentQueryResult';
|
import { NextPage, GetServerSideProps } from 'next';
|
||||||
import BeerCommentForm from '../../components/BeerById/BeerCommentForm';
|
import Head from 'next/head';
|
||||||
import BeerRecommendations from '../../components/BeerById/BeerRecommendations';
|
import Image from 'next/image';
|
||||||
import getBeerRecommendations from '../../services/BeerPost/getBeerRecommendations';
|
|
||||||
import getAllBeerComments from '../../services/BeerPost/getAllBeerComments';
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
interface BeerPageProps {
|
interface BeerPageProps {
|
||||||
beerPost: BeerPostQueryResult;
|
beerPost: BeerPostQueryResult;
|
||||||
@@ -29,7 +28,7 @@ interface BeerPageProps {
|
|||||||
url: string;
|
url: string;
|
||||||
}[];
|
}[];
|
||||||
})[];
|
})[];
|
||||||
beerComments: BeerCommentQueryResult[];
|
beerComments: BeerCommentQueryResultArrayT;
|
||||||
}
|
}
|
||||||
|
|
||||||
const BeerByIdPage: NextPage<BeerPageProps> = ({
|
const BeerByIdPage: NextPage<BeerPageProps> = ({
|
||||||
@@ -38,6 +37,9 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({
|
|||||||
beerComments,
|
beerComments,
|
||||||
}) => {
|
}) => {
|
||||||
const [comments, setComments] = useState(beerComments);
|
const [comments, setComments] = useState(beerComments);
|
||||||
|
useEffect(() => {
|
||||||
|
setComments(beerComments);
|
||||||
|
}, [beerComments]);
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
<Head>
|
<Head>
|
||||||
@@ -65,7 +67,7 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({
|
|||||||
<BeerCommentForm beerPost={beerPost} setComments={setComments} />
|
<BeerCommentForm beerPost={beerPost} setComments={setComments} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="card bg-base-300">
|
<div className="card h-[135rem] bg-base-300">
|
||||||
{comments.map((comment) => (
|
{comments.map((comment) => (
|
||||||
<CommentCard key={comment.id} comment={comment} />
|
<CommentCard key={comment.id} comment={comment} />
|
||||||
))}
|
))}
|
||||||
@@ -90,8 +92,11 @@ export const getServerSideProps: GetServerSideProps<BeerPageProps> = async (cont
|
|||||||
}
|
}
|
||||||
|
|
||||||
const { type, brewery, id } = beerPost;
|
const { type, brewery, id } = beerPost;
|
||||||
const beerComments = await getAllBeerComments({ id }, { pageSize: 3, pageNum: 1 });
|
const beerComments = await getAllBeerComments(
|
||||||
const beerRecommendations = await getBeerRecommendations({ type, brewery });
|
{ id: beerPost.id },
|
||||||
|
{ pageSize: 9, pageNum: 1 },
|
||||||
|
);
|
||||||
|
const beerRecommendations = await getBeerRecommendations({ type, brewery, id });
|
||||||
|
|
||||||
const props = {
|
const props = {
|
||||||
beerPost: JSON.parse(JSON.stringify(beerPost)),
|
beerPost: JSON.parse(JSON.stringify(beerPost)),
|
||||||
|
|||||||
@@ -1,12 +1,12 @@
|
|||||||
import { GetServerSideProps, NextPage } from 'next';
|
import { GetServerSideProps, NextPage } from 'next';
|
||||||
import getAllBeerPosts from '@/services/BeerPost/getAllBeerPosts';
|
import getAllBeerPosts from '@/services/BeerPost/getAllBeerPosts';
|
||||||
import BeerPostQueryResult from '@/services/BeerPost/types/BeerPostQueryResult';
|
|
||||||
|
|
||||||
import { useRouter } from 'next/router';
|
import { useRouter } from 'next/router';
|
||||||
import DBClient from '@/prisma/DBClient';
|
import DBClient from '@/prisma/DBClient';
|
||||||
import Layout from '@/components/ui/Layout';
|
import Layout from '@/components/ui/Layout';
|
||||||
import Pagination from '../../components/BeerIndex/Pagination';
|
import Pagination from '@/components/BeerIndex/Pagination';
|
||||||
import BeerCard from '../../components/BeerIndex/BeerCard';
|
import BeerCard from '@/components/BeerIndex/BeerCard';
|
||||||
|
import BeerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
|
||||||
|
|
||||||
interface BeerPageProps {
|
interface BeerPageProps {
|
||||||
initialBeerPosts: BeerPostQueryResult[];
|
initialBeerPosts: BeerPostQueryResult[];
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { GetServerSideProps, NextPage } from 'next';
|
import BeerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
|
||||||
import BeerPostQueryResult from '@/services/BeerPost/types/BeerPostQueryResult';
|
|
||||||
import getBreweryPostById from '@/services/BreweryPost/getBreweryPostById';
|
import getBreweryPostById from '@/services/BreweryPost/getBreweryPostById';
|
||||||
|
import { GetServerSideProps, NextPage } from 'next';
|
||||||
|
|
||||||
interface BreweryPageProps {
|
interface BreweryPageProps {
|
||||||
breweryPost: BeerPostQueryResult;
|
breweryPost: BeerPostQueryResult;
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
|
import { BeerCommentQueryResult } from '@/services/BeerComment/schema/BeerCommentQueryResult';
|
||||||
|
import BeerCommentValidationSchema from '@/services/BeerComment/schema/CreateBeerCommentValidationSchema';
|
||||||
|
import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
|
||||||
import { z } from 'zod';
|
import { z } from 'zod';
|
||||||
import BeerCommentValidationSchema from '../validation/CreateBeerCommentValidationSchema';
|
|
||||||
|
|
||||||
const sendCreateBeerCommentRequest = async ({
|
const sendCreateBeerCommentRequest = async ({
|
||||||
beerPostId,
|
beerPostId,
|
||||||
@@ -20,7 +22,26 @@ const sendCreateBeerCommentRequest = async ({
|
|||||||
|
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
|
|
||||||
console.log(data);
|
if (!response.ok) {
|
||||||
|
throw new Error(data.message);
|
||||||
|
}
|
||||||
|
|
||||||
|
const parsedResponse = APIResponseValidationSchema.safeParse(data);
|
||||||
|
|
||||||
|
if (!parsedResponse.success) {
|
||||||
|
console.log(parsedResponse.error);
|
||||||
|
throw new Error('Invalid API response');
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(parsedResponse);
|
||||||
|
const parsedPayload = BeerCommentQueryResult.safeParse(parsedResponse.data.payload);
|
||||||
|
|
||||||
|
if (!parsedPayload.success) {
|
||||||
|
console.log(parsedPayload.error);
|
||||||
|
throw new Error('Invalid API response payload');
|
||||||
|
}
|
||||||
|
|
||||||
|
return parsedPayload.data;
|
||||||
};
|
};
|
||||||
|
|
||||||
export default sendCreateBeerCommentRequest;
|
export default sendCreateBeerCommentRequest;
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import BeerPostValidationSchema from '@/validation/CreateBeerPostValidationSchema';
|
import BeerPostValidationSchema from '@/services/BeerPost/schema/CreateBeerPostValidationSchema';
|
||||||
import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
|
import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
|
||||||
import { z } from 'zod';
|
import { z } from 'zod';
|
||||||
|
|
||||||
|
|||||||
28
services/BeerComment/createNewBeerComment.ts
Normal file
28
services/BeerComment/createNewBeerComment.ts
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import DBClient from '@/prisma/DBClient';
|
||||||
|
import { z } from 'zod';
|
||||||
|
import BeerCommentValidationSchema from './schema/CreateBeerCommentValidationSchema';
|
||||||
|
|
||||||
|
const createNewBeerComment = async ({
|
||||||
|
content,
|
||||||
|
rating,
|
||||||
|
beerPostId,
|
||||||
|
}: z.infer<typeof BeerCommentValidationSchema>) => {
|
||||||
|
const user = await DBClient.instance.user.findFirstOrThrow();
|
||||||
|
return DBClient.instance.beerComment.create({
|
||||||
|
data: {
|
||||||
|
content,
|
||||||
|
rating,
|
||||||
|
beerPost: { connect: { id: beerPostId } },
|
||||||
|
postedBy: { connect: { id: user.id } },
|
||||||
|
},
|
||||||
|
select: {
|
||||||
|
id: true,
|
||||||
|
content: true,
|
||||||
|
rating: true,
|
||||||
|
postedBy: { select: { id: true, username: true } },
|
||||||
|
createdAt: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export default createNewBeerComment;
|
||||||
@@ -1,13 +1,13 @@
|
|||||||
import BeerCommentQueryResult from '@/services/BeerPost/types/BeerCommentQueryResult';
|
|
||||||
import DBClient from '@/prisma/DBClient';
|
import DBClient from '@/prisma/DBClient';
|
||||||
import BeerPostQueryResult from './types/BeerPostQueryResult';
|
import BeerPostQueryResult from '../BeerPost/schema/BeerPostQueryResult';
|
||||||
|
import { BeerCommentQueryResultArrayT } from './schema/BeerCommentQueryResult';
|
||||||
|
|
||||||
const getAllBeerComments = async (
|
const getAllBeerComments = async (
|
||||||
{ id }: Pick<BeerPostQueryResult, 'id'>,
|
{ id }: Pick<BeerPostQueryResult, 'id'>,
|
||||||
{ pageSize, pageNum = 0 }: { pageSize: number; pageNum?: number },
|
{ pageSize, pageNum = 0 }: { pageSize: number; pageNum?: number },
|
||||||
) => {
|
) => {
|
||||||
const skip = (pageNum - 1) * pageSize;
|
const skip = (pageNum - 1) * pageSize;
|
||||||
const beerComments: BeerCommentQueryResult[] =
|
const beerComments: BeerCommentQueryResultArrayT =
|
||||||
await DBClient.instance.beerComment.findMany({
|
await DBClient.instance.beerComment.findMany({
|
||||||
where: {
|
where: {
|
||||||
beerPostId: id,
|
beerPostId: id,
|
||||||
15
services/BeerComment/schema/BeerCommentQueryResult.ts
Normal file
15
services/BeerComment/schema/BeerCommentQueryResult.ts
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
|
export const BeerCommentQueryResult = z.object({
|
||||||
|
id: z.string().uuid(),
|
||||||
|
content: z.string().min(1).max(300),
|
||||||
|
rating: z.number().int().min(1).max(5),
|
||||||
|
createdAt: z.date().or(z.string().datetime()),
|
||||||
|
postedBy: z.object({
|
||||||
|
id: z.string().uuid(),
|
||||||
|
username: z.string().min(1).max(50),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
export const BeerCommentQueryResultArray = z.array(BeerCommentQueryResult);
|
||||||
|
export type BeerCommentQueryResultT = z.infer<typeof BeerCommentQueryResult>;
|
||||||
|
export type BeerCommentQueryResultArrayT = z.infer<typeof BeerCommentQueryResultArray>;
|
||||||
29
services/BeerPost/createNewBeerPost.ts
Normal file
29
services/BeerPost/createNewBeerPost.ts
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
import DBClient from '@/prisma/DBClient';
|
||||||
|
import { z } from 'zod';
|
||||||
|
import BeerPostValidationSchema from './schema/CreateBeerPostValidationSchema';
|
||||||
|
|
||||||
|
const createNewBeerPost = async ({
|
||||||
|
name,
|
||||||
|
description,
|
||||||
|
abv,
|
||||||
|
ibu,
|
||||||
|
typeId,
|
||||||
|
breweryId,
|
||||||
|
}: z.infer<typeof BeerPostValidationSchema>) => {
|
||||||
|
const user = await DBClient.instance.user.findFirstOrThrow();
|
||||||
|
|
||||||
|
const newBeerPost = await DBClient.instance.beerPost.create({
|
||||||
|
data: {
|
||||||
|
name,
|
||||||
|
description,
|
||||||
|
abv,
|
||||||
|
ibu,
|
||||||
|
type: { connect: { id: typeId } },
|
||||||
|
postedBy: { connect: { id: user.id } },
|
||||||
|
brewery: { connect: { id: breweryId } },
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return newBeerPost;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default createNewBeerPost;
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
import DBClient from '@/prisma/DBClient';
|
import DBClient from '@/prisma/DBClient';
|
||||||
import BeerPostQueryResult from './types/BeerPostQueryResult';
|
import BeerPostQueryResult from './schema/BeerPostQueryResult';
|
||||||
|
|
||||||
const prisma = DBClient.instance;
|
const prisma = DBClient.instance;
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import DBClient from '@/prisma/DBClient';
|
import DBClient from '@/prisma/DBClient';
|
||||||
import BeerPostQueryResult from './types/BeerPostQueryResult';
|
import BeerPostQueryResult from './schema/BeerPostQueryResult';
|
||||||
|
|
||||||
const prisma = DBClient.instance;
|
const prisma = DBClient.instance;
|
||||||
|
|
||||||
|
|||||||
@@ -1,27 +1,17 @@
|
|||||||
import BeerPostQueryResult from '@/services/BeerPost/types/BeerPostQueryResult';
|
|
||||||
import DBClient from '@/prisma/DBClient';
|
import DBClient from '@/prisma/DBClient';
|
||||||
|
import BeerPostQueryResult from './schema/BeerPostQueryResult';
|
||||||
|
|
||||||
const getBeerRecommendations = async (
|
const getBeerRecommendations = async (
|
||||||
beerPost: Pick<BeerPostQueryResult, 'type' | 'brewery'>,
|
beerPost: Pick<BeerPostQueryResult, 'type' | 'brewery' | 'id'>,
|
||||||
) => {
|
) => {
|
||||||
const beerRecommendations = await DBClient.instance.beerPost.findMany({
|
const beerRecommendations = await DBClient.instance.beerPost.findMany({
|
||||||
where: {
|
where: {
|
||||||
OR: [
|
OR: [{ typeId: beerPost.type.id }, { breweryId: beerPost.brewery.id }],
|
||||||
{
|
NOT: { id: beerPost.id },
|
||||||
typeId: beerPost.type.id,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
breweryId: beerPost.brewery.id,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
include: {
|
include: {
|
||||||
beerImages: {
|
beerImages: { select: { id: true, url: true, alt: true } },
|
||||||
select: { id: true, url: true, alt: true },
|
brewery: { select: { id: true, name: true } },
|
||||||
},
|
|
||||||
brewery: {
|
|
||||||
select: { id: true, name: true },
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -1,13 +0,0 @@
|
|||||||
interface BeerCommentQueryResult {
|
|
||||||
id: string;
|
|
||||||
content: string;
|
|
||||||
rating: number;
|
|
||||||
createdAt: Date;
|
|
||||||
postedBy: {
|
|
||||||
id: string;
|
|
||||||
createdAt: Date;
|
|
||||||
username: string;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export default BeerCommentQueryResult;
|
|
||||||
@@ -1,12 +1,35 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
|
content: [
|
||||||
|
'./pages/**/*.{js,ts,jsx,tsx}',
|
||||||
|
'./components/**/*.{js,ts,jsx,tsx}',
|
||||||
|
'node_modules/daisyui/dist/**/*.js',
|
||||||
|
'node_modules/react-daisyui/dist/**/*.js',
|
||||||
|
],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {},
|
||||||
},
|
},
|
||||||
plugins: [require('daisyui')],
|
plugins: [require('daisyui')],
|
||||||
daisyui: {
|
daisyui: {
|
||||||
logs: false,
|
logs: false,
|
||||||
themes: ['dracula'],
|
themes: [
|
||||||
|
{
|
||||||
|
default: {
|
||||||
|
primary: 'hsl(227, 46%, 25%)',
|
||||||
|
secondary: 'hsl(47, 100%, 80%)',
|
||||||
|
accent: '#fe3bd9',
|
||||||
|
neutral: '#131520',
|
||||||
|
info: '#0A7CFF',
|
||||||
|
success: '#8ACE2B',
|
||||||
|
warning: '#F9D002',
|
||||||
|
error: '#CF1259',
|
||||||
|
'primary-content': '#FAF9F6',
|
||||||
|
'error-content': '#FAF9F6',
|
||||||
|
'base-100': 'hsl(190, 4%, 15%)',
|
||||||
|
'base-200': 'hsl(190, 4%, 12%)',
|
||||||
|
'base-300': 'hsl(190, 4%, 10%)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user