Feedback Page Queries

src/app/organizations/[organizationId]/projects/[projectId]/[feedbackId]/page.tsx

@@ -3,9 +3,12 @@ import { notFound } from "next/navigation";
 import { Comments, FeedbackDetails } from "components/feedback";
 import { Page } from "components/layout";
 import { app } from "lib/config";
+import { sdk } from "lib/graphql";
 import { getAuthSession } from "lib/util";
 
-import type { Feedback } from "components/feedback";
+export const metadata = {
+  title: `${app.feedbackPage.breadcrumb} | ${app.name}`,
+};
 
 interface Props {
   /** Feedback page params. */
@@ -21,56 +24,41 @@ interface Props {
  */
 const FeedbackPage = async ({ params }: Props) => {
   const { organizationId, projectId, feedbackId } = await params;
-  const session = await getAuthSession();
 
-  const FEEDBACK: Feedback = {
-    id: feedbackId,
-    title: "I Still Like Turtles",
-    description:
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.",
-    createdAt: "2023-01-01T00:00:00.000Z",
-    updatedAt: "2023-08-24T00:00:00.000Z",
-    status: "Planned",
-    upvotes: 420,
-    downvotes: 69,
-    user: {
-      id: "1",
-      firstName: "Back",
-      lastName: "Feed",
-    },
-  };
+  const [session, { post: feedback }] = await Promise.all([
+    getAuthSession(),
+    sdk.FeedbackById({ rowId: feedbackId }),
+  ]);
 
   const breadcrumbs = [
     {
       label: app.organizationsPage.breadcrumb,
       href: "/organizations",
     },
     {
-      // TODO: Use actual organization name here instead of ID
-      label: organizationId,
+      label: feedback?.project?.organization?.name ?? organizationId,
       href: `/organizations/${organizationId}`,
     },
     {
       label: app.projectsPage.breadcrumb,
       href: `/organizations/${organizationId}/projects`,
     },
     {
-      // TODO: Use actual project name here instead of ID
-      label: projectId,
+      label: feedback?.project?.name ?? projectId,
       href: `/organizations/${organizationId}/projects/${projectId}`,
     },
     {
       label: app.feedbackPage.breadcrumb,
     },
   ];
 
-  if (!session) notFound();
+  if (!session || !feedback) notFound();
 
   return (
     <Page breadcrumbs={breadcrumbs}>
-      <FeedbackDetails feedback={FEEDBACK} />
+      <FeedbackDetails feedbackId={feedbackId} />
 
-      <Comments />
+      <Comments feedbackId={feedbackId} />
     </Page>
   );
 };

src/components/core/Breadcrumb/Breadcrumb.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Flex, Icon, Text, useBreakpointValue } from "@omnidev/sigil";
+import { Flex, Icon, Text } from "@omnidev/sigil";
 import { app } from "lib/config";
 import Link from "next/link";
 import { LuChevronRight } from "react-icons/lu";
@@ -20,44 +20,49 @@ interface Props {
 /**
  * Breadcrumb.
  */
-const Breadcrumb = ({ breadcrumbs }: Props) => {
-  const isDesktop = useBreakpointValue({ base: false, lg: true });
-
-  return (
-    <Flex fontSize="sm">
-      <Link href="/">
-        <Text
-          color="foreground.subtle"
-          _hover={{ color: "foreground.default" }}
-        >
-          {app.breadcrumb}
-        </Text>
-      </Link>
-
-      {breadcrumbs.map(({ label, href }, index) => {
-        const isLastItem = breadcrumbs.length - 1 === index;
-
-        return (
-          <Flex key={label} align="center">
-            <Icon src={LuChevronRight} color="foreground.subtle" mx={2} />
-
-            {href ? (
-              <Link href={href}>
-                <Text
-                  color="foreground.subtle"
-                  _hover={{ color: "foreground.default" }}
-                >
-                  {!isDesktop && !isLastItem ? "..." : label}
-                </Text>
-              </Link>
-            ) : (
-              <Text>{label}</Text>
-            )}
-          </Flex>
-        );
-      })}
-    </Flex>
-  );
-};
+const Breadcrumb = ({ breadcrumbs }: Props) => (
+  <Flex fontSize="sm">
+    <Link href="/">
+      <Text color="foreground.subtle" _hover={{ color: "foreground.default" }}>
+        {app.breadcrumb}
+      </Text>
+    </Link>
+
+    {breadcrumbs.map(({ label, href }, index) => {
+      const isLastItem = breadcrumbs.length - 1 === index;
+
+      return (
+        <Flex key={label} align="center">
+          <Icon src={LuChevronRight} color="foreground.subtle" mx={2} />
+
+          {href ? (
+            <Link href={href}>
+              <Text
+                display={isLastItem ? "none" : { base: "inline", lg: "none" }}
+                color={{
+                  base: "foreground.subtle",
+                  _hover: "foreground.default",
+                }}
+              >
+                ...
+              </Text>
+              <Text
+                display={isLastItem ? "inline" : { base: "none", lg: "inline" }}
+                color={{
+                  base: "foreground.subtle",
+                  _hover: "foreground.default",
+                }}
+              >
+                {label}
+              </Text>
+            </Link>
+          ) : (
+            <Text>{label}</Text>
+          )}
+        </Flex>
+      );
+    })}
+  </Flex>
+);
 
 export default Breadcrumb;

src/components/feedback/CommentCard/CommentCard.tsx

@@ -7,11 +7,11 @@ import type { StackProps } from "@omnidev/sigil";
 
 interface Props extends StackProps {
   /** Comment sender. */
-  senderName: string;
+  senderName: string | null | undefined;
   /** Comment message. */
-  message: string;
+  message: string | null | undefined;
   /** Comment date. */
-  date: string;
+  date: Date | null | undefined;
 }
 
 /**
@@ -36,7 +36,7 @@ const Comment = ({ senderName, message, date, ...rest }: Props) => (
       w={8}
       display={{ base: "none", sm: "flex" }}
     >
-      <Text color="foreground.muted">{senderName[0]}</Text>
+      <Text color="foreground.muted">{senderName?.[0]}</Text>
     </VStack>
 
     <Stack gap={1} flex={1}>

src/components/feedback/Comments/Comments.tsx

@@ -9,86 +9,49 @@ import {
   Textarea,
   VStack,
 } from "@omnidev/sigil";
-import { useState } from "react";
 import { LuMessageSquare } from "react-icons/lu";
 import useInfiniteScroll from "react-infinite-scroll-hook";
 
 import { SkeletonArray, Spinner } from "components/core";
 import { CommentCard } from "components/feedback";
-import { ErrorBoundary, SectionContainer } from "components/layout";
+import { EmptyState, ErrorBoundary, SectionContainer } from "components/layout";
+import { useInfiniteCommentsQuery } from "generated/graphql";
 import { app } from "lib/config";
-import { useDataState } from "lib/hooks";
 
-const COMMENTS = {
-  totalCount: 24,
-  data: [
-    {
-      id: "1",
-      senderName: "Back Feed",
-      message: "I still like turtles.",
-      date: "2024-11-01T00:00:00.000Z",
-    },
-    {
-      id: "2",
-      senderName: "Feed Back",
-      message: "The new dashboard layout is much more intuitive!",
-      date: "2024-04-02T00:00:00.000Z",
-    },
-    {
-      id: "3",
-      senderName: "Fed Front",
-      message: "Having issues with the new export feature.",
-      date: "2024-01-03T00:00:00.000Z",
-    },
-    {
-      id: "4",
-      senderName: "Back Fed",
-      message: "Would love to be able to export feedback.",
-      date: "2023-01-04T00:00:00.000Z",
-    },
-  ],
-};
+interface Props {
+  /** Feedback ID. */
+  feedbackId: string;
+}
 
 /**
  * Feedback comments section.
  */
-const Comments = () => {
-  const [shownComments, setShownComments] = useState(COMMENTS.data);
-
-  const [pageState, setPageState] = useState<{
-    currentPage: number;
-    hasNextPage: boolean;
-  }>({ currentPage: 1, hasNextPage: true });
-
-  const { isLoading, isError } = useDataState({ timeout: 700 });
-
-  // NB: temporarily used to mock an infinite query
-  // TODO replace with real data query
-  const handleLoadMore = () => {
-    if (!pageState.hasNextPage) return;
-
-    setPageState((prev) => ({
-      ...prev,
-      currentPage: prev.currentPage + 1,
-    }));
-
-    if (
-      pageState.currentPage >=
-      Math.floor(COMMENTS.totalCount / COMMENTS.data.length) - 1
-    ) {
-      setPageState((prev) => ({
-        ...prev,
-        hasNextPage: false,
-      }));
-    }
-
-    setShownComments((prev) => prev.concat(COMMENTS.data));
-  };
+const Comments = ({ feedbackId }: Props) => {
+  const { data, isLoading, isError, hasNextPage, fetchNextPage } =
+    useInfiniteCommentsQuery(
+      {
+        pageSize: 5,
+        feedbackId,
+      },
+      {
+        initialPageParam: undefined,
+        getNextPageParam: (lastPage) =>
+          lastPage?.comments?.pageInfo?.hasNextPage
+            ? { after: lastPage?.comments?.pageInfo?.endCursor }
+            : undefined,
+      }
+    );
+
+  // These are not defined within the `select` function in order to preserve type safety.
+  const totalCount = data?.pages?.[0]?.comments?.totalCount ?? 0;
+  const comments = data?.pages?.flatMap((page) =>
+    page?.comments?.edges?.map((edge) => edge?.node)
+  );
 
   const [loaderRef, { rootRef }] = useInfiniteScroll({
     loading: isLoading,
-    hasNextPage: pageState.hasNextPage,
-    onLoadMore: handleLoadMore,
+    hasNextPage: hasNextPage,
+    onLoadMore: fetchNextPage,
     disabled: isError,
     // NB: `rootMargin` is passed to `IntersectionObserver`. We can use it to trigger 'onLoadMore' when the spinner comes *near* to being visible, instead of when it becomes fully visible within the root element.
     rootMargin: "0px 0px 400px 0px",
@@ -107,51 +70,50 @@ const Comments = () => {
           borderColor="border.subtle"
           fontSize="sm"
           minH={16}
+          disabled
         />
 
         <Stack justify="space-between" direction="row">
           <Skeleton isLoaded={!isLoading} h="fit-content">
             <Text
               fontSize="sm"
               color="foreground.muted"
-            >{`${isError ? 0 : COMMENTS.totalCount} ${app.feedbackPage.comments.totalComments}`}</Text>
+            >{`${isError ? 0 : totalCount} ${app.feedbackPage.comments.totalComments}`}</Text>
           </Skeleton>
 
-          <Button
-            w="fit-content"
-            placeSelf="flex-end"
-            // TODO: discuss if disabling this button (mutation) is the right approach if an error is encountered fetching the comments
-            disabled={isLoading || isError}
-          >
+          <Button w="fit-content" placeSelf="flex-end" disabled>
             {app.feedbackPage.comments.submit}
           </Button>
         </Stack>
 
         {isError ? (
-          <ErrorBoundary message="Error fetching comments" h="sm" />
+          <ErrorBoundary message="Error fetching comments" h="xs" />
         ) : (
           // NB: the padding is necessary to prevent clipping of the card borders/box shadows
           <Grid gap={2} mt={4} maxH="sm" overflow="auto" p="1px">
             {isLoading ? (
               <SkeletonArray count={5} h={21} />
-            ) : (
+            ) : comments?.length ? (
               <VStack>
-                {shownComments.map(
-                  ({ id, senderName, message, date }, index) => (
-                    <CommentCard
-                      // biome-ignore lint/suspicious/noArrayIndexKey: index needed as key for the time being
-                      key={`${id}-${index}`}
-                      senderName={senderName}
-                      message={message}
-                      date={date}
-                      w="full"
-                      minH={21}
-                    />
-                  )
-                )}
-
-                {pageState.hasNextPage && <Spinner ref={loaderRef} />}
+                {comments?.map((comment) => (
+                  <CommentCard
+                    key={comment?.rowId}
+                    senderName={comment?.user?.username}
+                    message={comment?.message}
+                    date={comment?.createdAt}
+                    w="full"
+                    minH={21}
+                  />
+                ))}
+
+                {hasNextPage && <Spinner ref={loaderRef} />}
               </VStack>
+            ) : (
+              <EmptyState
+                message={app.feedbackPage.comments.emptyState.message}
+                h="xs"
+                w="full"
+              />
             )}
           </Grid>
         )}