Skip to content

Commit 67801ec

Browse files
bradwestfallbradwestfall
committed
update remix to new v3 flags
1 parent 8543d84 commit 67801ec

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+135
-163
lines changed

‎remix/REMOVEremix.config.js

-18
This file was deleted.

‎remix/app/routes/_products-layout.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { json } from '@remix-run/node'
21
import { Outlet, useLoaderData } from '@remix-run/react'
32
import { getBrands, getCategories, getProducts } from '~/utils/db.server'
43
import { sortLabel } from '~/utils/helpers'
@@ -19,11 +18,11 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
1918
getCategories(),
2019
])
2120

22-
return json({
21+
return {
2322
products,
2423
brands: brands.sort(sortLabel),
2524
categories: categories.sort(sortLabel),
26-
})
25+
}
2726
}
2827

2928
export default function () {

‎remix/app/routes/login.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useState } from 'react'
22
import * as z from 'zod'
3-
import { json } from '@remix-run/node'
3+
import { data } from '@remix-run/node'
44
import { Form, Link, useActionData } from '@remix-run/react'
55
import { createUserSession, verifyUser } from '~/utils/auth.server'
66
import { FieldWrap } from '~/components/FormFields'
@@ -21,11 +21,11 @@ export async function action({ request }: ActionFunctionArgs) {
2121
const formData = await request.formData()
2222
const formValues = Object.fromEntries(formData)
2323
const results = formSchema.safeParse(formValues)
24-
if (!results.success) return json({ error: 'Invalid Data' }, { status: 400 })
24+
if (!results.success) return data({ error: 'Invalid Data' }, { status: 400 })
2525

2626
const { username, password } = results.data
2727
const userId = await verifyUser(username, password)
28-
if (!userId) return json({ error: 'User not found' }, { status: 400 })
28+
if (!userId) return data({ error: 'User not found' }, { status: 400 })
2929

3030
return createUserSession(userId, '/')
3131
}

‎remix/app/routes/register.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useState } from 'react'
22
import * as z from 'zod'
3-
import { json } from '@remix-run/node'
3+
import { data } from '@remix-run/node'
44
import { Form, useActionData, Link } from '@remix-run/react'
55
import { createUserSession, registerUser } from '~/utils/auth.server'
66
import { usernameExists } from '~/utils/db.server'
@@ -22,14 +22,14 @@ export async function action({ request }: ActionFunctionArgs) {
2222
const formData = await request.formData()
2323
const formValues = Object.fromEntries(formData)
2424
const results = formSchema.safeParse(formValues)
25-
if (!results.success) return json({ error: 'Invalid Data' }, { status: 400 })
25+
if (!results.success) return data({ error: 'Invalid Data' }, { status: 400 })
2626

2727
const { username, password } = results.data
2828
const userExists = await usernameExists(username)
29-
if (userExists) return json({ error: 'Username already registered' }, { status: 400 })
29+
if (userExists) return data({ error: 'Username already registered' }, { status: 400 })
3030

3131
const userId = await registerUser(username, password)
32-
if (!userId) return json({ error: 'We were not able to register this user' }, { status: 400 })
32+
if (!userId) return data({ error: 'We were not able to register this user' }, { status: 400 })
3333

3434
return createUserSession(userId, '/')
3535
}

‎remix/lessons/01-routes-and-layouts/lecture/root.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'
22
import { LinksFunction } from '@remix-run/node'
3-
import stylesheet from '~/styles/app.css'
3+
import stylesheet from '~/styles/app.css?url'
44

55
export const links: LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }]
66

‎remix/lessons/01-routes-and-layouts/practice-final/root.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'
22
import { LinksFunction } from '@remix-run/node'
3-
import stylesheet from '~/styles/app.css'
3+
import stylesheet from '~/styles/app.css?url'
44
import { MainLayout } from './components/MainLayout'
55

66
export const links: LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }]

‎remix/lessons/01-routes-and-layouts/practice/root.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'
22
import { LinksFunction } from '@remix-run/node'
3-
import stylesheet from '~/styles/app.css'
3+
import stylesheet from '~/styles/app.css?url'
44
import { MainLayout } from './components/MainLayout'
55

66
export const links: LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }]

