Skip to content

Commit 28f22f2

Browse files
kentcdoddskentcdodds
committed
refactor: update movie descriptions and clean up movie data structure
1 parent 98ec138 commit 28f22f2

File tree

10 files changed

+107
-102
lines changed

10 files changed

+107
-102
lines changed

‎exercises/01.start/01.problem.vite-plugin/app/movies-data.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,9 @@ let movies = [
3939
year: 2025,
4040
isFavorite: true,
4141
poster: 'https://image.tmdb.org/t/p/w500/22AouvwlhlXbe3nrFcjzL24bvWH.jpg',
42-
youtubeId: 'dQw4w9WgXcQ', // Placeholder - this would be the actual trailer
42+
youtubeId: 'dQw4w9WgXcQ',
4343
description:
44-
'An upcoming animated musical comedy about a group of K-pop idols who moonlight as demon hunters, saving the world one catchy song at a time.',
44+
'An animated musical comedy about a group of K-pop idols who moonlight as demon hunters, saving the world one catchy song at a time.',
4545
rating: 9.2,
4646
},
4747
{

‎exercises/01.start/01.solution.vite-plugin/app/movies-data.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,9 @@ let movies = [
3939
year: 2025,
4040
isFavorite: true,
4141
poster: 'https://image.tmdb.org/t/p/w500/22AouvwlhlXbe3nrFcjzL24bvWH.jpg',
42-
youtubeId: 'dQw4w9WgXcQ', // Placeholder - this would be the actual trailer
42+
youtubeId: 'dQw4w9WgXcQ',
4343
description:
44-
'An upcoming animated musical comedy about a group of K-pop idols who moonlight as demon hunters, saving the world one catchy song at a time.',
44+
'An animated musical comedy about a group of K-pop idols who moonlight as demon hunters, saving the world one catchy song at a time.',
4545
rating: 9.2,
4646
},
4747
{

‎exercises/01.start/02.solution.loader-rsc/app/movies-data.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,9 @@ let movies = [
3939
year: 2025,
4040
isFavorite: true,
4141
poster: 'https://image.tmdb.org/t/p/w500/22AouvwlhlXbe3nrFcjzL24bvWH.jpg',
42-
youtubeId: 'dQw4w9WgXcQ', // Placeholder - this would be the actual trailer
42+
youtubeId: 'dQw4w9WgXcQ',
4343
description:
44-
'An upcoming animated musical comedy about a group of K-pop idols who moonlight as demon hunters, saving the world one catchy song at a time.',
44+
'An animated musical comedy about a group of K-pop idols who moonlight as demon hunters, saving the world one catchy song at a time.',
4545
rating: 9.2,
4646
},
4747
{

‎exercises/01.start/02.solution.loader-rsc/app/routes/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { type Route } from './+types/index'
44

55
export async function loader() {
66
const movies = await getMovies()
7+
78
const moviesUI = movies.map((movie) => (
89
<Link
910
key={movie.id}
@@ -37,6 +38,7 @@ export async function loader() {
3738

3839
export default function MoviesPage({ loaderData }: Route.ComponentProps) {
3940
const { moviesUI } = loaderData
41+
4042
return (
4143
<main className="bg-background movies-page min-h-screen">
4244
<title>React Router RSC Movies</title>

‎exercises/01.start/03.solution.rsc-route/app/movies-data.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,9 @@ let movies = [
3939
year: 2025,
4040
isFavorite: true,
4141
poster: 'https://image.tmdb.org/t/p/w500/22AouvwlhlXbe3nrFcjzL24bvWH.jpg',
42-
youtubeId: 'dQw4w9WgXcQ', // Placeholder - this would be the actual trailer
42+
youtubeId: 'dQw4w9WgXcQ',
4343
description:
44-
'An upcoming animated musical comedy about a group of K-pop idols who moonlight as demon hunters, saving the world one catchy song at a time.',
44+
'An animated musical comedy about a group of K-pop idols who moonlight as demon hunters, saving the world one catchy song at a time.',
4545
rating: 9.2,
4646
},
4747
{

‎exercises/01.start/03.solution.rsc-route/app/routes/index.tsx‎

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,36 @@ import { getMovies } from '#app/movies-data.ts'
33

44
export async function ServerComponent() {
55
const movies = await getMovies()
6+
7+
const moviesUI = movies.map((movie) => (
8+
<Link
9+
key={movie.id}
10+
to={href('/:movieId', { movieId: String(movie.id) })}
11+
className="rr-card transition-shadow hover:shadow-lg"
12+
>
13+
<div className="mb-4">
14+
<img
15+
src={movie.poster}
16+
alt={`${movie.title} poster`}
17+
className="mb-4 h-64 w-full rounded-lg object-cover"
18+
/>
19+
<h3 className="rr-heading text-lg font-semibold">{movie.title}</h3>
20+
<p className="rr-text mb-2">Year: {movie.year}</p>
21+
<p className="rr-text mb-2">Rating: {movie.rating}/10</p>
22+
<p className="rr-text mb-4 text-sm text-gray-600">
23+
{movie.description}
24+
</p>
25+
<div className="flex items-center gap-2">
26+
<span
27+
className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
28+
>
29+
{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
30+
</span>
31+
</div>
32+
</div>
33+
</Link>
34+
))
35+
636
return (
737
<main className="bg-background movies-page min-h-screen">
838
<title>React Router RSC Movies</title>
@@ -17,36 +47,7 @@ export async function ServerComponent() {
1747
</h1>
1848

1949
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
20-
{movies.map((movie) => (
21-
<Link
22-
key={movie.id}
23-
to={href('/:movieId', { movieId: String(movie.id) })}
24-
className="rr-card transition-shadow hover:shadow-lg"
25-
>
26-
<div className="mb-4">
27-
<img
28-
src={movie.poster}
29-
alt={`${movie.title} poster`}
30-
className="mb-4 h-64 w-full rounded-lg object-cover"
31-
/>
32-
<h3 className="rr-heading text-lg font-semibold">
33-
{movie.title}
34-
</h3>
35-
<p className="rr-text mb-2">Year: {movie.year}</p>
36-
<p className="rr-text mb-2">Rating: {movie.rating}/10</p>
37-
<p className="rr-text mb-4 text-sm text-gray-600">
38-
{movie.description}
39-
</p>
40-
<div className="flex items-center gap-2">
41-
<span
42-
className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
43-
>
44-
{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
45-
</span>
46-
</div>
47-
</div>
48-
</Link>
49-
))}
50+
{moviesUI}
5051
</div>
5152
</div>
5253
</div>

‎exercises/01.start/04.solution.server-fns/app/movies-data.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,9 @@ let movies = [
4141
year: 2025,
4242
isFavorite: true,
4343
poster: 'https://image.tmdb.org/t/p/w500/22AouvwlhlXbe3nrFcjzL24bvWH.jpg',
44-
youtubeId: 'dQw4w9WgXcQ', // Placeholder - this would be the actual trailer
44+
youtubeId: 'dQw4w9WgXcQ',
4545
description:
46-
'An upcoming animated musical comedy about a group of K-pop idols who moonlight as demon hunters, saving the world one catchy song at a time.',
46+
'An animated musical comedy about a group of K-pop idols who moonlight as demon hunters, saving the world one catchy song at a time.',
4747
rating: 9.2,
4848
},
4949
{

‎exercises/01.start/04.solution.server-fns/app/routes/index.tsx‎

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,36 @@ import { getMovies } from '#app/movies-data.ts'
33

44
export async function ServerComponent() {
55
const movies = await getMovies()
6+
7+
const moviesUI = movies.map((movie) => (
8+
<Link
9+
key={movie.id}
10+
to={href('/:movieId', { movieId: String(movie.id) })}
11+
className="rr-card transition-shadow hover:shadow-lg"
12+
>
13+
<div className="mb-4">
14+
<img
15+
src={movie.poster}
16+
alt={`${movie.title} poster`}
17+
className="mb-4 h-64 w-full rounded-lg object-cover"
18+
/>
19+
<h3 className="rr-heading text-lg font-semibold">{movie.title}</h3>
20+
<p className="rr-text mb-2">Year: {movie.year}</p>
21+
<p className="rr-text mb-2">Rating: {movie.rating}/10</p>
22+
<p className="rr-text mb-4 text-sm text-gray-600">
23+
{movie.description}
24+
</p>
25+
<div className="flex items-center gap-2">
26+
<span
27+
className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
28+
>
29+
{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
30+
</span>
31+
</div>
32+
</div>
33+
</Link>
34+
))
35+
636
return (
737
<main className="bg-background movies-page min-h-screen">
838
<title>React Router RSC Movies</title>
@@ -17,36 +47,7 @@ export async function ServerComponent() {
1747
</h1>
1848

1949
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
20-
{movies.map((movie) => (
21-
<Link
22-
key={movie.id}
23-
to={href('/:movieId', { movieId: String(movie.id) })}
24-
className="rr-card transition-shadow hover:shadow-lg"
25-
>
26-
<div className="mb-4">
27-
<img
28-
src={movie.poster}
29-
alt={`${movie.title} poster`}
30-
className="mb-4 h-64 w-full rounded-lg object-cover"
31-
/>
32-
<h3 className="rr-heading text-lg font-semibold">
33-
{movie.title}
34-
</h3>
35-
<p className="rr-text mb-2">Year: {movie.year}</p>
36-
<p className="rr-text mb-2">Rating: {movie.rating}/10</p>
37-
<p className="rr-text mb-4 text-sm text-gray-600">
38-
{movie.description}
39-
</p>
40-
<div className="flex items-center gap-2">
41-
<span
42-
className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
43-
>
44-
{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
45-
</span>
46-
</div>
47-
</div>
48-
</Link>
49-
))}
50+
{moviesUI}
5051
</div>
5152
</div>
5253
</div>

‎exercises/01.start/05.solution.use-client/app/movies-data.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,9 @@ let movies = [
4141
year: 2025,
4242
isFavorite: true,
4343
poster: 'https://image.tmdb.org/t/p/w500/22AouvwlhlXbe3nrFcjzL24bvWH.jpg',
44-
youtubeId: 'dQw4w9WgXcQ', // Placeholder - this would be the actual trailer
44+
youtubeId: 'dQw4w9WgXcQ',
4545
description:
46-
'An upcoming animated musical comedy about a group of K-pop idols who moonlight as demon hunters, saving the world one catchy song at a time.',
46+
'An animated musical comedy about a group of K-pop idols who moonlight as demon hunters, saving the world one catchy song at a time.',
4747
rating: 9.2,
4848
},
4949
{

‎exercises/01.start/05.solution.use-client/app/routes/index.tsx‎

Lines changed: 31 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,36 @@ import { getMovies } from '#app/movies-data.ts'
33

44
export async function ServerComponent() {
55
const movies = await getMovies()
6+
7+
const moviesUI = movies.map((movie) => (
8+
<Link
9+
key={movie.id}
10+
to={href('/:movieId', { movieId: String(movie.id) })}
11+
className="rr-card transition-shadow hover:shadow-lg"
12+
>
13+
<div className="mb-4">
14+
<img
15+
src={movie.poster}
16+
alt={`${movie.title} poster`}
17+
className="mb-4 h-64 w-full rounded-lg object-cover"
18+
/>
19+
<h3 className="rr-heading text-lg font-semibold">{movie.title}</h3>
20+
<p className="rr-text mb-2">Year: {movie.year}</p>
21+
<p className="rr-text mb-2">Rating: {movie.rating}/10</p>
22+
<p className="rr-text mb-4 text-sm text-gray-600">
23+
{movie.description}
24+
</p>
25+
<div className="flex items-center gap-2">
26+
<span
27+
className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
28+
>
29+
{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
30+
</span>
31+
</div>
32+
</div>
33+
</Link>
34+
))
35+
636
return (
737
<main className="bg-background movies-page min-h-screen">
838
<title>React Router RSC Movies</title>
@@ -17,36 +47,7 @@ export async function ServerComponent() {
1747
</h1>
1848

1949
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
20-
{movies.map((movie) => (
21-
<Link
22-
key={movie.id}
23-
to={href('/:movieId', { movieId: String(movie.id) })}
24-
className="rr-card transition-shadow hover:shadow-lg"
25-
>
26-
<div className="mb-4">
27-
<img
28-
src={movie.poster}
29-
alt={`${movie.title} poster`}
30-
className="mb-4 h-64 w-full rounded-lg object-cover"
31-
/>
32-
<h3 className="rr-heading text-lg font-semibold">
33-
{movie.title}
34-
</h3>
35-
<p className="rr-text mb-2">Year: {movie.year}</p>
36-
<p className="rr-text mb-2">Rating: {movie.rating}/10</p>
37-
<p className="rr-text mb-4 text-sm text-gray-600">
38-
{movie.description}
39-
</p>
40-
<div className="flex items-center gap-2">
41-
<span
42-
className={`rr-badge ${movie.isFavorite ? 'rr-badge-red' : ''}`}
43-
>
44-
{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
45-
</span>
46-
</div>
47-
</div>
48-
</Link>
49-
))}
50+
{moviesUI}
5051
</div>
5152
</div>
5253
</div>

0 commit comments

Comments
 (0)