Merge pull request #20 from aaronpo97/infinite-comment-scroll

Feature: infinite comment scroll
2026-02-16 10:42:08 +00:00 · 2023-04-09 18:51:08 -04:00
parent 06f496ecd2 851c95d621
commit 4594e22a4f
16 changed files with 174 additions and 176 deletions
--- a/components/BeerById/BeerCommentForm.tsx
+++ b/components/BeerById/BeerCommentForm.tsx
@@ -8,9 +8,7 @@ import { Rating } from 'react-daisyui';
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { z } from 'zod';

-import { KeyedMutator } from 'swr';
-import BeerCommentQueryResult from '@/services/BeerComment/schema/BeerCommentQueryResult';
-import { useRouter } from 'next/router';
+import useBeerPostComments from '@/hooks/useBeerPostComments';
 import Button from '../ui/forms/Button';
 import FormError from '../ui/forms/FormError';
 import FormInfo from '../ui/forms/FormInfo';
@@ -20,10 +18,7 @@ import FormTextArea from '../ui/forms/FormTextArea';

 interface BeerCommentFormProps {
  beerPost: z.infer<typeof beerPostQueryResult>;
-  mutate: KeyedMutator<{
-    comments: z.infer<typeof BeerCommentQueryResult>[];
-    pageCount: number;
-  }>;
+  mutate: ReturnType<typeof useBeerPostComments>['mutate'];
 }

 const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({
@@ -45,7 +40,6 @@ const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({
    reset({ rating: 0, content: '' });
  }, [reset]);

-  const router = useRouter();
  const onSubmit: SubmitHandler<z.infer<typeof BeerCommentValidationSchema>> = async (
    data,
  ) => {
@@ -56,14 +50,8 @@ const BeerCommentForm: FunctionComponent<BeerCommentFormProps> = ({
      rating: data.rating,
      beerPostId: beerPost.id,
    });
+    await mutate();
    reset();
-
-    const submitTasks: Promise<unknown>[] = [
-      router.push(`/beers/${beerPost.id}`, undefined, { scroll: false }),
-      mutate(),
-    ];
-
-    await Promise.all(submitTasks);
  };

  const { errors } = formState;
--- a/components/BeerById/BeerPostCommentsPaginationBar.tsx
+++ b/components/BeerById/BeerPostCommentsPaginationBar.tsx
@@ -1,54 +0,0 @@
-import { FC } from 'react';
-import Link from 'next/link';
-import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
-import { z } from 'zod';
-
-import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
-
-interface BeerCommentsPaginationBarProps {
-  commentsPageNum: number;
-  commentsPageCount: number;
-  beerPost: z.infer<typeof beerPostQueryResult>;
-}
-
-const BeerCommentsPaginationBar: FC<BeerCommentsPaginationBarProps> = ({
-  commentsPageNum,
-  commentsPageCount,
-  beerPost,
-}) => (
-  <div className="flex items-center justify-center" id="comments-pagination">
-    <div className="btn-group">
-      <Link
-        className={`btn-ghost btn ${
-          commentsPageNum === 1
-            ? 'btn-disabled pointer-events-none'
-            : 'pointer-events-auto'
-        }`}
-        href={{
-          pathname: `/beers/${beerPost.id}`,
-          query: { comments_page: commentsPageNum - 1 },
-        }}
-        scroll={false}
-      >
-        <FaArrowLeft />
-      </Link>
-      <button className="btn-ghost btn pointer-events-none">{commentsPageNum}</button>
-      <Link
-        className={`btn-ghost btn ${
-          commentsPageNum === commentsPageCount
-            ? 'btn-disabled pointer-events-none'
-            : 'pointer-events-auto'
-        }`}
-        href={{
-          pathname: `/beers/${beerPost.id}`,
-          query: { comments_page: commentsPageNum + 1 },
-        }}
-        scroll={false}
-      >
-        <FaArrowRight />
-      </Link>
-    </div>
-  </div>
-);
-
-export default BeerCommentsPaginationBar;
--- a/components/BeerById/BeerPostCommentsSection.tsx
+++ b/components/BeerById/BeerPostCommentsSection.tsx
@@ -3,33 +3,58 @@ import UserContext from '@/contexts/userContext';

 import beerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';

-import { FC, useContext } from 'react';
+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 BeerCommentForm from './BeerCommentForm';
-import BeerCommentsPaginationBar from './BeerPostCommentsPaginationBar';
+
 import CommentCardBody from './CommentCardBody';
 import NoCommentsCard from './NoCommentsCard';
 import CommentLoadingCardBody from './CommentLoadingCardBody';
+import Spinner from '../ui/Spinner';

 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 pageSize = 5;
+  const PAGE_SIZE = 6;

-  const { comments, commentsPageCount, isLoading, mutate } = useBeerPostComments({
+  const { comments, isLoading, mutate, setSize, size, isLoadingMore, isAtEnd } =
+    useBeerPostComments({
      id,
      pageNum,
-    pageSize,
+      pageSize: PAGE_SIZE,
    });

+  const { ref } = useInView({
+    delay: 3000,
+    onChange: (visible) => {
+      if (!visible || isAtEnd) return;
+      setSize(size + 1);
+    },
+  });
+
+  const sectionRef: MutableRefObject<HTMLDivElement | null> = useRef(null);
  return (
    <div className="w-full space-y-3 md:w-[60%]">
      <div className="card h-96 bg-base-300">
@@ -44,17 +69,37 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
        </div>
      </div>

-      {comments && !!comments.length && !!commentsPageCount && !isLoading && (
-        <div className="card bg-base-300 pb-6">
-          {comments.map((comment) => (
-            <CommentCardBody key={comment.id} comment={comment} mutate={mutate} />
-          ))}
+      {comments && !!comments.length && !isLoading && (
+        <div className="card bg-base-300 pb-6" ref={sectionRef}>
+          {comments.map((comment, index) => {
+            const isLastComment = index === comments.length - 1;

-          <BeerCommentsPaginationBar
-            commentsPageNum={pageNum}
-            commentsPageCount={commentsPageCount}
-            beerPost={beerPost}
-          />
+            return (
+              <div ref={isLastComment ? ref : undefined} key={comment.id}>
+                <CommentCardBody comment={comment} mutate={mutate} />
+              </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>
      )}

@@ -62,15 +107,7 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })

      {isLoading && (
        <div className="card bg-base-300 pb-6">
-          {Array.from({ length: pageSize }).map((_, i) => (
-            <CommentLoadingCardBody key={i} />
-          ))}
-
-          <BeerCommentsPaginationBar
-            commentsPageNum={pageNum}
-            commentsPageCount={20}
-            beerPost={beerPost}
-          />
+          <LoadingComponent length={PAGE_SIZE} />
        </div>
      )}
    </div>
--- a/components/BeerById/BeerPostLikeButton.tsx
+++ b/components/BeerById/BeerPostLikeButton.tsx
@@ -2,11 +2,12 @@ import useCheckIfUserLikesBeerPost from '@/hooks/useCheckIfUserLikesBeerPost';
 import sendLikeRequest from '@/requests/sendLikeRequest';
 import { FC, useEffect, useState } from 'react';
 import { FaThumbsUp, FaRegThumbsUp } from 'react-icons/fa';
-import { KeyedMutator } from 'swr';
+
+import useGetLikeCount from '@/hooks/useGetLikeCount';

 const BeerPostLikeButton: FC<{
  beerPostId: string;
-  mutateCount: KeyedMutator<number>;
+  mutateCount: ReturnType<typeof useGetLikeCount>['mutate'];
 }> = ({ beerPostId, mutateCount }) => {
  const { isLiked, mutate: mutateLikeStatus } = useCheckIfUserLikesBeerPost(beerPostId);
  const [loading, setLoading] = useState(true);
--- a/components/BeerById/CommentCardBody.tsx
+++ b/components/BeerById/CommentCardBody.tsx
@@ -1,22 +1,23 @@
 import UserContext from '@/contexts/userContext';
+import useBeerPostComments from '@/hooks/useBeerPostComments';
 import useTimeDistance from '@/hooks/useTimeDistance';
 import BeerCommentQueryResult from '@/services/BeerComment/schema/BeerCommentQueryResult';
 import format from 'date-fns/format';
 import Link from 'next/link';
-import { useContext } from 'react';
+import { FC, useContext } from 'react';
 import { Rating } from 'react-daisyui';

 import { FaEllipsisH } from 'react-icons/fa';
-import { KeyedMutator } from 'swr';
+import { useInView } from 'react-intersection-observer';
 import { z } from 'zod';

-const CommentCardDropdown: React.FC<{
+interface CommentCardProps {
  comment: z.infer<typeof BeerCommentQueryResult>;
-  mutate: KeyedMutator<{
-    comments: z.infer<typeof BeerCommentQueryResult>[];
-    pageCount: number;
-  }>;
-}> = ({ comment, mutate }) => {
+  mutate: ReturnType<typeof useBeerPostComments>['mutate'];
+  ref?: ReturnType<typeof useInView>['ref'];
+}
+
+const CommentCardDropdown: FC<CommentCardProps> = ({ comment, mutate }) => {
  const { user } = useContext(UserContext);

  const isCommentOwner = user?.id === comment.postedBy.id;
@@ -42,34 +43,25 @@ const CommentCardDropdown: React.FC<{
        tabIndex={0}
        className="dropdown-content menu rounded-box w-52 bg-base-100 p-2 shadow"
      >
+        <li>
          {isCommentOwner ? (
-          <li>
            <button onClick={handleDelete}>Delete</button>
-          </li>
          ) : (
-          <li>
            <button>Report</button>
-          </li>
          )}
+        </li>
      </ul>
    </div>
  );
 };

-const CommentCardBody: React.FC<{
-  comment: z.infer<typeof BeerCommentQueryResult>;
-
-  mutate: KeyedMutator<{
-    comments: z.infer<typeof BeerCommentQueryResult>[];
-    pageCount: number;
-  }>;
-}> = ({ comment, mutate }) => {
+const CommentCardBody: FC<CommentCardProps> = ({ comment, mutate, ref }) => {
  const { user } = useContext(UserContext);

  const timeDistance = useTimeDistance(new Date(comment.createdAt));

  return (
-    <div className="card-body animate-in fade-in-10">
+    <div className="card-body animate-in fade-in-10" ref={ref}>
      <div className="flex flex-col justify-between sm:flex-row">
        <div>
          <h3 className="font-semibold sm:text-2xl">
--- a/components/BeerById/CommentLoadingCardBody.tsx
+++ b/components/BeerById/CommentLoadingCardBody.tsx
@@ -1,12 +1,14 @@
 const CommentLoadingCardBody = () => {
  return (
-    <div className="animate card-body h-64 fade-in-10">
+    <div className="animate card-body h-52 fade-in-10">
      <div className="flex animate-pulse space-x-4 slide-in-from-top">
        <div className="flex-1 space-y-4 py-1">
          <div className="h-4 w-3/4 rounded bg-base-100" />
          <div className="space-y-2">
            <div className="h-4 rounded bg-base-100" />
-            <div className="h-4 w-5/6 rounded bg-base-100" />
+            <div className="h-4 w-11/12 rounded bg-base-100" />
+            <div className="h-4 w-10/12 rounded bg-base-100" />
+            <div className="h-4 w-11/12 rounded bg-base-100" />
          </div>
        </div>
      </div>
--- a/components/ui/Navbar.tsx
+++ b/components/ui/Navbar.tsx
@@ -68,7 +68,7 @@ const Navbar = () => {
        </ul>
      </div>
      <div className="flex-none lg:hidden">
-        <div className="dropdown-end dropdown">
+        <div className="dropdown dropdown-end">
          <label tabIndex={0} className="btn-ghost btn-circle btn">
            <span className="w-10 rounded-full">
              <svg
--- a/components/ui/Spinner.tsx
+++ b/components/ui/Spinner.tsx
@@ -6,8 +6,8 @@ interface SpinnerProps {

 const Spinner: FC<SpinnerProps> = ({ size = 'md' }) => {
  const spinnerWidths: Record<NonNullable<SpinnerProps['size']>, `w-[${number}px]`> = {
-    xs: 'w-[10px]',
-    sm: 'w-[20px]',
+    xs: 'w-[45px]',
+    sm: 'w-[60px]',
    md: 'w-[100px]',
    lg: 'w-[150px]',
    xl: 'w-[200px]',
--- a/contexts/userContext.ts
+++ b/contexts/userContext.ts
@@ -1,13 +1,13 @@
+import useUser from '@/hooks/useUser';
 import GetUserSchema from '@/services/User/schema/GetUserSchema';
 import { createContext } from 'react';
-import { KeyedMutator } from 'swr';
 import { z } from 'zod';

 const UserContext = createContext<{
  user?: z.infer<typeof GetUserSchema>;
  error?: unknown;
  isLoading: boolean;
-  mutate?: KeyedMutator<z.infer<typeof GetUserSchema>>;
+  mutate?: ReturnType<typeof useUser>['mutate'];
 }>({ isLoading: true });

 export default UserContext;
--- a/hooks/useBeerPostComments.ts
+++ b/hooks/useBeerPostComments.ts
@@ -1,7 +1,7 @@
 import BeerCommentQueryResult from '@/services/BeerComment/schema/BeerCommentQueryResult';
 import APIResponseValidationSchema from '@/validation/APIResponseValidationSchema';
 import { z } from 'zod';
-import useSWR from 'swr';
+import useSWRInfinite from 'swr/infinite';

 interface UseBeerPostCommentsProps {
  pageNum: number;
@@ -20,10 +20,8 @@ interface UseBeerPostCommentsProps {
 *   a boolean indicating if the request is currently loading, and a function to mutate
 *   the data.
 */
-const useBeerPostComments = ({ pageNum, id, pageSize }: UseBeerPostCommentsProps) => {
-  const { data, error, isLoading, mutate } = useSWR(
-    `/api/beers/${id}/comments?page_num=${pageNum}&page_size=${pageSize}`,
-    async (url) => {
+const useBeerPostComments = ({ id, pageSize }: UseBeerPostCommentsProps) => {
+  const fetcher = async (url: string) => {
    const response = await fetch(url);
    const json = await response.json();
    const count = response.headers.get('X-Total-Count');
@@ -32,9 +30,7 @@ const useBeerPostComments = ({ pageNum, id, pageSize }: UseBeerPostCommentsProps
    if (!parsed.success) {
      throw new Error(parsed.error.message);
    }
-      const parsedPayload = z
-        .array(BeerCommentQueryResult)
-        .safeParse(parsed.data.payload);
+    const parsedPayload = z.array(BeerCommentQueryResult).safeParse(parsed.data.payload);

    if (!parsedPayload.success) {
      throw new Error(parsedPayload.error.message);
@@ -42,14 +38,32 @@ const useBeerPostComments = ({ pageNum, id, pageSize }: UseBeerPostCommentsProps

    const pageCount = Math.ceil(parseInt(count as string, 10) / pageSize);
    return { comments: parsedPayload.data, pageCount };
-    },
+  };
+
+  const { data, error, isLoading, mutate, size, setSize } = useSWRInfinite(
+    (index) => `/api/beers/${id}/comments?page_num=${index + 1}&page_size=${pageSize}`,
+    fetcher,
+    { parallel: true },
  );
+
+  const comments = data?.flatMap((d) => d.comments) ?? [];
+  const pageCount = data?.[0].pageCount ?? 0;
+
+  const isLoadingMore =
+    isLoading || (size > 0 && data && typeof data[size - 1] === 'undefined');
+
+  const isAtEnd = !(size < data?.[0].pageCount!);
+
  return {
-    comments: data?.comments,
-    commentsPageCount: data?.pageCount,
+    comments,
    isLoading,
    error: error as undefined,
    mutate,
+    size,
+    setSize,
+    isLoadingMore,
+    isAtEnd,
+    pageCount,
  };
 };

--- a/package-lock.json
+++ b/package-lock.json
@@ -35,6 +35,7 @@
        "react-email": "^1.9.0",
        "react-hook-form": "^7.43.9",
        "react-icons": "^4.8.0",
+        "react-intersection-observer": "^9.4.3",
        "sparkpost": "^2.1.4",
        "swr": "^2.1.2",
        "zod": "^3.21.4"
@@ -8341,6 +8342,14 @@
        "react": "*"
      }
    },
+    "node_modules/react-intersection-observer": {
+      "version": "9.4.3",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.4.3.tgz",
+      "integrity": "sha512-WNRqMQvKpupr6MzecAQI0Pj0+JQong307knLP4g/nBex7kYfIaZsPpXaIhKHR+oV8z+goUbH9e10j6lGRnTzlQ==",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -15901,6 +15910,12 @@
      "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==",
      "requires": {}
    },
+    "react-intersection-observer": {
+      "version": "9.4.3",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.4.3.tgz",
+      "integrity": "sha512-WNRqMQvKpupr6MzecAQI0Pj0+JQong307knLP4g/nBex7kYfIaZsPpXaIhKHR+oV8z+goUbH9e10j6lGRnTzlQ==",
+      "requires": {}
+    },
    "react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
    "react-email": "^1.9.0",
    "react-hook-form": "^7.43.9",
    "react-icons": "^4.8.0",
+    "react-intersection-observer": "^9.4.3",
    "sparkpost": "^2.1.4",
    "swr": "^2.1.2",
    "zod": "^3.21.4"
--- a/pages/beers/[id]/index.tsx
+++ b/pages/beers/[id]/index.tsx
@@ -25,11 +25,12 @@ interface BeerPageProps {

 const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }) => {
  return (
-    <Layout>
+    <>
      <Head>
        <title>{beerPost.name}</title>
        <meta name="description" content={beerPost.description} />
      </Head>
+      <Layout>
        <div>
          {beerPost.beerImages[0] && (
            <Image
@@ -54,6 +55,7 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }
          </div>
        </div>
      </Layout>
+    </>
  );
 };

--- a/pages/user/current.tsx
+++ b/pages/user/current.tsx
@@ -13,7 +13,7 @@ const ProtectedPage: NextPage = () => {

  const isMorning = currentTime > 4 && currentTime < 12;
  const isAfternoon = currentTime > 12 && currentTime < 18;
-  const isEvening = currentTime > 18 && currentTime < 24 || currentTime <4
+  const isEvening = (currentTime > 18 && currentTime < 24) || currentTime < 4;

  return (
    <Layout>
--- a/prisma/seed/create/createNewUsers.ts
+++ b/prisma/seed/create/createNewUsers.ts
@@ -18,7 +18,7 @@ const createNewUsers = async ({ numberOfUsers }: CreateNewUsersArgs) => {

  // eslint-disable-next-line no-plusplus
  for (let i = 0; i < numberOfUsers; i++) {
-    const randomValue = crypto.randomBytes(4).toString('hex');
+    const randomValue = crypto.randomBytes(8).toString('hex');
    const firstName = faker.name.firstName();
    const lastName = faker.name.lastName();
    const username = `${firstName[0]}.${lastName}.${randomValue}`;
--- a/prisma/seed/index.ts
+++ b/prisma/seed/index.ts
@@ -29,7 +29,7 @@ import createNewUsers from './create/createNewUsers';
      createNewBeerTypes({ joinData: { users } }),
    ]);
    const beerPosts = await createNewBeerPosts({
-      numberOfPosts: 48,
+      numberOfPosts: 200,
      joinData: { breweryPosts, beerTypes, users },
    });

@@ -41,11 +41,11 @@ import createNewUsers from './create/createNewUsers';
      breweryImages,
    ] = await Promise.all([
      createNewBeerPostComments({
-        numberOfComments: 1000,
+        numberOfComments: 45000,
        joinData: { beerPosts, users },
      }),
      createNewBreweryPostComments({
-        numberOfComments: 1000,
+        numberOfComments: 45000,
        joinData: { breweryPosts, users },
      }),
      createNewBeerPostLikes({