add prettier setup

.vscode/settings.json

@@ -29,5 +29,6 @@
   },
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "prettier.configPath": "react-advanced-tag1/.prettierrc.mjs"
 }

react-advanced-tag1/.prettierrc.mjs

@@ -0,0 +1,12 @@
+/**
+ * @see https://prettier.io/docs/configuration
+ * @type {import("prettier").Config}
+ */
+const config = {
+  trailingComma: "es5",
+  tabWidth: 2,
+  semi: false,
+  singleQuote: true,
+};
+
+export default config;

react-advanced-tag1/package-lock.json

@@ -27,6 +27,7 @@
         "eslint-plugin-react-refresh": "^0.4.19",
         "globals": "^15.15.0",
         "jsdom": "^26.0.0",
+        "prettier": "3.5.3",
         "typescript": "~5.7.2",
         "typescript-eslint": "^8.24.1",
         "vite": "^6.2.0",
@@ -4257,6 +4258,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.5.3",
+      "resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/prettier/-/prettier-3.5.3.tgz",
+      "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "27.5.1",
       "resolved": "https://bin.sbb.ch/artifactory/api/npm/npm/pretty-format/-/pretty-format-27.5.1.tgz",

react-advanced-tag1/package.json

@@ -13,7 +13,8 @@
     "test:watch": "vitest --watch",
     "test:coverage": "vitest --coverage",
     "test:coverage:report": "vitest --coverage --reporter=html",
-    "test:coverage:report:open": "vitest --coverage --reporter=html && open coverage/index.html"
+    "test:coverage:report:open": "vitest --coverage --reporter=html && open coverage/index.html",
+    "prettier": "prettier ./src --write"
   },
   "dependencies": {
     "react": "^19.0.0",
@@ -35,6 +36,7 @@
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",
     "jsdom": "^26.0.0",
+    "prettier": "3.5.3",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.24.1",
     "vite": "^6.2.0",

react-advanced-tag1/src/App.css

@@ -1,5 +1,3 @@
-
-
 .logo {
   height: 6em;
   padding: 1.5em;
@@ -36,7 +34,7 @@
   color: #888;
 }
 
-input[type="text"] {
+input[type='text'] {
   border-radius: 6px;
   padding: 1rem 0.5rem;
 }

react-advanced-tag1/src/App.tsx

@@ -13,8 +13,8 @@ import ModalPage from './pages/ModalPage'
 import { HocPage } from './pages/HocPage'
 
 function App() {
-
+  return (
-  return <MainLayout>
+    <MainLayout>
       <Routes>
         <Route path="/" element={<HomePage />} />
         <Route path="/user" element={<UsersPage />} />
@@ -27,6 +27,7 @@ function App() {
         <Route path="/hoc" element={<HocPage />} />
       </Routes>
     </MainLayout>
+  )
 }
 
 export default App

react-advanced-tag1/src/common/components/ComponentWrapper/ComponentWrapper.tsx

@@ -1,17 +1,18 @@
 import './ComponentWrapper.css'
 
 interface ComponentWrapperProps {
-    title?: string;
+  title?: string
-    children: React.ReactNode;
+  children: React.ReactNode
 }
-export default function ComponentWrapper({ children, title }: ComponentWrapperProps): React.ReactElement {
+export default function ComponentWrapper({
-    console.log("ComponentWrapper rendered:", title);
+  children,
+  title,
+}: ComponentWrapperProps): React.ReactElement {
+  console.log('ComponentWrapper rendered:', title)
   return (
-        <div className='component-wrapper'>
+    <div className="component-wrapper">
       {title && <h2>{title}</h2>}
-            <div className='component-content'>
+      <div className="component-content">{children}</div>
-                {children}
     </div>
-        </div>
+  )
-    );
 }

react-advanced-tag1/src/common/components/Footer.test.tsx

@@ -1,10 +1,10 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen } from '@testing-library/react'
-import Footer from "./Footer";
+import Footer from './Footer'
-import { describe, it, expect } from "vitest";
+import { describe, it, expect } from 'vitest'
 
-describe("Footer Component", () => {
+describe('Footer Component', () => {
-    it("should render the footer with correct content", () => {
+  it('should render the footer with correct content', () => {
-        render(<Footer />);
+    render(<Footer />)
-        expect(screen.getByText(/© 2025 Your Company/i)).toBeDefined();
+    expect(screen.getByText(/© 2025 Your Company/i)).toBeDefined()
-    });
+  })
-});
+})

react-advanced-tag1/src/common/components/Footer.tsx

@@ -1,10 +1,10 @@
 function Footer() {
-    console.log("Footer rendered");
+  console.log('Footer rendered')
   return (
     <footer>
       <p>&copy; 2025 Your Company</p>
     </footer>
-    );
+  )
 }
 
-export default Footer;
+export default Footer

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

@@ -2,15 +2,34 @@ export default function Navigation () {
   return (
     <nav>
       <ul>
-                <li><a href="/">Home</a></li>
+        <li>
-                <li><a href="/user">Users</a></li>
+          <a href="/">Home</a>
-                <li><a href="/effect">Effects</a></li>
+        </li>
-                <li><a href="/forms">Forms</a></li>
+        <li>
-                <li><a href="/memocallback">Memo und Callback</a></li>
+          <a href="/user">Users</a>
-                <li><a href="/componentwrapper">Component Wrapper</a></li>
+        </li>
-                <li><a href="/modalpage">Modal</a></li>
+        <li>
-                <li><a href="/zustandcounterpage">ZustandCounterPage</a></li>
+          <a href="/effect">Effects</a>
-                <li><a href="/hoc">HOC</a></li>
+        </li>
+        <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>
+        <li>
+          <a href="/hoc">HOC</a>
+        </li>
       </ul>
-        </nav>);
+    </nav>
+  )
 }

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

