Create issue timeline display modal #41
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
src/app/issues/[id]/page.tsx
Outdated
| @@ -36,11 +40,15 @@ export default async function IssueView({ params }: IssueViewProps) { | |||
| const auth_token = cookieStore.get("auth_token")?.value || ""; | |||
|
|
|||
| const issue: Issue = await getIssue({ issueId, auth_token }); | |||
| const timeline: getIssueTimelineResponse = await getIssueTimeline({ | |||
There was a problem hiding this comment.
Since the user may not neccesarily view the timeline, always loading the timeline data can be quite inefficient. It is recommended to delay this loading until the timeline modal has been opened, and show a loading UI while the request is being sent.
| issueTitle, | ||
| timeline, | ||
| }: TimeLineModalProps) { | ||
| const sortedTimeline = timeline.sort( |
There was a problem hiding this comment.
This currently results in the sort function being run on every re-render, which can be quite inefficient if the list gets long enough. Consider adding this to the post-processing of the network request or wrapping this in a useMemo.
There was a problem hiding this comment.
Furthermore, I think it is worth confirming with the backend team whether we the data returned is guarentteed to be sorted, since if they already sort data, there's no point in us doing it again.
| {node.description} | ||
| </Timeline.Item> | ||
| ))} | ||
| <Timeline.Item |
There was a problem hiding this comment.
The current empty UI for the timeline just features a downward arrow, consider adding text like "目前議題的資料還不足以產生時間軸，稍後再回來看看吧!"
There was a problem hiding this comment.
I think the pure text is enough for an empty UI and the downward arrow is somehow confusing to me because there are no timelines to point to.
| @@ -0,0 +1,46 @@ | |||
| import { parseJsonWhileHandlingErrors } from "../transformers"; | |||
|
|
|||
| export type TimelineNode = { | |||
There was a problem hiding this comment.
This should be imported from conversations.types.ts
| <Modal | ||
| opened={isOpen} | ||
| onClose={() => setIsOpen(false)} | ||
| title={<h3 className="font-bold">{`《${issueTitle}》的演進`}</h3>} |
There was a problem hiding this comment.
This currently causes the following error.
Error: In HTML, <h3> cannot be a child of <h2>.
This will cause a hydration error.
Consider using plain text and specify the styling using Mantine's styling API
No description provided.