From 5380c039ca8cc3af57d8825f1b861523bec5890f Mon Sep 17 00:00:00 2001
From: Lamarcke <cassiolamarcksilvafreitas@gmail.com>
Date: Thu, 15 Aug 2024 02:40:33 -0300
Subject: [PATCH] - Improved comments list edit mode - Changed the order of the
 game recommendation carousels in the front search page

---
 .../comment/editor/CommentEditorView.tsx      | 19 ++---
 .../comment/view/CommentsListItem.tsx         | 81 +++++++++----------
 .../comment/view/CommentsListView.tsx         | 79 +++++++++++++-----
 .../game/info/review/GameInfoReviewList.tsx   | 16 +++-
 src/components/review/view/ReviewListItem.tsx |  4 +-
 .../review/view/ReviewListItemComments.tsx    | 22 -----
 src/pages/search/index.tsx                    | 37 ++++-----
 7 files changed, 137 insertions(+), 121 deletions(-)

diff --git a/src/components/comment/editor/CommentEditorView.tsx b/src/components/comment/editor/CommentEditorView.tsx
index b22349b..ef56faf 100644
--- 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
index ff31e4a..893f212 100644
--- 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
index 684c8bc..b466f86 100644
--- 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
index c1dc1f5..03088e7 100644
--- 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
index f0dbd55..0bf6a21 100644
--- 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
index aac73e2..d5a0049 100644
--- 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>
     );
diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx
index a8a4ca2..99520fc 100755
--- a/src/pages/search/index.tsx
+++ b/src/pages/search/index.tsx
@@ -167,28 +167,14 @@ const Index = () => {
                         >
                             <TrendingGamesList />
                             <Space h={"1rem"} />
-                            {userId && (
-                                <RecommendationCarousel
-                                    criteria="finished"
-                                    stackProps={{
-                                        className: "",
-                                    }}
-                                />
-                            )}
-                            <Space h={"1rem"} />
-                            <TrendingReviewCarousel />
-                            <Space h={"1rem"} />
-                            <DetailsBox
-                                title={"Recent Activity"}
-                                stackProps={{
-                                    className: "",
-                                }}
-                            >
-                                <RecentActivityList />
-                            </DetailsBox>
-                            <Space h="1rem" />
                             {userId && (
                                 <>
+                                    <RecommendationCarousel
+                                        criteria="finished"
+                                        stackProps={{
+                                            className: "",
+                                        }}
+                                    />
                                     <RecommendationCarousel
                                         criteria="theme"
                                         stackProps={{
@@ -203,6 +189,17 @@ const Index = () => {
                                     />
                                 </>
                             )}
+                            <Space h={"1rem"} />
+                            <TrendingReviewCarousel />
+                            <Space h={"1rem"} />
+                            <DetailsBox
+                                title={"Recent Activity"}
+                                stackProps={{
+                                    className: "",
+                                }}
+                            >
+                                <RecentActivityList />
+                            </DetailsBox>
                         </Stack>
                     )}
                 </Box>