Refactor beer comment section and incorporate image carousel

Beer comment section now uses a ternary expression for isLoading. Image carousel implemented in beer by id page.

components/BeerById/BeerPostCommentsSection.tsx

@@ -8,36 +8,23 @@ 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 CommentLoadingCardBody from './CommentLoadingCardBody';
-import Spinner from '../ui/Spinner';
+import LoadingComponent from './LoadingComponent';
 
 interface BeerPostCommentsSectionProps {
   beerPost: z.infer<typeof beerPostQueryResult>;
 }
 
-const LoadingComponent: FC<{ length: number }> = ({ length }) => {
-  return (
-    <>
-      {Array.from({ length }).map((_, i) => (
-        <CommentLoadingCardBody key={i} />
-      ))}
-      <div className="p-1">
-        <Spinner size="sm" />
-      </div>
-    </>
-  );
-};
-
 const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost }) => {
   const { user } = useContext(UserContext);
   const router = useRouter();
   const { id } = beerPost;
   const pageNum = parseInt(router.query.comments_page as string, 10) || 1;
-  const PAGE_SIZE = 6;
+  const PAGE_SIZE = 4;
 
   const { comments, isLoading, mutate, setSize, size, isLoadingMore, isAtEnd } =
     useBeerPostComments({
@@ -46,8 +33,11 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
       pageSize: PAGE_SIZE,
     });
 
-  const { ref } = useInView({
-    delay: 3000,
+  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);
@@ -58,7 +48,7 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
   return (
     <div className="w-full space-y-3 md:w-[60%]">
       <div className="card h-96 bg-base-300">
-        <div className="card-body h-full">
+        <div className="card-body h-full" ref={sectionRef}>
           {user ? (
             <BeerCommentForm beerPost={beerPost} mutate={mutate} />
           ) : (
@@ -69,47 +59,80 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
         </div>
       </div>
 
-      {comments && !!comments.length && !isLoading && (
-        <div className="card bg-base-300 pb-6" ref={sectionRef}>
-          {comments.map((comment, index) => {
-            const isLastComment = index === comments.length - 1;
+      {
+        /**
+         * If the comments are loading, show a loading component. Otherwise, show the
+         * comments.
+         */
+        isLoading ? (
+          <div className="card bg-base-300 pb-6">
+            <LoadingComponent length={PAGE_SIZE} />
+          </div>
+        ) : (
+          <>
+            {!!comments.length && (
+              <div className="card bg-base-300 pb-6">
+                {comments.map((comment, index) => {
+                  const isLastComment = index === comments.length - 1;
 
-            return (
-              <div ref={isLastComment ? ref : undefined} key={comment.id}>
-                <CommentCardBody comment={comment} mutate={mutate} />
+                  /**
+                   * 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={isLastComment ? 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={Math.floor(PAGE_SIZE / 2)} />
+                  )
+                }
+
+                {
+                  /**
+                   * 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>
-            );
-          })}
+            )}
 
-          {!!isLoadingMore && (
-            <div>
-              <LoadingComponent length={Math.floor(PAGE_SIZE / 2)} />
-            </div>
-          )}
-
-          {isAtEnd && (
-            <div className="flex h-10 items-center justify-center text-center">
-              <button
-                className="btn-ghost btn-sm btn"
-                type="button"
-                onClick={() => {
-                  sectionRef.current!.scrollIntoView({ behavior: 'smooth' });
-                }}
-              >
-                Scroll to top of comments
-              </button>
-            </div>
-          )}
-        </div>
-      )}
-
-      {!comments?.length && !isLoading && <NoCommentsCard />}
-
-      {isLoading && (
-        <div className="card bg-base-300 pb-6">
-          <LoadingComponent length={PAGE_SIZE} />
-        </div>
-      )}
+            {!comments.length && <NoCommentsCard />}
+          </>
+        )
+      }
     </div>
   );
 };

components/BeerById/LoadingComponent.tsx

@@ -0,0 +1,22 @@
+import { FC } from 'react';
+import Spinner from '../ui/Spinner';
+import CommentLoadingCardBody from './CommentLoadingCardBody';
+
+interface LoadingComponentProps {
+  length: number;
+}
+
+const LoadingComponent: FC<LoadingComponentProps> = ({ length }) => {
+  return (
+    <>
+      {Array.from({ length }).map((_, i) => (
+        <CommentLoadingCardBody key={i} />
+      ))}
+      <div className="p-1">
+        <Spinner size="sm" />
+      </div>
+    </>
+  );
+};
+
+export default LoadingComponent;

components/ui/Spinner.tsx

@@ -7,17 +7,22 @@ interface SpinnerProps {
 const Spinner: FC<SpinnerProps> = ({ size = 'md' }) => {
   const spinnerWidths: Record<NonNullable<SpinnerProps['size']>, `w-[${number}px]`> = {
     xs: 'w-[45px]',
-    sm: 'w-[60px]',
-    md: 'w-[100px]',
-    lg: 'w-[150px]',
-    xl: 'w-[200px]',
+    sm: 'w-[90px]',
+    md: 'w-[135px]',
+    lg: 'w-[180px]',
+    xl: 'w-[225px]',
   };
 
   return (
-    <div role="status" className="flex flex-col items-center justify-center rounded-3xl">
+    <div
+      role="alert"
+      aria-busy="true"
+      aria-live="polite"
+      className="flex flex-col items-center justify-center rounded-3xl text-primary"
+    >
       <svg
         aria-hidden="true"
-        className={`${spinnerWidths[size]} animate-spin fill-secondary text-primary`}
+        className={`${spinnerWidths[size]} animate-spin fill-base-content`}
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"