add immerJs example

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>
+  )
+}