From 419113541bd374a498a8616175654569ab223b10 Mon Sep 17 00:00:00 2001
From: e560248 <steffen.schoene@sbb.ch>
Date: Tue, 8 Apr 2025 11:52:10 +0200
Subject: [PATCH] add Higher-Order Components

---
 react-advanced-tag1/src/App.tsx               |  2 +
 .../common/components/Header/Navigation.tsx   |  1 +
 .../exercises/HocExercise/DogImages.tsx       | 18 +++++++
 .../exercises/HocExercise/WithLoader.tsx      | 50 +++++++++++++++++++
 .../exercises/HocExercise/dogimages.css       |  6 +++
 react-advanced-tag1/src/pages/HocPage.tsx     | 11 ++++
 6 files changed, 88 insertions(+)
 create mode 100644 react-advanced-tag1/src/common/components/exercises/HocExercise/DogImages.tsx
 create mode 100644 react-advanced-tag1/src/common/components/exercises/HocExercise/WithLoader.tsx
 create mode 100644 react-advanced-tag1/src/common/components/exercises/HocExercise/dogimages.css
 create mode 100644 react-advanced-tag1/src/pages/HocPage.tsx

diff --git a/react-advanced-tag1/src/App.tsx b/react-advanced-tag1/src/App.tsx
index 3b13d60..8707ae1 100644
--- a/react-advanced-tag1/src/App.tsx
+++ b/react-advanced-tag1/src/App.tsx
@@ -10,6 +10,7 @@ import MemoCallbackPage from './pages/MemoCallbackPage'
 import ComponentWrapperPage from './pages/ComponentWrapperPage'
 import ZustandCounterPage from './pages/ZustandCounterPage'
 import ModalPage from './pages/ModalPage'
+import { HocPage } from './pages/HocPage'
 
 function App() {
 
@@ -23,6 +24,7 @@ function App() {
             <Route path="/componentwrapper" element={<ComponentWrapperPage />} />
             <Route path="/modalpage" element={<ModalPage />} />
             <Route path="/zustandcounterpage" element={<ZustandCounterPage />} />
+            <Route path="/hoc" element={<HocPage />} />
           </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 39f3602..c7e6f50 100644
--- a/react-advanced-tag1/src/common/components/Header/Navigation.tsx
+++ b/react-advanced-tag1/src/common/components/Header/Navigation.tsx
@@ -10,6 +10,7 @@ export default function Navigation () {
                 <li><a href="/componentwrapper">Component Wrapper</a></li>
                 <li><a href="/modalpage">Modal</a></li>
                 <li><a href="/zustandcounterpage">ZustandCounterPage</a></li>
+                <li><a href="/hoc">HOC</a></li>
             </ul>
         </nav>);
 }
\ No newline at end of file
diff --git a/react-advanced-tag1/src/common/components/exercises/HocExercise/DogImages.tsx b/react-advanced-tag1/src/common/components/exercises/HocExercise/DogImages.tsx
new file mode 100644
index 0000000..cf57902
--- /dev/null
+++ b/react-advanced-tag1/src/common/components/exercises/HocExercise/DogImages.tsx
@@ -0,0 +1,18 @@
+import withLoader, { LoaderData } from "./WithLoader";
+import './DogImages.css';
+interface DogImagesProps {
+    data: LoaderData;
+}
+
+function DogImages({data}: DogImagesProps) {
+    return data.message.map((img, index) => (
+        <img
+            key={index}
+            src={img}
+            className="dog-image"
+        />
+    ));
+}
+
+const DogImagesWithLoader = withLoader(DogImages, "https://dog.ceo/api/breed/labrador/images/random/6");
+export default DogImagesWithLoader;
\ No newline at end of file
diff --git a/react-advanced-tag1/src/common/components/exercises/HocExercise/WithLoader.tsx b/react-advanced-tag1/src/common/components/exercises/HocExercise/WithLoader.tsx
new file mode 100644
index 0000000..53de648
--- /dev/null
+++ b/react-advanced-tag1/src/common/components/exercises/HocExercise/WithLoader.tsx
@@ -0,0 +1,50 @@
+
+import { ComponentType, useEffect, useState } from "react";
+
+export type LoaderData = {
+  message: string[];
+  status: string;
+}
+
+interface WithLoaderProps {
+  data: LoaderData;
+}
+
+// HOC definition
+export default function withLoader<P>(
+    WrappedComponent: ComponentType<P & WithLoaderProps>,
+    url: string,
+) {
+    return function WithLoaderComponent(props: P) {
+        const [data, setData] = useState<LoaderData | null>(null);
+
+        useEffect(() => {
+            async function fetchData() {
+                try {
+                    const response = await fetch(url);
+                    const json = await response.json();
+                    // setData(json);
+
+                    setTimeout(() => {
+                        setData(json);
+                    }
+                    , 5000);
+                }
+                catch (error) {
+                    console.error("Error fetching data:", error);
+                }
+            }
+
+            fetchData();
+        }, []);
+
+        if (!data) {
+            return <p>Loading...</p>;
+        }
+
+        return (
+            <WrappedComponent {...(props as P)} data={data} />
+        );
+        
+    };
+}
\ No newline at end of file
diff --git a/react-advanced-tag1/src/common/components/exercises/HocExercise/dogimages.css b/react-advanced-tag1/src/common/components/exercises/HocExercise/dogimages.css
new file mode 100644
index 0000000..a902cb6
--- /dev/null
+++ b/react-advanced-tag1/src/common/components/exercises/HocExercise/dogimages.css
@@ -0,0 +1,6 @@
+.dog-image {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  margin: 10px;
+}
\ No newline at end of file
diff --git a/react-advanced-tag1/src/pages/HocPage.tsx b/react-advanced-tag1/src/pages/HocPage.tsx
new file mode 100644
index 0000000..1d89473
--- /dev/null
+++ b/react-advanced-tag1/src/pages/HocPage.tsx
@@ -0,0 +1,11 @@
+import ComponentWrapper from "../common/components/ComponentWrapper/ComponentWrapper";
+import DogImagesWithLoader from "../common/components/exercises/HocExercise/DogImages";
+
+
+export function HocPage() {
+  return (
+    <ComponentWrapper title="HOC Example">
+      <DogImagesWithLoader />
+    </ComponentWrapper>
+  )
+}
\ No newline at end of file