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; } const CommentEditorView = ({ commentId, sourceType, sourceId, - onCancel, - editorContainerRef, + onEditEnd, }: Props) => { const queryClient = useQueryClient(); const editorRef = useRef(); @@ -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 ( - + - {isUpdateAction && ( - - You are currently editing one of your previous comments. - - )} { @@ -132,6 +128,7 @@ const CommentEditorView = ({ variant={"default"} onClick={() => { clearEditor(); + if (onEditEnd) onEditEnd(); }} > 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 ( - - - - - + + + - - - - - - - - { - setIsReadMore(!isReadMore); + userId={comment.profileUserId} + groupProps={{ + gap: "md", }} /> - - - - + + + + + + { + setIsReadMore(!isReadMore); + }} + /> + + + + ); 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 { - onEditStart: (commentId: string) => void; - editedCommentId?: string; -} +interface Props extends Omit {} const COMMENTS_LIST_VIEW_DEFAULT_LIMIT = 10; -const CommentsListView = ({ - onEditStart, - editedCommentId, - ...hookProps -}: Props) => { +const CommentsListView = ({ ...hookProps }: Props) => { + const [editedCommentId, setEditedCommentId] = useState( + 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 ( + + + { + setEditedCommentId(undefined); + }} + /> + + ); + } + return ( - + > + + + setEditedCommentId(commentId) + } + editedCommentId={editedCommentId} + /> + ); }); - }, [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 ( - + {commentsQuery.isError && ( )} - {commentsQuery.isLoading && } + {items} {shouldShowPagination && ( )} 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} - - {!isEmpty && ( + + {shouldShowPagination && ( + - )} - + + )} ); 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 = ({ - - + + { - const [editedCommentId, setEditedCommentId] = useState( - undefined, - ); - - const editorContainerRef = useRef(null); - return ( ); 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 = () => { > - {userId && ( - - )} - - - - - - - {userId && ( <> + { /> )} + + + + + + )}