Components to render comments

[00:00 - 00:05] Components to render comments. Let's create components to render our comments on a page.

[00:06 - 00:09] We'll need three of them. A comment component for a single comment.

[00:10 - 00:17] Comment form to enable users to post new comments. And a comments component as a container that will wrap the two components above .

[00:18 - 00:23] Inside of the components folder, create new folder, comment. And inside of it, create a comment component.

[00:24 - 00:29] Comment TSX. Define the comment props, it's gonna receive the comment type.

[00:30 - 00:42] Type comment props. It's gonna receive a comment comment type import comment as comment type from shared types.

[00:43 - 01:05] Define the component expert const comment is a functional component where we want to get the comment value from the props of type comment props. Inside of it, we render a container that will have author, comment, author, body, from comment content and meta from comment time.

[01:06 - 01:14] Create the styles, style TS. Here we'll want to define the container, author, body and meta blocks.

[01:15 - 01:25] You can copy those styles from the attached code example and then import them in the comment component. Create the index file and export everything from comment.

[01:26 - 01:32] Now let's create a comment form. Components, new file, comment form TSX.

[01:33 - 01:43] We also need the styles for this component, style TS. Here we want to define a form element where we provide the styles for the inputs and text areas and for the button.

[01:44 - 01:56] Go to the comment form TSX, define the props, type comment form props. Here we want to get the post ID, post entity ID and define the comment form.

[01:57 - 02:11] Expert const comment form is a functional component where we get the post ID from the comment form props. We will need three states, const loading, set loading.

[02:12 - 02:19] It's a Boolean state with default value false. We'll need to store the value of type string and name, also of type string.

[02:20 - 02:26] Now define the layout. Here we render a form with the header saying your comment.

[02:27 - 02:35] And also two inputs. An input for name, value, name, placeholder, your name.

[02:36 - 02:57] It's a required field and we process it using the on change event by setting the name to event target value. Here the users will specify their name and also need a text area that will hold the comment name, comment placeholder, what do you think value value.

[02:58 - 03:09] An on change is a function receiving an event and setting the value to event target value. This is also required field.

[03:10 - 03:18] The loading state will show if we are submitting the comment. If loading then we show a span with text submitting.

[03:19 - 03:26] Otherwise we'll show a bottom with text submit. When the form has only one bottom, it is always considered as a submit button.

[03:27 - 03:35] Now let's define the submit function async function submit. It will receive a form event HTML form element.

[03:36 - 03:42] First we need to prevent default. If we don't do this, then submitting the form will reload the page and we don't want it.

[03:43 - 03:51] We set loading to true. When we get the status by submitting the comment, we pass in the post name and value.

[03:52 - 04:08] We set loading to false because if we already got the status, then that means that the request was performed. And then if status was to one, then we set location hash comments and location reload.

[04:09 - 04:28] So the way commenting will work right now is we're going to send the comments to the server and then reload the page and then when we render the page, we will fetch the comments again and they should be updated. Okay, now we create an index file and we export everything from comment form.

[04:29 - 04:35] Now to inject the comments to a page, we'll want to create a wrapper for the comments section. Create a new component.

[04:36 - 04:40] Comments, comments, comments, TSX. Define the props.

[04:41 - 04:46] Comments, props. We'll want the post ID and the comments list.

[04:47 - 04:53] Now define the component itself. Expert comments will receive post, which is a post ID and comments.

[04:54 - 05:03] The props should have the comments, props type. Here we return a container that renders a header that says comments.

[05:04 - 05:21] We render a list where we map through the comments and for each comment, we render an item, providing the key comment ID and inside of it, we're under a comment component and pass the comment as a prop. Below the comments list, we render a comment form.

[05:22 - 05:26] Here we pass the post ID. Now let's define the missing style components.

[05:27 - 05:35] Create a new file, style TS. Here we define the container, the list, which is a styled unordered list and the item, which is a list item.

[05:36 - 05:41] Select the missing imports and create an index file. Export everything from comments.

[05:42 - 05:44] Alright, now we have all the components we need to render the comments.