meta changes checkpoint

exercises/02.routing/01-03.problem/app/routes/forgot-password.tsx

@@ -1,9 +1,4 @@
-import {
-	json,
-	redirect,
-	type DataFunctionArgs,
-	type V2_MetaFunction,
-} from '@remix-run/node'
+import { json, redirect, type DataFunctionArgs } from '@remix-run/node'
 import { Link, useFetcher, useLoaderData } from '@remix-run/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '~/components/error-boundary'
@@ -17,6 +12,7 @@ import {
 	preprocessFormData,
 	useForm,
 } from '~/utils/forms'
+import { mergeMeta } from '~/utils/misc'
 import { getDomainUrl } from '~/utils/misc.server'
 import { commitSession, getSession } from '~/utils/session.server'
 import { emailSchema, usernameSchema } from '~/utils/user-validation'
@@ -109,14 +105,9 @@ async function sendPasswordResetEmail({
 	})
 }
 
-export const meta: V2_MetaFunction = ({ matches }) => {
-	let rootModule = matches.find(match => match.route.id === 'root')
-
-	return [
-		...(rootModule?.meta ?? [])?.filter(meta => !('title' in meta)),
-		{ title: 'Password Recovery for Rocket Rental' },
-	]
-}
+export const meta = mergeMeta(() => {
+	return [{ title: 'Password Recovery for Rocket Rental' }]
+})
 
 export default function SignupRoute() {
 	const data = useLoaderData<typeof loader>()

exercises/02.routing/01-03.problem/app/utils/misc.ts

@@ -1,4 +1,9 @@
-import { type SerializeFrom } from '@remix-run/node'
+import {
+	type LoaderFunction,
+	type V2_HtmlMetaDescriptor,
+	type V2_MetaFunction,
+	type SerializeFrom,
+} from '@remix-run/node'
 import { useRouteLoaderData } from '@remix-run/react'
 import { type loader as rootLoader } from '~/root'
 
@@ -81,3 +86,43 @@ export function getErrorMessage(error: unknown) {
 	console.error('Unable to get error message for error', error)
 	return 'Unknown Error'
 }
+
+export function mergeMeta<
+	Loader extends unknown = unknown,
+	ParentsLoaders extends Record<string, LoaderFunction> = {},
+>(
+	overrideFn: V2_MetaFunction<Loader, ParentsLoaders>,
+	appendFn?: V2_MetaFunction<Loader, ParentsLoaders>,
+): V2_MetaFunction<Loader, ParentsLoaders> {
+	return arg => {
+		// get meta from parent routes
+		let mergedMeta = arg.matches.reduce((acc, match) => {
+			return acc.concat(match.meta || [])
+		}, [] as V2_HtmlMetaDescriptor[])
+
+		// replace any parent meta with the same name or property with the override
+		let overrides = overrideFn(arg)
+		for (let override of overrides) {
+			let index = mergedMeta.findIndex(
+				meta =>
+					('name' in meta &&
+						'name' in override &&
+						meta.name === override.name) ||
+					('property' in meta &&
+						'property' in override &&
+						meta.property === override.property) ||
+					('title' in meta && 'title' in override),
+			)
+			if (index !== -1) {
+				mergedMeta.splice(index, 1, override)
+			}
+		}
+
+		// append any additional meta
+		if (appendFn) {
+			mergedMeta = mergedMeta.concat(appendFn(arg))
+		}
+
+		return mergedMeta
+	}
+}

exercises/02.routing/01.solution.routes/app/routes/forgot-password.tsx

@@ -1,9 +1,4 @@
-import {
-	json,
-	redirect,
-	type DataFunctionArgs,
-	type V2_MetaFunction,
-} from '@remix-run/node'
+import { json, redirect, type DataFunctionArgs } from '@remix-run/node'
 import { Link, useFetcher, useLoaderData } from '@remix-run/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '~/components/error-boundary'
@@ -17,6 +12,7 @@ import {
 	preprocessFormData,
 	useForm,
 } from '~/utils/forms'
+import { mergeMeta } from '~/utils/misc'
 import { getDomainUrl } from '~/utils/misc.server'
 import { commitSession, getSession } from '~/utils/session.server'
 import { emailSchema, usernameSchema } from '~/utils/user-validation'
@@ -109,14 +105,9 @@ async function sendPasswordResetEmail({
 	})
 }
 
