add immerJs example

react-advanced-tag1/package-lock.json

@@ -8,6 +8,7 @@
       "name": "react-advanced-tag1",
       "version": "0.0.0",
       "dependencies": {
+        "immer": "^10.1.1",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-router-dom": "^7.5.0",
@@ -3465,6 +3466,16 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/import-fresh/-/import-fresh-3.3.1.tgz",

react-advanced-tag1/package.json

@@ -17,6 +17,7 @@
     "prettier": "prettier ./src --write"
   },
   "dependencies": {
+    "immer": "^10.1.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.5.0",

react-advanced-tag1/src/App.tsx

@@ -11,6 +11,7 @@ import ComponentWrapperPage from './pages/ComponentWrapperPage'
 import ZustandCounterPage from './pages/ZustandCounterPage'
 import ModalPage from './pages/ModalPage'
 import { HocPage } from './pages/HocPage'
+import ImmerPage from './pages/ImmerPage'
 
 function App() {
   return (
@@ -25,6 +26,7 @@ function App() {
         <Route path="/modalpage" element={<ModalPage />} />
         <Route path="/zustandcounterpage" element={<ZustandCounterPage />} />
         <Route path="/hoc" element={<HocPage />} />
+        <Route path="/immer" element={<ImmerPage />} />
       </Routes>
     </MainLayout>
   )

react-advanced-tag1/src/common/components/Header/Navigation.tsx

@@ -29,6 +29,9 @@ export default function Navigation() {
         <li>
           <a href="/hoc">HOC</a>
         </li>
+        <li>
+          <a href="/immer">Immer</a>
+        </li>
       </ul>
     </nav>
   )

react-advanced-tag1/src/common/components/exercises/ImmerExercise/index.tsx

@@ -0,0 +1,44 @@
+import { produce } from 'immer'
+import { useState } from 'react'
+
+export default function ImmerExercise() {
+  const [user, setUser] = useState({
+    name: 'Alice',
+
+    address: {
+      city: 'Wonderland',
+
+      zip: '12345',
+    },
+  })
+
+  const updateUser = () => {
+    // this is "normal" way to update state in objects
+    setUser((prevUser) => ({
+      ...prevUser,
+      address: {
+        ...prevUser.address,
+        city: 'New Wonderland',
+      },
+    }))
+  }
+
+  const updateUserWithImmer = () => {
+    // immer way
+    setUser((prevUser) =>
+      produce(prevUser, (draft) => {
+        draft.address.city = 'New Wonderland'
+      })
+    )
+  }
+
+  return (
+    <>
+      <p>
+        {user.address.city}: {user.name}
+      </p>
+      <button onClick={updateUser}>Update User</button>
+      <button onClick={updateUserWithImmer}>Update User with immerJs</button>
+    </>
+  )
+}

react-advanced-tag1/src/common/components/exercises/RefExercise/index.tsx

@@ -44,9 +44,11 @@ export default function RefExercise(): React.ReactElement {
   }
 
   const handleChangeSubmit = () => {
+    // This is a bad way to handle form submission
     const strasse = document.querySelector(
       'input[name="strasse"]'
     ) as HTMLInputElement
+    // This is a bad way to handle form submission
     const city = document.querySelector(
       'input[name="city"]'
     ) as HTMLInputElement

react-advanced-tag1/src/main.tsx

@@ -3,6 +3,9 @@ import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
 import { BrowserRouter } from 'react-router-dom'
+import { enableMapSet } from 'immer'
+
+enableMapSet()
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

react-advanced-tag1/src/pages/ImmerPage.tsx

@@ -0,0 +1,10 @@
+import ComponentWrapper from '../common/components/ComponentWrapper/ComponentWrapper'
+import ImmerExercise from '../common/components/exercises/ImmerExercise'
+
+export default function ImmerPage() {
+  return (
+    <ComponentWrapper title="Immer">
+      <ImmerExercise />
+    </ComponentWrapper>
+  )
+}