From e0fb597673ff7f6865123622e17645c19cd0fd1b Mon Sep 17 00:00:00 2001 From: Hye min Pyo <102423086+Pyotato@users.noreply.github.com> Date: Thu, 11 Apr 2024 13:28:20 +0900 Subject: [PATCH 1/3] chore: redirect to signIn when unauthorised --- .../post/[...id]/@comment/CommentBox.tsx | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/src/app/roadmap/post/[...id]/@comment/CommentBox.tsx b/src/app/roadmap/post/[...id]/@comment/CommentBox.tsx index 8a5f357..2026031 100644 --- a/src/app/roadmap/post/[...id]/@comment/CommentBox.tsx +++ b/src/app/roadmap/post/[...id]/@comment/CommentBox.tsx @@ -30,6 +30,7 @@ import TipTapTextEditor from '@/components/shared/tiptap/TipTapTextEditor'; import { apiRoutes, EMPTY_YOUTUBE_HTML, + fail, REGEX_HTTP, success, warning, @@ -97,7 +98,7 @@ const CommentBox = () => { const postResponseFromApi = async () => { const accessToken = token as unknown as JWT; - await Promise.resolve( + const res = await Promise.resolve( getApiResponse({ requestData: JSON.stringify({ content: content, @@ -111,7 +112,25 @@ const CommentBox = () => { }, }), ); - // !! api update needed for failed comment requests! + + if (res?.errorCode === 401) { + notifications.show({ + id: fail['401'].id, + withCloseButton: true, + autoClose: 300, + title: fail['401'].title, + message: `${res.message}\n로그인 후 이용해주세요.`, + color: fail['401'].color, + icon: ( + + ), + }); + setTimeout(() => { + signIn(); + }, 400); + return; + } + setContent(''); notifications.show({ id: success.comment.id, From 83f5d8f115740210fd5871cafd313d310fe471ae Mon Sep 17 00:00:00 2001 From: Hye min Pyo <102423086+Pyotato@users.noreply.github.com> Date: Thu, 11 Apr 2024 13:29:37 +0900 Subject: [PATCH 2/3] chore: add date converter/formatter(to KR) --- src/utils/shared/index.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/utils/shared/index.ts b/src/utils/shared/index.ts index 0487e0c..44358c6 100644 --- a/src/utils/shared/index.ts +++ b/src/utils/shared/index.ts @@ -53,3 +53,16 @@ export const getPageNum = (next: string | null) => { */ export const newUrl = (url: string) => `

${url}

`; + +/** + * 2024-04-08T02:15:06.503546 형식의 날짜, 시간을 + * 2024년 4월 8일 월요일 오전 2:15 형태로 변환 + */ + +export const toKorDateTime = (time: string | Date) => { + const temp = new Date(`${time}`); + return new Intl.DateTimeFormat('ko-KR', { + dateStyle: 'full', + timeStyle: 'short', + }).format(temp); +}; From e107614e76384743ab4cdaa37b8671a08d0d654d Mon Sep 17 00:00:00 2001 From: Hye min Pyo <102423086+Pyotato@users.noreply.github.com> Date: Thu, 11 Apr 2024 13:30:14 +0900 Subject: [PATCH 3/3] chore: add commenter info & create date --- .../post/[...id]/@comment/Comments.tsx | 55 +++++++++++++++++-- src/components/shared/list/CommentHtml.tsx | 17 +++--- 2 files changed, 59 insertions(+), 13 deletions(-) diff --git a/src/app/roadmap/post/[...id]/@comment/Comments.tsx b/src/app/roadmap/post/[...id]/@comment/Comments.tsx index 0977d04..1ab2af2 100644 --- a/src/app/roadmap/post/[...id]/@comment/Comments.tsx +++ b/src/app/roadmap/post/[...id]/@comment/Comments.tsx @@ -16,10 +16,13 @@ import { DataWithPages } from '@/types'; export interface Comment { roadmapId: number; content: string; - nickname: string; createdAt: string | Date; updatedAt: string | Date; - avatarUrl?: string; + + member: { + avatarUrl?: string; + nickname: string; + }; } export interface CommentData extends DataWithPages { result: Array; @@ -37,7 +40,7 @@ const Comments = () => { const loadDataFromApi = async ({ pageParam }: { pageParam: number }) => { const [comments] = await Promise.all([ getApiResponse({ - apiEndpoint: `${process.env.NEXT_PUBLIC_API}/roadmaps/load-roadmap/${currPostId[0]}/comments?page=${pageParam}&size=5`, + apiEndpoint: `${process.env.NEXT_PUBLIC_API}/roadmaps/${currPostId[0]}/comments?lastCommentId=${pageParam}&size=20`, revalidate: 0, // 1 mins cache }), ]); @@ -83,6 +86,12 @@ const Comments = () => { return 아직 댓글이 없습니다.; return ( + {/* + // !! need to update api response : + // !! needs to include following fields: totalPage, previous, next + // !! totalPage: 28, + // !! previous: null, + // !! next: '/api/roadmaps/1/comments?lastCommentId=1&size=20 {comments.pages.map(({ comments }, i) => comments?.next ? ( { ) : ( ), - )} + )} */} + + {/* {comments.pages[0].comments.map(() => + comments?.next ? ( + + ) : ( + + ), + )} */} + {/* {comments.pages[0].comments.map((v, i) => ( + //
+ //
{v.id}
+ //
{v.content}
+ //
+ + ))} */} + + {/* {comments.pages.map(({ comments }, i) => + comments?.next ? ( + + ) : ( + + ), + )} */} + ); } diff --git a/src/components/shared/list/CommentHtml.tsx b/src/components/shared/list/CommentHtml.tsx index bf2613e..4beff59 100644 --- a/src/components/shared/list/CommentHtml.tsx +++ b/src/components/shared/list/CommentHtml.tsx @@ -13,7 +13,7 @@ import classes from './CommentHtml.module.css'; import { CommentData } from '@/app/roadmap/post/[...id]/@comment/Comments'; import { randomAvartars, randomNum } from '@/constants/default/avatars'; -import { toTSXString } from '@/utils/shared'; +import { toKorDateTime, toTSXString } from '@/utils/shared'; export interface CommentProps extends PropsWithChildren { commentData: CommentData['result']; @@ -22,7 +22,6 @@ export interface CommentProps extends PropsWithChildren { export function CommentHtml({ commentData, innerRef }: CommentProps) { if (commentData.length === 0) return <>; - const comments = commentData.map((v, i) => i === commentData.length - 1 ? (
- {v?.nickname} + {v?.member?.nickname} {toTSXString(v?.createdAt)} @@ -65,14 +64,14 @@ export function CommentHtml({ commentData, innerRef }: CommentProps) { >
- {v?.nickname} + {v?.member?.nickname} - {toTSXString(v?.createdAt)} + {toKorDateTime(`${v?.createdAt}`)}