@@ -1,13 +1,13 @@
-import Navigation from "./Navigation";
+import Navigation from './Navigation'
 
 const Header = () => {
-    console.log("Header rendered");
+  console.log('Header rendered')
   return (
     <header>
       <h1>My Application</h1>
       <Navigation />
     </header>
-    );
+  )
 }
 
-export default Header;
+export default Header

react-advanced-tag1/src/common/components/Modal.tsx

@@ -1,18 +1,25 @@
-import'./Modal.css';
+import './Modal.css'
 
 interface ModalProps {
-    open?: boolean;
+  open?: boolean
-    onClose?: () => void;
+  onClose?: () => void
 }
 
-export default function Modal({ open= true, onClose }: ModalProps): React.ReactElement {
+export default function Modal({
-    console.log("Modal rendered");
+  open = true,
+  onClose,
+}: ModalProps): React.ReactElement {
+  console.log('Modal rendered')
   return (
-        <div style={{ display: open ? "block" : "none" }} className='modal' onClick={() => onClose && onClose()}>
+    <div
-          <div className='modal-content'>
+      style={{ display: open ? 'block' : 'none' }}
+      className="modal"
+      onClick={() => onClose && onClose()}
+    >
+      <div className="modal-content">
         <h2>Modal</h2>
         <p>This is a modal component.</p>
       </div>
     </div>
-    );
+  )
 }

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

@@ -1,20 +1,18 @@
-import { useEffect, useState } from "react"
+import { useEffect, useState } from 'react'
 
 export default function EffectExercises() {
-
+  const [counter, setCounter] = useState(0)
-    const [counter, setCounter] = useState(0);
 
   useEffect(() => {
-        console.log("EffectExercises mounted");
+    console.log('EffectExercises mounted')
     const interval = setInterval(() => {
-            setCounter(prevCounter => prevCounter + 1);
+      setCounter((prevCounter) => prevCounter + 1)
-        }
+    }, 1000)
-        , 1000);
     return () => {
-            console.log("EffectExercises unmounted");
+      console.log('EffectExercises unmounted')
-            clearInterval(interval);
+      clearInterval(interval)
     }
-    }, [counter]);
+  }, [counter])
   return (
     <section>
       <h2>Effect Exercises</h2>

react-advanced-tag1/src/common/components/exercises/HocExercise/DogImages.tsx

@@ -1,18 +1,17 @@
-import withLoader, { LoaderData } from "./WithLoader";
+import withLoader, { LoaderData } from './WithLoader'
-import './DogImages.css';
+import './DogImages.css'
 interface DogImagesProps {
-    data: LoaderData;
+  data: LoaderData
 }
 
 function DogImages({ data }: DogImagesProps) {
   return data.message.map((img, index) => (
-        <img
+    <img key={index} src={img} className="dog-image" />
-            key={index}
+  ))
-            src={img}
-            className="dog-image"
-        />
-    ));
 }
 
-const DogImagesWithLoader = withLoader(DogImages, "https://dog.ceo/api/breed/labrador/images/random/6");
+const DogImagesWithLoader = withLoader(
-export default DogImagesWithLoader;
+  DogImages,
+  'https://dog.ceo/api/breed/labrador/images/random/6'
+)
+export default DogImagesWithLoader

react-advanced-tag1/src/common/components/exercises/HocExercise/WithLoader.tsx

@@ -1,50 +1,44 @@
-
+import { ComponentType, useEffect, useState } from 'react'
-import { ComponentType, useEffect, useState } from "react";
 
 export type LoaderData = {
-  message: string[];
+  message: string[]
-  status: string;
+  status: string
 }
 
 interface WithLoaderProps {
-  data: LoaderData;
+  data: LoaderData
 }
 
 // HOC definition
 export default function withLoader<P>(
   WrappedComponent: ComponentType<P & WithLoaderProps>,
-    url: string,
+  url: string
 ) {
   return function WithLoaderComponent(props: P) {
-        const [data, setData] = useState<LoaderData | null>(null);
+    const [data, setData] = useState<LoaderData | null>(null)
 
     useEffect(() => {
       async function fetchData() {
         try {
-                    const response = await fetch(url);
+          const response = await fetch(url)
-                    const json = await response.json();
+          const json = await response.json()
           // setData(json);
 
           setTimeout(() => {
-                        setData(json);
+            setData(json)
-                    }
+          }, 5000)
-                    , 5000);
+        } catch (error) {
-                }
+          console.error('Error fetching data:', error)
-                catch (error) {
-                    console.error("Error fetching data:", error);
         }
       }
 
-            fetchData();
+      fetchData()
-        }, []);
+    }, [])
 
     if (!data) {
-            return <p>Loading...</p>;
+      return <p>Loading...</p>
     }
 
