Skip to content

Commit 6510bac

Browse files
kentcdoddskentcdodds
committed
feat: implement ViewTransition for enhanced movie detail presentation
1 parent 93dd30e commit 6510bac

File tree

3 files changed

+84
-75
lines changed

3 files changed

+84
-75
lines changed

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

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { ViewTransition } from 'react'
12
import { Form, href, Link } from 'react-router'
23
import { MovieTrailer } from '#app/movie-trailer.tsx'
34
import { getMovie, setIsFavorite } from '#app/movies-data.ts'
@@ -30,40 +31,42 @@ export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
3031
</nav>
3132
</div>
3233

33-
<div className="rr-card">
34-
<div className="flex flex-col gap-6 md:flex-row">
35-
<div className="md:w-1/3">
34+
<div className="flex flex-col gap-6 md:flex-row">
35+
<div className="md:w-1/3">
36+
<ViewTransition name={`movie-poster-${movie.id}`}>
3637
<img
3738
src={movie.poster}
3839
alt={`${movie.title} poster`}
3940
className="h-96 w-full rounded-lg object-cover"
4041
/>
41-
</div>
42-
<div className="md:w-2/3">
42+
</ViewTransition>
43+
</div>
44+
<div className="md:w-2/3">
45+
<ViewTransition name={`movie-title-${movie.id}`}>
4346
<h1 className="rr-heading mb-4 text-3xl font-bold">
4447
{movie.title}
4548
</h1>
46-
<div className="mb-4 flex items-center gap-4">
47-
<span className="rr-text text-lg">{movie.year}</span>
48-
<span className="rr-badge">Rating: {movie.rating}/10</span>
49-
<Form method="post">
50-
<input type="hidden" name="id" value={movie.id} />
51-
<input
52-
type="hidden"
53-
name="isFavorite"
54-
value={String(!movie.isFavorite)}
55-
/>
56-
<button
57-
type="submit"
58-
className={`rr-badge cursor-pointer ${movie.isFavorite ? 'rr-badge-red' : ''}`}
59-
>
60-
{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
61-
</button>
62-
</Form>
63-
</div>
64-
<p className="rr-text mb-6">{movie.description}</p>
65-
<MovieTrailer movie={movie} />
49+
</ViewTransition>
50+
<div className="mb-4 flex items-center gap-4">
51+
<span className="rr-text text-lg">{movie.year}</span>
52+
<span className="rr-badge">Rating: {movie.rating}/10</span>
53+
<Form method="post">
54+
<input type="hidden" name="id" value={movie.id} />
55+
<input
56+
type="hidden"
57+
name="isFavorite"
58+
value={String(!movie.isFavorite)}
59+
/>
60+
<button
61+
type="submit"
62+
className={`rr-badge cursor-pointer ${movie.isFavorite ? 'rr-badge-red' : ''}`}
63+
>
64+
{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
65+
</button>
66+
</Form>
6667
</div>
68+
<p className="rr-text mb-6">{movie.description}</p>
69+
<MovieTrailer movie={movie} />
6770
</div>
6871
</div>
6972
</div>

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

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { ViewTransition } from 'react'
12
import { Form, href, Link } from 'react-router'
23
import { MovieTrailer } from '#app/movie-trailer.tsx'
34
import { getMovie, setIsFavorite } from '#app/movies-data.ts'
@@ -30,40 +31,42 @@ export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
3031
</nav>
3132
</div>
3233

33-
<div className="rr-card">
34-
<div className="flex flex-col gap-6 md:flex-row">
35-
<div className="md:w-1/3">
34+
<div className="flex flex-col gap-6 md:flex-row">
35+
<div className="md:w-1/3">
36+
<ViewTransition name={`movie-poster-${movie.id}`}>
3637
<img
3738
src={movie.poster}
3839
alt={`${movie.title} poster`}
3940
className="h-96 w-full rounded-lg object-cover"
4041
/>
41-
</div>
42-
<div className="md:w-2/3">
42+
</ViewTransition>
43+
</div>
44+
<div className="md:w-2/3">
45+
<ViewTransition name={`movie-title-${movie.id}`}>
4346
<h1 className="rr-heading mb-4 text-3xl font-bold">
4447
{movie.title}
4548
</h1>
46-
<div className="mb-4 flex items-center gap-4">
47-
<span className="rr-text text-lg">{movie.year}</span>
48-
<span className="rr-badge">Rating: {movie.rating}/10</span>
49-
<Form method="post">
50-
<input type="hidden" name="id" value={movie.id} />
51-
<input
52-
type="hidden"
53-
name="isFavorite"
54-
value={String(!movie.isFavorite)}
55-
/>
56-
<button
57-
type="submit"
58-
className={`rr-badge cursor-pointer ${movie.isFavorite ? 'rr-badge-red' : ''}`}
59-
>
60-
{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
61-
</button>
62-
</Form>
63-
</div>
64-
<p className="rr-text mb-6">{movie.description}</p>
65-
<MovieTrailer movie={movie} />
49+
</ViewTransition>
50+
<div className="mb-4 flex items-center gap-4">
51+
<span className="rr-text text-lg">{movie.year}</span>
52+
<span className="rr-badge">Rating: {movie.rating}/10</span>
53+
<Form method="post">
54+
<input type="hidden" name="id" value={movie.id} />
55+
<input
56+
type="hidden"
57+
name="isFavorite"
58+
value={String(!movie.isFavorite)}
59+
/>
60+
<button
61+
type="submit"
62+
className={`rr-badge cursor-pointer ${movie.isFavorite ? 'rr-badge-red' : ''}`}
63+
>
64+
{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
65+
</button>
66+
</Form>
6667
</div>
68+
<p className="rr-text mb-6">{movie.description}</p>
69+
<MovieTrailer movie={movie} />
6770
</div>
6871
</div>
6972
</div>

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

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { ViewTransition } from 'react'
12
import { Form, href, Link } from 'react-router'
23
import { MovieTrailer } from '#app/movie-trailer.tsx'
34
import { getMovie, setIsFavorite } from '#app/movies-data.ts'
@@ -30,40 +31,42 @@ export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
3031
</nav>
3132
</div>
3233

33-
<div className="rr-card">
34-
<div className="flex flex-col gap-6 md:flex-row">
35-
<div className="md:w-1/3">
34+
<div className="flex flex-col gap-6 md:flex-row">
35+
<div className="md:w-1/3">
36+
<ViewTransition name={`movie-poster-${movie.id}`}>
3637
<img
3738
src={movie.poster}
3839
alt={`${movie.title} poster`}
3940
className="h-96 w-full rounded-lg object-cover"
4041
/>
41-
</div>
42-
<div className="md:w-2/3">
42+
</ViewTransition>
43+
</div>
44+
<div className="md:w-2/3">
45+
<ViewTransition name={`movie-title-${movie.id}`}>
4346
<h1 className="rr-heading mb-4 text-3xl font-bold">
4447
{movie.title}
4548
</h1>
46-
<div className="mb-4 flex items-center gap-4">
47-
<span className="rr-text text-lg">{movie.year}</span>
48-
<span className="rr-badge">Rating: {movie.rating}/10</span>
49-
<Form method="post">
50-
<input type="hidden" name="id" value={movie.id} />
51-
<input
52-
type="hidden"
53-
name="isFavorite"
54-
value={String(!movie.isFavorite)}
55-
/>
56-
<button
57-
type="submit"
58-
className={`rr-badge cursor-pointer ${movie.isFavorite ? 'rr-badge-red' : ''}`}
59-
>
60-
{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
61-
</button>
62-
</Form>
63-
</div>
64-
<p className="rr-text mb-6">{movie.description}</p>
65-
<MovieTrailer movie={movie} />
49+
</ViewTransition>
50+
<div className="mb-4 flex items-center gap-4">
51+
<span className="rr-text text-lg">{movie.year}</span>
52+
<span className="rr-badge">Rating: {movie.rating}/10</span>
53+
<Form method="post">
54+
<input type="hidden" name="id" value={movie.id} />
55+
<input
56+
type="hidden"
57+
name="isFavorite"
58+
value={String(!movie.isFavorite)}
59+
/>
60+
<button
61+
type="submit"
62+
className={`rr-badge cursor-pointer ${movie.isFavorite ? 'rr-badge-red' : ''}`}
63+
>
64+
{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
65+
</button>
66+
</Form>
6667
</div>
68+
<p className="rr-text mb-6">{movie.description}</p>
69+
<MovieTrailer movie={movie} />
6770
</div>
6871
</div>
6972
</div>

0 commit comments

Comments
 (0)