EDU-591: Product Editorial - Blueprints - React Gen 2

[uttej-vsk]

Description

This PR adds the Product editorial code in React to the Blueprints. This is related to the ticket.

We have angular code in the blueprints, but other framework code needs to be added, and this ticket addresses that.

• As per the new process defined by Sami, one PR for one framework(in this case, React) was created.
• All test cases passed.
• Remove unnecessary code/unwanted code before keeping it for review
• Add sufficient links to the ticket in the description

[changeset-bot]

⚠️ No Changeset found

Latest commit: ca58d42

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[gitguardian]

⚠️ GitGuardian has uncovered 1 secret following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

Since your pull request originates from a forked repository, GitGuardian is not able to associate the secrets uncovered with secret incidents on your GitGuardian dashboard.
Skipping this check run and merging your pull request will create secret incidents on your GitGuardian dashboard.

🔎 Detected hardcoded secret in your pull request

GitGuardian id	GitGuardian status	Secret	Commit	Filename
11707119	Triggered	Generic High Entropy Secret	6b3f133	packages/sdks/snippets/react/src/routes/blueprints/ProductEditorial.tsx	View secret

🛠 Guidelines to remediate hardcoded secrets

1. Understand the implications of revoking this secret by investigating where it is used in your code.
2. Replace and store your secret safely. Learn here the best practices.
3. Revoke and rotate this secret.
4. If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.

To avoid such incidents in the future consider

• following these best practices for managing and storing secrets including API keys and other credentials
• install secret detection on pre-commit to catch secret before it leaves your machine and ease remediation.

---

^{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit ca58d42.

Command	Status	Duration	Result
nx test @e2e/qwik-city	✅ Succeeded	8m 2s	View ↗
nx test @e2e/nextjs-sdk-next-app	✅ Succeeded	7m 54s	View ↗
nx test @e2e/nuxt	✅ Succeeded	7m 31s	View ↗
nx test @e2e/gen1-remix	✅ Succeeded	5m 24s	View ↗
nx test @e2e/hydrogen	✅ Succeeded	6m 17s	View ↗
nx test @e2e/angular-19-ssr	✅ Succeeded	6m 50s	View ↗
nx test @e2e/angular-16-ssr	✅ Succeeded	6m 32s	View ↗
nx test @e2e/react-sdk-next-15-app	✅ Succeeded	6m 1s	View ↗
Additional runs (36)	✅ Succeeded	...	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-03-27 06:43:51 UTC

[sidmohanty11]

we can export the type from here and use it to type the useState in ProductEditorial.tsx -> <Product | null>

Suggested change

	type Product = {
	export type Product = {

[sidmohanty11]

LGTM, left a minor comment

[samijaber]

• Promise.all is an unnecessary complication. There is nothing gained from running the promises together
• the hook is dependent on id but only one of the calls is tied to the id

should be two separate hooks:

Suggested change

	useEffect(() => {
	Promise.all([
	fetch(`https://fakestoreapi.com/products/${id}`).then((res) =>
	res.json()
	),
	fetchOneEntry({
	model: MODEL_NAME,
	apiKey: API_KEY,
	userAttributes: { urlPath: window.location.pathname },
	}),
	]).then(([productData, editorialData]) => {
	setProduct(productData);
	setEditorial(editorialData);
	});
	}, [id]);
	useEffect(() => {
	fetch(`https://fakestoreapi.com/products/${id}`)
	.then((res) => res.json())
	.then((productData) => {
	setProduct(productData);
	});
	}, [id]);
	useEffect(() => {
	fetchOneEntry({
	model: MODEL_NAME,
	apiKey: API_KEY,
	userAttributes: { urlPath: window.location.pathname },
	}).then((editorialData) => {
	setEditorial(editorialData);
	});
	}, []);