-        return (
+    return <WrappedComponent {...(props as P)} data={data} />
-            <WrappedComponent {...(props as P)} data={data} />
+  }
-        );
-        
-    };
 }

react-advanced-tag1/src/common/components/exercises/MemoCallback/Search.tsx

@@ -1,12 +1,18 @@
-import React, { memo } from "react";
+import React, { memo } from 'react'
 
 interface SearchProps {
-    onChange: (text: string) => void;
+  onChange: (text: string) => void
 }
 
 function Search({ onChange }: SearchProps): React.ReactElement {
-    console.log("Search rendered");
+  console.log('Search rendered')
-    return <input type="text" onChange={(e) => onChange(e.target.value)} placeholder="Search user..." />;
+  return (
+    <input
+      type="text"
+      onChange={(e) => onChange(e.target.value)}
+      placeholder="Search user..."
+    />
+  )
 }
 
-export default memo(Search);
+export default memo(Search)

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

@@ -1,42 +1,44 @@
-import { render, screen, fireEvent } from "@testing-library/react";
+import { render, screen, fireEvent } from '@testing-library/react'
-import MemoCallback from "./index";
+import MemoCallback from './index'
-import { describe, it, expect } from "vitest";
+import { describe, it, expect } from 'vitest'
-import { users } from "../../../utils/shuffle";
+import { users } from '../../../utils/shuffle'
 
-
+describe('MemoCallback Component', () => {
-
+  it('should render the component with initial users', () => {
-describe("MemoCallback Component", () => {
+    render(<MemoCallback />)
-    it("should render the component with initial users", () => {
-        render(<MemoCallback />);
     users.forEach((user) => {
-            expect(screen.getByText(user)).toBeDefined();
+      expect(screen.getByText(user)).toBeDefined()
-        });
+    })
-    });
+  })
 
-    it("should filter users based on search input", () => {
+  it('should filter users based on search input', () => {
-        render(<MemoCallback />);
+    render(<MemoCallback />)
-        const searchInput = screen.getByPlaceholderText(/search/i);
+    const searchInput = screen.getByPlaceholderText(/search/i)
 
-        fireEvent.change(searchInput, { target: { value: "a" } });
+    fireEvent.change(searchInput, { target: { value: 'a' } })
-        const filteredUsers = users.filter((user) => user.toLowerCase().includes("a"));
+    const filteredUsers = users.filter((user) =>
+      user.toLowerCase().includes('a')
+    )
     filteredUsers.forEach((user) => {
-            expect(screen.getByText(user)).toBeDefined();
+      expect(screen.getByText(user)).toBeDefined()
-        });
+    })
 
-        const nonMatchingUsers = users.filter((user) => !user.toLowerCase().includes("a"));
+    const nonMatchingUsers = users.filter(
+      (user) => !user.toLowerCase().includes('a')
+    )
     nonMatchingUsers.forEach((user) => {
-            expect(screen.queryByText(user)).not.toBeDefined();
+      expect(screen.queryByText(user)).not.toBeDefined()
-        });
+    })
-    });
+  })
 
-    it("should shuffle users when the shuffle button is clicked", () => {
+  it('should shuffle users when the shuffle button is clicked', () => {
-        render(<MemoCallback />);
+    render(<MemoCallback />)
-        const shuffleButton = screen.getByText(/shuffle/i);
+    const shuffleButton = screen.getByText(/shuffle/i)
 
-        const initialOrder = screen.getAllByText(/./).map((el) => el.textContent);
+    const initialOrder = screen.getAllByText(/./).map((el) => el.textContent)
-        fireEvent.click(shuffleButton);
+    fireEvent.click(shuffleButton)
-        const shuffledOrder = screen.getAllByText(/./).map((el) => el.textContent);
+    const shuffledOrder = screen.getAllByText(/./).map((el) => el.textContent)
 
-        expect(initialOrder).not.toEqual(shuffledOrder);
+    expect(initialOrder).not.toEqual(shuffledOrder)
-    });
+  })
-});
+})

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

@@ -1,33 +1,31 @@
-import { useCallback, useState } from "react";
+import { useCallback, useState } from 'react'
-import Search from "./Search";
+import Search from './Search'
-import { users, shuffleArray } from "../../../utils/shuffle";
+import { users, shuffleArray } from '../../../utils/shuffle'
 
 export default function MemoCallback() {
-    console.log("MemoCallback rendered");
+  console.log('MemoCallback rendered')
 
-    const [allUsers, setAllUsers] = useState(users);
+  const [allUsers, setAllUsers] = useState(users)
 
   const handleSearch = useCallback((text: string) => {
     const filteredUsers = users.filter((user) => {
-            return user.toLowerCase().includes(text.toLowerCase());
+      return user.toLowerCase().includes(text.toLowerCase())
-        });
+    })
-        setAllUsers(filteredUsers);
+    setAllUsers(filteredUsers)
-    }, []);
+  }, [])
 
   const handleShuffle = () => {
-        setAllUsers(shuffleArray(users));
+    setAllUsers(shuffleArray(users))
-    };
+  }
 
   const ListOfUsers = allUsers.map((user) => {
-        return <p key={user}>{user}</p>;
+    return <p key={user}>{user}</p>
-    });
+  })
   return (
     <div>
       <button onClick={handleShuffle}>Shuffle</button>
       <Search onChange={handleSearch} />
-            <div>
+      <div>{ListOfUsers}</div>
-                {ListOfUsers}
     </div>
-        </div>
+  )
-    );
 }

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

