refactor: simplify movie details component by removing conditional badge class

Author: kentcdodds

exercises/01.start/01.problem.vite-plugin/app/routes/movie-details.tsx

@@ -51,12 +51,8 @@ export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
 							</h1>
 							<div className="mb-4 flex items-center gap-4">
 								<span className="rr-text text-lg">{movie.year}</span>
-								<span
-									className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
-								>
-									Rating: {movie.rating}/10
-								</span>
-								<Form method="post" preventScrollReset>
+								<span className="rr-badge">Rating: {movie.rating}/10</span>
+								<Form method="post">
 									<input type="hidden" name="id" value={movie.id} />
 									<input
 										type="hidden"

exercises/01.start/01.solution.vite-plugin/app/routes/movie-details.tsx

@@ -51,12 +51,8 @@ export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
 							</h1>
 							<div className="mb-4 flex items-center gap-4">
 								<span className="rr-text text-lg">{movie.year}</span>
-								<span
-									className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
-								>
-									Rating: {movie.rating}/10
-								</span>
-								<Form method="post" preventScrollReset>
+								<span className="rr-badge">Rating: {movie.rating}/10</span>
+								<Form method="post">
 									<input type="hidden" name="id" value={movie.id} />
 									<input
 										type="hidden"

exercises/01.start/02.solution.loader-rsc/app/routes/movie-details.tsx

@@ -51,12 +51,8 @@ export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
 							</h1>
 							<div className="mb-4 flex items-center gap-4">
 								<span className="rr-text text-lg">{movie.year}</span>
-								<span
-									className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
-								>
-									Rating: {movie.rating}/10
-								</span>
-								<Form method="post" preventScrollReset>
+								<span className="rr-badge">Rating: {movie.rating}/10</span>
+								<Form method="post">
 									<input type="hidden" name="id" value={movie.id} />
 									<input
 										type="hidden"

exercises/01.start/03.solution.rsc-route/app/routes/movie-details.tsx

@@ -51,12 +51,8 @@ export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
 							</h1>
 							<div className="mb-4 flex items-center gap-4">
 								<span className="rr-text text-lg">{movie.year}</span>
-								<span
-									className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
-								>
-									Rating: {movie.rating}/10
-								</span>
-								<Form method="post" preventScrollReset>
+								<span className="rr-badge">Rating: {movie.rating}/10</span>
+								<Form method="post">
 									<input type="hidden" name="id" value={movie.id} />
 									<input
 										type="hidden"

exercises/01.start/04.solution.server-fns/app/routes/movie-details.tsx

@@ -39,11 +39,7 @@ export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
 							</h1>
 							<div className="mb-4 flex items-center gap-4">
 								<span className="rr-text text-lg">{movie.year}</span>
-								<span
-									className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
-								>
-									Rating: {movie.rating}/10
-								</span>
+								<span className="rr-badge">Rating: {movie.rating}/10</span>
 								<form action={setIsFavorite}>
 									<input type="hidden" name="id" value={movie.id} />
 									<input

exercises/01.start/05.solution.use-client/app/routes/movie-details.tsx

@@ -34,11 +34,7 @@ export async function ServerComponent({ params }: Route.ComponentProps) {
 							</h1>
 							<div className="mb-4 flex items-center gap-4">
 								<span className="rr-text text-lg">{movie.year}</span>
-								<span
-									className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
-								>
-									Rating: {movie.rating}/10
-								</span>
+								<span className="rr-badge">Rating: {movie.rating}/10</span>
 								<form action={setIsFavorite}>
 									<input type="hidden" name="id" value={movie.id} />
 									<input