Skip to content

Commit c801962

Browse files
bradwestfallbradwestfall
committed
adding Layouts to remix
1 parent 00178d0 commit c801962

File tree

4 files changed

+61
-65
lines changed

4 files changed

+61
-65
lines changed

‎remix/app/root.tsx

Lines changed: 33 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import {
55
Outlet,
66
Scripts,
77
ScrollRestoration,
8-
useLoaderData,
98
isRouteErrorResponse,
109
useRouteError,
10+
useRouteLoaderData,
1111
} from '@remix-run/react'
1212
import { LinksFunction, LoaderFunctionArgs, json } from '@remix-run/node'
1313
import { MainLayout } from '~/components/MainLayout'
@@ -28,48 +28,12 @@ export async function loader({ request }: LoaderFunctionArgs) {
2828
}
2929

3030
export default function App() {
31-
const { sessionUser, cart } = useLoaderData<typeof loader>()
32-
33-
return (
34-
<Document>
35-
<AuthProvider user={sessionUser}>
36-
<CartProvider cart={cart || []}>
37-
<MainLayout>
38-
<Outlet />
39-
</MainLayout>
40-
</CartProvider>
41-
</AuthProvider>
42-
</Document>
43-
)
31+
return <Outlet />
4432
}
4533

46-
export function ErrorBoundary() {
47-
const error = useRouteError()
48-
49-
let heading = 'Unknown Error'
50-
let message = ''
51-
52-
if (isRouteErrorResponse(error)) {
53-
heading = error.status + ' ' + error.statusText
54-
message = error.data
55-
} else if (error instanceof Error) {
56-
heading = 'Page Error'
57-
message = error.message
58-
}
59-
60-
return (
61-
<Document>
62-
<CenterContent className="pt-6 pb-20">
63-
<div className="bg-white p-6 rounded-md space-y-6">
64-
<Heading size={1}>{heading}</Heading>
65-
<p>{message}</p>
66-
</div>
67-
</CenterContent>
68-
</Document>
69-
)
70-
}
34+
export function Layout({ children }: PropsWithChildren) {
35+
const { sessionUser, cart } = useRouteLoaderData<typeof loader>('root')!
7136

72-
export function Document({ children }: PropsWithChildren) {
7337
return (
7438
<html lang="en">
7539
<head>
@@ -84,11 +48,39 @@ export function Document({ children }: PropsWithChildren) {
8448
/>
8549
</head>
8650
<body>
87-
{children}
51+
<AuthProvider user={sessionUser}>
52+
<CartProvider cart={cart || []}>
53+
<MainLayout>{children}</MainLayout>
54+
</CartProvider>
55+
</AuthProvider>
8856
<ScrollRestoration />
8957
<Scripts />
9058
<LiveReload />
9159
</body>
9260
</html>
9361
)
9462
}
63+
64+
export function ErrorBoundary() {
65+
const error = useRouteError()
66+
67+
let heading = 'Unknown Error'
68+
let message = ''
69+
70+
if (isRouteErrorResponse(error)) {
71+
heading = error.status + ' ' + error.statusText
72+
message = error.data
73+
} else if (error instanceof Error) {
74+
heading = 'Page Error'
75+
message = error.message
76+
}
77+
78+
return (
79+
<CenterContent className="pt-6 pb-20">
80+
<div className="bg-white p-6 rounded-md space-y-6">
81+
<Heading size={1}>{heading}</Heading>
82+
<p>{message}</p>
83+
</div>
84+
</CenterContent>
85+
)
86+
}

‎remix/lessons/04-responses-and-errors/lecture/root-final.tsx

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
isRouteErrorResponse,
1010
useLoaderData,
1111
useRouteError,
12+
useRouteLoaderData,
1213
} from '@remix-run/react'
1314
import { type LinksFunction, json } from '@remix-run/node'
1415
import stylesheet from '~/styles/app.css'
@@ -25,17 +26,7 @@ export async function loader() {
2526
}
2627

2728
export default function App() {
28-
const { lesson } = useLoaderData<typeof loader>()
29-
30-
return (
31-
<Document>
32-
<LessonProvider selectedLesson={lesson}>
33-
<MainLayout>
34-
<Outlet />
35-
</MainLayout>
36-
</LessonProvider>
37-
</Document>
38-
)
29+
return <Outlet />
3930
}
4031

4132
export function ErrorBoundary() {
@@ -53,18 +44,20 @@ export function ErrorBoundary() {
5344
}
5445

5546
return (
56-
<Document>
57-
<CenterContent className="pt-6 pb-20">
58-
<div className="bg-white p-6 rounded-md space-y-6">
59-
<Heading size={1}>{heading}</Heading>
60-
<p>{message}</p>
61-
</div>
62-
</CenterContent>
63-
</Document>
47+
<CenterContent className="pt-6 pb-20">
48+
<div className="bg-white p-6 rounded-md space-y-6">
49+
<Heading size={1}>{heading}</Heading>
50+
<p>{message}</p>
51+
</div>
52+
</CenterContent>
6453
)
6554
}
6655

67-
export function Document({ children }: PropsWithChildren) {
56+
// https://remix.run/docs/en/main/file-conventions/root#layout-export
57+
58+
export function Layout({ children }: PropsWithChildren) {
59+
const { lesson } = useRouteLoaderData<typeof loader>('root')!
60+
6861
return (
6962
<html lang="en">
7063
<head>
@@ -79,7 +72,9 @@ export function Document({ children }: PropsWithChildren) {
7972
/>
8073
</head>
8174
<body>
82-
{children}
75+
<LessonProvider selectedLesson={lesson}>
76+
<MainLayout>{children}</MainLayout>
77+
</LessonProvider>
8378
<ScrollRestoration />
8479
<Scripts />
8580
<LiveReload />

‎remix/lessons/04-responses-and-errors/lecture/root.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
ScrollRestoration,
99
isRouteErrorResponse,
1010
useLoaderData,
11+
useRouteLoaderData,
1112
useRouteError,
1213
} from '@remix-run/react'
1314
import { type LinksFunction, json } from '@remix-run/node'
@@ -53,6 +54,10 @@ export default function App() {
5354
)
5455
}
5556

57+
// export function Layout({ children }: PropsWithChildren) {
58+
// // useRouteLoaderData('root')!
59+
// }
60+
5661
export function ErrorBoundary() {
5762
const error = useRouteError()
5863

@@ -76,6 +81,3 @@ export function ErrorBoundary() {
7681
</CenterContent>
7782
)
7883
}
79-
80-
// export function Document({ children }: PropsWithChildren) {
81-
// }

‎remix/lessons/04-responses-and-errors/lecture/routes/_products-layout.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
1313
getCategories(),
1414
])
1515

16+
// throw new Response('Bad Request')
17+
1618
return json({
1719
products,
1820
brands: brands.sort(sortLabel),
@@ -36,3 +38,8 @@ export default function Products() {
3638
</div>
3739
)
3840
}
41+
42+
// export function ErrorBoundary() {
43+
// // const error = useRouteError()
44+
// // isRouteErrorResponse(error)
45+
// }

0 commit comments

Comments
 (0)