‎remix/lessons/02-loaders/lecture/NOTES.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
```ts
99
// These are same
10-
return json({ user: 'brad' })
10+
return { user: 'brad' }
1111

1212
return new Response(JSON.stringify({ user: 'brad' }), {
1313
headers: {

‎remix/lessons/02-loaders/lecture/root.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from '@remix-run/react'
2-
import { type LinksFunction, json } from '@remix-run/node'
3-
import stylesheet from '~/styles/app.css'
2+
import { type LinksFunction } from '@remix-run/node'
3+
import stylesheet from '~/styles/app.css?url'
44
import { MainLayout } from './components/MainLayout'
55
import { LessonProvider } from '~/state/LessonContext'
66

77
export const links: LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }]
88

99
export async function loader() {
1010
const lesson = process.env.REMIX_APP_DIR?.split('/').slice(-2).join('/') || ''
11-
return json({ lesson })
11+
return { lesson }
1212
}
1313

1414
export default function App() {

‎remix/lessons/02-loaders/lecture/routes/$productId.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { LoaderFunctionArgs, json } from '@remix-run/node'
1+
import { LoaderFunctionArgs } from '@remix-run/node'
22
import { useLoaderData } from '@remix-run/react'
33
import { ProductType } from '~/utils/db.server'
44

‎remix/lessons/02-loaders/lecture/routes/_index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { LoaderFunctionArgs, json } from '@remix-run/node'
1+
import { LoaderFunctionArgs } from '@remix-run/node'
22
import { Link, useLoaderData, useSearchParams } from '@remix-run/react'
33
import { useEffect, useState } from 'react'
44
import { Icon } from '~/components/Icon'

‎remix/lessons/02-loaders/lecture/routes/account.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { type LoaderFunctionArgs, json } from '@remix-run/node'
1+
import { type LoaderFunctionArgs } from '@remix-run/node'
22
import { Link, Outlet, useLoaderData } from '@remix-run/react'
33
import { requireSessionUser } from '../utils/auth.server'
44
import { getUserSettings } from '../utils/db.server'
@@ -13,7 +13,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
1313
const user = await requireSessionUser(request)
1414
const settings = await getUserSettings(user.id)
1515

16-
return json({ user, settings })
16+
return { user, settings }
1717
}
1818

1919
export default function Account() {

‎remix/lessons/02-loaders/lecture/routes/final.$productId.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export async function loader({ params }: LoaderFunctionArgs) {
99
res.json()
1010
)) as ProductType
1111

12-
return json(product)
12+
return product
1313
}
1414

1515
export default function ProductProfile() {

‎remix/lessons/02-loaders/lecture/routes/final._index.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { json } from '@remix-run/node'
21
import { Link, useLoaderData, useSearchParams } from '@remix-run/react'
32
import { Icon } from '~/components/Icon'
43
import { Tiles } from '~/components/Tiles'
@@ -9,7 +8,7 @@ export async function loader() {
98
res.json()
109
)) as ProductType[]
1110

12-
return json({ products })
11+
return { products }
1312
}
1413

1514
export default function Index() {

‎remix/lessons/02-loaders/practice-final/root.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from '@remix-run/react'
2-
import { type LinksFunction, json } from '@remix-run/node'
3-
import stylesheet from '~/styles/app.css'
2+
import { type LinksFunction } from '@remix-run/node'
3+
import stylesheet from '~/styles/app.css?url'
44
import { MainLayout } from './components/MainLayout'
55
import { LessonProvider } from '~/state/LessonContext'
66

77
export const links: LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }]
88

99
export async function loader() {
1010
const lesson = process.env.REMIX_APP_DIR?.split('/').slice(-2).join('/') || ''
11-
return json({ lesson })
11+
return { lesson }
1212
}
1313

1414
export default function App() {

‎remix/lessons/02-loaders/practice-final/routes/_products-layout.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { json } from '@remix-run/node'
21
import { Link, Outlet, useLoaderData } from '@remix-run/react'
32
import { getBrands, getProducts } from '~/utils/db.server'
43
import { Heading } from '~/components/Heading'
@@ -7,10 +6,10 @@ export const loader = async () => {
76
// Solution for task 1
87
const [products, brands] = await Promise.all([getProducts(), getBrands()])
98

10-
return json({
9+
return {
1110
products,
1211
brands,
13-
})
12+
}
1413
}
1514

1615
export type LoaderData = typeof loader

‎remix/lessons/02-loaders/practice/GUIDE.md

-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,6 @@ The layout already fetches brands so you'll need to run the promise for `getBran
1212
const [a, b] = await Promise.all([getA(), getB()])
1313
```
1414

15-
You'll also need to modify how `json()` returns data because you'll want to return brands and products now
16-
1715
## Task 2
1816

1917
When the layout component is successfully receiving `brands` and `products` from `useLoaderData()`, you'll need to figure out a way to pass this data down into the page. Keep in mind that the `<Outlet />` is not an alias for your page such that you can just pass props into it and these props will end up being props in your component. If you need to pass data from a layout into the page that the Outlet represents, you can do context.

‎remix/lessons/02-loaders/practice/root.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from '@remix-run/react'
2-
import { type LinksFunction, json } from '@remix-run/node'
3-
import stylesheet from '~/styles/app.css'
2+
import { type LinksFunction } from '@remix-run/node'
3+
import stylesheet from '~/styles/app.css?url'
44
import { MainLayout } from './components/MainLayout'
55
import { LessonProvider } from '~/state/LessonContext'
66

77
export const links: LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }]
88

99
export async function loader() {
1010
const lesson = process.env.REMIX_APP_DIR?.split('/').slice(-2).join('/') || ''
11-
return json({ lesson })
11+
return { lesson }
1212
}
1313

1414
export default function App() {

‎remix/lessons/02-loaders/practice/routes/_products-layout._index.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import { useLoaderData, useOutletContext } from '@remix-run/react'
2-
import { json } from '@remix-run/node'
32
import { getProducts, type ProductType } from '~/utils/db.server'
43
import { Tiles } from '~/components/Tiles'
54
import { Icon } from '~/components/Icon'
65

76
export const loader = async () => {
87
const products = await getProducts()
9-
return json(products)
8+
return products
109
}
1110

1211
export default function ProductsIndex() {

‎remix/lessons/02-loaders/practice/routes/_products-layout.products.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import { useLoaderData, useOutletContext } from '@remix-run/react'
2-
import { json } from '@remix-run/node'
32
import { getProducts, type ProductType } from '~/utils/db.server'
43
import { Tiles } from '~/components/Tiles'
54
import { Icon } from '~/components/Icon'
65

76
export const loader = async () => {
87
const products = await getProducts()
9-
return json(products)
8+
return products
109
}
1110

1211
export default function ProductsPage() {

‎remix/lessons/02-loaders/practice/routes/_products-layout.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import { json } from '@remix-run/node'
21
import { Link, Outlet, useLoaderData } from '@remix-run/react'
32
import { getBrands } from '~/utils/db.server'
43
import { Heading } from '~/components/Heading'
54

65
export const loader = async () => {
76
const brands = await getBrands()
8-
return json(brands)
7+
return brands
98
}
109

1110
export default function Products() {

‎remix/lessons/03-url-state/lecture/root.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from '@remix-run/react'
2-
import { type LinksFunction, json } from '@remix-run/node'
3-
import stylesheet from '~/styles/app.css'
2+
import { type LinksFunction } from '@remix-run/node'
3+
import stylesheet from '~/styles/app.css?url'
44
import { MainLayout } from './components/MainLayout'
55
import { LessonProvider } from '~/state/LessonContext'
66

77
export const links: LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }]
88

99
export async function loader() {
1010
const lesson = process.env.REMIX_APP_DIR?.split('/').slice(-2).join('/') || ''
11-
return json({ lesson })
11+
return { lesson }
1212
}
1313

1414
export default function App() {

‎remix/lessons/03-url-state/lecture/routes/_products-layout.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useId } from 'react'
2-
import { json } from '@remix-run/node'
32
import { Link, Outlet, useLoaderData, useLocation, useSearchParams } from '@remix-run/react'
43
import { Heading } from '~/components/Heading'
54
import { getBrands, getProducts } from '~/utils/db.server'
@@ -10,10 +9,10 @@ import type { LoaderFunctionArgs } from '@remix-run/node'
109
export const loader = async ({ request }: LoaderFunctionArgs) => {
1110
const [products, brands] = await Promise.all([getProducts(), getBrands()])
1211

13-
return json({
12+
return {
1413
products,
1514
brands: brands.sort(sortLabel),
16-
})
15+
}
1716
}
1817

1918
export type LoaderData = typeof loader

‎remix/lessons/03-url-state/lecture/routes/final._products-layout.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useId } from 'react'
2-
import { json } from '@remix-run/node'
32
import { Link, Outlet, useLoaderData, useLocation, useSearchParams } from '@remix-run/react'
43
import { Heading } from '~/components/Heading'
54
import { getBrands, getProducts } from '~/utils/db.server'
@@ -11,10 +10,10 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
1110
const searchParams = new URL(request.url).searchParams
1211
const [products, brands] = await Promise.all([getProducts(searchParams), getBrands()])
1312

14-
return json({
13+
return {
1514
products,
1615
brands: brands.sort(sortLabel),
17-
})
16+
}
1817
}
1918

2019
export type LoaderData = typeof loader

‎remix/lessons/03-url-state/practice-final/root.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from '@remix-run/react'
2-
import { type LinksFunction, json } from '@remix-run/node'
3-
import stylesheet from '~/styles/app.css'
2+
import { type LinksFunction } from '@remix-run/node'
3+
import stylesheet from '~/styles/app.css?url'
44
import { MainLayout } from './components/MainLayout'
55
import { LessonProvider } from '~/state/LessonContext'
66

77
export const links: LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }]
88

99
export async function loader() {
1010
const lesson = process.env.REMIX_APP_DIR?.split('/').slice(-2).join('/') || ''
11-
return json({ lesson })
11+
return { lesson }
1212
}
1313

1414
export default function App() {

‎remix/lessons/03-url-state/practice-final/routes/_products-layout.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useId } from 'react'
2-
import { json } from '@remix-run/node'
32
import { Link, Outlet, useLoaderData, useLocation, useSearchParams } from '@remix-run/react'
43
import { Heading } from '~/components/Heading'
54
import { getBrands, getProducts } from '~/utils/db.server'
@@ -11,10 +10,10 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
1110
const searchParams = new URL(request.url).searchParams
1211
const [products, brands] = await Promise.all([getProducts(searchParams), getBrands()])
1312

14-
return json({
13+
return {
1514
products,
1615
brands: brands.sort(sortLabel),
17-
})
16+
}
1817
}
1918

2019
export type LoaderData = typeof loader

0 commit comments

Comments
 (0)