Interactive Comment Section using Next and TypeScript

Solution retrospective
- What do you think of my folder structuring? on components and interfaces.
- What do you think of my ability to componentizing? Also is it already a good practice? Since I know I reused components for both Comment and Reply so I have to outsmart the type properties for the component.
- What do you think of my modularization on the functions? I think I can do better but it keeps throwing error so I revert it back.
- What do you think of my state handling and passing it to child component? is already the best practice?
- Because this project only use Local Storage and use state in the parent page, is it okay to directly use client component? Or is there a way to make it into server component?
- Do you think I have done good on determining the type of the state and variable used?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @BParadowski
Okay, after taking a look at your code I have some suggestions.
-
Naming: your names are not descriptive. To be frank I have no idea what most of your code does. Component name like "ActionButton.tsx" doesn't say anything about its purpose (every button has some action/function after all). The same goes for props the like of "isReplyReply" or "onIsReplyingChange".
-
Continuing in the spirit of code readability: destructuring assignment. It allows us to do stuff like changing this:
const onCommentVoteChange = props.onCommentVoteChange; const commentIdToChangeVote = props.commentIdToChangeVote; const onReplyVoteChange = props.onReplyVoteChange; const replyIdToChangeVote = props.replyIdToChangeVote;
into this:
const { score, onCommentVoteChange, commentIdToChangeVote, onReplyVoteChange, replyIdToChangeVote, } = props;
-
Components: you have 4 different button components which fundamentally are only visually different. A more sensible approach would be to create one component with variants.
-
Lastly, prop drilling and logic placement. There is no reason to define comment adding logic on the button! There is also no reason to make delete modal a child of the delete button... Aim to place the logic where it makes sense.
If I were you I would focus mostly on code-readability and fighting your urge to prop-drill. I must confess that I still have no idea what is going on in most of your code.
Marked as helpful -
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord