adding remix exercise guides

bradwestfall · bradwestfall · commit f7ed73c821d1 · 2023-05-06T16:03:13.000-04:00
diff --git a/remix/lessons/01-routes-and-layouts/exercise/GUIDE.md b/remix/lessons/01-routes-and-layouts/exercise/GUIDE.md
@@ -0,0 +1,46 @@
+# Routes And Layouts
+
+The goal of this exercise is to make files for these routes:
+
+```js
+// URL                               LAYOUTS         CONTENT
+// localhost:3000                    DefaultLayout   "Home Page"
+// localhost:3000/contact            DefaultLayout   "Contact"
+// localhost:3000/auth/login         AuthLayout      "Login"
+// localhost:3000/auth/register      AuthLayout      "Register"
+// localhost:3000/products           ProductsLayout  "Browse Products"
+// localhost:3000/products/1         ProductsLayout  "Product Profile: 1"
+// localhost:3000/products/special   ProductsLayout  "Special Product Profile"
+```
+
+## Task 1
+
+We have already provided three "layout" components for you in `templates.tsx`. They are color coded so each type of layout looks different. They are Gray, Green, and Blue. Each component needs to be converted to its own file in accordance with the URL scheme above. For example, if you visit `/products`, you should see a page loaded into the `ProductsLayout` and the page should say `<h1>Browse Products</h1>`. Then you can see there are two other pages that also use that same layout for when you visit `/products/1` and `products/special`. This all means you'll need for files, one for the layout and three for the pages.
+
+By the time you're done, you should have removed the original `_index.tsx` and `templates.tsx` files as they do not conform to the URL scheme, they're just to get you started.
+
+Here's an example "Page" component. This is about what you'll need for most pages
+
+```tsx
+// You could name it Page or any name you like
+export default function Page() {
+  return (
+    <div>
+      <h1>Browse Products</h1>
+    </div>
+  )
+}
+
+// Or you could make it an anonymous function
+export default function () {
+  return (
+    <div>
+      <h1>Browse Products</h1>
+    </div>
+  )
+}
+```
+
+## Final
+
+Remember, for this and all exercises, there's a `final` version for you to review if you need to with all the answers. In this case, the final is in `exercise-final`
diff --git a/remix/lessons/01-routes-and-layouts/exercise/routes/templates.tsx b/remix/lessons/01-routes-and-layouts/exercise/routes/templates.tsx
@@ -1,13 +1,5 @@
 import { Outlet } from '@remix-run/react'
 