@@ -1,83 +1,112 @@
-import { FormEvent, useRef, useState } from "react";
+import { FormEvent, useRef, useState } from 'react'
-import useLocalStorage from "../../../hooks/useLocalStorage";
+import useLocalStorage from '../../../hooks/useLocalStorage'
 
 interface FormValues {
-    email: string;
+  email: string
-    password: string;
+  password: string
 }
 
 export default function RefExercise(): React.ReactElement {
-    console.log("RefExercise rendered");
+  console.log('RefExercise rendered')
 
-    const emailRef = useRef<HTMLInputElement>(null);
+  const emailRef = useRef<HTMLInputElement>(null)
-    const passwordRef = useRef<HTMLInputElement>(null);
+  const passwordRef = useRef<HTMLInputElement>(null)
-    const {setStoredValue, value: formDataValues} = useLocalStorage<FormValues>("formdata", {
+  const { setStoredValue, value: formDataValues } = useLocalStorage<FormValues>(
-        email: "",
+    'formdata',
-        password: ""
+    {
-    } );
+      email: '',
+      password: '',
+    }
+  )
 
   const handleSubmit = () => {
-        console.log("submit", {
+    console.log('submit', {
       email: emailRef.current?.value,
-            password: passwordRef.current?.value
+      password: passwordRef.current?.value,
-        });
+    })
     setStoredValue({
-            email: emailRef.current?.value || "",
+      email: emailRef.current?.value || '',
-            password: passwordRef.current?.value || ""
+      password: passwordRef.current?.value || '',
-        });
+    })
-        passwordRef.current?.focus();
+    passwordRef.current?.focus()
   }
 
   const [formData, setFormData] = useState({
-        strasse: "",
+    strasse: '',
-        city: ""
+    city: '',
-    });
+  })
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setFormData({
       ...formData,
-            [event.target.name]: event.target.value
+      [event.target.name]: event.target.value,
-        });
+    })
   }
 
   const handleChangeSubmit = () => {
-        const strasse = document.querySelector('input[name="strasse"]') as HTMLInputElement;
+    const strasse = document.querySelector(
-        const city = document.querySelector('input[name="city"]') as HTMLInputElement;
+      'input[name="strasse"]'
-        console.log("submit", {
+    ) as HTMLInputElement
+    const city = document.querySelector(
+      'input[name="city"]'
+    ) as HTMLInputElement
+    console.log('submit', {
       strasse: strasse.value,
-            city: city.value
+      city: city.value,
-        });
+    })
   }
 
   function handleFormSubmit(e: FormEvent) {
-        e.preventDefault();
+    e.preventDefault()
-        const data = new FormData(e.target as HTMLFormElement);
+    const data = new FormData(e.target as HTMLFormElement)
     console.log('handleFormSubmit', {
       email: data.get('email'),
-            password: data.get('password')
+      password: data.get('password'),
-        });
+    })
   }
   return (
-        <div style={{ display: "flex", flexDirection: "column", gap: "3rem" }}>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
-        <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
         <h3>values by ref</h3>
-            <input type="text" placeholder="email" ref={emailRef} defaultValue={formDataValues?.email}/>
+        <input
-            <input type="text" placeholder="password" ref={passwordRef} defaultValue={formDataValues?.password}/>
+          type="text"
+          placeholder="email"
+          ref={emailRef}
+          defaultValue={formDataValues?.email}
+        />
+        <input
+          type="text"
+          placeholder="password"
+          ref={passwordRef}
+          defaultValue={formDataValues?.password}
+        />
         <button onClick={handleSubmit}>Submit</button>
       </div>
-        <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
         <h3>change event (bad way, but validation is possible)</h3>
-            <input type="text" name="strasse" placeholder="Strasse" onChange={handleChange} />
+        <input
-            <input type="text" name="city" placeholder="Stadt" onChange={handleChange}/>
+          type="text"
+          name="strasse"
+          placeholder="Strasse"
+          onChange={handleChange}
+        />
+        <input
+          type="text"
+          name="city"
+          placeholder="Stadt"
+          onChange={handleChange}
+        />
         <button onClick={handleChangeSubmit}>submit</button>
-
       </div>
-        <form onSubmit={handleFormSubmit} style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+      <form
+        onSubmit={handleFormSubmit}
+        style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
+      >
         <h3>By Form Event</h3>
         <input type="text" name="email" placeholder="Email" />
         <input type="text" name="password" placeholder="password" />
         <button type="submit">Send</button>
       </form>
     </div>
-    );
+  )
 }

react-advanced-tag1/src/common/components/exercises/UserEffect.tsx

