From f941f6fc20b09ba2b08f2c0b5708f62062fe0dd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomasz=20P=C3=B3=C5=82grabia?= <tomasz@polgrabia.me>
Date: Fri, 27 Dec 2024 11:54:16 +0100
Subject: [PATCH] Added context for react.

---
 2024/12/react_demo1/src/App.jsx       | 73 +++++++++++++++------------
 2024/12/react_demo1/src/Item.jsx      |  7 ++-
 2024/12/react_demo1/src/appInfoCtx.js |  3 ++
 3 files changed, 49 insertions(+), 34 deletions(-)
 create mode 100644 2024/12/react_demo1/src/appInfoCtx.js

diff --git a/2024/12/react_demo1/src/App.jsx b/2024/12/react_demo1/src/App.jsx
index c7154f1..540615c 100644
--- a/2024/12/react_demo1/src/App.jsx
+++ b/2024/12/react_demo1/src/App.jsx
@@ -4,10 +4,11 @@ import viteLogo from '/vite.svg'
 import './App.css'
 import styles from './App.module.scss';
 import Item from './Item.jsx';
+import AppInfoCtx from "./appInfoCtx.js";
 
 function App() {
-  const [count, setCount] = useState(0);
-  const [notification, setNotification] = useState("");
+    const [count, setCount] = useState(0);
+    const [notification, setNotification] = useState("");
 
     useEffect(() => {
         console.log("Executed on mount")
@@ -16,41 +17,49 @@ function App() {
         }
     }, []);
 
-  let items = [];
-  for (let i = 0; i < count; i++) {
-      items.push(
-          <Item key={i} pos={i} callback={setNotification} />
-      );
-  }
+    let items = [];
+    for (let i = 0; i < count; i++) {
+        items.push(
+            <Item key={i} pos={i} callback={setNotification}/>
+        );
+    }
 
     return (
         <>
             <h3>{notification}</h3>
             <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <ul>
-            {items}
-        </ul>
-        <button className={styles.item} onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
+                <a href="https://vite.dev" target="_blank">
+                    <img src={viteLogo} className="logo" alt="Vite logo"/>
+                </a>
+                <a href="https://react.dev" target="_blank">
+                    <img src={reactLogo} className="logo react" alt="React logo"/>
+                </a>
+            </div>
+            <h1>Vite + React</h1>
+            <div className="card">
+                <AppInfoCtx.Provider value="app-info-1">
+                    <ul>
+                        {items}
+                    </ul>
+                </AppInfoCtx.Provider>
+
+                <AppInfoCtx.Provider value="app-info-2">
+                    <ul>
+                        {items}
+                    </ul>
+                </AppInfoCtx.Provider>
+                <button className={styles.item} onClick={() => setCount((count) => count + 1)}>
+                    count is {count}
+                </button>
+                <p>
+                    Edit <code>src/App.jsx</code> and save to test HMR
+                </p>
+            </div>
+            <p className="read-the-docs">
+                Click on the Vite and React logos to learn more
+            </p>
+        </>
+    )
 }
 
 export default App
diff --git a/2024/12/react_demo1/src/Item.jsx b/2024/12/react_demo1/src/Item.jsx
index 6b056da..3d22532 100644
--- a/2024/12/react_demo1/src/Item.jsx
+++ b/2024/12/react_demo1/src/Item.jsx
@@ -1,9 +1,11 @@
 import "bulma";
-import {useState} from "react";
+import {useContext, useState} from "react";
 import styles from './Item.module.css';
+import appInfoCtx from "./appInfoCtx.js";
 
 export default function Item({pos, callback}) {
     let [loading, setLoading] = useState(false);
+    const appInfo = useContext(appInfoCtx);
     return (<li className={'my-4 ' + styles.item}>
         <div>
             <div style={{"display": "inline-block"}} className="box m-4"><span>Item {pos}</span></div>
@@ -13,9 +15,10 @@ export default function Item({pos, callback}) {
                     callback('Clicked ' + pos);
                     setLoading(false);
                 }, 1000)
-            }}>Click me
+            }}>Click me test 1 + 2 + 3
             </button>
             <button className="delete"/>
+            <span>App info: {appInfo}</span>
         </div>
     </li>);
 }
\ No newline at end of file
diff --git a/2024/12/react_demo1/src/appInfoCtx.js b/2024/12/react_demo1/src/appInfoCtx.js
new file mode 100644
index 0000000..56b0571
--- /dev/null
+++ b/2024/12/react_demo1/src/appInfoCtx.js
@@ -0,0 +1,3 @@
+import {createContext} from "react";
+
+export default createContext("");
\ No newline at end of file