Course Introduction

Introduction

Introduction to GraphQL

Using Hasura to Generate GraphQL APIs and Protect Data

How to Create a Comments Database Table and Set Permissions

Storing comments with Hasura

Setting Up Next.js Blog Starter and Understanding Its Structure

Fetching Blog Comments from a Database with a Custom React Hook

A Brief Tutorial on Building the UI for a Blog Comments Section

How to Use GraphQL to Add Comment Features to a Frontend App

Implementing a comments system

An Overview of Optimistic Updates for React Hooks

Adding Pagination to a Comments Section with Hasura and React

Extending the comments system functionality

How to Publish a Custom React Hook as an NPM Library

Coding a Comments Section that Requires Manual Content Approval

Bonus

Summary

react

next.js

### The newline Guide to Full Stack Comments with Hasura and React

Build and implement a comprehensive commenting system for your website using Hasura and React.  We’ll use the commenting feature to teach technology concepts like Hasura with appropriate authorization, optimistic updates for a more responsive UI, pagination, and publication of library in NPM.

### Why this course

Many developers would like to add a comments section to their website or blog for users to post comments or hold discussions. While it's possible to use existing hosted solutions such as Disqus or Facebook Comments, they often charge a fee and impose their UI leaving little to no control for modifications or customization. 

Another option is to build your own from scratch — which is what we'll do in this course. We’ll use Hasura, which generates GraphQL API from a database so that the backend part is as easy and the least time-consuming as possible. Along the way, we’re going to learn about databases, GraphQL, building UI components with React and TypeScript, and more.
By the end of this course, you’ll have a commenting system added to a website we’ve called, Why comments?, with all comments stored by Hasura. We'll also publish the fetching and adding comments logic as a library to NPM.

This course focuses on building a commenting widget, however, the skills you’ll acquire will allow you to build any fullstack widget you can think up for your application.  You’ll be able to contribute to fullstack React, GraphQL, and Hasura projects at work, in open source, or your own projects. You'll discover that this stack not only eliminates the need for having large teams of backend developers, but it lets your projects move faster.

### Your Instructors

Hi, I'm Aleksandra, and I'm your instructor for this course. I’m the former tech lead of Hasura console and lead maintainer of Bliz.js. This course combines my knowledge in a few areas such as TypeScript, React, Hasura, GraphQL, and general application development.

Build and implement a comprehensive commenting system for your website using Hasura and React.  We’ll use the commenting feature to teach technology concepts like Hasura with appropriate authorization, optimistic updates for a more responsive UI, pagination, and publication of library in NPM.

The newline Guide to Full Stack Comments with Hasura and React

Implementing pagination and optimistic updates

Importance of tests, and how to test React components

In this lesson, we'll add a simple UI for the comments. We already fetched
comments on the frontend, and now it's time to show them nicely in the
application.

 The UI is not the main focus of this course, so this lesson will be
relatively brief

 for styles. It's a CSS framework
that provides many easy-to-use CSS utility classes. Our blog example comes with
Tailwind's setup, so we're ready to start with the UI. Let's get to it!


component. That's where we'll add the comments list and the form. Let's do it
step by step.

And additionally, we'll add padding top — 

Right now, we fetch all the comments, so the number of the comments is an array
length. In the next module, we'll be working on pagination, and we'll have a
separate 

 element with bold text and
text color as 

<section className="pt-6 max-w-2xl mx-auto">
  <h3 className="font-bold text-gray-500">
    {comments.length === 1 ? "1 comment" : `${comments.length} comments`}
  </h3>
</section>

As the next step, we'll map through the comments, and for each, we'll create an

, rounded borders, vertical
margin, and padding.

Inside, we'll have information about author and comment creation date. This
element will have bold font and margin bottom.

 element with the content. I'm
going to make the text slightly lighter than the rest of the page.

