pretty good spot

Author: kentcdodds

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

@@ -1,5 +1,3 @@
-'use server'
-
 // Mock data for demonstration
 let movies = [
 	{
@@ -87,30 +85,3 @@ export async function getMovie(id: number) {
 	}
 	return movie
 }
-
-export async function toggleFavorite(prevState: any, formData: FormData) {
-	const movieId = Number(formData.get('id'))
-	const isFavorite = formData.get('isFavorite') === 'true'
-	const failureChance = Number(formData.get('failureChance')) || 0
-
-	// Simulate failure based on the failure chance
-	if (failureChance > 0 && Math.random() * 100 < failureChance) {
-		return {
-			success: false,
-			error: `Toggle operation failed! (${failureChance}% failure chance)`,
-			movieId,
-		}
-	}
-
-	// Update the movie's favorite status
-	const movie = movies.find((m) => m.id === movieId)
-	if (movie) {
-		movie.isFavorite = isFavorite
-	}
-
-	return {
-		success: true,
-		error: null,
-		movieId,
-	}
-}

exercises/01.start/01.problem.vite-plugin/app/routes.ts

@@ -2,5 +2,5 @@ import { type RouteConfig, index, route } from '@react-router/dev/routes'
 
 export default [
 	index('routes/index.tsx'),
-	route('/:movieId', 'routes/$movieId.tsx'),
+	route('/:movieId', 'routes/movie-details.tsx'),
 ] satisfies RouteConfig

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

@@ -3,22 +3,27 @@ import { getMovies } from '#app/movies-data.ts'
 import { type Route } from './+types/index'
 
 export async function loader() {
-	return {
-		movies: await getMovies(),
-	}
+	const movies = await getMovies()
+	return { movies }
 }
 
 export default function MoviesPage({ loaderData }: Route.ComponentProps) {
+	const { movies } = loaderData
 	return (
 		<main className="bg-background movies-page min-h-screen">
+			<title>React Router RSC Movies</title>
+			<meta
+				name="description"
+				content="Demo of React Server Components in React Router"
+			/>
 			<div className="mx-auto max-w-6xl px-6 py-16">
 				<div className="mx-auto max-w-4xl">
 					<h1 className="rr-heading mb-8 text-3xl font-bold">
 						Movie Collection
 					</h1>
 
 					<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-						{loaderData.movies.map((movie) => (
+						{movies.map((movie) => (
 							<Link
 								key={movie.id}
 								to={href('/:movieId', { movieId: String(movie.id) })}
@@ -52,13 +57,3 @@ export default function MoviesPage({ loaderData }: Route.ComponentProps) {
 		</main>
 	)
 }
-
-export function meta() {
-	return [
-		{ title: 'Basic React Router v7' },
-		{
-			name: 'description',
-			content: 'Basic React Router v7 with loaders and client-side navigation',
-		},
-	]
-}

exercises/01.start/01.problem.vite-plugin/app/routes/$movieId.tsx renamed to exercises/01.start/01.problem.vite-plugin/app/routes/movie-details.tsx

@@ -1,27 +1,19 @@
 import { href, Link } from 'react-router'
 import { getMovie } from '#app/movies-data.ts'
-import { type Route } from './+types/$movieId'
+import { type Route } from './+types/movie-details'
 
 export async function loader({ params }: Route.LoaderArgs) {
 	const movie = await getMovie(Number(params.movieId))
 	return { movie }
 }
 
-export function meta({ loaderData }: Route.MetaArgs) {
-	return [
-		{ title: `${loaderData.movie.title} - Demo 1` },
-		{
-			name: 'description',
-			content: loaderData.movie.description,
-		},
-	]
-}
-
 export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
 	const { movie } = loaderData
 
 	return (
 		<main className="bg-background movie-details-page min-h-screen">
+			<title>{movie.title}</title>
+			<meta name="description" content={movie.description} />
 			<div className="mx-auto max-w-4xl px-6 py-16">
 				<div className="mb-8">
 					<nav className="rr-text mb-6 text-sm">

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

@@ -1,5 +1,3 @@
-'use server'
-
 // Mock data for demonstration
 let movies = [
 	{
@@ -87,30 +85,3 @@ export async function getMovie(id: number) {
 	}
 	return movie
 }
-
-export async function toggleFavorite(prevState: any, formData: FormData) {
-	const movieId = Number(formData.get('id'))
-	const isFavorite = formData.get('isFavorite') === 'true'
-	const failureChance = Number(formData.get('failureChance')) || 0
-
-	// Simulate failure based on the failure chance
-	if (failureChance > 0 && Math.random() * 100 < failureChance) {
-		return {
-			success: false,
-			error: `Toggle operation failed! (${failureChance}% failure chance)`,
-			movieId,
-		}
-	}
-
-	// Update the movie's favorite status
-	const movie = movies.find((m) => m.id === movieId)
-	if (movie) {
-		movie.isFavorite = isFavorite
-	}
-
-	return {
-		success: true,
-		error: null,
-		movieId,
-	}
-}

exercises/01.start/01.solution.vite-plugin/app/routes.ts

@@ -2,5 +2,5 @@ import { type RouteConfig, index, route } from '@react-router/dev/routes'
 
 export default [
 	index('routes/index.tsx'),
-	route('/:movieId', 'routes/$movieId.tsx'),
+	route('/:movieId', 'routes/movie-details.tsx'),
 ] satisfies RouteConfig

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

@@ -3,22 +3,27 @@ import { getMovies } from '#app/movies-data.ts'
 import { type Route } from './+types/index'
 
 export async function loader() {
-	return {
-		movies: await getMovies(),
-	}
+	const movies = await getMovies()
+	return { movies }
 }
 
 export default function MoviesPage({ loaderData }: Route.ComponentProps) {
+	const { movies } = loaderData
 	return (
 		<main className="bg-background movies-page min-h-screen">
+			<title>React Router RSC Movies</title>
+			<meta
+				name="description"
+				content="Demo of React Server Components in React Router"
+			/>
 			<div className="mx-auto max-w-6xl px-6 py-16">
 				<div className="mx-auto max-w-4xl">
 					<h1 className="rr-heading mb-8 text-3xl font-bold">
 						Movie Collection
 					</h1>
 
 					<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-						{loaderData.movies.map((movie) => (
+						{movies.map((movie) => (
 							<Link
 								key={movie.id}
 								to={href('/:movieId', { movieId: String(movie.id) })}
@@ -52,13 +57,3 @@ export default function MoviesPage({ loaderData }: Route.ComponentProps) {
 		</main>
 	)
 }
-
-export function meta() {
-	return [
-		{ title: 'Basic React Router v7' },
-		{
-			name: 'description',
-			content: 'Basic React Router v7 with loaders and client-side navigation',
-		},
-	]
-}

exercises/01.start/01.solution.vite-plugin/app/routes/$movieId.tsx renamed to exercises/01.start/01.solution.vite-plugin/app/routes/movie-details.tsx

@@ -1,27 +1,19 @@
 import { href, Link } from 'react-router'
 import { getMovie } from '#app/movies-data.ts'
-import { type Route } from './+types/$movieId'
+import { type Route } from './+types/movie-details'
 
 export async function loader({ params }: Route.LoaderArgs) {
 	const movie = await getMovie(Number(params.movieId))
 	return { movie }
 }
 
-export function meta({ loaderData }: Route.MetaArgs) {
-	return [
-		{ title: `${loaderData.movie.title} - Demo 1` },
-		{
-			name: 'description',
-			content: loaderData.movie.description,
-		},
-	]
-}
-
 export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
 	const { movie } = loaderData
 
 	return (
 		<main className="bg-background movie-details-page min-h-screen">
+			<title>{movie.title}</title>
+			<meta name="description" content={movie.description} />
 			<div className="mx-auto max-w-4xl px-6 py-16">
 				<div className="mb-8">
 					<nav className="rr-text mb-6 text-sm">

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

@@ -1,5 +1,3 @@
-'use server'
-
 // Mock data for demonstration
 let movies = [
 	{
@@ -87,30 +85,3 @@ export async function getMovie(id: number) {
 	}
 	return movie
 }
-
-export async function toggleFavorite(prevState: any, formData: FormData) {
-	const movieId = Number(formData.get('id'))
-	const isFavorite = formData.get('isFavorite') === 'true'
-	const failureChance = Number(formData.get('failureChance')) || 0
-
-	// Simulate failure based on the failure chance
-	if (failureChance > 0 && Math.random() * 100 < failureChance) {
-		return {
-			success: false,
-			error: `Toggle operation failed! (${failureChance}% failure chance)`,
-			movieId,
-		}
-	}
-
-	// Update the movie's favorite status
-	const movie = movies.find((m) => m.id === movieId)
-	if (movie) {
-		movie.isFavorite = isFavorite
-	}
-
-	return {
-		success: true,
-		error: null,
-		movieId,
-	}
-}

exercises/01.start/02.solution.loader-rsc/app/routes.ts

@@ -2,5 +2,5 @@ import { type RouteConfig, index, route } from '@react-router/dev/routes'
 
 export default [
 	index('routes/index.tsx'),
-	route('/:movieId', 'routes/$movieId.tsx'),
+	route('/:movieId', 'routes/movie-details.tsx'),
 ] satisfies RouteConfig