Merge pull request #110 from game-node-app/dev

Improved comments list edit mode
game-node-app · Aug 15, 2024 · 31b8b8d · 31b8b8d
2 parents d8c34b4 + 5380c03
commit 31b8b8d
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 121 deletions.
diff --git a/src/components/comment/editor/CommentEditorView.tsx b/src/components/comment/editor/CommentEditorView.tsx
@@ -34,18 +34,19 @@ interface Props {
      * Ideally, should be cleared when 'onCancel' is called.
      */
     commentId?: string;
-    onCancel: () => void;
+    /**
+     * Triggered when the user clicks the cancel or finishes submitting with success.
+     */
+    onEditEnd?: () => void;
     sourceType: CreateCommentDto.sourceType;
     sourceId: string;
-    editorContainerRef?: RefObject<HTMLDivElement>;
 }
 
 const CommentEditorView = ({
     commentId,
     sourceType,
     sourceId,
-    onCancel,
-    editorContainerRef,
+    onEditEnd,
 }: Props) => {
     const queryClient = useQueryClient();
     const editorRef = useRef<Editor>();
@@ -59,7 +60,6 @@ const CommentEditorView = ({
     const clearEditor = () => {
         editorRef.current?.commands.clearContent();
         setShouldShowActionButtons(false);
-        onCancel();
     };
 
     const commentMutation = useMutation({
@@ -91,6 +91,7 @@ const CommentEditorView = ({
                 message: "Successfully submitted your comment!",
             });
             clearEditor();
+            if (onEditEnd) onEditEnd();
         },
     });
 
@@ -109,13 +110,8 @@ const CommentEditorView = ({
     }, [commentId, commentQuery.data, previousContent]);
 
     return (
-        <Stack className={"w-full h-full relative"} ref={editorContainerRef}>
+        <Stack className={"w-full h-full relative"}>
             <LoadingOverlay visible={commentQuery.isLoading} />
-            {isUpdateAction && (
-                <Text c={"dimmed"}>
-                    You are currently editing one of your previous comments.
-                </Text>
-            )}
             <CommentEditor
                 content={previousContent}
                 onUpdate={(props) => {
@@ -132,6 +128,7 @@ const CommentEditorView = ({
                         variant={"default"}
                         onClick={() => {
                             clearEditor();
+                            if (onEditEnd) onEditEnd();
                         }}
                     >
                         <IconX />

diff --git a/src/components/comment/view/CommentsListItem.tsx b/src/components/comment/view/CommentsListItem.tsx
@@ -42,54 +42,47 @@ const CommentsListItem = ({ comment, onEditStart, editedCommentId }: Props) => {
 
     return (
         <Stack className={"w-full h-full"}>
-            <Group className={"w-full h-full"} wrap={"nowrap"}>
-                <Divider
-                    orientation={"vertical"}
-                    color={isEditing ? "brand" : undefined}
-                    size={"sm"}
-                />
-                <Group w={"100%"} justify={"space-evenly"} wrap={"wrap"}>
-                    <Group className={"w-full flex-nowrap justify-between"}>
-                        <Flex
-                            justify={{
-                                base: "space-between",
-                                lg: "start",
+            <Group w={"100%"} justify={"space-evenly"} wrap={"wrap"}>
+                <Group className={"w-full flex-nowrap justify-between"}>
+                    <Flex
+                        justify={{
+                            base: "space-between",
+                            lg: "start",
+                        }}
+                        align={{
+                            base: "center",
+                            lg: "start",
+                        }}
+                    >
+                        <UserAvatarGroup
+                            avatarProps={{
+                                size: onMobile ? "lg" : "xl",
                             }}
-                            align={{
-                                base: "center",
-                                lg: "start",
-                            }}
-                        >
-                            <UserAvatarGroup
-                                avatarProps={{
-                                    size: onMobile ? "lg" : "xl",
-                                }}
-                                userId={comment.profileUserId}
-                                groupProps={{
-                                    gap: "md",
-                                }}
-                            />
-                        </Flex>
-
-                        <ActivityCreateDate createdAtDate={comment.createdAt} />
-                    </Group>
-
-                    <Stack className={"w-full"}>
-                        <EditorContent
-                            editor={nonEditableEditor}
-                            className={"w-full"}
-                            onClick={() => {
-                                setIsReadMore(!isReadMore);
+                            userId={comment.profileUserId}
+                            groupProps={{
+                                gap: "md",
                             }}
                         />
-                    </Stack>
-                    <Stack className={"w-full"}>
-                        <CommentsListItemActions
-                            comment={comment}
-                            onEditStart={onEditStart}
-                        />
-                    </Stack>
+                    </Flex>
+
+                    <ActivityCreateDate createdAtDate={comment.createdAt} />
                 </Group>
+
+                <Stack className={"w-full"}>
+                    <EditorContent
+                        editor={nonEditableEditor}
+                        className={"w-full"}
+                        onClick={() => {
+                            setIsReadMore(!isReadMore);
+                        }}
+                    />
+                </Stack>
+                <Stack className={"w-full"}>
+                    <CommentsListItemActions
+                        comment={comment}
+                        onEditStart={onEditStart}
+                    />
+                </Stack>
             </Group>
         </Stack>
     );

diff --git a/src/components/comment/view/CommentsListView.tsx b/src/components/comment/view/CommentsListView.tsx
@@ -3,24 +3,28 @@ import {
     useComments,
     UseCommentsProps,
 } from "@/components/comment/hooks/useComments";
-import { Pagination, Paper, Stack } from "@mantine/core";
+import {
+    Divider,
+    Group,
+    LoadingOverlay,
+    Pagination,
+    Paper,
+    Stack,
+} from "@mantine/core";
 import CommentsListItem from "@/components/comment/view/CommentsListItem";
 import CenteredErrorMessage from "@/components/general/CenteredErrorMessage";
 import CenteredLoading from "@/components/general/CenteredLoading";
 import GameViewPagination from "@/components/game/view/GameViewPagination";
+import CommentEditorView from "@/components/comment/editor/CommentEditorView";
 
-interface Props extends Omit<UseCommentsProps, "limit" | "offset"> {
-    onEditStart: (commentId: string) => void;
-    editedCommentId?: string;
-}
+interface Props extends Omit<UseCommentsProps, "limit" | "offset"> {}
 
 const COMMENTS_LIST_VIEW_DEFAULT_LIMIT = 10;
 
-const CommentsListView = ({
-    onEditStart,
-    editedCommentId,
-    ...hookProps
-}: Props) => {
+const CommentsListView = ({ ...hookProps }: Props) => {
+    const [editedCommentId, setEditedCommentId] = useState<string | undefined>(
+        undefined,
+    );
     const [offset, setOffset] = useState(0);
     const offsetAsPage =
         offset >= COMMENTS_LIST_VIEW_DEFAULT_LIMIT
@@ -39,16 +43,54 @@ const CommentsListView = ({
                 return aCreateDate.getTime() - bCreateDate.getTime();
             })
             .map((comment) => {
+                if (comment.id === editedCommentId) {
+                    return (
+                        <Group
+                            key={`editing-${comment.id}`}
+                            className={"w-full h-full"}
+                            wrap={"nowrap"}
+                        >
+                            <Divider
+                                orientation={"vertical"}
+                                color={"brand"}
+                                size={"sm"}
+                            />
+                            <CommentEditorView
+                                sourceType={hookProps.sourceType}
+                                sourceId={hookProps.sourceId}
+                                commentId={editedCommentId}
+                                onEditEnd={() => {
+                                    setEditedCommentId(undefined);
+                                }}
+                            />
+                        </Group>
+                    );
+                }
+
                 return (
-                    <CommentsListItem
+                    <Group
+                        className={"w-full h-full"}
+                        wrap={"nowrap"}
                         key={comment.id}
-                        comment={comment}
-                        onEditStart={onEditStart}
-                        editedCommentId={editedCommentId}
-                    />
+                    >
+                        <Divider orientation={"vertical"} size={"sm"} />
+                        <CommentsListItem
+                            key={comment.id}
+                            comment={comment}
+                            onEditStart={(commentId) =>
+                                setEditedCommentId(commentId)
+                            }
+                            editedCommentId={editedCommentId}
+                        />
+                    </Group>
                 );
             });
-    }, [commentsQuery.data?.data, editedCommentId, onEditStart]);
+    }, [
+        commentsQuery.data?.data,
+        editedCommentId,
+        hookProps.sourceId,
+        hookProps.sourceType,
+    ]);
 
     const hasNextPage =
         commentsQuery.data != undefined &&
@@ -57,13 +99,13 @@ const CommentsListView = ({
     const shouldShowPagination =
         commentsQuery.data != undefined && (offsetAsPage !== 1 || hasNextPage);
     return (
-        <Stack className={"w-full h-full"}>
+        <Stack className={"w-full h-full relative"}>
             {commentsQuery.isError && (
                 <CenteredErrorMessage
                     message={"Error while fetching comments. Please try again."}
                 />
             )}
-            {commentsQuery.isLoading && <CenteredLoading />}
+            <LoadingOverlay visible={commentsQuery.isLoading} />
             {items}
             {shouldShowPagination && (
                 <GameViewPagination
@@ -73,6 +115,7 @@ const CommentsListView = ({
                         const pageAsOffset =
                             COMMENTS_LIST_VIEW_DEFAULT_LIMIT * (page - 1);
                         setOffset(pageAsOffset);
+                        setEditedCommentId(undefined);
                     }}
                 />
             )}

diff --git a/src/components/game/info/review/GameInfoReviewList.tsx b/src/components/game/info/review/GameInfoReviewList.tsx
@@ -85,6 +85,13 @@ const GameInfoReviewList = ({ gameId }: IGameInfoReviewListProps) => {
     const isLoading = trendingReviewsQuery.isLoading || reviewsQuery.isLoading;
     const isError = trendingReviewsQuery.isError || reviewsQuery.isError;
 
+    const shouldShowPagination =
+        (trendingReviewsQuery.data != undefined &&
+            trendingReviewsQuery.data.pagination.hasNextPage) ||
+        offset > 0;
+
+    console.log(shouldShowPagination);
+
     const handlePagination = (page: number) => {
         const offset = (page - 1) * DEFAULT_LIMIT;
         const updatedDto: FindStatisticsTrendingReviewsDto = {
@@ -149,14 +156,15 @@ const GameInfoReviewList = ({ gameId }: IGameInfoReviewListProps) => {
                     )}
                     {content}
                 </Stack>
-                <Group w={"100%"} justify={"center"}>
-                    {!isEmpty && (
+
+                {shouldShowPagination && (
+                    <Group w={"100%"} justify={"center"}>
                         <Pagination
                             total={trendingReviewsPagination?.totalPages ?? 1}
                             onChange={handlePagination}
                         />
-                    )}
-                </Group>
+                    </Group>
+                )}
             </Stack>
         </DetailsBox>
     );

diff --git a/src/components/review/view/ReviewListItem.tsx b/src/components/review/view/ReviewListItem.tsx
@@ -146,8 +146,8 @@ const ReviewListItem = ({
                     </Group>
                 </Stack>
             </Group>
-            <Group className={"w-full"} justify={"end"} wrap={"nowrap"}>
-                <Group className={"w-[95%] lg:w-[98%]"}>
+            <Group className={"w-full mb-4 "} wrap={"nowrap"}>
+                <Group className={"w-full lg:ms-6"}>
                     <ReviewListItemComments
                         enabled={isCommentsOpen}
                         review={review}

diff --git a/src/components/review/view/ReviewListItemComments.tsx b/src/components/review/view/ReviewListItemComments.tsx
@@ -15,12 +15,6 @@ const ReviewListItemComments = ({
     review,
     enabled,
 }: ReviewListItemCommentsProps) => {
-    const [editedCommentId, setEditedCommentId] = useState<string | undefined>(
-        undefined,
-    );
-
-    const editorContainerRef = useRef<HTMLDivElement>(null);
-
     return (
         <Stack
             className={`w-full h-full hidden data-[enabled=true]:flex`}
@@ -30,27 +24,11 @@ const ReviewListItemComments = ({
                 enabled={enabled}
                 sourceId={review.id}
                 sourceType={sourceType.REVIEW}
-                editedCommentId={editedCommentId}
-                onEditStart={(commentId) => {
-                    setEditedCommentId(commentId);
-                    if (editorContainerRef.current) {
-                        editorContainerRef.current.scrollIntoView({
-                            behavior: "smooth",
-                            inline: "nearest",
-                            block: "center",
-                        });
-                    }
-                }}
             />
             <Space h={"0.5rem"} />
             <CommentEditorView
-                commentId={editedCommentId}
                 sourceType={sourceType.REVIEW}
                 sourceId={review.id}
-                onCancel={() => {
-                    setEditedCommentId(undefined);
-                }}
-                editorContainerRef={editorContainerRef}
             />
         </Stack>
     );