muhammadali96 / agiletemplates-simplenotes Goto Github PK

Make it so you can add comments to posts and view a list of comments.

Completion Criteria

Some guidelines for completing this task:

• Create a new table for comments with the fields "id, comment, date, post_id". Update the server/config/generateDB file with the commands you used to create this table.
• For each post, show a button labelled 'view comments'. Clicking this will fetch the comments and make them appear underneath the post.
• Create a fetch-comments.js endpoint on the server side to return the comments.
• At the bottom of this comment list show a button labelled 'Add comment'
• Do not write a new component for adding the comments. Instead, use the javascript [prompt method] (https://www.w3schools.com/jsref/met_win_prompt.asp) to capture the user input.
• Create an add-comment.js endpoint on the server side to add the comment.
• Once the comment is added, refetch all the comments so the new comment appears.

📖 Sample solution

View a sample solution here.

The application has been renamed from 'SimpleBlog' to 'SimpleNotes'. We need to update the codebase to be consistent.

Completion Criteria

Some guidelines for completing this task:

• Update the page title from SimpleBlog to SimpleNotes
• Every reference to 'posts' should be updated to a reference to 'notes'. i.e. add-post should be updated to add-note etc. This includes files, variables, function names and object keys.

Use the Chakra UI Component Library to recreate the following design.

Completion Criteria

Ensure all of the following subtasks are complete.

• Delete the app.css file. We will be using no css (and no inline styles) in this solution. Only Chakra components and Chakra props.
• Recreate the design above as faithfully as possible.

Add functionality that allows a user to edit a post.

Completion Criteria

Ensure all of the following subtasks are complete.

• Add an edit button to the <Post /> component.
• Reuse the <Form /> component so it can be in either 'New Post mode' or 'Edit mode'.
• When we click the edit button the text to edit should appear in the form ready to edit and it should have two buttons for Save and Cancel.
• Also when in edit mode, the list of Posts should be hidden.
• Give your function on the server the name edit-post.

Create a custom hook to handle the fetching, adding and deleting of posts.

Warning! Advanced.

Completion Criteria

Ensure all of the following subtasks are complete.

• Create a new directory in the client directory called "hooks" and create a new file usePosts.js
• The return value of this hook should be an object containing { posts, loading, error, client }
• posts, loading and error should be the existing state objects that currently live inside App.js
• client should be an object containing the two existing functions: add and delete.

Allow users to toggle censorship of rude words

Completion Criteria

Ensure all of the following subtasks are complete.

• Install the bad-words package.
• Add a checkbox to the top of the posts list labelled 'Censor rude words?' that can be toggled on or off.
• When the box is ticked the bad-words filter should run on both the title and the content of each post.

Extract posts.map() into a dedicated <Posts /> component.

Completion Criteria

Ensure all of the following subtasks are complete.

• Create a new component called Posts.js
• Move the logic that maps through the posts into this new component.
• The markup in App.js should be just a div with a class name of App containing four children: The header, Form, Posts and an hr.

Follow the React Router Quick Start to set up Browser Routing.

Routes

There should be two routes:

1. / - The homepage showing a list of all blog posts (already exists)
2. /:id - An individual Blog Post Page which fetches the post that matches the :id

Completion Criteria

Ensure all of the following subtasks are complete.

• Implement the two routes defined above
• Reuse the <Post /> component for both the homepage and the Blog Post Page.
• On the homepage, every Post item should show a <Link /> to the Blog Post Page. This link should not show on the Blog Post Page.
• If the Blog Post Page route is invalid (aka it requests a post with that ID does not exist, show a message saying Post with ID <id> not found

Convert the project to Typescript.

This is a good starting point for converting a create-react-app from Javascript to Typescript.

For the server-side code, it should mostly work automatically by renaming the files from .js to .ts but some extra info on types can be found here.