@@ -1,66 +1,97 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react'
 
 interface User {
-    id: number;
+  id: number
-    name: string;
+  name: string
-    email: string;
+  email: string
-    website: string;
+  website: string
 }
 
 export default function UserEffect() {
-    const [user, setUser] = useState<User>();
+  const [user, setUser] = useState<User>()
-    const [userId, setUserId] = useState<number>(0);
+  const [userId, setUserId] = useState<number>(0)
-    const [loading, setLoading] = useState<boolean>(false);
+  const [loading, setLoading] = useState<boolean>(false)
 
   useEffect(() => {
-        console.log("UserEffect mounted");
+    console.log('UserEffect mounted')
 
     if (userId === 0) {
-            return;
+      return
     }
 
-        const start = performance.now(); // Start measuring performance
+    const start = performance.now() // Start measuring performance
 
-        setLoading(true);
+    setLoading(true)
 
     // Using AbortController to cancel the fetch request if the component unmounts
     // or if the userId changes before the fetch completes
-        const controller = new AbortController();
+    const controller = new AbortController()
-        const signal = controller.signal;
+    const signal = controller.signal
 
-        fetch(`https://jsonplaceholder.typicode.com/users/${userId}`, {signal: signal}).then(response => {
+    fetch(`https://jsonplaceholder.typicode.com/users/${userId}`, {
+      signal: signal,
+    })
+      .then((response) => {
         if (!response.ok) {
-                throw new Error("Network response was not ok");
+          throw new Error('Network response was not ok')
         }
-            return response.json();
+        return response.json()
-        }).then(data => {
+      })
-            setUser(data);
+      .then((data) => {
-            const end = performance.now(); // End measuring performance
+        setUser(data)
-            const timeTaken = end - start; // Calculate the time taken
+        const end = performance.now() // End measuring performance
-            console.log(`Fetch completed in ${Math.round(timeTaken)} milliseconds`);
+        const timeTaken = end - start // Calculate the time taken
-            setLoading(false);
+        console.log(`Fetch completed in ${Math.round(timeTaken)} milliseconds`)
-        }).catch(error => {
+        setLoading(false)
-            console.error("There was a problem with the fetch operation:", error);
+      })
-        });
+      .catch((error) => {
+        console.error('There was a problem with the fetch operation:', error)
+      })
     return () => {
-            console.log("UserEffect unmounted");
+      console.log('UserEffect unmounted')
       // Cleanup function to abort the fetch request if the component unmounts
       // or if the userId changes before the fetch completes
-            controller.abort('Fetch aborted');
+      controller.abort('Fetch aborted')
     }
-    }, [userId]);
+  }, [userId])
 
   return (
     <section>
       <h2>users Effect Exercise</h2>
 
       {userId === 0 && <p>Please select a user</p>}
-            {loading || userId === 0 ? <p>Loading...</p> : <p>[{user?.id}] {user?.name}: {user?.website}</p>}
+      {loading || userId === 0 ? (
+        <p>Loading...</p>
+      ) : (
+        <p>
+          [{user?.id}] {user?.name}: {user?.website}
+        </p>
+      )}
 
-            <button onClick={() => setUserId(1)} style={{padding: 10, border: '1px solid gray'}}>User 1</button>
+      <button
-            <button onClick={() => setUserId(2)} style={{padding: 10, border: '1px solid gray'}}>User 2</button>
+        onClick={() => setUserId(1)}
-            <button onClick={() => setUserId(3)} style={{padding: 10, border: '1px solid gray'}}>User 3</button>
+        style={{ padding: 10, border: '1px solid gray' }}
-            <button onClick={() => setUserId(4)} style={{padding: 10, border: '1px solid gray'}}>User 4</button>
+      >
+        User 1
+      </button>
+      <button
+        onClick={() => setUserId(2)}
+        style={{ padding: 10, border: '1px solid gray' }}
+      >
+        User 2
+      </button>
+      <button
+        onClick={() => setUserId(3)}
+        style={{ padding: 10, border: '1px solid gray' }}
+      >
+        User 3
+      </button>
+      <button
+        onClick={() => setUserId(4)}
+        style={{ padding: 10, border: '1px solid gray' }}
+      >
+        User 4
+      </button>
     </section>
   )
 }

react-advanced-tag1/src/common/components/exercises/UserOverview.tsx

@@ -1,33 +1,45 @@
-import { useFetch } from "../../hooks/useFetch";
+import { useFetch } from '../../hooks/useFetch'
-import { useMediaQuery } from "../../hooks/useMediaQuery";
+import { useMediaQuery } from '../../hooks/useMediaQuery'
 
 export function UserOverview() {
-    const {data, loading, error} = useFetch("https://jsonplaceholder.typicode.com/users");
+  const { data, loading, error } = useFetch(
+    'https://jsonplaceholder.typicode.com/users'
+  )
 
-    const isMobile = useMediaQuery('(max-width: 600px)');
+  const isMobile = useMediaQuery('(max-width: 600px)')
 
-    console.log("isMobile", isMobile);
+  console.log('isMobile', isMobile)
 
   if (error) {
-        return <p>Error: {error}</p>;
+    return <p>Error: {error}</p>
   }
   if (loading) {
-        return <p>Loading...</p>;
+    return <p>Loading...</p>
   }
   if (!data) {
-        return <p>No data available</p>;
+    return <p>No data available</p>
   }
   return (
     <div>
       <h2>User Overview</h2>
       <ul>
-                {data.map((user: { id: number; name: string; email: string; website: string }) => (
+        {data.map(
+          (user: {
+            id: number
+            name: string
+            email: string
+            website: string
+          }) => (
             <li key={user.id}>
-                        <strong>{user.name}</strong> <div style={{display: isMobile ? 'none' : 'block' }}>({user.email}) - {user.website}</div>
+              <strong>{user.name}</strong>{' '}
+              <div style={{ display: isMobile ? 'none' : 'block' }}>
+                ({user.email}) - {user.website}
+              </div>
             </li>
-                ))}
+          )
+        )}
       </ul>
       <p>Total Users: {data.length}</p>
     </div>
-    );
+  )
 }

