Work on brewery page, refactors

Refactor query types to explicitly use z.infer

components/BeerById/BeerCommentForm.tsx

@@ -1,6 +1,6 @@
 import sendCreateBeerCommentRequest from '@/requests/sendCreateBeerCommentRequest';
 import BeerCommentValidationSchema from '@/services/BeerComment/schema/CreateBeerCommentValidationSchema';
-import { BeerPostQueryResult } from '@/services/BeerPost/schema/BeerPostQueryResult';
+import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter } from 'next/router';
 import { FunctionComponent, useState, useEffect } from 'react';
@@ -16,7 +16,7 @@ import FormSegment from '../ui/forms/FormSegment';
 import FormTextArea from '../ui/forms/FormTextArea';
 
 interface BeerCommentFormProps {
-  beerPost: BeerPostQueryResult;
+  beerPost: z.infer<typeof beerPostQueryResult>;
 }
 
 const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({ beerPost }) => {

components/BeerById/BeerInfoHeader.tsx

@@ -2,33 +2,24 @@ import Link from 'next/link';
 import formatDistanceStrict from 'date-fns/formatDistanceStrict';
 import format from 'date-fns/format';
 import { FC, useContext, useEffect, useState } from 'react';
-import { BeerPostQueryResult } from '@/services/BeerPost/schema/BeerPostQueryResult';
 
 import UserContext from '@/contexts/userContext';
 import { FaRegEdit } from 'react-icons/fa';
+import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
+import { z } from 'zod';
 import BeerPostLikeButton from './BeerPostLikeButton';
 
-const BeerInfoHeader: FC<{ beerPost: BeerPostQueryResult; initialLikeCount: number }> = ({
-  beerPost,
-  initialLikeCount,
-}) => {
+const BeerInfoHeader: FC<{
+  beerPost: z.infer<typeof beerPostQueryResult>;
+  initialLikeCount: number;
+}> = ({ beerPost, initialLikeCount }) => {
   const createdAtDate = new Date(beerPost.createdAt);
   const [timeDistance, setTimeDistance] = useState('');
   const { user } = useContext(UserContext);
 
   const [likeCount, setLikeCount] = useState(initialLikeCount);
-  const [isPostOwner, setIsPostOwner] = useState(false);
-
-  useEffect(() => {
-    const idMatches = user && beerPost.postedBy.id === user.id;
-
-    if (!(user && idMatches)) {
-      setIsPostOwner(false);
-      return;
-    }
-
-    setIsPostOwner(true);
-  }, [user, beerPost]);
+  const idMatches = user && beerPost.postedBy.id === user.id;
+  const isPostOwner = !!(user && idMatches);
 
   useEffect(() => {
     setLikeCount(initialLikeCount);
@@ -67,15 +58,15 @@ const BeerInfoHeader: FC<{ beerPost: BeerPostQueryResult; initialLikeCount: numb
         </div>
 
         <h3 className="italic">
-          posted by{' '}
+          {' posted by '}
           <Link href={`/users/${beerPost.postedBy.id}`} className="link-hover link">
-            {beerPost.postedBy.username}
+            {`${beerPost.postedBy.username} `}
           </Link>
           <span
-            className="tooltip tooltip-bottom"
+            className="tooltip tooltip-right"
             data-tip={format(createdAtDate, 'MM/dd/yyyy')}
           >
-            {` ${timeDistance}`} ago
+            {`${timeDistance} ago`}
           </span>
         </h3>
 

components/BeerById/BeerPostCommentsPaginationBar.tsx

@@ -1,11 +1,12 @@
-import { BeerPostQueryResult } from '@/services/BeerPost/schema/BeerPostQueryResult';
 import { FC } from 'react';
 import Link from 'next/link';
+import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
+import { z } from 'zod';
 
 interface BeerCommentsPaginationBarProps {
   commentsPageNum: number;
   commentsPageCount: number;
-  beerPost: BeerPostQueryResult;
+  beerPost: z.infer<typeof beerPostQueryResult>;
 }
 
 const BeerCommentsPaginationBar: FC<BeerCommentsPaginationBarProps> = ({

components/BeerById/BeerPostCommentsSection.tsx

@@ -1,15 +1,17 @@
 import UserContext from '@/contexts/userContext';
-import { BeerCommentQueryResultArrayT } from '@/services/BeerComment/schema/BeerCommentQueryResult';
-import { BeerPostQueryResult } from '@/services/BeerPost/schema/BeerPostQueryResult';
+import BeerCommentQueryResult from '@/services/BeerComment/schema/BeerCommentQueryResult';
+
+import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
 import { useRouter } from 'next/router';
 import { FC, useContext } from 'react';
+import { z } from 'zod';
 import BeerCommentForm from './BeerCommentForm';
 import BeerCommentsPaginationBar from './BeerPostCommentsPaginationBar';
 import CommentCard from './CommentCard';
 
 interface BeerPostCommentsSectionProps {
-  beerPost: BeerPostQueryResult;
-  comments: BeerCommentQueryResultArrayT;
+  beerPost: z.infer<typeof beerPostQueryResult>;
+  comments: z.infer<typeof BeerCommentQueryResult>[];
   commentsPageCount: number;
 }
 

components/BeerById/CommentCard.tsx

@@ -1,5 +1,5 @@
 import UserContext from '@/contexts/userContext';
-import { BeerCommentQueryResultT } from '@/services/BeerComment/schema/BeerCommentQueryResult';
+import BeerCommentQueryResult from '@/services/BeerComment/schema/BeerCommentQueryResult';
 import { format, formatDistanceStrict } from 'date-fns';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -7,9 +7,10 @@ import { useContext, useEffect, useState } from 'react';
 import { Rating } from 'react-daisyui';
 
 import { FaEllipsisH } from 'react-icons/fa';
+import { z } from 'zod';
 
 const CommentCardDropdown: React.FC<{
-  comment: BeerCommentQueryResultT;
+  comment: z.infer<typeof BeerCommentQueryResult>;
   beerPostId: string;
 }> = ({ comment, beerPostId }) => {
   const router = useRouter();
@@ -52,7 +53,7 @@ const CommentCardDropdown: React.FC<{
 };
 
 const CommentCard: React.FC<{
-  comment: BeerCommentQueryResultT;
+  comment: z.infer<typeof BeerCommentQueryResult>;
   beerPostId: string;
 }> = ({ comment, beerPostId }) => {
   const [timeDistance, setTimeDistance] = useState('');

components/BeerIndex/BeerCard.tsx

@@ -1,9 +1,10 @@
 import Link from 'next/link';
 import { FC } from 'react';
 import Image from 'next/image';
-import { BeerPostQueryResult } from '@/services/BeerPost/schema/BeerPostQueryResult';
+import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
+import { z } from 'zod';
 
-const BeerCard: FC<{ post: BeerPostQueryResult }> = ({ post }) => {
+const BeerCard: FC<{ post: z.infer<typeof beerPostQueryResult> }> = ({ post }) => {
   return (
     <div className="card bg-base-300" key={post.id}>
       <figure className="card-image h-96">

components/CreateBeerPostForm.tsx

@@ -1,12 +1,12 @@
 import sendCreateBeerPostRequest from '@/requests/sendCreateBeerPostRequest';
 import CreateBeerPostValidationSchema 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, useState } from 'react';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { z } from 'zod';
+import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
 import ErrorAlert from './ui/alerts/ErrorAlert';
 import Button from './ui/forms/Button';
 import FormError from './ui/forms/FormError';
@@ -20,7 +20,7 @@ import FormTextInput from './ui/forms/FormTextInput';
 type CreateBeerPostSchema = z.infer<typeof CreateBeerPostValidationSchema>;
 
 interface BeerFormProps {
-  breweries: BreweryPostQueryResult[];
+  breweries: z.infer<typeof BreweryPostQueryResult>[];
   types: BeerType[];
 }
 

components/EditBeerPostForm.tsx

@@ -133,7 +133,7 @@ const EditBeerPostForm: FC<EditBeerPostFormProps> = ({ previousValues }) => {
           {isSubmitting ? 'Submitting...' : 'Submit'}
         </Button>
         <button
-          className={`btn-primary btn w-full rounded-xl ${isSubmitting ? 'loading' : ''}`}
+          className={`btn btn-primary w-full rounded-xl ${isSubmitting ? 'loading' : ''}`}
           type="button"
           onClick={onDelete}
         >

components/ui/Navbar.tsx

@@ -44,7 +44,7 @@ const Navbar = () => {
   return (
     <nav className="navbar bg-primary text-primary-content">
       <div className="flex-1">
-        <Link className="btn-ghost btn text-3xl normal-case" href="/">
+        <Link className="btn btn-ghost text-3xl normal-case" href="/">
           <span className="cursor-pointer text-xl font-bold">The Biergarten App</span>
         </Link>
       </div>
@@ -68,8 +68,8 @@ const Navbar = () => {
         </ul>
       </div>
       <div className="flex-none lg:hidden">
-        <div className="dropdown-end dropdown">
-          <label tabIndex={0} className="btn-ghost btn-circle btn">
+        <div className="dropdown dropdown-end">
+          <label tabIndex={0} className="btn btn-ghost btn-circle">
             <span className="w-10 rounded-full">
               <svg
                 xmlns="http://www.w3.org/2000/svg"

components/ui/forms/FormPageLayout.tsx

@@ -22,7 +22,7 @@ const FormPageLayout: FC<FormPageLayoutProps> = ({
     <div className="align-center my-20 flex h-fit flex-col items-center justify-center">
       <div className="w-8/12">
         <div className="tooltip tooltip-bottom absolute" data-tip={backLinkText}>
-          <Link href={backLink} className="btn-ghost btn-sm btn p-0">
+          <Link href={backLink} className="btn btn-ghost btn-sm p-0">
             <BiArrowBack className="text-xl" />
           </Link>
         </div>