comments.map(({ author, content, created_at }) => (
  <article key={created_at} className="bg-gray-100 rounded my-6 p-4">
    <div className="font-bold mb-2">
      {author} ・ {created_at}
    </div>
    <p className="text-gray-700">{content}</p>
  </article>
)

I'm also going to format the date so that it's in a more readable form. I'll use
built-in function 

<article key={created_at} className="bg-gray-100 rounded my-6 p-4">
  <div className="font-bold mb-2">
    {author} ・ {new Date(created_at).toLocaleDateString()}
  </div>
  <p className="text-gray-700">{content}</p>
</article>

Last step — we'll handle the loading state. I'm adding a ternary operator, and
whenever the 

 text to
be rendered (yes, I'm going with a super simple option here. Feel free to add a
spinner!).

---
title: A Brief Tutorial on Building the UI for a Blog Comments Section
isPublicLesson: false
description:
  In this lesson, we'll add a UI for the comments section and a new comment
  form. We'll also display the comments that we get from the React hook.
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/dtp2qk7b7q
---

In this lesson, we'll add a simple UI for the comments. We already fetched
comments on the frontend, and now it's time to show them nicely in the
application.

_**Note:** The UI is not the main focus of this course, so this lesson will be
relatively brief_.

We'll use [Tailwind](https://tailwindcss.com/) for styles. It's a CSS framework
that provides many easy-to-use CSS utility classes. Our blog example comes with
Tailwind's setup, so we're ready to start with the UI. Let's get to it!

### Displaying the comments

We're going to alter JSX in the `Post` component right after the `<PostBody />`
component. That's where we'll add the comments list and the form. Let's do it
step by step.

**Section for the comments**

First, we'll add a `section` component and apply the same styles `PostBody` has:

-   `max-w-2xl` which means `max-width: 36rem;`
    (<https://tailwindcss.com/docs/max-width>)
-   `mx-auto` — `margin-x: auto`.

And additionally, we'll add padding top — `pt-6`.

```tsx
<section className="pt-6 max-w-2xl mx-auto"></section>
```

**Title with the comments count**

Right now, we fetch all the comments, so the number of the comments is an array
length. In the next module, we'll be working on pagination, and we'll have a
separate `count` variable. Anyway, we'll add a `h3` element with bold text and
text color as `gray-500`. Feel free to customize it.

```tsx
<section className="pt-6 max-w-2xl mx-auto">
  <h3 className="font-bold text-gray-500">
    {comments.length === 1 ? "1 comment" : `${comments.length} comments`}
  </h3>
</section>
```

**Comment element**

As the next step, we'll map through the comments, and for each, we'll create an
`article` element with background color `gray-100`, rounded borders, vertical
margin, and padding.

Inside, we'll have information about author and comment creation date. This
element will have bold font and margin bottom.

The last thing we need to do is add a `paragraph` element with the content. I'm
going to make the text slightly lighter than the rest of the page.

```tsx
comments.map(({ author, content, created_at }) => (
  <article key={created_at} className="bg-gray-100 rounded my-6 p-4">
    <div className="font-bold mb-2">
      {author} ・ {created_at}
    </div>
    <p className="text-gray-700">{content}</p>
  </article>
)
```

**Simple date formatting**

I'm also going to format the date so that it's in a more readable form. I'll use
built-in function `toLocaleDateString`.

```tsx
<article key={created_at} className="bg-gray-100 rounded my-6 p-4">
  <div className="font-bold mb-2">
    {author} ・ {new Date(created_at).toLocaleDateString()}
  </div>
  <p className="text-gray-700">{content}</p>
</article>
```

**Handle loading state**

Last step — we'll handle the loading state. I'm adding a ternary operator, and
whenever the `loading` variable is true, I'll want `Loading comments...` text to
be rendered (yes, I'm going with a super simple option here. Feel free to add a
spinner!).

```tsx
<section className="pt-6 max-w-2xl mx-auto">
  <h3 className="font-bold text-xm">
    {comments.length === 1 ? "1 comment" : `${comments.length} comments`}
  </h3>
  {loading
    ? "Loading comments..."
    : comments.map(({ author, content, created_at }) => (
        <article key={created_at} className="bg-gray-100 rounded my-6">
          <div className="px-6 py-4">
            <div className="font-bold text-xm mb-2">
              {author} ・ {new Date(created_at).toLocaleDateString()}
            </div>
            <p className="text-gray-700 text-base">{content}</p>
          </div>
        </article>
      ))}
</section>
```

In this lesson, we'll add a UI for the comments section and a new comment form. We'll also display the comments that we get from the React hook.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

The newline Guide to Full Stack Comments with Hasura and React

Module 1: Introduction

Introduction:

Start Here

Introduction: (3:03)

Course Introduction

Module 2: Storing comments with Hasura

Lesson 1: (9:21)

Introduction to GraphQL

Lesson 2: (10:35)

Using Hasura to Generate GraphQL APIs and Protect Data

Lesson 3: (6:03)

How to Create a Comments Database Table and Set Permissions

Module 3: Implementing a comments system

Lesson 1: (4:56)

Setting Up Next.js Blog Starter and Understanding Its Structure

Lesson 2: (9:32)

Fetching Blog Comments from a Database with a Custom React Hook

Lesson 3: (5:43)

A Brief Tutorial on Building the UI for a Blog Comments Section

Lesson 4: (3:51)

How to Use GraphQL to Add Comment Features to a Frontend App

Module 4: Extending the comments system functionality

Lesson 1: (3:16)

An Overview of Optimistic Updates for React Hooks

Lesson 2: (4:18)

Adding Pagination to a Comments Section with Hasura and React

Module 5: Bonus

Lesson 1: (3:55)

How to Publish a Custom React Hook as an NPM Library

Lesson 2: (2:52)

Coding a Comments Section that Requires Manual Content Approval

Module 6: Summary

Lesson 1: (2:35)

Summary

A Brief Tutorial on Building the UI for a Blog Comments Section