react-advanced-tag1/src/common/components/globals/Heading.tsx

@@ -1,8 +1,8 @@
-export default function Heading({title = "Hallo Teilnehmer"}: {title?: string}): React.ReactElement {
+export default function Heading({
-    console.log("Heading rendered");
+  title = 'Hallo Teilnehmer',
-    return (
+}: {
-        <h2 >
+  title?: string
-            {title}
+}): React.ReactElement {
-        </h2>
+  console.log('Heading rendered')
-    );
+  return <h2>{title}</h2>
 }

react-advanced-tag1/src/common/hooks/useFetch.ts

@@ -1,16 +1,16 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react'
 
 interface User {
-    id: number;
+  id: number
-    name: string;
+  name: string
-    email: string;
+  email: string
-    website: string;
+  website: string
 }
 
 export function useFetch(url: string) {
-    const [data, setData] = useState<User[] | null>(null);
+  const [data, setData] = useState<User[] | null>(null)
-    const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(true)
-    const [error, setError] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null)
 
   // alternativ
   // const [fetchValues, setFetchValues] = useState({
@@ -22,28 +22,23 @@ export function useFetch(url: string) {
   useEffect(() => {
     async function fetchData() {
       try {
-                const response = await fetch(url);
+        const response = await fetch(url)
         if (!response.ok) {
-                    setError("Network response was not ok");
+          setError('Network response was not ok')
-                    throw new Error("Network response was not ok");
+          throw new Error('Network response was not ok')
         }
-                const data = await response.json();
+        const data = await response.json()
-                setData(data);
+        setData(data)
-                setError(null);
+        setError(null)
-
       } catch (error) {
-                console.error("Error fetching data:", error);
+        console.error('Error fetching data:', error)
-                setError("Error fetching data");
+        setError('Error fetching data')
-            }
+      } finally {
-            finally {
+        setLoading(false)
-                setLoading(false);
       }
     }
-        fetchData();
+    fetchData()
-        
+  }, [url])
-
-    }, [url]);
-
-    return { data, loading, error };
 
+  return { data, loading, error }
 }

react-advanced-tag1/src/common/hooks/useLocalStorage.ts

@@ -1,39 +1,43 @@
-import { useState } from "react";
+import { useState } from 'react'
 
-export default function useLocalStorage<T>(key: string, initialValue: T | null) {
+export default function useLocalStorage<T>(
+  key: string,
+  initialValue: T | null
+) {
   const [value, setValue] = useState<T | null>(() => {
     try {
-            if (typeof window === "undefined") {
+      if (typeof window === 'undefined') {
-                return initialValue;
+        return initialValue
       }
-            const storedValue = localStorage.getItem(key);
+      const storedValue = localStorage.getItem(key)
-            return storedValue ? JSON.parse(storedValue) : initialValue;
+      return storedValue ? JSON.parse(storedValue) : initialValue
     } catch (error) {
-            console.error("Error reading from localStorage", error);
+      console.error('Error reading from localStorage', error)
-            return initialValue;
+      return initialValue
     }
-    });
+  })
   const setStoredValue = (newValue: T) => {
     try {
-            const valueToStore = newValue instanceof Function ? newValue(value) : newValue;
+      const valueToStore =
-            setValue(valueToStore);
+        newValue instanceof Function ? newValue(value) : newValue
-            if (typeof window !== "undefined") {
+      setValue(valueToStore)
-                localStorage.setItem(key, JSON.stringify(valueToStore));
+      if (typeof window !== 'undefined') {
+        localStorage.setItem(key, JSON.stringify(valueToStore))
       }
     } catch (error) {
-            console.error("Error writing to localStorage", error);
+      console.error('Error writing to localStorage', error)
     }
   }
 
   const removeStoredValue = () => {
     try {
-            if (typeof window !== "undefined") {
+      if (typeof window !== 'undefined') {
-                localStorage.removeItem(key);
+        localStorage.removeItem(key)
       }
-            setValue(null);
+      setValue(null)
     } catch (error) {
-            console.error("Error removing from localStorage", error);
+      console.error('Error removing from localStorage', error)
     }
   }
-    return {value, setStoredValue, removeStoredValue};
+  return { value, setStoredValue, removeStoredValue }
 }

react-advanced-tag1/src/common/hooks/useMediaQuery.ts

@@ -1,5 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react'
-
 
 /**
  * Custom hook to check if a media query matches the current viewport.
@@ -7,25 +6,25 @@ import { useEffect, useState } from "react";
  * @returns A boolean indicating whether the media query matches.
  */
 export function useMediaQuery(query: string) {
-    const [matches, setMatches] = useState<boolean>(false);
+  const [matches, setMatches] = useState<boolean>(false)
 
   useEffect(() => {
-        const mediaQueryList = window.matchMedia(query);
+    const mediaQueryList = window.matchMedia(query)
     const handleChange = (event: MediaQueryListEvent) => {
-            setMatches(event.matches);
+      setMatches(event.matches)
-        };
+    }
 
     // Set the initial value
-        setMatches(mediaQueryList.matches);
+    setMatches(mediaQueryList.matches)
 
     // Add event listener
-        mediaQueryList.addEventListener('change', handleChange);
+    mediaQueryList.addEventListener('change', handleChange)
 
     // Cleanup function to remove the event listener
     return () => {
-            mediaQueryList.removeEventListener('change', handleChange);
+      mediaQueryList.removeEventListener('change', handleChange)
-        };
+    }
-    }, [query]);
+  }, [query])
-
+
-    return matches;
+  return matches
 }

