Setup API routes for Reply model and refactoring FE to be using real-data

[janevalencia]

Related issues:

• [x] #58
• [x] #31
• [x] #40
• [x] #56
• [x] #42
• [x] #41
• [x] #59

Description

1. Create api-routes to work with Reply document:

   • api/replies
   • GET: Fetch all replies
   • POST: Create a new reply document
   • api/replies/[id]
   • GET: Fetch a reply based on its ID
   • PUT: Modify a reply information
   • DELETE: Remove a reply from database
   • api/replies/parent/[id]
   • GET: Fetch all the replies of a particular parent_comment_id

2. Refactor Comment model

   • Remove the replies[] property from Comment schema
   • The many-to-one relationship should be accessed via Reply as it is on the many-side
   • Helps to keep data-consistency, since if replies[] exists in Comment, we would have to manually-update this array to keep it consistent, potentially recipe for disaster and data-inconsistency

3. Upgrade our Frontend to be able to fetch real-data from the api-routes and display it correctly

   • Created a separate component to manage AddForm and ReplyForm
   • Created a separate component to manage CommentCard and ReplyCard

4. Make use of useSWR package to create a custom react-hook, ensuring easier data-fetching without vanilla useEffect

   • Being used in CommentCard upon fetching the list of replies of a particular comment

Testing Result

✅ api-routes working properly ✅ FE is now using real-data fetched from database ✅ FE design remains the same and data is displayed correctly ✅ Previously worked FE functionality, like opening ReplyForm, showing comment-thread, etc, are working as expected