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

New comments modal layout
game-node-app · Dec 3, 2024 · 77e54a7 · 77e54a7
2 parents bb1801c + 3bf415c
commit 77e54a7
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 53 deletions.
diff --git a/src/components/activity/item/CollectionEntryActivityItem.tsx b/src/components/activity/item/CollectionEntryActivityItem.tsx
@@ -100,7 +100,7 @@ const CollectionEntryActivityItem = ({ activity }: Props) => {
                         <Link
                             href={`/library/${activity.profileUserId}/collection/${activity.collectionId}`}
                         >
-                            <Title size={"h3"} lineClamp={onMobile ? 1 : 2}>
+                            <Title size={"h4"} lineClamp={2}>
                                 {collectionQuery.data?.name}
                             </Title>
                         </Link>

diff --git a/src/components/collection/collection-entry/view/RecentCollectionEntriesView.tsx b/src/components/collection/collection-entry/view/RecentCollectionEntriesView.tsx
@@ -2,6 +2,7 @@ import React, { useMemo } from "react";
 import useCollectionEntriesForUserId from "@/components/collection/collection-entry/hooks/useCollectionEntriesForUserId";
 import GameView from "@/components/game/view/GameView";
 import { useGames } from "@/components/game/hooks/useGames";
+import CenteredLoading from "@/components/general/CenteredLoading";
 
 interface Props {
     userId: string;
@@ -32,6 +33,10 @@ const RecentCollectionEntriesView = ({
     });
 
     const games = gamesQuery.data;
+
+    if (gamesQuery.isLoading || collectionEntriesQuery.isLoading) {
+        return <CenteredLoading message={"Fetching games..."} />;
+    }
     return (
         <GameView layout={"grid"}>
             <GameView.Content items={games} />

diff --git a/src/components/comment/editor/CommentEditorView.tsx b/src/components/comment/editor/CommentEditorView.tsx
@@ -45,12 +45,9 @@ const CommentEditorView = ({
     const [previousContent, setPreviousContent] = useState<string | undefined>(
         undefined,
     );
-    const [shouldShowActionButtons, setShouldShowActionButtons] =
-        useState<boolean>(false);
 
     const clearEditor = () => {
         editorRef.current?.commands.clearContent();
-        setShouldShowActionButtons(false);
     };
 
     const commentMutation = useMutation({
@@ -120,7 +117,6 @@ const CommentEditorView = ({
 
         if (commentId != undefined && commentQuery.data != undefined) {
             setPreviousContent(commentQuery.data.content);
-            setShouldShowActionButtons(true);
         }
     }, [commentId, commentQuery.data, previousContent]);
 
@@ -129,36 +125,31 @@ const CommentEditorView = ({
             <LoadingOverlay visible={commentQuery.isLoading} />
             <CommentEditor
                 content={previousContent}
-                onUpdate={(props) => {
-                    setShouldShowActionButtons(true);
-                }}
                 onCreate={(props) => {
                     editorRef.current = props.editor;
                 }}
             />
-            {shouldShowActionButtons && (
-                <Group className={"w-full justify-end"}>
-                    <ActionIcon
-                        size={"lg"}
-                        variant={"default"}
-                        onClick={() => {
-                            clearEditor();
-                            if (onEditEnd) onEditEnd();
-                        }}
-                    >
-                        <IconX />
-                    </ActionIcon>
-                    <Button
-                        type={"button"}
-                        loading={commentMutation.isPending}
-                        onClick={() => {
-                            commentMutation.mutate();
-                        }}
-                    >
-                        {isUpdateAction ? "Update" : "Submit"}
-                    </Button>
-                </Group>
-            )}
+            <Group className={"w-full justify-end"}>
+                <ActionIcon
+                    size={"lg"}
+                    variant={"default"}
+                    onClick={() => {
+                        clearEditor();
+                        if (onEditEnd) onEditEnd();
+                    }}
+                >
+                    <IconX />
+                </ActionIcon>
+                <Button
+                    type={"button"}
+                    loading={commentMutation.isPending}
+                    onClick={() => {
+                        commentMutation.mutate();
+                    }}
+                >
+                    {isUpdateAction ? "Update" : "Submit"}
+                </Button>
+            </Group>
         </Stack>
     );
 };

diff --git a/src/components/review/view/ReviewListItem.tsx b/src/components/review/view/ReviewListItem.tsx
@@ -26,6 +26,7 @@ import ReviewListItemComments from "@/components/review/view/ReviewListItemComme
 import ItemLikesButton from "@/components/statistics/input/ItemLikesButton";
 import ItemCommentsButton from "@/components/comment/input/ItemCommentsButton";
 import ItemDropdown from "@/components/general/input/dropdown/ItemDropdown";
+import { useDisclosure } from "@mantine/hooks";
 
 interface IReviewListViewProps {
     review: Review;
@@ -40,7 +41,7 @@ const ReviewListItem = ({
 }: IReviewListViewProps) => {
     const onMobile = useOnMobile();
     const [isReadMore, setIsReadMore] = useState<boolean>(false);
-    const [isCommentsOpen, setIsCommentsOpen] = useState(false);
+    const [commentsModalOpened, commentsModalUtils] = useDisclosure();
 
     const nonEditableEditor = useEditor(
         {
@@ -140,7 +141,7 @@ const ReviewListItem = ({
                         <Group>
                             <ItemCommentsButton
                                 onClick={() => {
-                                    setIsCommentsOpen(!isCommentsOpen);
+                                    commentsModalUtils.open();
                                 }}
                                 sourceId={review.id}
                                 sourceType={
@@ -166,7 +167,8 @@ const ReviewListItem = ({
             <Group className={"w-full mb-4 "} wrap={"nowrap"}>
                 <Group className={"w-full lg:ms-6"}>
                     <ReviewListItemComments
-                        enabled={isCommentsOpen}
+                        opened={commentsModalOpened}
+                        onClose={commentsModalUtils.close}
                         review={review}
                     />
                 </Group>

diff --git a/src/components/review/view/ReviewListItemComments.tsx b/src/components/review/view/ReviewListItemComments.tsx
@@ -1,36 +1,43 @@
 import React, { useRef, useState } from "react";
 import { CreateCommentDto, FindAllCommentsDto, Review } from "@/wrapper/server";
-import { Divider, Space, Stack } from "@mantine/core";
+import { Divider, Modal, Space, Stack } from "@mantine/core";
 import CommentsListView from "@/components/comment/view/CommentsListView";
 import CommentEditorView from "@/components/comment/editor/CommentEditorView";
 import sourceType = FindAllCommentsDto.sourceType;
-import ItemDropdown from "@/components/general/input/dropdown/ItemDropdown";
+import { BaseModalProps } from "@/util/types/modal-props";
+import useOnMobile from "@/components/general/hooks/useOnMobile";
 
-interface ReviewListItemCommentsProps {
-    enabled: boolean;
+interface ReviewListItemCommentsProps extends BaseModalProps {
     review: Review;
 }
 
 const ReviewListItemComments = ({
     review,
-    enabled,
+    opened,
+    onClose,
 }: ReviewListItemCommentsProps) => {
+    const onMobile = useOnMobile();
+
     return (
-        <Stack
-            className={`w-full h-full hidden data-[enabled=true]:flex`}
-            data-enabled={enabled ? "true" : "false"}
+        <Modal
+            title={"Comments in this review"}
+            opened={opened}
+            onClose={onClose}
+            size={"xl"}
+            fullScreen={onMobile}
         >
-            <CommentsListView
-                enabled={enabled}
-                sourceId={review.id}
-                sourceType={sourceType.REVIEW}
-            />
-            <Space h={"0.5rem"} />
-            <CommentEditorView
-                sourceType={sourceType.REVIEW}
-                sourceId={review.id}
-            />
-        </Stack>
+            <Stack className={`w-full h-full`}>
+                <CommentsListView
+                    enabled={opened}
+                    sourceId={review.id}
+                    sourceType={sourceType.REVIEW}
+                />
+                <CommentEditorView
+                    sourceType={sourceType.REVIEW}
+                    sourceId={review.id}
+                />
+            </Stack>
+        </Modal>
     );
 };