Transcript

So I've copied our CART context with initial state application into a complete React state directory ahead of our going and figuring out how to do reviews. So let's go take a look at our reviews currently in the application. So when you take a look at any of these products, including this cool dragon T-shirt,

you'll see a set of reviews. You can add your own reviews simply by typing your review in here, awesome shirt, as well as setting the rating and then submitting the review. Now, two things are going to happen. One, it's going to add that review and it's also going to update the average rating located right above the add to CART.

So now let's go take a look at our code. The code for this starts over in the products ID route in the page RSC where we get the product detail component. It takes an ID and then we get the product information by that ID. Now, let's go take a look at that product information because that's an interesting mix of both immutable and mutable data.

So we take a look at our types of a product type. It's got the ID, the image, name, price, and description. All of that is static and immutable data, and then it's got the list of reviews, which is going to be mutable data, and that has a rating and a text for each review.

So this RSC is going to show that immutable data, the name, the image, the price, and so on, and then it's going to use client components to manage the reviews. Those client components include the average ratings component. That's the one that takes the reviews and then gives you

a current average rating. It also includes the reviews component that not only shows the reviews, it also allows you to add a review by typing in some text, which it stores as local state, and then sends the server using the add review action. That add review action is defined in the parent RSC and then passed

down into that reviews client component. Again, we're going to do this via React context and state. If you have any questions, be sure to refer to that resources section associated with this video. Good luck.

exercise

Integrating User Reviews and Ratings into a Product Detail Page

Jack Herrington

Code Gitpod

As a starting point, the CartContext with initial state has been copied into the 04-complete-react-state directory.

Let's explore how to manage user-generated reviews and dynamically update average ratings in our app.

Current State of Reviews in the Application

When visiting a product page, you'll see a set of reviews. You also have the option of adding your own review by typing in some text and setting the rating.

When submitting a new review, two updates occur:

The review is added to the list of existing reviews.
The average rating will be updated and displayed above the "Add to Cart" button.

Examining the Code Structure

The code for the product pages is in an RSC located at app/products/[id]/page.tsx.

Here, the ProductDetail component takes the product id which is then used to fetch the corresponding product details.

For reference, let's look at the Product information.

The Product & Review Types

A Product is an interesting mix of both mutable and immutable data.

At src/api/types.ts, we can see the definition:

All of the properties except for the reviews are immutable.

Each Review consists of a rating and text:

The ProductDetail React Server Component will show the immutable data, and the mutable reviews data will be managed with client components.

Utilizing Client Components

Reviews are handled in the Reviews and AverageRatings client components.

The Reviews component allows you to send a review by typing text that will be stored as local state and then sent to the server via the addReviewAction:

The addReviewAction is defined in the parent page RSC and then passed down into the Reviews client component.

The AverageRatings component takes in reviews and calculates the current average rating.

Challenge

For this exercise, your goal is to wire everything together by creating components for a ReviewsContext and ReviewsProvider that will send the reviews to the AverageRating and Reviews components.

Note that every time the customer navigates between routes, the products/[id]/page.sx component will be re-created.

As a hint, the output of the addReviewAction is the updated array of reviews.

Transcript

exercise

Integrating User Reviews and Ratings into a Product Detail Page

Jack Herrington

Code Gitpod

As a starting point, the CartContext with initial state has been copied into the 04-complete-react-state directory.

Let's explore how to manage user-generated reviews and dynamically update average ratings in our app.

Current State of Reviews in the Application

When visiting a product page, you'll see a set of reviews. You also have the option of adding your own review by typing in some text and setting the rating.

When submitting a new review, two updates occur:

The review is added to the list of existing reviews.
The average rating will be updated and displayed above the "Add to Cart" button.

Examining the Code Structure

The code for the product pages is in an RSC located at app/products/[id]/page.tsx.

Here, the ProductDetail component takes the product id which is then used to fetch the corresponding product details.

For reference, let's look at the Product information.

The Product & Review Types

A Product is an interesting mix of both mutable and immutable data.

At src/api/types.ts, we can see the definition:

All of the properties except for the reviews are immutable.

Each Review consists of a rating and text:

The ProductDetail React Server Component will show the immutable data, and the mutable reviews data will be managed with client components.

Utilizing Client Components

Reviews are handled in the Reviews and AverageRatings client components.

The Reviews component allows you to send a review by typing text that will be stored as local state and then sent to the server via the addReviewAction:

The addReviewAction is defined in the parent page RSC and then passed down into the Reviews client component.

The AverageRatings component takes in reviews and calculates the current average rating.

Challenge

Note that every time the customer navigates between routes, the products/[id]/page.sx component will be re-created.

As a hint, the output of the addReviewAction is the updated array of reviews.

In exchange for your email address, you'll get full access to this and other free ProNextJS tutorials.

Why? First and foremost, your inbox allows us to directly communicate about the latest ProNextJS material. This includes free tutorials, NextJS Tips, and periodic update about trends, tools, and NextJS happenings that I'm excited about.

In addition to the piles of free NextJS content, you'll get the earliest access and best discounts to the paid courses when they launch.

There won't be any spam, and every email you get will have an unsubscribe link.

If this sounds like a fair trade, let's go!

State Management with React Context

Redux for State Management

Zustand for State Management

Jotai for State Management

Outro

Transcript

Integrating User Reviews and Ratings into a Product Detail Page

Current State of Reviews in the Application

Examining the Code Structure

The Product & Review Types

Utilizing Client Components

Challenge

Transcript

Integrating User Reviews and Ratings into a Product Detail Page

Current State of Reviews in the Application

Examining the Code Structure

The Product & Review Types

Utilizing Client Components

Challenge