From 832bc2b20956c182afa4464f19c5e8b1ae5064a1 Mon Sep 17 00:00:00 2001
From: e560248 <steffen.schoene@sbb.ch>
Date: Tue, 8 Apr 2025 10:54:33 +0200
Subject: [PATCH] move Modal into Router

---
 react-advanced-tag1/src/App.tsx                    |  2 ++
 .../src/common/components/Header/Navigation.tsx    |  1 +
 .../src/routes/ComponentWrapperPage.tsx            |  9 ---------
 react-advanced-tag1/src/routes/ModalPage.tsx       | 14 ++++++++++++++
 4 files changed, 17 insertions(+), 9 deletions(-)
 create mode 100644 react-advanced-tag1/src/routes/ModalPage.tsx

diff --git a/react-advanced-tag1/src/App.tsx b/react-advanced-tag1/src/App.tsx
index 34f3776..8c4b92b 100644
--- a/react-advanced-tag1/src/App.tsx
+++ b/react-advanced-tag1/src/App.tsx
@@ -9,6 +9,7 @@ import FormsPage from './routes/FormsPage'
 import MemoCallbackPage from './routes/MemoCallbackPage'
 import ComponentWrapperPage from './routes/ComponentWrapperPage'
 import ZustandCounterPage from './routes/ZustandCounterPage'
+import ModalPage from './routes/ModalPage'
 
 function App() {
 
@@ -20,6 +21,7 @@ function App() {
             <Route path="/forms" element={<FormsPage />} />
             <Route path="/memocallback" element={<MemoCallbackPage />} />
             <Route path="/componentwrapper" element={<ComponentWrapperPage />} />
+            <Route path="/modalpage" element={<ModalPage />} />
             <Route path="/zustandcounterpage" element={<ZustandCounterPage />} />
           </Routes>
         </MainLayout>
diff --git a/react-advanced-tag1/src/common/components/Header/Navigation.tsx b/react-advanced-tag1/src/common/components/Header/Navigation.tsx
index ef8ceea..39f3602 100644
--- a/react-advanced-tag1/src/common/components/Header/Navigation.tsx
+++ b/react-advanced-tag1/src/common/components/Header/Navigation.tsx
@@ -8,6 +8,7 @@ export default function Navigation () {
                 <li><a href="/forms">Forms</a></li>
                 <li><a href="/memocallback">Memo und Callback</a></li>
                 <li><a href="/componentwrapper">Component Wrapper</a></li>
+                <li><a href="/modalpage">Modal</a></li>
                 <li><a href="/zustandcounterpage">ZustandCounterPage</a></li>
             </ul>
         </nav>);
diff --git a/react-advanced-tag1/src/routes/ComponentWrapperPage.tsx b/react-advanced-tag1/src/routes/ComponentWrapperPage.tsx
index 8572513..5f83371 100644
--- a/react-advanced-tag1/src/routes/ComponentWrapperPage.tsx
+++ b/react-advanced-tag1/src/routes/ComponentWrapperPage.tsx
@@ -1,20 +1,11 @@
-import { createPortal } from "react-dom";
 import ComponentWrapper from "../common/components/ComponentWrapper/ComponentWrapper";
-import Modal from "../common/components/Modal";
-import { useState } from "react";
 
 export default function ComponentWrapperPage() {
-  
-  const [modalOpen, setModalOpen] = useState(false);
     return (
       <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
         <ComponentWrapper title='Komponenten Wrapper Test'>
           <h1>Hallo</h1>
         </ComponentWrapper>
-        <ComponentWrapper title='Modal Test'>
-          <button onClick={() => setModalOpen(!modalOpen)}>Toggle Modal</button>
-          {modalOpen && createPortal(<Modal onClose={() => setModalOpen(false)}/>,document.getElementById("modal") as HTMLElement)}
-        </ComponentWrapper>
       </div>
     );
 }
\ No newline at end of file
diff --git a/react-advanced-tag1/src/routes/ModalPage.tsx b/react-advanced-tag1/src/routes/ModalPage.tsx
new file mode 100644
index 0000000..b84a610
--- /dev/null
+++ b/react-advanced-tag1/src/routes/ModalPage.tsx
@@ -0,0 +1,14 @@
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import ComponentWrapper from "../common/components/ComponentWrapper/ComponentWrapper";
+import Modal from "../common/components/Modal";
+
+export default function ModalPage() {
+  const [modalOpen, setModalOpen] = useState(false);
+    return (
+      <ComponentWrapper title='Modal Test'>
+        <button onClick={() => setModalOpen(!modalOpen)}>Toggle Modal</button>
+        {modalOpen && createPortal(<Modal onClose={() => setModalOpen(false)}/>,document.getElementById("modal") as HTMLElement)}
+      </ComponentWrapper>
+    );
+}
\ No newline at end of file