-// localhost:3000                    DefaultLayout   "Home Page"
-// localhost:3000/contact            DefaultLayout   "Contact"
-// localhost:3000/auth/login         AuthLayout      "Login"
-// localhost:3000/auth/register      AuthLayout      "Register"
-// localhost:3000/products           ProductsLayout  "Browse Products"
-// localhost:3000/products/1         ProductsLayout  "Product Profile: 1"
-// localhost:3000/products/special   ProductsLayout  "Special Product Profile"
-
 // Gray
 function DefaultLayout() {
   return (
diff --git a/remix/lessons/02-loaders/exercise/GUIDE.md b/remix/lessons/02-loaders/exercise/GUIDE.md
@@ -0,0 +1,25 @@
+# Loaders
+
+The goal of this exercise is to write loaders for products
+
+## Task 1
+
+The current setup has a loader in every file. But if you notice, the pages each try to do `getProducts()` on their own and this could be done in the layout instead. The layout already fetches brands so you'll need to run the promise for `getBrands()` and `getProducts` in parallel and return both results
+
+## Task 2
+
+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.
+
+1. Make a context variable and pass it into the outlet: `<Outlet context={context} />`
+2. Outlets are technically "Context Providers" so you don't need to make your own context the way we would have done for a traditional React SPA.
+3. Get the context value in the page component with `useOutletContext()`
+
+You might see some typescript errors because `useOutletContext()` has no clue what it's receiving. If the code is accurate, it should still work, or you can do `useOutletContext<any>()` to tell TS not to complain.
+
+## Task 3
+
+Context is the only way to "pass" data from a layout to a page, but technically we don't need to do that at all. The loader data from the layout is also available to all the sub pages or layouts so you could just call useRouteLoaderData('route/your-path') in the page instead of `useOutletContext()`.
+
+Switch away from context to `useRouteLoaderData(path)`
+
+Docs: https://remix.run/docs/en/main/hooks/use-route-loader-data
diff --git a/remix/lessons/02-loaders/exercise/routes/_products-layout.tsx b/remix/lessons/02-loaders/exercise/routes/_products-layout.tsx
@@ -7,13 +7,13 @@ import { UnpackLoader } from '~/utils/helpers'
 
 export const loader = async ({ request }: LoaderArgs) => {
   const brands = await getBrands()
-  return json({ brands })
+  return json(brands)
 }
 
 export type LoaderData = UnpackLoader<typeof loader>
 
 export default function () {
-  const { brands } = useLoaderData<LoaderData>()
+  const brands = useLoaderData<LoaderData>()
 
   return (
     <div className="flex gap-6">
diff --git a/remix/lessons/03-url-state/exercise-final/components/MainLayout.tsx b/remix/lessons/03-url-state/exercise-final/components/MainLayout.tsx
@@ -0,0 +1,59 @@
+import { NavLink } from '@remix-run/react'
+import { SelectedLesson } from '~/components/LessonContext'
+import { Logo } from '~/components/Logo'
+
+type MainLayoutProps = {
+  children: React.ReactNode
+}
+
+export function MainLayout({ children }: MainLayoutProps) {
+  return (
+    <div>
+      <Header />
+      <SubHeader />
+      <CenterContent className="pt-6 pb-20">{children}</CenterContent>
+    </div>
+  )
+}
+
+function Header() {
+  return (
+    <header className="d bg-gradient-to-r from-sky-400 to-indigo-950">
+      <CenterContent className="border-b py-3">
+        <div className="flex justify-between items-center">
+          <div className="">
+            <Logo />
+          </div>
+          <div className="text-white/60">
+            <SelectedLesson />
+          </div>
+        </div>
+      </CenterContent>
+    </header>
+  )
+}
+
+function SubHeader() {
+  return (
+    <CenterContent className="bg-white border-b">
+      <nav className="primary-nav">
+        <NavLink className="inline-block py-3 px-5 -mb-[1px] border-b-2" to="/">
+          Home
+        </NavLink>
+      </nav>
+    </CenterContent>
+  )
+}
+
+type CenterContentProps = {
+  className?: string
+  children: React.ReactNode
+}
+
+export function CenterContent({ children, className }: CenterContentProps) {
+  return (
+    <div className={className}>
+      <div className="ml-auto mr-auto max-w-[1200px] pl-3 pr-3">{children}</div>
+    </div>
+  )
+}
diff --git a/remix/lessons/03-url-state/exercise-final/root.tsx b/remix/lessons/03-url-state/exercise-final/root.tsx
@@ -0,0 +1,50 @@
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useLoaderData,
+} from '@remix-run/react'
+import { type LinksFunction, json } from '@remix-run/node'
+import stylesheet from '~/styles/app.css'
+import { MainLayout } from './components/MainLayout'
+import { LessonProvider } from '~/components/LessonContext'
+
+export const links: LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }]
+
+export async function loader() {
+  const lesson = process.env.REMIX_APP_DIR?.split('/').slice(-2).join('/') || ''
+  return json({ lesson })
+}
+
+export default function App() {
+  const { lesson } = useLoaderData<typeof loader>()
+
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          href="https://fonts.googleapis.com/css2?&family=Inter:wght@400;700&display=swap"
+          rel="stylesheet"
+        />
+      </head>
+      <body>
+        <LessonProvider selectedLesson={lesson}>
+          <MainLayout>
+            <Outlet />
+          </MainLayout>
+        </LessonProvider>
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  )
+}
diff --git a/remix/lessons/03-url-state/exercise-final/routes/_products-layout._index.tsx b/remix/lessons/03-url-state/exercise-final/routes/_products-layout._index.tsx
@@ -0,0 +1,49 @@
+import { useOutletContext } from '@remix-run/react'
+import { type ProductType } from '~/utils/db.server'
+import { type CartItemType } from '~/utils/cart.server'
+import { Tiles } from '~/components/Tiles'
+import { Icon } from '~/components/Icon'
+
+type OutletContext = {
+  products: ProductType[]
+  cart: CartItemType[]
+}
+
+export default function () {
+  const { products } = useOutletContext<OutletContext>()
+
+  return (
+    <Tiles>
+      {products.map((product) => {
+        return (
+          <div
+            key={product.id}
+            className="p-3 rounded-lg bg-white shadow-sm overflow-hidden flex flex-col"
+          >
+            <img
+              src={`/images/products/${product.image}`}
+              alt={product.name}
+              className="block object-contain h-52"
+            />
+            <div className="space-y-3 mt-3 border-t">
+              <div className="mt-3 flex justify-between items-center">
+                <div className="">{product.name}</div>
+                <b className="block">${product.price}</b>
+              </div>
+              <div className="flex gap-2">
+                <div className="flex-1">
+                  <button className="button button-outline whitespace-nowrap" type="submit">
+                    <Icon name="cart" />
+                  </button>
+                </div>
+                <div className="w-full flex flex-col">
+                  <button className="button">View</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        )
+      })}
+    </Tiles>
+  )
+}
diff --git a/remix/lessons/03-url-state/exercise-final/routes/_products-layout.tsx b/remix/lessons/03-url-state/exercise-final/routes/_products-layout.tsx
@@ -0,0 +1,79 @@
+import { useId, useMemo } from 'react'
+import { json } from '@remix-run/node'
+import { Link, Outlet, useLoaderData, useLocation, useSearchParams } from '@remix-run/react'
+import { Heading } from '~/components/Heading'
+import { getBrands, getProducts } from '~/utils/db.server'
+import { sortLabel } from '~/utils/helpers'
+import { Icon } from '~/components/Icon'
+import type { LoaderArgs } from '@remix-run/node'
+
+export const loader = async ({ request }: LoaderArgs) => {
+  const searchParams = new URL(request.url).searchParams
+  const [products, brands] = await Promise.all([getProducts(searchParams), getBrands()])
+
+  return json({
+    products,
+    brands: brands.sort(sortLabel),
+  })
+}
+
+export default function () {
+  const { products, brands } = useLoaderData<typeof loader>()
+  const context = useMemo(() => ({ products }), [products])
+
+  return (
+    <div className="flex gap-6">
+      <aside className="w-72 p-6 rounded-lg bg-white shadow-sm space-y-6">
+        <section className="space-y-1">
+          <Heading as="h2" size={4}>
+            Filter By Brand
+          </Heading>
+          {brands.map((brand) => {
+            return (
+              <FilterLink key={brand.id} value={brand.handle}>
+                {brand.label}
+              </FilterLink>
+            )
+          })}
+        </section>
+      </aside>
+      <main className="flex-1 space-y-3">
+        <Outlet context={context} />
+      </main>
+    </div>
+  )
+}
+
+function FilterLink({ children, value }: { children: React.ReactNode; value: string }) {
+  const id = useId()
+  const url = useLocation().pathname
+
+  // The current URL
+  const [search] = useSearchParams()
+  const urlValue = search.get('brand')?.toLowerCase().split(',')
+  const on = Array.isArray(urlValue) && urlValue.includes(value.toLowerCase())
+
+  // The next URL
+  const nextSearch = new URLSearchParams(search.toString())
+  const valuesFiltered = Array.isArray(urlValue) ? urlValue.filter((v) => v && v !== value) : []
+
+  if (on) {
+    nextSearch.set('brand', valuesFiltered.join(','))
+  } else {
+    nextSearch.set('brand', valuesFiltered.concat(value).join(','))
+  }
+
+  const to = `${url}?${nextSearch.toString()}`
+
+  return (
+    <Link to={to} className="block">
+      <input id={id} type="checkbox" className="hidden" />
+      <span className="text-brandColor mr-2">
+        {on ? <Icon name="checkboxOn" /> : <Icon name="checkboxOff" />}
+      </span>
+      <label htmlFor={id} className="cursor-pointer">
+        {children}
+      </label>
+    </Link>
+  )
+}
diff --git a/remix/lessons/03-url-state/exercise/GUIDE.md b/remix/lessons/03-url-state/exercise/GUIDE.md
@@ -1,13 +1,34 @@
-https://medium.com/swlh/urlsearchparams-in-javascript-df524f705317
+# URL State
+
+The goal of this exercise is to practice using the URL for state. The URL is not only a legitimate place to keep state between the front-end and back-end, it's actually the original place for keeping state before Single Page Apps.
+
+# Task 1
+
+The only component you'll need to work on is inside of `_products-layout` called `FilterLink`. Right now, it works for clicking on filters in the UI and toggling the URL so only one brand can be filtered at one time. We want you to re-write the algorithm in `FilterLink` so if the user clicks two checkboxes, we'll have two brands in the filter like this:
+
+localhost:3000/products?brand=apple%20google
+
+Keep in mind that %20 is a URL-encoded comma. When you set the value in your code, you'll set it as `apple,google` and the URLSearchParams class will take care of the encoding for you. When you read the value from the URL, they'll take care of the decoding for you and you'll receive `apple,google`.
+
+1. When a user clicks Apple, the URL should change to `?brand=apple`
+2. When the user then clicks Google, the URL should change to `?brand=apple%20google`
+3. When the user then clicks Apple again, it will toggle off in the URL and the URL will be `?brand=google`
+
+Tread this algorithm as if you're just working on an array and taking items in and out of an array.
 
 ```js
-// Three ways to get the search params object
-const url = new URL('https://example.com?a=b')
-const search = url.searchParams
+// Here are some basic JavaScript functions we used in the solution that you might need:
+myString.split(',') // Turn a string into an array, split by commas
+myString.toLowerCase() // Lower-cases a string
+myArray.join(',') // Turn an array into a string, joined by commas
+Array.isArray(myArray) // Returns true if the array is an array
+myArray.filter(fn) // Returns a new array based on the filter function. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
+myArray.concat(newValue) // Similar to push but this returns a new array with the value added
 
+// URLSearchParams is a web standard to do CRUD operations on the URL search params
 const search = new URLSearchParams('https://example.com?a=b')
 
-// Hooks way
+// search is an instance of `new URLSearchParams`
 const [search] = useSearchParams()
 
 // Getters and setters
@@ -16,4 +37,10 @@ const brand = search.get('brand')
 
 // Delete
 search.delete('brand')
+
+// Serialize the search object into a string
+search.toString()
 ```
+
+Additional Help:
+https://medium.com/swlh/urlsearchparams-in-javascript-df524f705317
diff --git a/remix/lessons/03-url-state/exercise/routes/_products-layout.tsx b/remix/lessons/03-url-state/exercise/routes/_products-layout.tsx
diff --git a/remix/lessons/03-url-state/lecture/NOTES.md b/remix/lessons/03-url-state/lecture/NOTES.md
