small fixes

Author: bradwestfall

Diff for: react/advanced-hooks/03-transitions/practice/App.tsx

@@ -1,4 +1,4 @@
-import { useState, useTransition, useDeferredValue } from 'react'
+import { useState, useTransition } from 'react'
 
 export function App() {
   const [tabIndex, setTabIndex] = useState(0)

Diff for: react/advanced-hooks/03-transitions/practice/GUIDE.md

@@ -2,30 +2,6 @@
 
 This practice has three tabs where the rendering of the second tab is significantly slower than the others. If you click on the second tab and then immediately click to one the fast tabs you'll have to wait until the slow tab finishes first before you'll see your second clicked tab show.
 
-Decide if `useTransition` or `useDeferredValue` is better suited to make this UI faster
-
-Here is the syntax for each:
-
-```js
-/****************************************
-  useTransition
-*****************************************/
-const [pending, startTransition] = useTransition()
-
-function someEvent() {
-  setState() // high priority
-  startTransition(() => {
-    setState() // low priority
-  })
-}
-
-/****************************************
-  useDeferredValue
-*****************************************/
-const [myState, setMyState] = useState()
-const myStateDeferred = useDeferredValue(myState)
-```
-
 ## Task 1
 
 Make the UI faster by allowing the user to click on the slow tab then immediately click on a fast tab. Clicking the fast tab should show the fast tab soon instead of waiting for the slow tab to finish.

Diff for: react/advanced-hooks/04-optimistic-ui/lecture/App.tsx

@@ -1,52 +1,17 @@
 import { useOptimistic, useState, useTransition } from 'react'
 import { type ResponseData, updateDatabase } from './helpers/mockServer'
 
-// export function App() {
-//   const [error, setError] = useState('')
-//   const [likes, setLikes] = useState(0)
-
-//   async function submit(e: React.FormEvent) {
-//     e.preventDefault()
-
-//     const data = (await updateDatabase(likes + 1).then((r) => r.json())) as ResponseData
-
-//     if (!data.error) {
-//       console.log(data.likes)
-//       setLikes(data.likes)
-//     } else {
-//       setLikes(data.likes)
-//       setError(data.error)
-//     }
-//   }
+// Remember that useOptimistic will not work with <form onSubmit />, and requires
+// <form action />
 
-//   return (
-//     <form onSubmit={submit} className="space-y-6">
-//       <div>
-//         <button type="submit" className="button text-xl">
-//           Like My Post: {likes}
-//         </button>
-//       </div>
-//       {error && <div className="text-red-800">{error}</div>}
-//     </form>
-//   )
-// }
-
-// // Step Two: home-made optimistic UI with transitions
 export function App() {
   const [error, setError] = useState('')
   const [likes, setLikes] = useState(0)
 
-  const [opLikes, setOpLikes] = useState(0)
-  const [pending, startTransition] = useTransition()
-
   async function submit(e: React.FormEvent) {
     e.preventDefault()
 
-    startTransition(() => {
-      setOpLikes(opLikes + 1)
-    })
-
-    const data = (await updateDatabase(opLikes + 1).then((r) => r.json())) as ResponseData
+    const data = (await updateDatabase(likes + 1).then((r) => r.json())) as ResponseData
 
     if (!data.error) {
       console.log(data.likes)
@@ -61,10 +26,48 @@ export function App() {
     <form onSubmit={submit} className="space-y-6">
       <div>
         <button type="submit" className="button text-xl">
-          Like My Post: {opLikes}
+          Like My Post: {likes}
         </button>
       </div>
       {error && <div className="text-red-800">{error}</div>}
     </form>
   )
 }
+
+// // Step Two: home-made optimistic UI with transitions
+// export function App() {
+//   const [error, setError] = useState('')
+//   const [likes, setLikes] = useState(0)
+
+//   const [opLikes, setOpLikes] = useState(0)
+//   const [pending, startTransition] = useTransition()
+
+//   async function submit(e: React.FormEvent) {
+//     e.preventDefault()
+
+//     startTransition(() => {
+//       setOpLikes(opLikes + 1)
+//     })
+
+//     const data = (await updateDatabase(opLikes + 1).then((r) => r.json())) as ResponseData
+
+//     if (!data.error) {
+//       console.log(data.likes)
+//       setLikes(data.likes)
+//     } else {
+//       setLikes(data.likes)
+//       setError(data.error)
+//     }
+//   }
+
+//   return (
+//     <form onSubmit={submit} className="space-y-6">
+//       <div>
+//         <button type="submit" className="button text-xl">
+//           Like My Post: {opLikes}
+//         </button>
+//       </div>
+//       {error && <div className="text-red-800">{error}</div>}
+//     </form>
+//   )
+// }

Diff for: react/advanced-hooks/05-form-actions/lecture/App.tsx

@@ -300,7 +300,7 @@ function Pending({ children }: { children: React.ReactNode }) {
 // }
 
 /**
- * Example 5: When to NOT use useActionState: rapid-fire submissions submissions
+ * Example 5: When to NOT use useActionState: rapid-fire repeat submissions
  */
 
 // START --------------------> Resolve

Diff for: remix/lessons/01-routes-and-layouts/practice-final/root.tsx

@@ -23,6 +23,7 @@ export default function App() {
         <MainLayout>
           <Outlet />
         </MainLayout>
+
         <ScrollRestoration />
         <Scripts />
         <LiveReload />

Diff for: remix/lessons/01-routes-and-layouts/practice-final/routes/auth.tsx

@@ -1,5 +1,14 @@
+import { redirect, type LoaderFunctionArgs } from '@remix-run/node'
 import { Outlet } from '@remix-run/react'
 
+export async function loader({ request }: LoaderFunctionArgs) {
+  if (request.url.replace(/\/$/, '').endsWith('auth')) {
+    return redirect('/auth/login')
+  }
+
+  return null
+}
+
 export default function Page() {
   return (
     <div className="p-3 bg-green-300 border rounded space-y-3">