From 554f14c8d9c79843c369f946f751b42d2d37a0c1 Mon Sep 17 00:00:00 2001
From: e560248 <steffen.schoene@sbb.ch>
Date: Tue, 8 Apr 2025 14:35:30 +0200
Subject: [PATCH] use ComponentWrapper in UsersPage

---
 .../ComponentWrapper/ComponentWrapper.tsx     |  7 +++++--
 .../components/exercises/UserEffect.tsx       |  2 --
 .../components/exercises/UserOverview.tsx     |  1 -
 react-advanced-tag1/src/pages/UsersPage.tsx   | 19 ++++++++++++++-----
 4 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.tsx b/react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.tsx
index 6ec464b..48f64fd 100644
--- a/react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.tsx
+++ b/react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.tsx
@@ -2,17 +2,20 @@ import './ComponentWrapper.css'
 
 interface ComponentWrapperProps {
   title?: string
+  description?: string
   children: React.ReactNode
 }
 export default function ComponentWrapper({
   children,
   title,
+  description,
 }: ComponentWrapperProps): React.ReactElement {
   console.log('ComponentWrapper rendered:', title)
   return (
-    <div className="component-wrapper">
+    <section className="component-wrapper">
       {title && <h2>{title}</h2>}
+      {description && <p>{description}</p>}
       <div className="component-content">{children}</div>
-    </div>
+    </section>
   )
 }
diff --git a/react-advanced-tag1/src/common/components/exercises/UserEffect.tsx b/react-advanced-tag1/src/common/components/exercises/UserEffect.tsx
index 87a60a9..621d061 100644
--- a/react-advanced-tag1/src/common/components/exercises/UserEffect.tsx
+++ b/react-advanced-tag1/src/common/components/exercises/UserEffect.tsx
@@ -57,8 +57,6 @@ export default function UserEffect() {
 
   return (
     <section>
-      <h2>users Effect Exercise</h2>
-
       {userId === 0 && <p>Please select a user</p>}
       {loading || userId === 0 ? (
         <p>Loading...</p>
diff --git a/react-advanced-tag1/src/common/components/exercises/UserOverview.tsx b/react-advanced-tag1/src/common/components/exercises/UserOverview.tsx
index 2a1752f..2dc9848 100644
--- a/react-advanced-tag1/src/common/components/exercises/UserOverview.tsx
+++ b/react-advanced-tag1/src/common/components/exercises/UserOverview.tsx
@@ -21,7 +21,6 @@ export function UserOverview() {
   }
   return (
     <div>
-      <h2>User Overview</h2>
       <ul>
         {data.map(
           (user: {
diff --git a/react-advanced-tag1/src/pages/UsersPage.tsx b/react-advanced-tag1/src/pages/UsersPage.tsx
index f98c556..cb7dc38 100644
--- a/react-advanced-tag1/src/pages/UsersPage.tsx
+++ b/react-advanced-tag1/src/pages/UsersPage.tsx
@@ -1,13 +1,22 @@
+import ComponentWrapper from '../common/components/ComponentWrapper/ComponentWrapper'
 import UserEffect from '../common/components/exercises/UserEffect'
 import { UserOverview } from '../common/components/exercises/UserOverview'
-import Heading from '../common/components/globals/Heading'
 
 export default function UsersPage() {
   return (
-    <div>
-      <Heading title="Benutzer" />
-      <UserEffect />
-      <UserOverview />
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+      <ComponentWrapper
+        title="Benutzer"
+        description="Load User with useEffect Hook"
+      >
+        <UserEffect />
+      </ComponentWrapper>
+      <ComponentWrapper
+        title="User Overview"
+        description="Load User List with useFetch Hook & use MeadiaQuery Hook"
+      >
+        <UserOverview />
+      </ComponentWrapper>
     </div>
   )
 }