This page is a work in progress.You can help improve it. →

Showing the Reviewer Name for a Review

Showing the Reviewer Name for a Review

Our design shows the name of the reviewer along with the review. Let's add support for that.

The first thing we will do is to add an accessor for the associated user in Review.cs

public User User { get; set; }

Then in the RestaurantController we will modify the HttpGet for a single restaurant to include the User in the list of associated models we fetch.

var restaurant = await _context.Restaurants.
Include(restaurant => restaurant.Reviews).
ThenInclude(review => review.User).
Where(restaurant => restaurant.Id == id).FirstOrDefaultAsync();

We should update the exampledata.sql to specify a UserId for each of the reviews. We'll give it a value of 1 even though we don't have any Users -- whatever user we create first will get those reviews.

-- Ensure we truncate the table and restart the identity so our Id column starts at 1 each time
TRUNCATE TABLE "Restaurants", "Reviews", "Users" RESTART IDENTITY;
INSERT INTO "Restaurants" ("Name", "Description", "Address", "Telephone") VALUES ('Thoughtbeat', 'Inverse zero administration benchmark', '07 Meadow Vale Drive', '314-651-9791');
INSERT INTO "Restaurants" ("Name", "Description", "Address", "Telephone") VALUES ('Dabtype', 'Organized stable firmware', '7 Miller Park', '523-760-6681');
INSERT INTO "Restaurants" ("Name", "Description", "Address", "Telephone") VALUES ('Topdrive', 'Object-based interactive application', '65 Eliot Lane', '650-993-7074');
INSERT INTO "Restaurants" ("Name", "Description", "Address", "Telephone") VALUES ('Avaveo', 'Persistent zero defect process improvement', '2 Clarendon Junction', '715-663-5265');
-- Ensure we have a user to associate to the reviews below
INSERT INTO "Users" ("FullName", "Email", "HashedPassword") VALUES ('Sarah', 'sarah@suncoast.io', 'xxxxx');
INSERT INTO "Reviews" ("RestaurantId", "CreatedAt", "Summary", "Body", "Stars", "UserId") VALUES (1, '2020-01-01 14:23:55', 'Yummy Food', 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima modi impedit quisquam sit, saepe enim placeat a vero voluptas asperiores atque laudantium in, nobis sunt blanditiis dignissimos. Deleniti, esse optio!', 3, 1);
INSERT INTO "Reviews" ("RestaurantId", "CreatedAt", "Summary", "Body", "Stars", "UserId") VALUES (1, '2020-01-01 18:23:55', 'Mmmmm, good', 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima modi impedit quisquam sit, saepe enim placeat a vero voluptas asperiores atque laudantium in, nobis sunt blanditiis dignissimos. Deleniti, esse optio!', 4, 1);

Update the ReviewType to indicate we know the associated user:

export type ReviewType = {
id: number | undefined
summary: string
body: string
stars: number
createdAt: Date
restaurantId: number
user: {
id: number
fullName: string
email: string
}
}

This will cause an issue with our existing use for creating a state. For now we'll create a new type NewReviewType to handle this:

export type NewReviewType = {
id: number | undefined
summary: string
body: string
stars: number
createdAt: Date
restaurantId: number
}

In Restaurant.tsx:

const [newReview, setNewReview] = useState<NewReviewType>({
id: undefined,
body: '',
stars: 5,
summary: '',
createdAt: new Date(),
restaurantId: Number(id),
})

also

async function submitNewReview(review: NewReviewType) {

Then in the Restaurant.tsx we can access the user information.

<div className="author">
{review.user.fullName} said: <em>{review.summary}</em>
</div>
© 2017 - 2021; Built with ♥ in St. Petersburg, Florida.