better starting

Author: bradwestfall

react/advanced-hooks/01-useEffect/01-lecture-deep-dive/App.tsx

@@ -0,0 +1,54 @@
+import {
+  Navigate,
+  Route,
+  RouterProvider,
+  createBrowserRouter,
+  createRoutesFromElements,
+} from 'react-router-dom'
+
+// Layouts
+import { MainLayout } from '~/MainLayout'
+import { VacationsSubLayout } from '~/VacationsSubLayout'
+import { AccountSubLayout } from '~/AccountSubLayout'
+
+// Pages
+import { BrowseVacationsPage, loader as browseVacationsLoader } from './BrowseVacationsPage'
+import { VacationDetailsPage } from './VacationDetailsPage'
+import { LoginPage } from '~/LoginPage'
+import { ErrorPage } from '~/ErrorPage'
+import { NotFoundPage } from '~/NotFoundPage'
+import { AccountHome } from '~/AccountHome'
+
+export const router = createBrowserRouter(
+  createRoutesFromElements(
+    <Route Component={MainLayout}>
+      <Route Component={VacationsSubLayout}>
+        <Route
+          index
+          Component={BrowseVacationsPage}
+          loader={browseVacationsLoader}
+          errorElement={<ErrorPage />}
+        />
+        <Route path="vacations">
+          <Route
+            path=":vacationId"
+            Component={VacationDetailsPage}
+            // loader={vacationDetailsLoader}
+            errorElement={<ErrorPage />}
+          />
+          <Route path="deal-of-the-day" element={<Navigate to="../3" />} />
+          <Route index element={<Navigate to="/" />} />
+        </Route>
+      </Route>
+      <Route path="login" Component={LoginPage} />
+      <Route path="account" Component={AccountSubLayout}>
+        <Route index Component={AccountHome} />
+      </Route>
+      <Route path="*" Component={NotFoundPage} />
+    </Route>
+  )
+)
+
+export function App() {
+  return <RouterProvider router={router} />
+}

react/advanced-hooks/01-useEffect/01-lecture-deep-dive/BrowseVacationsPage.tsx

@@ -0,0 +1,34 @@
+import { useLoaderData } from 'react-router-dom'
+import { Tiles } from '~/Tiles'
+import { api } from '~/utils/api'
+import { BrowseVacationsItem } from '~/BrowseVacationsItem'
+import { queryClient } from '~/utils/queryClient'
+
+export async function loader() {
+  const vacations = await queryClient.ensureQueryData({
+    queryKey: ['vacations'],
+    queryFn: () => api.vacations.getAll(),
+    staleTime: 1000 * 30,
+  })
+  return vacations
+}
+
+export function BrowseVacationsPage() {
+  const vacations = useLoaderData() as Awaited<ReturnType<typeof loader>>
+  return (
+    <div>
+      {!vacations && <div>Loading...</div>}
+      {vacations ? (
+        <Tiles minSize={15}>
+          {vacations.map((vacation) => {
+            return (
+              <div key={vacation.id} className="bg-white border">
+                <BrowseVacationsItem vacation={vacation} />
+              </div>
+            )
+          })}
+        </Tiles>
+      ) : null}
+    </div>
+  )
+}

react/advanced-hooks/01-useEffect/01-lecture-deep-dive/NOTES.md

@@ -1,3 +1,11 @@
+1. Teach useEffect
+2. Refactor to React Router loaders
+3. Remember to throw for 404
+
+```js
+if (!vacation) throw new Response('Not Found', { status: 404 })
+```
+
 - https://reacttraining.com/blog/useEffect-is-not-the-new-componentDidMount/
 - https://reacttraining.com/blog/when-to-use-functions-in-hooks-dependency-array/
 - https://reacttraining.com/blog/setting-state-on-unmounted-component

react/advanced-hooks/01-useEffect/01-lecture-deep-dive/SimilarVacations.tsx

@@ -0,0 +1,44 @@
+import { useQueries } from '@tanstack/react-query'
+import { Link } from 'react-router-dom'
+import { api } from '~/utils/api'
+import { Tiles } from '~/Tiles'
+import { VacationImage } from '~/VacationImage'
+import type { Vacation } from '~/utils/types'
+
+type Props = {
+  vacationIds: number[]
+}
+
+export function SimilarVacations({ vacationIds: ids }: Props) {
+  const vacations = useQueries({
+    queries: ids.map((id) => {
+      return {
+        queryKey: ['vacation', id],
+        queryFn: () => api.vacations.getVacation(id),
+        staleTime: 1000 * 30, // 30s
+      }
+    }),
+  })
+    .filter((results) => results.isSuccess)
+    .map((results) => results.data) as Vacation[]
+
+  return (
+    <Tiles minSize={7}>
+      {vacations.map((vacation) => {
+        return (
+          <Link key={vacation.id} to={`/vacations/${vacation.id}`} className="relative group">
+            <span className="bg-slate-800 text-white text-xs absolute top-0 right-0 py-1 px-2 hidden group-hover:block">
+              {vacation.id}
+            </span>
+            <VacationImage
+              vacationId={vacation.id}
+              alt={vacation.name}
+              className="block object-cover h-20 aspect-video"
+            />
+            <b className="block text-sm text-textColor">{vacation.name}</b>
+          </Link>
+        )
+      })}
+    </Tiles>
+  )
+}

react/advanced-hooks/01-useEffect/01-lecture-deep-dive/VacationDetailsPage.tsx

@@ -1,15 +1,32 @@
 import { useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { type LoaderFunctionArgs, useLoaderData, useParams } from 'react-router-dom'
 import { api } from '~/utils/api'
+import { useQuery } from '@tanstack/react-query'
 import { VacationImage } from '~/VacationImage'
 import { Heading } from '~/Heading'
-import { SimilarVacations } from '~/SimilarVacations'
+import { SimilarVacations } from './SimilarVacations'
 import { Card } from '~/Card'
 import type { Vacation } from '~/utils/types'
 
 // Setting state on unmounted components
 // https://github.com/facebook/react/pull/22114
 
+// const vacation = await queryClient.ensureQueryData({
+//   queryKey: ['vacation', vacationId],
+//   queryFn: () => api.vacations.getVacation(vacationId),
+//   staleTime: 1000 * 30,
+// })
+
+// export async function loader({ params }: LoaderFunctionArgs) {
+//   return api.vacations.getVacation(vacationId)
+// }
+
+// const { data: vacation } = useQuery({
+//   queryKey: ['vacation', vacationId],
+//   queryFn: () => api.vacations.getVacation(vacationId),
+//   staleTime: 1000 * 30,
+// })
+
 export function VacationDetailsPage() {
   const { vacationId } = useParams()
   const [vacation, setVacation] = useState<Vacation | null>(null)
@@ -53,8 +70,3 @@ export function VacationDetailsPage() {
     </Card>
   )
 }
-
-// ignore this
-export async function loader() {
-  return null
-}

react/advanced-hooks/01-useEffect/01-lecture-deep-dive/index.tsx

@@ -0,0 +1,16 @@
+import * as ReactDOM from 'react-dom/client'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { AuthProvider } from '~/AuthContext'
+import { FavoriteProvider } from '~/FavoriteContext'
+import { queryClient } from '~/utils/queryClient'
+import { App } from './App'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <QueryClientProvider client={queryClient}>
+    <AuthProvider>
+      <FavoriteProvider>
+        <App />
+      </FavoriteProvider>
+    </AuthProvider>
+  </QueryClientProvider>
+)