react-advanced-tag1/src/common/stores/counter-store.ts

@@ -1,15 +1,15 @@
-import { create } from "zustand";
+import { create } from 'zustand'
 
 interface CounterState {
-  count: number;
+  count: number
-  increment: () => void;
+  increment: () => void
-  decrement: () => void;
+  decrement: () => void
 }
 
 const useCounterStore = create<CounterState>((set) => ({
   count: 0,
   increment: () => set((state) => ({ count: state.count + 1 })),
   decrement: () => set((state) => ({ count: state.count - 1 })),
-}));
+}))
 
-export default useCounterStore;
+export default useCounterStore

react-advanced-tag1/src/common/utils/shuffle.test.ts

@@ -1,22 +1,22 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect } from 'vitest'
-import { shuffleArray, users } from './shuffle';
+import { shuffleArray, users } from './shuffle'
 
 describe('shuffleArray', () => {
   it('should shuffle the array and return a new order', () => {
-        const originalArray = [...users];
+    const originalArray = [...users]
-        const shuffledArray = shuffleArray([...users]);
+    const shuffledArray = shuffleArray([...users])
 
-        expect(shuffledArray).not.toEqual(originalArray); // Ensure the order is different
+    expect(shuffledArray).not.toEqual(originalArray) // Ensure the order is different
-        expect(shuffledArray.sort()).toEqual(originalArray.sort()); // Ensure all elements are still present
+    expect(shuffledArray.sort()).toEqual(originalArray.sort()) // Ensure all elements are still present
-    });
+  })
 
   it('should return an empty array when input is empty', () => {
-        const result = shuffleArray([]);
+    const result = shuffleArray([])
-        expect(result).toEqual([]);
+    expect(result).toEqual([])
-    });
+  })
 
   it('should handle arrays with one element', () => {
-        const result = shuffleArray(['onlyElement']);
+    const result = shuffleArray(['onlyElement'])
-        expect(result).toEqual(['onlyElement']);
+    expect(result).toEqual(['onlyElement'])
-    });
+  })
-});
+})

react-advanced-tag1/src/common/utils/shuffle.ts

