Feat: Implement infinite scrolling brewery comment section

Refactor beer comment schemas to work on brewery comments as well. Add robots.txt to block crawling for now.

src/components/BeerById/BeerCommentForm.tsx

@@ -1,5 +1,5 @@
 import sendCreateBeerCommentRequest from '@/requests/sendCreateBeerCommentRequest';
-import BeerCommentValidationSchema from '@/services/BeerComment/schema/CreateBeerCommentValidationSchema';
+
 import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
 import { zodResolver } from '@hookform/resolvers/zod';
 
@@ -9,6 +9,7 @@ import { useForm, SubmitHandler } from 'react-hook-form';
 import { z } from 'zod';
 
 import useBeerPostComments from '@/hooks/useBeerPostComments';
+import CreateCommentValidationSchema from '@/services/types/CommentSchema/CreateCommentValidationSchema';
 import Button from '../ui/forms/Button';
 import FormError from '../ui/forms/FormError';
 import FormInfo from '../ui/forms/FormInfo';
@@ -26,12 +27,12 @@ const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({
   mutate,
 }) => {
   const { register, handleSubmit, formState, reset, setValue } = useForm<
-    z.infer<typeof BeerCommentValidationSchema>
+    z.infer<typeof CreateCommentValidationSchema>
   >({
     defaultValues: {
       rating: 0,
     },
-    resolver: zodResolver(BeerCommentValidationSchema),
+    resolver: zodResolver(CreateCommentValidationSchema),
   });
 
   const [rating, setRating] = useState(0);
@@ -40,7 +41,7 @@ const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({
     reset({ rating: 0, content: '' });
   }, [reset]);
 
-  const onSubmit: SubmitHandler<z.infer<typeof BeerCommentValidationSchema>> = async (
+  const onSubmit: SubmitHandler<z.infer<typeof CreateCommentValidationSchema>> = async (
     data,
   ) => {
     setValue('rating', 0);

src/components/BeerById/BeerPostCommentsSection.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-nested-ternary */
 import UserContext from '@/contexts/userContext';
 
 import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
@@ -7,13 +6,10 @@ import { FC, MutableRefObject, useContext, useRef } from 'react';
 import { z } from 'zod';
 import useBeerPostComments from '@/hooks/useBeerPostComments';
 import { useRouter } from 'next/router';
-import { useInView } from 'react-intersection-observer';
-import { FaArrowUp } from 'react-icons/fa';
 import BeerCommentForm from './BeerCommentForm';
 
-import CommentCardBody from './CommentCardBody';
-import NoCommentsCard from './NoCommentsCard';
 import LoadingComponent from './LoadingComponent';
+import CommentsComponent from '../ui/CommentsComponent';
 
 interface BeerPostCommentsSectionProps {
   beerPost: z.infer<typeof beerPostQueryResult>;
@@ -33,20 +29,9 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
       pageSize: PAGE_SIZE,
     });
 
-  const { ref: lastCommentRef } = useInView({
-    /**
-     * When the last comment comes into view, call setSize from useBeerPostComments to
-     * load more comments.
-     */
-    onChange: (visible) => {
-      if (!visible || isAtEnd) return;
-      setSize(size + 1);
-    },
-  });
-
-  const sectionRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
+  const commentSectionRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
   return (
-    <div className="w-full space-y-3" ref={sectionRef}>
+    <div className="w-full space-y-3" ref={commentSectionRef}>
       <div className="card bg-base-300">
         <div className="card-body h-full">
           {user ? (
@@ -69,66 +54,15 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
             <LoadingComponent length={PAGE_SIZE} />
           </div>
         ) : (
-          <>
-            {!!comments.length && (
-              <div className="card bg-base-300 pb-6">
-                {comments.map((comment, index) => {
-                  const isPenulitmateComment = index === comments.length - 2;
-
-                  /**
-                   * Attach a ref to the last comment in the list. When it comes into
-                   * view, the component will call setSize to load more comments.
-                   */
-                  return (
-                    <div
-                      ref={isPenulitmateComment ? lastCommentRef : undefined}
-                      key={comment.id}
-                    >
-                      <CommentCardBody comment={comment} mutate={mutate} />
-                    </div>
-                  );
-                })}
-
-                {
-                  /**
-                   * If there are more comments to load, show a loading component with a
-                   * skeleton loader and a loading spinner.
-                   */
-                  !!isLoadingMore && <LoadingComponent length={PAGE_SIZE} />
-                }
-
-                {
-                  /**
-                   * If the user has scrolled to the end of the comments, show a button
-                   * that will scroll them back to the top of the comments section.
-                   */
-                  !!isAtEnd && (
-                    <div className="flex h-20 items-center justify-center text-center">
-                      <div
-                        className="tooltip tooltip-bottom"
-                        data-tip="Scroll back to top of comments."
-                      >
-                        <button
-                          type="button"
-                          className="btn-ghost btn-sm btn"
-                          aria-label="Scroll back to top of comments"
-                          onClick={() => {
-                            sectionRef.current?.scrollIntoView({
-                              behavior: 'smooth',
-                            });
-                          }}
-                        >
-                          <FaArrowUp />
-                        </button>
-                      </div>
-                    </div>
-                  )
-                }
-              </div>
-            )}
-
-            {!comments.length && <NoCommentsCard />}
-          </>
+          <CommentsComponent
+            commentSectionRef={commentSectionRef}
+            comments={comments}
+            isLoadingMore={isLoadingMore}
+            isAtEnd={isAtEnd}
+            pageSize={PAGE_SIZE}
+            setSize={setSize}
+            size={size}
+          />
         )
       }
     </div>

src/components/BeerById/CommentCardBody.tsx

@@ -1,5 +1,5 @@
 import useBeerPostComments from '@/hooks/useBeerPostComments';
-import BeerCommentQueryResult from '@/services/BeerComment/schema/BeerCommentQueryResult';
+import CommentQueryResult from '@/services/types/CommentSchema/CommentQueryResult';
 import { FC, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { z } from 'zod';
@@ -7,7 +7,7 @@ import CommentContentBody from './CommentContentBody';
 import EditCommentBody from './EditCommentBody';
 
 interface CommentCardProps {
-  comment: z.infer<typeof BeerCommentQueryResult>;
+  comment: z.infer<typeof CommentQueryResult>;
   mutate: ReturnType<typeof useBeerPostComments>['mutate'];
   ref?: ReturnType<typeof useInView>['ref'];
 }

src/components/BeerById/CommentCardDropdown.tsx

@@ -1,11 +1,11 @@
 import UserContext from '@/contexts/userContext';
 import { Dispatch, SetStateAction, FC, useContext } from 'react';
 import { FaEllipsisH } from 'react-icons/fa';
-import BeerCommentQueryResult from '@/services/BeerComment/schema/BeerCommentQueryResult';
+import CommentQueryResult from '@/services/types/CommentSchema/CommentQueryResult';
 import { z } from 'zod';
 
 interface CommentCardDropdownProps {
-  comment: z.infer<typeof BeerCommentQueryResult>;
+  comment: z.infer<typeof CommentQueryResult>;
   setInEditMode: Dispatch<SetStateAction<boolean>>;
 }
 

src/components/BeerById/CommentContentBody.tsx

@@ -3,13 +3,13 @@ import useTimeDistance from '@/hooks/useTimeDistance';
 import { format } from 'date-fns';
 import { Dispatch, FC, SetStateAction, useContext } from 'react';
 import { Link, Rating } from 'react-daisyui';
-import BeerCommentQueryResult from '@/services/BeerComment/schema/BeerCommentQueryResult';
+import CommentQueryResult from '@/services/types/CommentSchema/CommentQueryResult';
 import { useInView } from 'react-intersection-observer';
 import { z } from 'zod';
 import CommentCardDropdown from './CommentCardDropdown';
 
 interface CommentContentBodyProps {
-  comment: z.infer<typeof BeerCommentQueryResult>;
+  comment: z.infer<typeof CommentQueryResult>;
   ref: ReturnType<typeof useInView>['ref'] | undefined;
   setInEditMode: Dispatch<SetStateAction<boolean>>;
 }

src/components/BeerById/EditCommentBody.tsx

@@ -1,12 +1,12 @@
-import BeerCommentValidationSchema from '@/services/BeerComment/schema/CreateBeerCommentValidationSchema';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { FC, useState, useEffect, Dispatch, SetStateAction } from 'react';
 import { Rating } from 'react-daisyui';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { z } from 'zod';
 import useBeerPostComments from '@/hooks/useBeerPostComments';
-import BeerCommentQueryResult from '@/services/BeerComment/schema/BeerCommentQueryResult';
+import CommentQueryResult from '@/services/types/CommentSchema/CommentQueryResult';
 import { useInView } from 'react-intersection-observer';
+import CreateCommentValidationSchema from '@/services/types/CommentSchema/CreateCommentValidationSchema';
 import FormError from '../ui/forms/FormError';
 import FormInfo from '../ui/forms/FormInfo';
 import FormLabel from '../ui/forms/FormLabel';
@@ -14,7 +14,7 @@ import FormSegment from '../ui/forms/FormSegment';
 import FormTextArea from '../ui/forms/FormTextArea';
 
 interface CommentCardDropdownProps {
-  comment: z.infer<typeof BeerCommentQueryResult>;
+  comment: z.infer<typeof CommentQueryResult>;
   setInEditMode: Dispatch<SetStateAction<boolean>>;
   ref: ReturnType<typeof useInView>['ref'] | undefined;
   mutate: ReturnType<typeof useBeerPostComments>['mutate'];
@@ -27,13 +27,13 @@ const EditCommentBody: FC<CommentCardDropdownProps> = ({
   mutate,
 }) => {
   const { register, handleSubmit, formState, setValue, watch } = useForm<
-    z.infer<typeof BeerCommentValidationSchema>
+    z.infer<typeof CreateCommentValidationSchema>
   >({
     defaultValues: {
       content: comment.content,
       rating: comment.rating,
     },
-    resolver: zodResolver(BeerCommentValidationSchema),
+    resolver: zodResolver(CreateCommentValidationSchema),
   });
 
   const { errors } = formState;
@@ -59,7 +59,7 @@ const EditCommentBody: FC<CommentCardDropdownProps> = ({
     await mutate();
   };
 
-  const onSubmit: SubmitHandler<z.infer<typeof BeerCommentValidationSchema>> = async (
+  const onSubmit: SubmitHandler<z.infer<typeof CreateCommentValidationSchema>> = async (
     data,
   ) => {
     const response = await fetch(`/api/beer-comments/${comment.id}`, {

src/components/BreweryById/BreweryBeerSection.tsx.tsx

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+
+interface BreweryCommentsSectionProps {}
+
+const BreweryBeersSection: FC<BreweryCommentsSectionProps> = () => {
+  return <div className="card h-full"></div>;
+};
+
+export default BreweryBeersSection;

src/components/BreweryById/BreweryCommentsSection.tsx

@@ -0,0 +1,65 @@
+import UserContext from '@/contexts/userContext';
+import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
+import { FC, MutableRefObject, useContext, useRef } from 'react';
+import { z } from 'zod';
+import useBreweryPostComments from '@/hooks/useBreweryPostComments';
+import LoadingComponent from '../BeerById/LoadingComponent';
+import CommentsComponent from '../ui/CommentsComponent';
+
+interface BreweryBeerSectionProps {
+  breweryPost: z.infer<typeof BreweryPostQueryResult>;
+}
+
+const BreweryCommentForm: FC = () => {
+  return null;
+};
+
+const BreweryCommentsSection: FC<BreweryBeerSectionProps> = ({ breweryPost }) => {
+  const { user } = useContext(UserContext);
+
+  const { id } = breweryPost;
+
+  const PAGE_SIZE = 4;
+
+  const { comments, isLoading, setSize, size, isLoadingMore, isAtEnd } =
+    useBreweryPostComments({ id, pageSize: PAGE_SIZE });
+
+  const commentSectionRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
+
+  return (
+    <div className="w-full space-y-3" ref={commentSectionRef}>
+      <div className="card">
+        {user ? (
+          <BreweryCommentForm />
+        ) : (
+          <div className="flex h-52 flex-col items-center justify-center">
+            <div className="text-lg font-bold">Log in to leave a comment.</div>
+          </div>
+        )}
+      </div>
+      {
+        /**
+         * If the comments are loading, show a loading component. Otherwise, show the
+         * comments.
+         */
+        isLoading ? (
+          <div className="card pb-6">
+            <LoadingComponent length={PAGE_SIZE} />
+          </div>
+        ) : (
+          <CommentsComponent
+            comments={comments}
+            isLoadingMore={isLoadingMore}
+            isAtEnd={isAtEnd}
+            pageSize={PAGE_SIZE}
+            setSize={setSize}
+            size={size}
+            commentSectionRef={commentSectionRef}
+          />
+        )
+      }
+    </div>
+  );
+};
+
+export default BreweryCommentsSection;

src/components/BreweryById/BreweryInfoHeader.tsx

@@ -0,0 +1,95 @@
+import UserContext from '@/contexts/userContext';
+import useGetBreweryPostLikeCount from '@/hooks/useGetBreweryPostLikeCount';
+import useTimeDistance from '@/hooks/useTimeDistance';
+import BreweryPostQueryResult from '@/services/BreweryPost/types/BreweryPostQueryResult';
+import { format } from 'date-fns';
+import { FC, useContext } from 'react';
+import { Link } from 'react-daisyui';
+import { FaRegEdit } from 'react-icons/fa';
+import { z } from 'zod';
+import BreweryPostLikeButton from '../BreweryIndex/BreweryPostLikeButton';
+
+interface BreweryInfoHeaderProps {
+  breweryPost: z.infer<typeof BreweryPostQueryResult>;
+}
+const BreweryInfoHeader: FC<BreweryInfoHeaderProps> = ({ breweryPost }) => {
+  const createdAt = new Date(breweryPost.createdAt);
+  const timeDistance = useTimeDistance(createdAt);
+
+  const { user } = useContext(UserContext);
+  const idMatches = user && breweryPost.postedBy.id === user.id;
+  const isPostOwner = !!(user && idMatches);
+
+  const { likeCount, mutate } = useGetBreweryPostLikeCount(breweryPost.id);
+
+  return (
+    <article className="card flex flex-col justify-center bg-base-300">
+      <div className="card-body">
+        <header className="flex justify-between">
+          <div className="space-y-2">
+            <div>
+              <h1 className="text-2xl font-bold lg:text-4xl">{breweryPost.name}</h1>
+              <h2 className="text-lg font-semibold lg:text-2xl">
+                Located in
+                {` ${breweryPost.location.city}, ${
+                  breweryPost.location.stateOrProvince || breweryPost.location.country
+                }`}
+              </h2>
+            </div>
+            <div>
+              <h3 className="italic">
+                {' posted by '}
+                <Link
+                  href={`/users/${breweryPost.postedBy.id}`}
+                  className="link-hover link"
+                >
+                  {`${breweryPost.postedBy.username} `}
+                </Link>
+                {timeDistance && (
+                  <span
+                    className="tooltip tooltip-right"
+                    data-tip={format(createdAt, 'MM/dd/yyyy')}
+                  >{`${timeDistance} ago`}</span>
+                )}
+              </h3>
+            </div>
+          </div>
+          {isPostOwner && (
+            <div className="tooltip tooltip-left" data-tip={`Edit '${breweryPost.name}'`}>
+              <Link
+                href={`/breweries/${breweryPost.id}/edit`}
+                className="btn-ghost btn-xs btn"
+              >
+                <FaRegEdit className="text-xl" />
+              </Link>
+            </div>
+          )}
+        </header>
+        <div className="space-y-2">
+          <p>{breweryPost.description}</p>
+          <div className="flex items-end justify-between">
+            <div className="space-y-1">
+              <div>
+                {(!!likeCount || likeCount === 0) && (
+                  <span>
+                    Liked by {likeCount} user{likeCount !== 1 && 's'}
+                  </span>
+                )}
+              </div>
+            </div>
+            <div className="card-actions">
+              {user && (
+                <BreweryPostLikeButton
+                  breweryPostId={breweryPost.id}
+                  mutateCount={mutate}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+};
+
+export default BreweryInfoHeader;

src/components/BreweryById/BreweryMap.tsx

@@ -0,0 +1,43 @@
+import useMediaQuery from '@/hooks/useMediaQuery';
+
+import { FC } from 'react';
+import Map, { Marker } from 'react-map-gl';
+
+interface BreweryMapProps {
+  latitude: number;
+  longitude: number;
+}
+const BreweryMap: FC<BreweryMapProps> = ({ latitude, longitude }) => {
+  const isDesktop = useMediaQuery('(min-width: 1024px)');
+  const theme =
+    typeof window !== 'undefined' ? window.localStorage.getItem('theme') : 'dark';
+
+  const mapStyle =
+    theme === 'dark'
+      ? 'mapbox://styles/mapbox/dark-v11'
+      : 'mapbox://styles/mapbox/light-v10';
+  return (
+    <div className="card">
+      <div className="card-body">
+        <Map
+          initialViewState={{
+            latitude,
+            longitude,
+            zoom: 17,
+          }}
+          style={{
+            width: '100%',
+            height: isDesktop ? 400 : 200,
+          }}
+          mapStyle={mapStyle}
+          mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN as string}
+          scrollZoom={true}
+        >
+          <Marker latitude={latitude} longitude={longitude} />
+        </Map>
+      </div>
+    </div>
+  );
+};
+
+export default BreweryMap;

src/components/ui/CommentsComponent.tsx

@@ -0,0 +1,114 @@
+import { FC, MutableRefObject } from 'react';
+import { FaArrowUp } from 'react-icons/fa';
+import { mutate } from 'swr';
+import { useInView } from 'react-intersection-observer';
+
+import useBeerPostComments from '@/hooks/useBeerPostComments';
+import useBreweryPostComments from '@/hooks/useBreweryPostComments';
+import NoCommentsCard from '../BeerById/NoCommentsCard';
+import LoadingComponent from '../BeerById/LoadingComponent';
+import CommentCardBody from '../BeerById/CommentCardBody';
+
+interface CommentsComponentProps {
+  commentSectionRef: MutableRefObject<HTMLDivElement | null>;
+  pageSize: number;
+  size: ReturnType<typeof useBeerPostComments | typeof useBreweryPostComments>['size'];
+  setSize: ReturnType<
+    typeof useBeerPostComments | typeof useBreweryPostComments
+  >['setSize'];
+  comments: ReturnType<
+    typeof useBeerPostComments | typeof useBreweryPostComments
+  >['comments'];
+  isAtEnd: ReturnType<
+    typeof useBeerPostComments | typeof useBreweryPostComments
+  >['isAtEnd'];
+  isLoadingMore: ReturnType<
+    typeof useBeerPostComments | typeof useBreweryPostComments
+  >['isLoadingMore'];
+}
+
+const CommentsComponent: FC<CommentsComponentProps> = ({
+  commentSectionRef,
+  comments,
+  isAtEnd,
+  isLoadingMore,
+  pageSize,
+  setSize,
+  size,
+}) => {
+  const { ref: lastCommentRef } = useInView({
+    /**
+     * When the last comment comes into view, call setSize from useBeerPostComments to
+     * load more comments.
+     */
+    onChange: (visible) => {
+      if (!visible || isAtEnd) return;
+      setSize(size + 1);
+    },
+  });
+
+  return (
+    <>
+      {!!comments.length && (
+        <div className="card bg-base-300 pb-6">
+          {comments.map((comment, index) => {
+            const isPenulitmateComment = index === comments.length - 2;
+
+            /**
+             * Attach a ref to the last comment in the list. When it comes into view, the
+             * component will call setSize to load more comments.
+             */
+            return (
+              <div
+                ref={isPenulitmateComment ? lastCommentRef : undefined}
+                key={comment.id}
+              >
+                <CommentCardBody comment={comment} mutate={mutate} />
+              </div>
+            );
+          })}
+
+          {
+            /**
+             * If there are more comments to load, show a loading component with a
+             * skeleton loader and a loading spinner.
+             */
+            !!isLoadingMore && <LoadingComponent length={pageSize} />
+          }
+
+          {
+            /**
+             * If the user has scrolled to the end of the comments, show a button that
+             * will scroll them back to the top of the comments section.
+             */
+            !!isAtEnd && (
+              <div className="flex h-20 items-center justify-center text-center">
+                <div
+                  className="tooltip tooltip-bottom"
+                  data-tip="Scroll back to top of comments."
+                >
+                  <button
+                    type="button"
+                    className="btn-ghost btn-sm btn"
+                    aria-label="Scroll back to top of comments"
+                    onClick={() => {
+                      commentSectionRef.current?.scrollIntoView({
+                        behavior: 'smooth',
+                      });
+                    }}
+                  >
+                    <FaArrowUp />
+                  </button>
+                </div>
+              </div>
+            )
+          }
+        </div>
+      )}
+
+      {!comments.length && <NoCommentsCard />}
+    </>
+  );
+};
+
+export default CommentsComponent;