-export const meta: V2_MetaFunction = ({ matches }) => {
-	let rootModule = matches.find(match => match.route.id === 'root')
-
-	return [
-		...(rootModule?.meta ?? [])?.filter(meta => !('title' in meta)),
-		{ title: 'Password Recovery for Rocket Rental' },
-	]
-}
+export const meta = mergeMeta(() => {
+	return [{ title: 'Password Recovery for Rocket Rental' }]
+})
 
 export default function SignupRoute() {
 	const data = useLoaderData<typeof loader>()

exercises/02.routing/01.solution.routes/app/utils/misc.ts

@@ -1,4 +1,9 @@
-import { type SerializeFrom } from '@remix-run/node'
+import {
+	type LoaderFunction,
+	type V2_HtmlMetaDescriptor,
+	type V2_MetaFunction,
+	type SerializeFrom,
+} from '@remix-run/node'
 import { useRouteLoaderData } from '@remix-run/react'
 import { type loader as rootLoader } from '~/root'
 
@@ -81,3 +86,43 @@ export function getErrorMessage(error: unknown) {
 	console.error('Unable to get error message for error', error)
 	return 'Unknown Error'
 }
+
+export function mergeMeta<
+	Loader extends unknown = unknown,
+	ParentsLoaders extends Record<string, LoaderFunction> = {},
+>(
+	overrideFn: V2_MetaFunction<Loader, ParentsLoaders>,
+	appendFn?: V2_MetaFunction<Loader, ParentsLoaders>,
+): V2_MetaFunction<Loader, ParentsLoaders> {
+	return arg => {
+		// get meta from parent routes
+		let mergedMeta = arg.matches.reduce((acc, match) => {
+			return acc.concat(match.meta || [])
+		}, [] as V2_HtmlMetaDescriptor[])
+
+		// replace any parent meta with the same name or property with the override
+		let overrides = overrideFn(arg)
+		for (let override of overrides) {
+			let index = mergedMeta.findIndex(
+				meta =>
+					('name' in meta &&
+						'name' in override &&
+						meta.name === override.name) ||
+					('property' in meta &&
+						'property' in override &&
+						meta.property === override.property) ||
+					('title' in meta && 'title' in override),
+			)
+			if (index !== -1) {
+				mergedMeta.splice(index, 1, override)
+			}
+		}
+
+		// append any additional meta
+		if (appendFn) {
+			mergedMeta = mergedMeta.concat(appendFn(arg))
+		}
+
+		return mergedMeta
+	}
+}

exercises/02.routing/02.solution.links/app/routes/forgot-password.tsx

@@ -1,9 +1,4 @@
-import {
-	json,
-	redirect,
-	type DataFunctionArgs,
-	type V2_MetaFunction,
-} from '@remix-run/node'
+import { json, redirect, type DataFunctionArgs } from '@remix-run/node'
 import { Link, useFetcher, useLoaderData } from '@remix-run/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '~/components/error-boundary'
@@ -17,6 +12,7 @@ import {
 	preprocessFormData,
 	useForm,
 } from '~/utils/forms'
+import { mergeMeta } from '~/utils/misc'
 import { getDomainUrl } from '~/utils/misc.server'
 import { commitSession, getSession } from '~/utils/session.server'
 import { emailSchema, usernameSchema } from '~/utils/user-validation'
@@ -109,14 +105,9 @@ async function sendPasswordResetEmail({
 	})
 }
 
