better order

Author: kentcdodds

exercises/01.start/03.solution.server-fns/.gitignore renamed to exercises/01.start/03.solution.rsc-route/.gitignore

@@ -1,5 +1,3 @@
-'use server'
-
 // Mock data for demonstration
 let movies = [
 	{
@@ -88,12 +86,16 @@ export async function getMovie(id: number) {
 	return movie
 }
 
-export async function setIsFavorite(formData: FormData) {
+export async function setIsFavorite({
+	movieId,
+	isFavorite,
+}: {
+	movieId: number
+	isFavorite: boolean
+}) {
 	// Simulate API call delay
 	await new Promise((resolve) => setTimeout(resolve, 50))
 
-	const movieId = Number(formData.get('id'))
-	const isFavorite = formData.get('isFavorite') === 'true'
 	// Update the movie's favorite status
 	const movie = movies.find((m) => m.id === movieId)
 	if (movie) {

exercises/01.start/04.solution.rsc-route/README.mdx renamed to exercises/01.start/03.solution.rsc-route/README.mdx

@@ -1,4 +1,4 @@
-import { href, Link } from 'react-router'
+import { Form, href, Link } from 'react-router'
 import { MovieTrailer } from '#app/movie-trailer.tsx'
 import { getMovie, setIsFavorite } from '#app/movies-data.ts'
 import { type Route } from './+types/movie-details'
@@ -8,6 +8,18 @@ export async function loader({ params }: Route.LoaderArgs) {
 	return { movie }
 }
 
+export async function action({ request }: Route.ActionArgs) {
+	// Simulate API call delay
+	await new Promise((resolve) => setTimeout(resolve, 50))
+	const formData = await request.formData()
+
+	const movieId = Number(formData.get('id'))
+	const isFavorite = formData.get('isFavorite') === 'true'
+	// Update the movie's favorite status
+	await setIsFavorite({ movieId, isFavorite })
+	return { success: true }
+}
+
 export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
 	const { movie } = loaderData
 
@@ -40,7 +52,7 @@ export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
 							<div className="mb-4 flex items-center gap-4">
 								<span className="rr-text text-lg">{movie.year}</span>
 								<span className="rr-badge">Rating: {movie.rating}/10</span>
-								<form action={setIsFavorite}>
+								<Form method="post" preventScrollReset>
 									<input type="hidden" name="id" value={movie.id} />
 									<input
 										type="hidden"
@@ -53,7 +65,7 @@ export default function MovieDetailsPage({ loaderData }: Route.ComponentProps) {
 									>
 										{movie.isFavorite ? 'Favorite' : 'Not Favorite'}
 									</button>
-								</form>
+								</Form>
 							</div>
 							<p className="rr-text mb-6">{movie.description}</p>
 							<MovieTrailer movie={movie} />

exercises/01.start/03.solution.server-fns/app/app.css renamed to exercises/01.start/03.solution.rsc-route/app/app.css

@@ -1,5 +1,5 @@
 {
-  "name": "exercises_01.start_04.solution.rsc-route",
+  "name": "exercises_01.start_03.solution.rsc-route",
   "private": true,
   "type": "module",
   "imports": {