feat: implement last labs (start) (#5)

* feat: implement last labs (start) * feat: finish suspense lab * fix: update lab instructions --------- Co-authored-by: Antoine RICHARD <[email protected]>
sfeir-open-source · Sep 23, 2024 · 6d3c807 · 6d3c807
1 parent 9ca8060
commit 6d3c807
Show file tree

Hide file tree

Showing 319 changed files with 7,241 additions and 29 deletions.
diff --git a/docs/markdown/02-routing/60-lab.md b/docs/markdown/02-routing/60-lab.md
@@ -1,6 +1,6 @@
 <!-- .slide: class="exercice" -->
 
-<h1 id="routing" style="margin-bottom: 30px;">Routing</h1>
+<h1 id="routing" style="margin-bottom: 30px;">02.01 - Routing</h1>
 
 ## Lab
 
@@ -19,3 +19,8 @@
 
 - Authentication layout for the login page
 - Dashboard layout for all the rest
+
+<br/> <br/>
+
+**ℹ️ Running the lab**<br/>
+`npm run dev -w 02.01`
diff --git a/docs/markdown/02-routing/80-lab.md b/docs/markdown/02-routing/80-lab.md
@@ -1,6 +1,6 @@
 <!-- .slide: class="exercice" -->
 
-<h1 id="navigating" style="margin-bottom: 30px;">Navigating</h1>
+<h1 id="navigating" style="margin-bottom: 30px;">02.02 - Navigating</h1>
 
 ## Lab
 
@@ -20,4 +20,9 @@
 - Implement a "Search" component : Update the URL to add the search as a query parameter
 - Update the employees list to filter depending on the user search
 
+<br/> <br/>
+
+**ℹ️ Running the lab**<br/>
+`npm run dev -w 02.02`
+
 </small>
diff --git a/docs/markdown/03-server-components/25-lab.md b/docs/markdown/03-server-components/25-lab.md
@@ -1,6 +1,6 @@
 <!-- .slide: class="exercice" -->
 
-# Server Components
+# 03.01 - Server Components
 
 ## Lab
 
@@ -17,4 +17,9 @@
 
 **4. Bonus : format the logs using the `bright` npm library**
 
+<br/> <br/>
+
+**ℹ️ Running the lab**<br/>
+`npm run dev -w 03.01`
+
 </small>
diff --git a/docs/markdown/03-server-components/40-lab.md b/docs/markdown/03-server-components/40-lab.md
@@ -1,6 +1,6 @@
 <!-- .slide: class="exercice" -->
 
-# Server Components
+# 03.02 - Server Components
 
 ## Lab
 
@@ -16,4 +16,8 @@
 - Create a `ThemeProvider` component which will share the user's theme preference in a context
 - Subscribe to this context to update the application logo
 
+<br/> <br/>
+**ℹ️ Running the lab**<br/>
+`npm run dev -w 03.02`
+
 </small>
diff --git a/docs/markdown/04-data-fetching/30-lab.md b/docs/markdown/04-data-fetching/30-lab.md
@@ -1,6 +1,6 @@
 <!-- .slide: class="exercice" -->
 
-# Data fetching
+<h1 id="data-fetching" style="margin-bottom: 30px;">04.01 - Data fetching</h1>
 
 ## Lab
 
@@ -17,4 +17,10 @@
 - On the employee details page, there is a `<EmployeeExpenses />` component. It's displaying employee expenses on click, by making an asynchronous fetch request. Open it and find why it's not working
 - Create a route handler to make this component work
 
+<br/> <br/>
+
+**ℹ️ Running the lab**<br/>
+`npm run start -w api`<br/>
+`npm run dev -w 04.01`<br/>
+
 </small>
diff --git a/docs/markdown/04-data-fetching/80-lab.md b/docs/markdown/04-data-fetching/80-lab.md
@@ -1,6 +1,6 @@
 <!-- .slide: class="exercice" -->
 
-# Caching
+<h1 id="caching" style="margin-bottom: 30px;">04.02 - Caching</h1>
 
 ## Lab
 
@@ -19,4 +19,10 @@ Let's create a mechanism to fix this :
 
 **3. Play with cache revalidation**
 
+<br/>
+
+**ℹ️ Running the lab**<br/>
+`npm run start -w api`<br/>
+`npm run dev -w 04.02`<br/>
+
 </small>
diff --git a/docs/markdown/05-mutations/20-lab.md b/docs/markdown/05-mutations/20-lab.md
@@ -1,6 +1,6 @@
 <!-- .slide: class="exercice" -->
 
-# Server actions
+# 05.01 - Server actions
 
 ## Lab
 
@@ -16,4 +16,9 @@
 - Make sure that the data is not stale after creating a new employee
 - Once the form is submitted, redirect to the new employee detail page
 
+<br/> <br/>
+**ℹ️ Running the lab**<br/>
+`npm run start -w api` <br/>
+`npm run dev -w 05.01`
+
 </small>
diff --git a/docs/markdown/05-mutations/40-lab.md b/docs/markdown/05-mutations/40-lab.md
@@ -1,6 +1,6 @@
 <!-- .slide: class="exercice" -->
 
-# Form hooks
+# 05.02 - Form hooks
 
 ## Lab
 
@@ -17,4 +17,9 @@
 - In the `EmployeeForm`, use the appropriate hook to get the form state
 - Pass the form validation errors to `TextFields` components
 
+<br/> <br/>
+**ℹ️ Running the lab**<br/>
+`npm run start -w api` <br/>
+`npm run dev -w 05.02`
+
 </small>
diff --git a/docs/markdown/06-error-management/20-lab.md b/docs/markdown/06-error-management/20-lab.md
@@ -1,6 +1,6 @@
 <!-- .slide: class="exercice" -->
 
-# Error Boundaries
+<h1 id="error-boundaries" style="margin-bottom: 30px;">06.01 - Error Boundaries</h1>
 
 ## Lab
 
@@ -10,8 +10,7 @@
 
 - Try to run the application without starting the API server : it's broken
 - Add a global error boundary to display a user-friendly maintenance page
-- Take a look at the home page files : it has parralel routing !
-- Implement error boundaries to the homepage for errors close to the problem
+- Implement error boundaries to the homepage parallel routes
 
 **2. Now you can re-start the API Server :**
 
@@ -23,4 +22,7 @@
 - Find the error cause
 - Implement a custom Error boundary using `react-error-boundary` to prevent the whole page to break
 
+**ℹ️ Running the lab**<br/>
+`npm run dev -w 06.01`
+
 </small>
diff --git a/docs/markdown/06-error-management/40-lab.md b/docs/markdown/06-error-management/40-lab.md
@@ -1,17 +1,23 @@
 <!-- .slide: class="exercice" -->
 
-# Expected errors
+# 06.02 - Expected errors
 
 ## Lab
 
 <small>
 
 **1. Implement a global 404 page**
 
-- This page should display the current invalid URL (example : the page "/invalid-page" does not exist)
+- This page should display the current invalid URL <br/>(example : the page "/invalid-page" does not exist)
 
 **2. Implement 404 pages for expense details, employee details & employee edition pages**
 
-- This pages should display the current invalid id (example : the employee "1234" does not exist)
+- This pages should display the current invalid id <br/>(example : the employee "1234" does not exist)
+
+<br/> <br/>
+
+**ℹ️ Running the lab**<br/>
+`npm run start -w api`<br/>
+`npm run dev -w 06.02`
 
 </small>
diff --git a/docs/markdown/07-middleware/20-lab.md b/docs/markdown/07-middleware/20-lab.md
@@ -1,6 +1,6 @@
 <!-- .slide: class="exercice" -->
 
-# next.config.js lifecycles
+# 07.01 - next.config.js lifecycles
 
 ## Lab
 

diff --git a/docs/markdown/07-middleware/40-lab.md b/docs/markdown/07-middleware/40-lab.md
@@ -1,6 +1,6 @@
 <!-- .slide: class="exercice" -->
 
-# Middleware
+# 07.02 - Middleware
 
 ## Lab
 

diff --git a/docs/markdown/08-rendering-methods/40-lab.md b/docs/markdown/08-rendering-methods/40-lab.md
@@ -1,11 +1,31 @@
 <!-- .slide: class="exercice" -->
 
-# Rendering methods
+<h1 id="rendering-methods" style="margin-bottom: 30px;">08.01 - Rendering methods</h1>
 
 ## Lab
 
 <small>
 
-TODO
+**1. Opt out static rendering on homepage**
+
+- The page should be rendered on every request
+- The page should fetch its data on every request
+
+**2. Implement Incremental Static Regeneration for employees**
+
+- Pre-render employee details and edit pages at build time
+- Don't accept new employee requests at run-time
+
+**3. Implement Incremental Static Regeneration for expenses**
+
+- Pre-render expenses details pages at build time
+- Render new expenses details pages at run-time
+
+**4. Bonus** : <br/>
+Implement a `<NoSSR>{children}</NoSSR/>` component : that make sure its children are never rendered on the server
+
+**ℹ️ Running the lab**<br/>
+`npm run start -w api`<br/>
+`npm run dev -w 08.01`
 
 </small>
diff --git a/docs/markdown/08-rendering-methods/70-lab.md b/docs/markdown/08-rendering-methods/70-lab.md
@@ -1,11 +1,27 @@
 <!-- .slide: class="exercice" -->
 
-# Streaming
+<h1 id="streaming" style="margin-bottom: 30px;">08.02 - Streaming</h1>
 
 ## Lab
 
 <small>
 
-TODO
+**1. Streaming an entire page**
+
+- The expense list page is long to load
+- Implement streaming to this page to optimise loading
+
+**2. Streaming and parallel routing**
+
+- Add a loading state for homepage components
+
+**3. Streaming only a part of a page**
+
+- In the `ExpenseDetails` component, the `ExpenseEmployee` component is blocking : it must be loaded for the page to be rendered
+- Add a loading state only to this part of the page
+
+**ℹ️ Running the lab**<br/>
+`npm run start -w api`<br/>
+`npm run dev -w 08.02`
 
 </small>
diff --git a/steps/00.00-sfeir-people-demo/src/app/(dashboard)/employees/[id]/edit/page.tsx b/steps/00.00-sfeir-people-demo/src/app/(dashboard)/employees/[id]/edit/page.tsx
@@ -1,7 +1,5 @@
 import * as peopleApi from '@/api/people';
-import Link from 'next/link';
 
-import ArrowLeft from '@/components/Icons/ArrowLeft';
 import EmployeeForm from '@/components/EmployeeForm';
 
 import { update } from '../../actions';

diff --git a/steps/08.01-rendering-methods-solution/.env.example b/steps/08.01-rendering-methods-solution/.env.example
@@ -0,0 +1,2 @@
+API_BASE_URL=http://localhost:3001
+API_KEY=XXXX
diff --git a/steps/08.01-rendering-methods-solution/.eslintrc.json b/steps/08.01-rendering-methods-solution/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/steps/08.01-rendering-methods-solution/.gitignore b/steps/08.01-rendering-methods-solution/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/steps/08.01-rendering-methods-solution/README.md b/steps/08.01-rendering-methods-solution/README.md
@@ -0,0 +1,15 @@
+# 08.01 - Rendering methods | Solution
+
+## Prerequisites
+
+Running the API server :
+
+```
+npm run start -w api
+```
+
+## Running the solution
+
+```
+npm run dev -w 08.01-solution
+```
diff --git a/steps/08.01-rendering-methods-solution/next.config.mjs b/steps/08.01-rendering-methods-solution/next.config.mjs
@@ -0,0 +1,15 @@
+const apiUrl = new URL(process.env.API_BASE_URL || 'http://localhost:3001');
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        hostname: apiUrl.hostname,
+        port: apiUrl.port,
+      },
+    ],
+  },
+};
+
+export default nextConfig;
diff --git a/steps/08.01-rendering-methods-solution/package.json b/steps/08.01-rendering-methods-solution/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "08.01-solution",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "bright": "^0.8.5",
+    "clsx": "^2.1.1",
+    "jose": "^5.6.3",
+    "jsonwebtoken": "^9.0.2",
+    "next": "14.2.5",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-error-boundary": "^4.0.13",
+    "rehype-sanitize": "^6.0.0",
+    "rehype-stringify": "^10.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.0",
+    "server-only": "^0.0.1",
+    "showdown": "^2.1.0",
+    "unified": "^11.0.5"
+  },
+  "devDependencies": {
+    "@types/jsonwebtoken": "^9.0.6",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/showdown": "^2.0.6",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.5",
+    "typescript": "^5"
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		API_BASE_URL=http://localhost:3001
		API_KEY=XXXX