Fix Voting Bug (#139)

* fix(voting): apply appropriate userId variable to required queries

* refactor(feedback-card): remove opacity change if status is being updated

* refactor(feedback-card): update pending states

* fix: update query key management for voting mutations

Author: hobbescodes

src/app/organizations/[organizationSlug]/projects/[projectSlug]/[feedbackId]/page.tsx

@@ -70,8 +70,14 @@ const FeedbackPage = async ({ params }: Props) => {
 
   await Promise.all([
     queryClient.prefetchQuery({
-      queryKey: useFeedbackByIdQuery.getKey({ rowId: feedbackId }),
-      queryFn: useFeedbackByIdQuery.fetcher({ rowId: feedbackId }),
+      queryKey: useFeedbackByIdQuery.getKey({
+        rowId: feedbackId,
+        userId: session.user.rowId,
+      }),
+      queryFn: useFeedbackByIdQuery.fetcher({
+        rowId: feedbackId,
+        userId: session.user.rowId,
+      }),
     }),
     queryClient.prefetchQuery(
       freeTierCommentsOptions({ projectSlug, organizationSlug, feedbackId }),

src/app/organizations/[organizationSlug]/projects/[projectSlug]/page.tsx

@@ -7,6 +7,7 @@ import { auth } from "auth";
 import { Page } from "components/layout";
 import { ProjectOverview } from "components/project";
 import {
+  PostOrderBy,
   Role,
   useInfinitePostsQuery,
   useOrganizationRoleQuery,
@@ -23,7 +24,6 @@ import { freeTierFeedbackOptions } from "lib/options";
 import { getQueryClient, getSearchParams } from "lib/util";
 
 import type { BreadcrumbRecord } from "components/core";
-import type { PostOrderBy } from "generated/graphql";
 import type { SearchParams } from "nuqs/server";
 
 export const generateMetadata = async ({ params }: Props) => {
@@ -108,14 +108,20 @@ const ProjectPage = async ({ params, searchParams }: Props) => {
       queryKey: useInfinitePostsQuery.getKey({
         projectId: project.rowId,
         excludedStatuses,
-        orderBy: orderBy ? (orderBy as PostOrderBy) : undefined,
+        orderBy: orderBy
+          ? [orderBy as PostOrderBy, PostOrderBy.CreatedAtDesc]
+          : undefined,
         search,
+        userId: session.user.rowId,
       }),
       queryFn: usePostsQuery.fetcher({
         projectId: project.rowId,
         excludedStatuses,
-        orderBy: orderBy ? (orderBy as PostOrderBy) : undefined,
+        orderBy: orderBy
+          ? [orderBy as PostOrderBy, PostOrderBy.CreatedAtDesc]
+          : undefined,
         search,
+        userId: session.user.rowId,
       }),
       initialPageParam: undefined,
     }),

src/components/feedback/CommentCard/CommentCard.tsx

@@ -36,7 +36,7 @@ import type { Session } from "next-auth";
 
 interface Props extends StackProps {
   /** Authenticated user. */
-  user: Session["user"];
+  user: Session["user"] | undefined;
   /** Comment. */
   comment: CommentFragment;
   /** Organization ID. */
@@ -88,7 +88,10 @@ const CommentCard = ({
           }),
           queryClient.invalidateQueries({ queryKey: ["Posts.infinite"] }),
           queryClient.invalidateQueries({
-            queryKey: useFeedbackByIdQuery.getKey({ rowId: feedbackId }),
+            queryKey: useFeedbackByIdQuery.getKey({
+              rowId: feedbackId,
+              userId: user?.rowId,
+            }),
           }),
         ]),
     });

src/components/feedback/CreateComment/CreateComment.tsx

@@ -71,6 +71,7 @@ const CreateComment = ({ user, canCreateComment }: Props) => {
         queryClient.invalidateQueries({
           queryKey: useFeedbackByIdQuery.getKey({
             rowId: feedbackId,
+            userId: user?.rowId,
           }),
         }),
       ]);

src/components/feedback/CreateReply/CreateReply.tsx

@@ -78,6 +78,7 @@ const CreateReply = ({ commentId, canReply, onReply, ...rest }: Props) => {
         queryClient.invalidateQueries({
           queryKey: useFeedbackByIdQuery.getKey({
             rowId: feedbackId,
+            userId: user?.rowId,
           }),
         }),
         queryClient.invalidateQueries(

src/components/feedback/FeedbackCard/FeedbackCard.tsx

@@ -124,14 +124,18 @@ const FeedbackCard = ({
     useUpdatePostMutation({
       onMutate: (variables) => {
         const feedbackSnapshot = queryClient.getQueryData(
-          useFeedbackByIdQuery.getKey({ rowId: feedback.rowId! }),
+          useFeedbackByIdQuery.getKey({
+            rowId: feedback.rowId!,
+            userId: user?.rowId,
+          }),
         ) as FeedbackByIdQuery;
 
         const postsQueryKey = useInfinitePostsQuery.getKey({
           projectId: feedback.project?.rowId!,
           excludedStatuses,
           orderBy: orderBy ? (orderBy as PostOrderBy) : undefined,
           search,
+          userId: user?.rowId,
         });
 
         const postsSnapshot = queryClient.getQueryData(
@@ -144,7 +148,10 @@ const FeedbackCard = ({
 
         if (feedbackSnapshot) {
           queryClient.setQueryData(
-            useFeedbackByIdQuery.getKey({ rowId: feedback.rowId! }),
+            useFeedbackByIdQuery.getKey({
+              rowId: feedback.rowId!,
+              userId: user?.rowId,
+            }),
             {
               post: {
                 ...feedbackSnapshot.post,
@@ -199,26 +206,26 @@ const FeedbackCard = ({
           }),
 
           queryClient.invalidateQueries({
-            queryKey: useFeedbackByIdQuery.getKey({ rowId: feedback.rowId! }),
+            queryKey: useFeedbackByIdQuery.getKey({
+              rowId: feedback.rowId!,
+              userId: user?.rowId,
+            }),
           }),
         ]),
     });
 
-  const userUpvote = feedback?.userUpvotes?.nodes[0],
-    userDownvote = feedback?.userDownvotes?.nodes[0],
+  const userUpvote = user ? feedback?.userUpvotes?.nodes[0] : null,
+    userDownvote = user ? feedback?.userDownvotes?.nodes[0] : null,
     totalUpvotes = feedback?.upvotes?.totalCount ?? 0,
     totalDownvotes = feedback?.downvotes?.totalCount ?? 0;
 
   const isAuthor = user?.rowId === feedback.user?.rowId;
 
   const canAdjustFeedback = isAuthor || canManageFeedback;
 
-  const isPending = feedback.rowId === "pending";
+  const isFeedbackPending = feedback.rowId === "pending";
 
-  const actionIsPending =
-    feedback.rowId === "pending" ||
-    isDeleteFeedbackPending ||
-    isUpdateStatusPending;
+  const actionIsPending = isFeedbackPending || isDeleteFeedbackPending;
 
   return (
     <HStack
@@ -259,7 +266,9 @@ const FeedbackCard = ({
               />
 
               <Text color="foreground.subtle">
-                {dayjs(isPending ? new Date() : feedback.createdAt).fromNow()}
+                {dayjs(
+                  isFeedbackPending ? new Date() : feedback.createdAt,
+                ).fromNow()}
               </Text>
             </Stack>
           </Stack>
@@ -271,6 +280,7 @@ const FeedbackCard = ({
             downvote={userDownvote}
             totalUpvotes={totalUpvotes}
             totalDownvotes={totalDownvotes}
+            isFeedbackRoute={!!isFeedbackRoute}
           />
         </HStack>
 
@@ -296,7 +306,10 @@ const FeedbackCard = ({
                   </StatusBadge>
                 }
                 triggerProps={{
-                  disabled: !canManageFeedback || actionIsPending,
+                  disabled:
+                    !canManageFeedback ||
+                    actionIsPending ||
+                    isUpdateStatusPending,
                 }}
                 positioning={{ strategy: "fixed" }}
               >
@@ -336,14 +349,15 @@ const FeedbackCard = ({
                 fontSize="sm"
                 color="foreground.subtle"
               >
-                {`Updated ${dayjs(isPending ? new Date() : feedback.statusUpdatedAt).fromNow()}`}
+                {`Updated ${dayjs(isUpdateStatusPending ? new Date() : feedback.statusUpdatedAt).fromNow()}`}
               </Text>
             </HStack>
 
             <HStack>
               {canAdjustFeedback && (
                 <HStack>
                   <UpdateFeedback
+                    user={user}
                     feedback={feedback}
                     triggerProps={{
                       disabled: actionIsPending,

src/components/feedback/FeedbackDetails/FeedbackDetails.tsx

@@ -25,6 +25,7 @@ const FeedbackDetails = ({ user, feedbackId, ...rest }: Props) => {
   const { data: feedback } = useFeedbackByIdQuery(
     {
       rowId: feedbackId,
+      userId: user?.rowId,
     },
     {
       select: (data) => data?.post,

src/components/feedback/Replies/Replies.tsx

@@ -22,7 +22,7 @@ import type { Session } from "next-auth";
 
 interface Props extends CollapsibleProps {
   /** Authenticated user. */
-  user: Session["user"];
+  user: Session["user"] | undefined;
   /** Organization ID. */
   organizationId: Organization["rowId"];
   /** Comment ID. */

src/components/feedback/ReplyCard/ReplyCard.tsx

@@ -20,7 +20,7 @@ import type { Session } from "next-auth";
 
 interface Props extends HstackProps {
   /** Authenticated user. */
-  user: Session["user"];
+  user: Session["user"] | undefined;
   /** Reply. */
   reply: ReplyFragment;
   /** Organization ID. */

src/components/feedback/UpdateFeedback/UpdateFeedback.tsx

@@ -24,6 +24,7 @@ import { toaster } from "lib/util";
 
 import type { DialogProps } from "@omnidev/sigil";
 import type { FeedbackFragment } from "generated/graphql";
+import type { Session } from "next-auth";
 
 const MAX_DESCRIPTION_LENGTH = 500;
 
@@ -47,14 +48,16 @@ const updateFeedbackSchema = z.object({
 });
 
 interface Props extends DialogProps {
+  /** Authenticated user. */
+  user: Session["user"] | undefined;
   /** Feedback details. */
   feedback: Partial<FeedbackFragment>;
 }
 
 /**
  * Update feedback form.
  */
-const UpdateFeedback = ({ feedback, ...rest }: Props) => {
+const UpdateFeedback = ({ user, feedback, ...rest }: Props) => {
   const queryClient = useQueryClient();
 
   const isClient = useIsClient();
@@ -74,7 +77,10 @@ const UpdateFeedback = ({ feedback, ...rest }: Props) => {
           queryKey: ["Posts.infinite"],
         }),
         queryClient.invalidateQueries({
-          queryKey: useFeedbackByIdQuery.getKey({ rowId: feedback.rowId! }),
+          queryKey: useFeedbackByIdQuery.getKey({
+            rowId: feedback.rowId!,
+            userId: user?.rowId,
+          }),
         }),
       ]);
     },