My experience with Wisp.blog - Part 5

At first I thought adding comments to my blog would be easy, since there is an entire guide available in the documentation. But one of the first things they mention is using Shadch components, which I decided not to use. Will I hold firm, or go for convenience? I should probably stand fast and at least give it a try to build myself. The guide is quite indepth with the components I need.

Just to make it easier on myself, I will use Radix UI. Shadcn is also based on this, and it will take the biggest part of the UI component development off my plate.

The form

Following the guide, everything needed is laid out clearly. The biggest hurdle was the form validation / submission using react-hook-form. Since the guild is build on Shadcn, and Shadcn does the implementation of this for you, I had to reinvent the wheel. Escpecially since it was my first time using a bare Radix UI, it took a bit of figuring out how easy this actually was! Using a spread operator in my custom Input component made everything work out of the box.

Submission of the data was also a breeze, after the validation using Zod I only had to do a single API call to Wisp to save the comment. I've set it up so comments need to manually approved, so I didn't have to bother using Optimistic UI or reloading the page. I did consider using Sonner or a custom toaster to show feedback, it just seemed a bit too much for a single feature. If I have more notifications to show a visitor I might do it later.

The comment section

Displaying the comments themselves also isn't complicated, you will get an array of comments with a sensible data structure, and then you'd just have to loop through them. As with the blog posts themselves, I haven't build the pagination functionality for this yet. There is no expectation for pages of comments, so I'll just load them all without pagination for now.

Conclusion

Overal implementing comments was easy, even without having the UI ready to pull form Shadcn. The guide was very clear for an experienced developer. If I wasn't I think I would have struggled more with it. My biggest gripe with the guide was it's lack of explainations, it only tells you what to do and not why to do it.

Powered by wisp