06_react/unterricht/tag38/02_react-api-with-hooks/src/components/examples/ExampleUseContext.jsx

@@ -0,0 +1,18 @@
+import { useContext } from 'react';
+import ThemeContext from './theme-switcher/ThemeContext';
+
+const ExampleUseContext = (props) => {
+  // const { } = props;
+
+  const theme = useContext(ThemeContext);
+
+  return (
+    <div className={`example-use-context text-bg-${theme} p-3 my-1`}>
+      <h4>useContext</h4>
+      <p>
+        The theme of this component is: <strong>{theme}</strong>
+      </p>
+    </div>
+  );
+};
+export default ExampleUseContext;

06_react/unterricht/tag38/02_react-api-with-hooks/src/components/examples/ExampleUseId.jsx

@@ -0,0 +1,21 @@
+import { useId } from 'react';
+// import { v4 as uid} from 'uuid';
+const ExampleUseId = (props) => {
+  // const { } = props;
+
+  const id = useId(); // _r_1
+  // const id = uid(); // von uuid  ⇨ 'b18794e8-5d0d-417c-b361-ba38e78411b4'
+
+  return (
+    <div className="example-use-id">
+      <p>
+        <strong>ID: {id}</strong>
+      </p>
+      <div className="mb-3">
+        <label htmlFor={`input-date-${id}`}>Datum:</label>
+        <input type="date" name="date" id={`input-date-${id}`} className="form-control input-date w-25" />
+      </div>
+    </div>
+  );
+};
+export default ExampleUseId;

06_react/unterricht/tag38/02_react-api-with-hooks/src/components/examples/ExampleUseReducer.jsx

@@ -0,0 +1,77 @@
+import { useReducer } from 'react';
+import { FaPlus, FaMinus } from 'react-icons/fa6';
+
+const initialState = {
+  counter: 0,
+  // more props....
+};
+
+// Reducer Funktion verwaltet das state Objekt. Über diese Funktion lässt sich das "komplexere" state-Objekt gezielt verändern.
+function reducer(state, action) {
+  // action Objekt hat immer folgende Eigenschaften: {type: 'ACTION_NAME', payload: changeValue }
+  const { type, payload = 1 } = action;
+
+  switch (type) {
+    case 'INCREASE':
+      return { ...state, counter: state.counter + 1 };
+
+    case 'DECREASE':
+      return { ...state, counter: state.counter - 1 };
+    case 'DOUBLE':
+      return { ...state, counter: state.counter * 2 };
+    case 'INC_VALUE':
+      return { ...state, counter: state.counter + payload };
+    default:
+      console.warn('Action Type not found');
+      return state;
+  }
+}
+
+const ExampleUseReducer = (props) => {
+  // const { } = props;
+
+  // Hooks - Top Level
+  // const [counter, setCounter] = useState(0);
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  const handleClick = (e) => {
+    const btn = e.currentTarget;
+    const label = btn.ariaLabel; // btn.getAttribute('aria-label')
+    switch (label.toLowerCase()) {
+      case 'increase':
+        dispatch({ type: 'INCREASE' });
+        break;
+      case 'decrease':
+        dispatch({ type: 'DECREASE' });
+        break;
+      case 'double':
+        dispatch({ type: 'DOUBLE' });
+        break;
+      default: //nothing
+    }
+  };
+
+  const handleClickIncValue = (e) => {
+    dispatch({ type: 'INC_VALUE', payload: 5 });
+  };
+
+  return (
+    <div className="example-use-state">
+      Counter: {state.counter}
+      <button className="btn btn-dark button-inc mx-1" aria-label="Increase" onClick={handleClick}>
+        <FaPlus />
+      </button>
+      <button className="btn btn-dark button-dec mx-1" aria-label="Decrease" onClick={handleClick}>
+        <FaMinus />
+      </button>
+      <button className="btn btn-dark button-double mx-1" aria-label="Double" onClick={handleClick}>
+        <FaPlus />
+        <FaPlus />
+      </button>
+      <button className="btn btn-dark button-double mx-1" aria-label="Increase by value" onClick={handleClickIncValue}>
+        <FaPlus /> 5
+      </button>
+    </div>
+  );
+};
+export default ExampleUseReducer;

06_react/unterricht/tag38/02_react-api-with-hooks/src/components/examples/ExampleUseState.jsx

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import { FaPlus, FaMinus } from 'react-icons/fa6';
+
+const ExampleUseState = (props) => {
+  // const { } = props;
+  const [counter, setCounter] = useState(0);
+
+  const handleClick = (e) => {
+    const btn = e.currentTarget;
+    const label = btn.ariaLabel; // btn.getAttribute('aria-label')
+    switch (label.toLowerCase()) {
+      case 'increase':
+        setCounter(counter + 1);
+        break;
+      case 'decrease':
+        setCounter((prevState) => {
+          return prevState - 1;
+        });
+        break;
+      default: //nothing
+    }
+  };
+
+  return (
+    <div className="example-use-state">
+      Counter: {counter}
+      <button className="btn btn-dark button-inc mx-1" aria-label="Increase" onClick={handleClick}>
+        <FaPlus />
+      </button>
+      <button className="btn btn-dark button-dec mx-1" aria-label="Decrease" onClick={handleClick}>
+        <FaMinus />
+      </button>
+    </div>
+  );
+};
+export default ExampleUseState;

06_react/unterricht/tag38/02_react-api-with-hooks/src/components/examples/theme-switcher/ThemeContext.jsx

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+export const THEME_DEFAULT_VALUE = 'light';
+
+const ThemeContext = createContext(THEME_DEFAULT_VALUE);
+// createContext -> JSX-Element mit value Attribut
+// <ThemeContext.Provider value="light">...</ThemeContext>
+export default ThemeContext;

06_react/unterricht/tag38/02_react-api-with-hooks/src/components/examples/theme-switcher/ThemeProvider.jsx

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+import ThemeContext, { THEME_DEFAULT_VALUE } from './ThemeContext';
+
+const ThemeProvider = (props) => {
+  const { children } = props;
+
+  console.log(ThemeContext._currentValue); // 'light' <- _currentValue beinhaltet initialWert. Soll aber in production Umgebung nicht verwendet werden, da kein offizieller Standard.
+
+  const [theme, setTheme] = useState(THEME_DEFAULT_VALUE);
+
+  const handleToggleTheme = (e) => {
+    console.log('toggle theme');
+    setTheme((prevState) => (prevState === 'light' ? 'dark' : 'light'));
+  };
+
+  return (
+    <ThemeContext.Provider value={theme}>
+      <button className="btn btn-dark button-theme-toggle my-2" onClick={handleToggleTheme}>
+        Toggle Theme
+      </button>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+export default ThemeProvider;