-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: reply comment UI 추가 - flickering 오류 고치기 (#112)
- Loading branch information
1 parent
67cd074
commit 8a56d59
Showing
12 changed files
with
250 additions
and
130 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
64 changes: 64 additions & 0 deletions
64
src/pages/board/postDetail/components/Comment/PostReplyComments.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import { observer } from 'mobx-react-lite'; | ||
| import { useCallback, useEffect, useRef } from 'react'; | ||
| import { generatePath, useHistory, useParams } from 'react-router-dom'; | ||
| import { Virtuoso } from 'react-virtuoso'; | ||
|
|
||
| import { ReplyCommentContainer } from './ReplyCommentContainer'; | ||
| import { BackLink, ReplyCommentsBox } from './styled'; | ||
| import { CommentCard } from '../Comment'; | ||
|
|
||
| import { PAGE_URL, PostParams } from '@/configs/path'; | ||
| import { usePageUiStore } from '@/hooks'; | ||
|
|
||
| export const PostReplyComments: React.FC<{ model: Model.Comment }> = observer(({ model }) => { | ||
| //const { boardId, postId, commentId } = useParams<PostParams>(); | ||
| //const { replace } = useHistory(); | ||
| const { | ||
| setVirtuosoRef, | ||
| screenRef, | ||
| replyComments: { fetch, reset, parent, comments, hasMore, page }, | ||
| commentInput: { resetState }, | ||
| } = usePageUiStore<PageUiStore.PostDetail>(); | ||
|
|
||
| // const handleBack = useCallback( | ||
| // () => replace(generatePath(PAGE_URL.PostDetail, { boardId, postId })), | ||
| // [boardId, postId], | ||
| // ); | ||
|
|
||
| const virtuoso = useRef(null); | ||
| const timer = useRef<NodeJS.Timeout>(); | ||
| const loadMore = useCallback( | ||
| (hasMore: boolean, page: number) => () => { | ||
| if (timer.current) clearTimeout(timer.current); | ||
| if (hasMore) timer.current = setTimeout(() => fetch(model.id, page + 1), 50); | ||
| }, | ||
| [model.postId], | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| setVirtuosoRef(virtuoso); | ||
| }, [parent]); | ||
|
|
||
| useEffect(() => { | ||
| fetch(model.id); | ||
|
|
||
| return () => { | ||
| reset(); | ||
| resetState(); | ||
| }; | ||
| }, [model.id]); | ||
|
|
||
| return parent ? ( | ||
| <ReplyCommentsBox> | ||
| <Virtuoso | ||
| ref={virtuoso} | ||
| style={{ maxHeight: '100vh', marginTop: '5px' }} | ||
| customScrollParent={screenRef?.current as HTMLElement} | ||
| endReached={loadMore(hasMore, page)} | ||
| overscan={200} | ||
| data={comments} | ||
| itemContent={(index, comment) => <ReplyCommentContainer key={comment.id} model={comment} />} | ||
| /> | ||
| </ReplyCommentsBox> | ||
| ) : null; | ||
| }); |
34 changes: 34 additions & 0 deletions
34
src/pages/board/postDetail/components/Comment/ReplyCommentContainer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { computed } from 'mobx'; | ||
| import { observer } from 'mobx-react-lite'; | ||
| import { useCallback, useRef } from 'react'; | ||
| import { useLongPress } from 'use-long-press'; | ||
|
|
||
| import { CommentCardView } from './CommentCardView'; | ||
| import { Li } from './styled'; | ||
| import { InputState } from '../CommentInput'; | ||
|
|
||
| import { usePageUiStore } from '@/hooks'; | ||
|
|
||
| export const ReplyCommentContainer: React.FC<{ model: Model.Comment }> = observer(({ model }) => { | ||
| const ref = useRef<HTMLLIElement>(null); | ||
| const { | ||
| commentInput, | ||
| commentMenuModal: { open }, | ||
| } = usePageUiStore<PageUiStore.PostDetail>(); | ||
| const state = computed(() => | ||
| commentInput.target?.id === model.id ? commentInput.state : InputState.WRITE, | ||
| ).get(); | ||
|
|
||
| const handleLongPress = useCallback(model => () => open(model), [open]); | ||
| const bind = useLongPress(handleLongPress(model), { | ||
| cancelOnMovement: true, | ||
| captureEvent: true, | ||
| onFinish: ev => ev?.preventDefault(), | ||
| }); | ||
|
|
||
| return ( | ||
| <Li ref={ref} {...bind()}> | ||
| <CommentCardView state={state} model={model} /> | ||
| </Li> | ||
| ); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
114 changes: 57 additions & 57 deletions
114
src/pages/board/postDetail/components/ReplyComment/PostReplyComments.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,66 +1,66 @@ | ||
| import { observer } from 'mobx-react-lite'; | ||
| import { useCallback, useEffect, useRef } from 'react'; | ||
| import { generatePath, useHistory, useParams } from 'react-router-dom'; | ||
| import { Virtuoso } from 'react-virtuoso'; | ||
| // import { observer } from 'mobx-react-lite'; | ||
| // import { useCallback, useEffect, useRef } from 'react'; | ||
| // import { generatePath, useHistory, useParams } from 'react-router-dom'; | ||
| // import { Virtuoso } from 'react-virtuoso'; | ||
|
|
||
| import { ReplyCommentContainer } from './ReplyCommentContainer'; | ||
| import { BackLink, CommentsBox } from './styled'; | ||
| import { CommentCard } from '../Comment'; | ||
| // import { ReplyCommentContainer } from './ReplyCommentContainer'; | ||
| // import { BackLink, CommentsBox } from './styled'; | ||
| // import { CommentCard } from '../Comment'; | ||
|
|
||
| import { PAGE_URL, PostParams } from '@/configs/path'; | ||
| import { usePageUiStore } from '@/hooks'; | ||
| // import { PAGE_URL, PostParams } from '@/configs/path'; | ||
| // import { usePageUiStore } from '@/hooks'; | ||
|
|
||
| export const PostReplyComments: React.FC = observer(() => { | ||
| const { boardId, postId, commentId } = useParams<PostParams>(); | ||
| const { replace } = useHistory(); | ||
| const { | ||
| setVirtuosoRef, | ||
| screenRef, | ||
| replyComments: { fetch, reset, parent, comments, hasMore, page }, | ||
| commentInput: { resetState }, | ||
| } = usePageUiStore<PageUiStore.PostDetail>(); | ||
| // export const PostReplyComments: React.FC = observer(() => { | ||
| // const { boardId, postId, commentId } = useParams<PostParams>(); | ||
| // const { replace } = useHistory(); | ||
| // const { | ||
| // setVirtuosoRef, | ||
| // screenRef, | ||
| // replyComments: { fetch, reset, parent, comments, hasMore, page }, | ||
| // commentInput: { resetState }, | ||
| // } = usePageUiStore<PageUiStore.PostDetail>(); | ||
|
|
||
| const handleBack = useCallback( | ||
| () => replace(generatePath(PAGE_URL.PostDetail, { boardId, postId })), | ||
| [boardId, postId], | ||
| ); | ||
| // const handleBack = useCallback( | ||
| // () => replace(generatePath(PAGE_URL.PostDetail, { boardId, postId })), | ||
| // [boardId, postId], | ||
| // ); | ||
|
|
||
| const virtuoso = useRef(null); | ||
| const timer = useRef<NodeJS.Timeout>(); | ||
| const loadMore = useCallback( | ||
| (hasMore: boolean, page: number) => () => { | ||
| if (timer.current) clearTimeout(timer.current); | ||
| if (hasMore) timer.current = setTimeout(() => fetch(commentId, page + 1), 50); | ||
| }, | ||
| [postId], | ||
| ); | ||
| // const virtuoso = useRef(null); | ||
| // const timer = useRef<NodeJS.Timeout>(); | ||
| // const loadMore = useCallback( | ||
| // (hasMore: boolean, page: number) => () => { | ||
| // if (timer.current) clearTimeout(timer.current); | ||
| // if (hasMore) timer.current = setTimeout(() => fetch(commentId, page + 1), 50); | ||
| // }, | ||
| // [postId], | ||
| // ); | ||
|
|
||
| useEffect(() => { | ||
| setVirtuosoRef(virtuoso); | ||
| }, [parent]); | ||
| // useEffect(() => { | ||
| // setVirtuosoRef(virtuoso); | ||
| // }, [parent]); | ||
|
|
||
| useEffect(() => { | ||
| fetch(commentId); | ||
| // useEffect(() => { | ||
| // fetch(commentId); | ||
|
|
||
| return () => { | ||
| reset(); | ||
| resetState(); | ||
| }; | ||
| }, [commentId]); | ||
| // return () => { | ||
| // reset(); | ||
| // resetState(); | ||
| // }; | ||
| // }, [commentId]); | ||
|
|
||
| return parent ? ( | ||
| <CommentsBox> | ||
| <BackLink onClick={handleBack}>전체 댓글로 이동하기</BackLink> | ||
| <CommentCard model={parent} /> | ||
| <Virtuoso | ||
| ref={virtuoso} | ||
| style={{ maxHeight: '100vh', marginTop: '5px' }} | ||
| customScrollParent={screenRef?.current as HTMLElement} | ||
| endReached={loadMore(hasMore, page)} | ||
| overscan={200} | ||
| data={comments} | ||
| itemContent={(index, comment) => <ReplyCommentContainer key={comment.id} model={comment} />} | ||
| /> | ||
| </CommentsBox> | ||
| ) : null; | ||
| }); | ||
| // return parent ? ( | ||
| // <CommentsBox> | ||
| // <BackLink onClick={handleBack}>전체 댓글로 이동하기</BackLink> | ||
| // <CommentCard model={parent} /> | ||
| // <Virtuoso | ||
| // ref={virtuoso} | ||
| // style={{ maxHeight: '100vh', marginTop: '5px' }} | ||
| // customScrollParent={screenRef?.current as HTMLElement} | ||
| // endReached={loadMore(hasMore, page)} | ||
| // overscan={200} | ||
| // data={comments} | ||
| // itemContent={(index, comment) => <ReplyCommentContainer key={comment.id} model={comment} />} | ||
| // /> | ||
| // </CommentsBox> | ||
| // ) : null; | ||
| // }); |
58 changes: 29 additions & 29 deletions
58
src/pages/board/postDetail/components/ReplyComment/ReplyCommentContainer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,34 +1,34 @@ | ||
| import { computed } from 'mobx'; | ||
| import { observer } from 'mobx-react-lite'; | ||
| import { useCallback, useRef } from 'react'; | ||
| import { useLongPress } from 'use-long-press'; | ||
| // import { computed } from 'mobx'; | ||
| // import { observer } from 'mobx-react-lite'; | ||
| // import { useCallback, useRef } from 'react'; | ||
| // import { useLongPress } from 'use-long-press'; | ||
|
|
||
| import { Li } from './styled'; | ||
| import { CommentCardView } from '../Comment'; | ||
| import { InputState } from '../CommentInput'; | ||
| // import { Li } from './styled'; | ||
| // import { CommentCardView } from '../Comment'; | ||
| // import { InputState } from '../CommentInput'; | ||
|
|
||
| import { usePageUiStore } from '@/hooks'; | ||
| // import { usePageUiStore } from '@/hooks'; | ||
|
|
||
| export const ReplyCommentContainer: React.FC<{ model: Model.Comment }> = observer(({ model }) => { | ||
| const ref = useRef<HTMLLIElement>(null); | ||
| const { | ||
| commentInput, | ||
| commentMenuModal: { open }, | ||
| } = usePageUiStore<PageUiStore.PostDetail>(); | ||
| const state = computed(() => | ||
| commentInput.target?.id === model.id ? commentInput.state : InputState.WRITE, | ||
| ).get(); | ||
| // export const ReplyCommentContainer: React.FC<{ model: Model.Comment }> = observer(({ model }) => { | ||
| // const ref = useRef<HTMLLIElement>(null); | ||
| // const { | ||
| // commentInput, | ||
| // commentMenuModal: { open }, | ||
| // } = usePageUiStore<PageUiStore.PostDetail>(); | ||
| // const state = computed(() => | ||
| // commentInput.target?.id === model.id ? commentInput.state : InputState.WRITE, | ||
| // ).get(); | ||
|
|
||
| const handleLongPress = useCallback(model => () => open(model), [open]); | ||
| const bind = useLongPress(handleLongPress(model), { | ||
| cancelOnMovement: true, | ||
| captureEvent: true, | ||
| onFinish: ev => ev?.preventDefault(), | ||
| }); | ||
| // const handleLongPress = useCallback(model => () => open(model), [open]); | ||
| // const bind = useLongPress(handleLongPress(model), { | ||
| // cancelOnMovement: true, | ||
| // captureEvent: true, | ||
| // onFinish: ev => ev?.preventDefault(), | ||
| // }); | ||
|
|
||
| return ( | ||
| <Li ref={ref} {...bind()}> | ||
| <CommentCardView state={state} model={model} /> | ||
| </Li> | ||
| ); | ||
| }); | ||
| // return ( | ||
| // <Li ref={ref} {...bind()}> | ||
| // <CommentCardView state={state} model={model} /> | ||
| // </Li> | ||
| // ); | ||
| // }); |
Oops, something went wrong.