-export const meta: V2_MetaFunction = ({ matches }) => {
-	let rootModule = matches.find(match => match.route.id === 'root')
-
-	return [
-		...(rootModule?.meta ?? [])?.filter(meta => !('title' in meta)),
-		{ title: 'Password Recovery for Rocket Rental' },
-	]
-}
+export const meta = mergeMeta(() => {
+	return [{ title: 'Password Recovery for Rocket Rental' }]
+})
 
 export default function SignupRoute() {
 	const data = useLoaderData<typeof loader>()

exercises/02.routing/02.solution.links/app/utils/misc.ts

@@ -1,4 +1,9 @@
-import { type SerializeFrom } from '@remix-run/node'
+import {
+	type LoaderFunction,
+	type V2_HtmlMetaDescriptor,
+	type V2_MetaFunction,
+	type SerializeFrom,
+} from '@remix-run/node'
 import { useRouteLoaderData } from '@remix-run/react'
 import { type loader as rootLoader } from '~/root'
 
@@ -81,3 +86,43 @@ export function getErrorMessage(error: unknown) {
 	console.error('Unable to get error message for error', error)
 	return 'Unknown Error'
 }
+
+export function mergeMeta<
+	Loader extends unknown = unknown,
+	ParentsLoaders extends Record<string, LoaderFunction> = {},
+>(
+	overrideFn: V2_MetaFunction<Loader, ParentsLoaders>,
+	appendFn?: V2_MetaFunction<Loader, ParentsLoaders>,
+): V2_MetaFunction<Loader, ParentsLoaders> {
+	return arg => {
+		// get meta from parent routes
+		let mergedMeta = arg.matches.reduce((acc, match) => {
+			return acc.concat(match.meta || [])
+		}, [] as V2_HtmlMetaDescriptor[])
+
+		// replace any parent meta with the same name or property with the override
+		let overrides = overrideFn(arg)
+		for (let override of overrides) {
+			let index = mergedMeta.findIndex(
+				meta =>
+					('name' in meta &&
+						'name' in override &&
+						meta.name === override.name) ||
+					('property' in meta &&
+						'property' in override &&
+						meta.property === override.property) ||
+					('title' in meta && 'title' in override),
+			)
+			if (index !== -1) {
+				mergedMeta.splice(index, 1, override)
+			}
+		}
+
+		// append any additional meta
+		if (appendFn) {
+			mergedMeta = mergedMeta.concat(appendFn(arg))
+		}
+
+		return mergedMeta
+	}
+}

exercises/02.routing/03.solution.params/app/routes/forgot-password.tsx

@@ -1,9 +1,4 @@
-import {
-	json,
-	redirect,
-	type DataFunctionArgs,
-	type V2_MetaFunction,
-} from '@remix-run/node'
+import { json, redirect, type DataFunctionArgs } from '@remix-run/node'
 import { Link, useFetcher, useLoaderData } from '@remix-run/react'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '~/components/error-boundary'
@@ -17,6 +12,7 @@ import {
 	preprocessFormData,
 	useForm,
 } from '~/utils/forms'
+import { mergeMeta } from '~/utils/misc'
 import { getDomainUrl } from '~/utils/misc.server'
 import { commitSession, getSession } from '~/utils/session.server'
 import { emailSchema, usernameSchema } from '~/utils/user-validation'
@@ -109,14 +105,9 @@ async function sendPasswordResetEmail({
 	})
 }
 
-export const meta: V2_MetaFunction = ({ matches }) => {
-	let rootModule = matches.find(match => match.route.id === 'root')
-
-	return [
-		...(rootModule?.meta ?? [])?.filter(meta => !('title' in meta)),
-		{ title: 'Password Recovery for Rocket Rental' },
-	]
-}
+export const meta = mergeMeta(() => {
+	return [{ title: 'Password Recovery for Rocket Rental' }]
+})
 
 export default function SignupRoute() {
 	const data = useLoaderData<typeof loader>()

exercises/02.routing/03.solution.params/app/utils/misc.ts

@@ -1,4 +1,9 @@
-import { type SerializeFrom } from '@remix-run/node'
+import {
+	type LoaderFunction,
+	type V2_HtmlMetaDescriptor,
+	type V2_MetaFunction,
+	type SerializeFrom,
+} from '@remix-run/node'
 import { useRouteLoaderData } from '@remix-run/react'
 import { type loader as rootLoader } from '~/root'
 
@@ -81,3 +86,43 @@ export function getErrorMessage(error: unknown) {
 	console.error('Unable to get error message for error', error)
 	return 'Unknown Error'
 }
+
+export function mergeMeta<
+	Loader extends unknown = unknown,
+	ParentsLoaders extends Record<string, LoaderFunction> = {},
+>(
+	overrideFn: V2_MetaFunction<Loader, ParentsLoaders>,
+	appendFn?: V2_MetaFunction<Loader, ParentsLoaders>,
+): V2_MetaFunction<Loader, ParentsLoaders> {
+	return arg => {
+		// get meta from parent routes
+		let mergedMeta = arg.matches.reduce((acc, match) => {
+			return acc.concat(match.meta || [])
+		}, [] as V2_HtmlMetaDescriptor[])
+
+		// replace any parent meta with the same name or property with the override
+		let overrides = overrideFn(arg)
+		for (let override of overrides) {
+			let index = mergedMeta.findIndex(
+				meta =>
+					('name' in meta &&
+						'name' in override &&
+						meta.name === override.name) ||
+					('property' in meta &&
+						'property' in override &&
+						meta.property === override.property) ||
+					('title' in meta && 'title' in override),
+			)
+			if (index !== -1) {
+				mergedMeta.splice(index, 1, override)
+			}
+		}
+
+		// append any additional meta
+		if (appendFn) {
+			mergedMeta = mergedMeta.concat(appendFn(arg))
+		}
+
+		return mergedMeta
+	}
+}