Refactored api services into sep files. Client fix

Fixed hydration errors in beers/[id] by implementing timeDistanceState
This commit is contained in:
Aaron William Po
2023-01-31 22:38:13 -05:00
parent 0b96c8f1f5
commit 5cf2087cd1
29 changed files with 380 additions and 430 deletions

View File

@@ -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>
); );

View File

@@ -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);

View File

@@ -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">

View File

@@ -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>

View File

@@ -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

View File

@@ -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 (

View File

@@ -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

File diff suppressed because it is too large Load Diff

View File

@@ -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"

View File

@@ -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) {

View File

@@ -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({
const newBeerPost = await DBClient.instance.beerPost.create({
data: {
name, name,
description, description,
abv, abv,
ibu, ibu,
type: { typeId,
connect: { breweryId,
id: typeId,
},
},
postedBy: {
connect: {
id: user.id,
},
},
brewery: {
connect: {
id: breweryId,
},
},
},
}); });
res.status(201).json({ res.status(201).json({

View File

@@ -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)),

View File

@@ -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[];

View File

@@ -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;

View File

@@ -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;

View File

@@ -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';

View 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;

View File

@@ -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,

View 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>;

View 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;

View File

@@ -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;

View File

@@ -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;

View File

@@ -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 },
},
}, },
}); });

View File

@@ -1,13 +0,0 @@
interface BeerCommentQueryResult {
id: string;
content: string;
rating: number;
createdAt: Date;
postedBy: {
id: string;
createdAt: Date;
username: string;
};
}
export default BeerCommentQueryResult;

View File

@@ -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%)',
},
},
],
}, },
}; };