@@ -1,8 +1,7 @@
 export function shuffleArray(array: string[]) {
   for (let i = array.length - 1; i > 0; i--) {
- 
+    const j = Math.floor(Math.random() * (i + 1))
-        const j = Math.floor(Math.random()* (i +1));
+    ;[array[i], array[j]] = [array[j], array[i]]
-        [array[i], array[j]] = [array[j], array[i]];
   }
 
   return [...array]

react-advanced-tag1/src/layouts/MainLayout.css

@@ -28,7 +28,9 @@ header nav a {
   text-decoration: none;
   font-weight: bold;
   padding: 0.5rem 1rem;
-    transition: background-color 0.3s, color 0.3s;
+  transition:
+    background-color 0.3s,
+    color 0.3s;
 }
 
 header nav a:hover {
@@ -38,8 +40,6 @@ header nav a.active {
   text-decoration: underline;
 }
 
-
-
 footer {
   background-color: #1a1a1a;
   color: #ffffff;
@@ -47,7 +47,6 @@ footer {
   text-align: center;
 }
 
-
 .content {
   max-width: 1280px;
   margin: 0 auto;

react-advanced-tag1/src/layouts/MainLayout.tsx

@@ -1,20 +1,22 @@
-import { useState } from "react";
+import { useState } from 'react'
 import './MainLayout.css'
-import Footer from "../common/components/Footer";
+import Footer from '../common/components/Footer'
-import Header from "../common/components/Header";
+import Header from '../common/components/Header'
 
-export default function MainLayout({children}: {children: React.ReactNode | React.ReactElement | React.ReactElement[]}): React.ReactElement {
+export default function MainLayout({
-  
+  children,
-
+}: {
-  const [clicked, setClicked] = useState(false);
+  children: React.ReactNode | React.ReactElement | React.ReactElement[]
+}): React.ReactElement {
+  const [clicked, setClicked] = useState(false)
 
   function handleClick() {
-    setClicked(!clicked);
+    setClicked(!clicked)
 
-    console.log("clicked", clicked);
+    console.log('clicked', clicked)
   }
 
-  console.log("MainLayout rendered", clicked);
+  console.log('MainLayout rendered', clicked)
   return (
     <>
       <Header />
@@ -27,5 +29,5 @@ export default function MainLayout({children}: {children: React.ReactNode | Reac
 
       <Footer />
     </>
-  );
+  )
 }

react-advanced-tag1/src/main.tsx

@@ -9,5 +9,5 @@ createRoot(document.getElementById('root')!).render(
     <BrowserRouter>
       <App />
     </BrowserRouter>
-  </StrictMode>,
+  </StrictMode>
 )

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

@@ -1,11 +1,11 @@
-import ComponentWrapper from "../common/components/ComponentWrapper/ComponentWrapper";
+import ComponentWrapper from '../common/components/ComponentWrapper/ComponentWrapper'
 
 export default function ComponentWrapperPage() {
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
-        <ComponentWrapper title='Komponenten Wrapper Test'>
+      <ComponentWrapper title="Komponenten Wrapper Test">
         <h1>Hallo</h1>
       </ComponentWrapper>
     </div>
-    );
+  )
 }

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

@@ -1,6 +1,5 @@
-import EffectExercises from "../common/components/exercises/EffectExercises";
+import EffectExercises from '../common/components/exercises/EffectExercises'
-import Heading from "../common/components/globals/Heading";
+import Heading from '../common/components/globals/Heading'
-
 
 export default function EffectExercisesPage() {
   return (
@@ -8,5 +7,5 @@ export default function EffectExercisesPage() {
       <Heading title="Effekte" />
       <EffectExercises />
     </div>
-    );
+  )
 }

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

@@ -1,5 +1,5 @@
-import RefExercise from "../common/components/exercises/RefExercise";
+import RefExercise from '../common/components/exercises/RefExercise'
-import Heading from "../common/components/globals/Heading";
+import Heading from '../common/components/globals/Heading'
 
 export default function FormsPage() {
   return (
@@ -7,5 +7,5 @@ export default function FormsPage() {
       <Heading title="Formulare" />
       <RefExercise />
     </div>
-    );
+  )
 }

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

@@ -1,6 +1,5 @@
-import ComponentWrapper from "../common/components/ComponentWrapper/ComponentWrapper";
+import ComponentWrapper from '../common/components/ComponentWrapper/ComponentWrapper'
-import DogImagesWithLoader from "../common/components/exercises/HocExercise/DogImages";
+import DogImagesWithLoader from '../common/components/exercises/HocExercise/DogImages'
-
 
 export function HocPage() {
   return (

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

@@ -1,4 +1,4 @@
-import Heading from "../common/components/globals/Heading";
+import Heading from '../common/components/globals/Heading'
 
 export default function HomePage() {
   return (
@@ -6,5 +6,5 @@ export default function HomePage() {
       <Heading title="Willkommen" />
       <p>Willkommen auf der Startseite!</p>
     </>
-    );
+  )
 }

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

@@ -1,5 +1,5 @@
-import MemoCallback from "../common/components/exercises/MemoCallback";
+import MemoCallback from '../common/components/exercises/MemoCallback'
-import Heading from "../common/components/globals/Heading";
+import Heading from '../common/components/globals/Heading'
 
 export default function MemoCallbackPage() {
   return (

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

@@ -1,14 +1,18 @@
-import { useState } from "react";
+import { useState } from 'react'
-import { createPortal } from "react-dom";
+import { createPortal } from 'react-dom'
-import ComponentWrapper from "../common/components/ComponentWrapper/ComponentWrapper";
+import ComponentWrapper from '../common/components/ComponentWrapper/ComponentWrapper'
-import Modal from "../common/components/Modal";
+import Modal from '../common/components/Modal'
 
 export default function ModalPage() {
-  const [modalOpen, setModalOpen] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false)
   return (
-      <ComponentWrapper title='Modal Test'>
+    <ComponentWrapper title="Modal Test">
       <button onClick={() => setModalOpen(!modalOpen)}>Toggle Modal</button>
-        {modalOpen && createPortal(<Modal onClose={() => setModalOpen(false)}/>,document.getElementById("modal") as HTMLElement)}
+      {modalOpen &&
+        createPortal(
+          <Modal onClose={() => setModalOpen(false)} />,
+          document.getElementById('modal') as HTMLElement
+        )}
     </ComponentWrapper>
-    );
+  )
 }

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

@@ -1,6 +1,6 @@
-import UserEffect from "../common/components/exercises/UserEffect";
+import UserEffect from '../common/components/exercises/UserEffect'
-import { UserOverview } from "../common/components/exercises/UserOverview";
+import { UserOverview } from '../common/components/exercises/UserOverview'
-import Heading from "../common/components/globals/Heading";
+import Heading from '../common/components/globals/Heading'
 
 export default function UsersPage() {
   return (
@@ -9,5 +9,5 @@ export default function UsersPage() {
       <UserEffect />
       <UserOverview />
     </div>
-    );
+  )
 }

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

@@ -1,18 +1,18 @@
-import ComponentWrapper from "../common/components/ComponentWrapper/ComponentWrapper";
+import ComponentWrapper from '../common/components/ComponentWrapper/ComponentWrapper'
-import useCounterStore from "../common/stores/counter-store";
+import useCounterStore from '../common/stores/counter-store'
 
 export default function ZustandCounterPage() {
-  const {decrement, increment} = useCounterStore();
+  const { decrement, increment } = useCounterStore()
   return (
-      <ComponentWrapper title='Zustand Counter'>
+    <ComponentWrapper title="Zustand Counter">
       <button onClick={increment}>Increment</button>
       <button onClick={decrement}>Decrement</button>
       <CounterValue />
     </ComponentWrapper>
-  );
+  )
 }
 
 function CounterValue() {
-  const count = useCounterStore((state) => state.count);
+  const count = useCounterStore((state) => state.count)
-  return <p>Count: {count}</p>;
+  return <p>Count: {count}</p>
 }