Refactored api services into sep files. Client fix

Fixed hydration errors in beers/[id] by implementing timeDistanceState

components/BeerById/BeerCommentForm.tsx

@@ -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 { 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 {
   beerPost: BeerPostQueryResult;
-  setComments: Dispatch<SetStateAction<BeerCommentQueryResult[]>>;
+  setComments: Dispatch<SetStateAction<BeerCommentQueryResultArrayT>>;
 }
 
-const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({
-  beerPost,
-  setComments,
-}) => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    reset,
-    setValue,
-  } = useForm<z.infer<typeof BeerCommentValidationSchema>>({
+const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({ beerPost }) => {
+  const { register, handleSubmit, formState, reset, setValue } = useForm<
+    z.infer<typeof BeerCommentValidationSchema>
+  >({
     defaultValues: {
       beerPostId: beerPost.id,
       rating: 0,
@@ -38,22 +32,31 @@ const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({
     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 (
     data,
   ) => {
     setValue('rating', 0);
+    setRating(0);
     await sendCreateBeerCommentRequest(data);
-    setComments((prev) => prev);
     reset();
+    router.replace(router.asPath, undefined, { scroll: false });
   };
 
+  const { errors } = formState;
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <FormInfo>
         <FormLabel htmlFor="content">Leave a comment</FormLabel>
         <FormError>{errors.content?.message}</FormError>
       </FormInfo>
-
       <FormSegment>
         <FormTextArea
           id="content"
@@ -63,20 +66,23 @@ const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({
           error={!!errors.content?.message}
         />
       </FormSegment>
-
       <FormInfo>
         <FormLabel htmlFor="rating">Rating</FormLabel>
         <FormError>{errors.rating?.message}</FormError>
       </FormInfo>
-      <ReactStars
-        id="rating"
-        count={5}
-        size={34}
-        activeColor="#ffd700"
-        edit={true}
-        value={0}
-        onChange={(value: 1 | 2 | 3 | 4 | 5) => setValue('rating', value)}
-      />
+      <Rating
+        value={rating}
+        onChange={(value) => {
+          setRating(value);
+          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>
     </form>
   );

components/BeerById/BeerInfoHeader.tsx

@@ -1,13 +1,17 @@
-import BeerPostQueryResult from '@/services/BeerPost/types/BeerPostQueryResult';
 import Link from 'next/link';
 import formatDistanceStrict from 'date-fns/formatDistanceStrict';
 import format from 'date-fns/format';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FaRegThumbsUp, FaThumbsUp } from 'react-icons/fa';
+import BeerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
 
 const BeerInfoHeader: React.FC<{ beerPost: BeerPostQueryResult }> = ({ beerPost }) => {
   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);
 

components/BeerById/BeerRecommendations.tsx

@@ -1,6 +1,6 @@
-import { FunctionComponent } from 'react';
+import BeerRecommendationQueryResult from '@/services/BeerPost/schema/BeerReccomendationQueryResult';
 import Link from 'next/link';
-import BeerRecommendationQueryResult from '@/services/BeerPost/types/BeerReccomendationQueryResult';
+import { FunctionComponent } from 'react';
 
 interface BeerRecommendationsProps {
   beerRecommendations: BeerRecommendationQueryResult[];
@@ -14,7 +14,7 @@ const BeerRecommendations: FunctionComponent<BeerRecommendationsProps> = ({
         {beerRecommendations.map((beerPost) => (
           <div key={beerPost.id} className="w-full">
             <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>
               </Link>
               <Link href={`/breweries/${beerPost.brewery.id}`} className="link-hover">

components/BeerById/CommentCard.tsx

@@ -1,26 +1,35 @@
-import BeerCommentQueryResult from '@/services/BeerPost/types/BeerCommentQueryResult';
-import formatDistanceStrict from 'date-fns/formatDistanceStrict';
-// @ts-expect-error
-import ReactStars from 'react-rating-stars-component';
+import { BeerCommentQueryResultT } from '@/services/BeerComment/schema/BeerCommentQueryResult';
+import { formatDistanceStrict } from 'date-fns';
+import { useEffect, useState } from 'react';
+import { Rating } from 'react-daisyui';
 
 const CommentCard: React.FC<{
-  comment: BeerCommentQueryResult;
+  comment: BeerCommentQueryResultT;
 }> = ({ 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 (
-    <div className="card-body h-56">
+    <div className="card-body h-[1/9]">
       <div className="flex justify-between">
         <div>
           <h3 className="text-2xl font-semibold">{comment.postedBy.username}</h3>
           <h4 className="italic">posted {timeDistance} ago</h4>
         </div>
-        <ReactStars
-          count={5}
-          size={24}
-          activeColor="#ffd700"
-          edit={false}
-          value={comment.rating}
-        />
+        <Rating value={comment.rating}>
+          {Array.from({ length: 5 }).map((val, index) => (
+            <Rating.Item
+              name="rating-1"
+              className="mask mask-star cursor-default"
+              disabled
+              aria-disabled
+              key={index}
+            />
+          ))}
+        </Rating>
       </div>
       <p>{comment.content}</p>
     </div>

components/BeerForm.tsx

@@ -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 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 FormError from './ui/forms/FormError';
 import FormInfo from './ui/forms/FormInfo';
@@ -52,7 +51,7 @@ const BeerForm: FunctionComponent<BeerFormProps> = ({
       case 'create': {
         try {
           const response = await sendCreateBeerPostRequest(data);
-          Router.push(`/beers/${response.id}`);
+          router.push(`/beers/${response.id}`);
           break;
         } catch (e) {
           // eslint-disable-next-line no-console

components/BeerIndex/BeerCard.tsx

@@ -1,7 +1,7 @@
-import BeerPostQueryResult from '@/services/BeerPost/types/BeerPostQueryResult';
 import Link from 'next/link';
 import { FC } from 'react';
 import Image from 'next/image';
+import BeerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
 
 const BeerCard: FC<{ post: BeerPostQueryResult }> = ({ post }) => {
   return (

components/ui/Navbar.tsx

@@ -24,10 +24,10 @@ const Navbar = () => {
   ];
 
   return (
-    <nav className="navbar bg-base-300">
+    <nav className="navbar bg-primary">
       <div className="flex-1">
         <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>
       </div>
       <div className="hidden flex-none lg:block">