From 3e1e4cfd9ea69eb191142c16b175970b123ae321 Mon Sep 17 00:00:00 2001
From: njord <tk@tomaskrejci.com>
Date: Mon, 29 May 2023 21:04:28 +0200
Subject: [PATCH] load data

---
 src/App.js      | 11 +++++++++--
 src/Posts.js    | 19 +++++++++++++++++++
 src/Products.js | 12 ++++++++++++
 src/Users.js    | 19 +++++++++++++++++++
 4 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 src/Posts.js
 create mode 100644 src/Products.js
 create mode 100644 src/Users.js

diff --git a/src/App.js b/src/App.js
index 9858852..ec839a6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,6 +10,10 @@ import { Animal } from "./Animal";
 import { useState } from "react";
 //import { Button } from "./Button";
 //import { Button, ButtonGroup } from "@chakra-ui/react";
+import React, { useEffect } from "react";
+import { Products } from "./Products";
+import { Users } from "./Users";
+import { Posts } from "./Posts";
 
 function App() {
   //const animal = [];
@@ -36,7 +40,7 @@ function App() {
     //setAnimal(["Lev", "Lachtan", "Varan", "Slon"]);
     if (newAnimal != "") {
       setAnimal([...animal, newAnimal]);
-      console.log("pridal jsi...");
+      console.log("pridal jsi " + newAnimal);
       setNewAnimal("");
     } else console.log("prazdne pole...");
   };
@@ -49,7 +53,7 @@ function App() {
   const handleDeleteAnimal = () => {
     //emptyZoo = true;
     setAnimal([]);
-    console.log("smazal jsi...");
+    console.log("smazal jsi vse");
   };
 
   return (
@@ -71,6 +75,9 @@ function App() {
       {/* <ChakraProvider>
         <Button colorScheme="teal">Chakra button</Button>
       </ChakraProvider> */}
+      <Products></Products>
+      <Users></Users>
+      <Posts></Posts>
     </>
   );
 }
diff --git a/src/Posts.js b/src/Posts.js
new file mode 100644
index 0000000..ee92ebf
--- /dev/null
+++ b/src/Posts.js
@@ -0,0 +1,19 @@
+import React, { useEffect, useState } from "react";
+
+export const Posts = () => {
+  const [posts, setPosts] = useState([]);
+  useEffect(() => {
+    fetch("https://jsonplaceholder.typicode.com/posts")
+      .then((response) => response.json())
+      .then((json) => setPosts(json));
+  }, []);
+  return (
+    <>
+      <ul>
+        {posts.map((post) => (
+          <li key={post.id}>{post.title}</li>
+        ))}
+      </ul>
+    </>
+  );
+};
diff --git a/src/Products.js b/src/Products.js
new file mode 100644
index 0000000..d9bd60f
--- /dev/null
+++ b/src/Products.js
@@ -0,0 +1,12 @@
+import React, { useEffect } from "react";
+import { useState } from "react";
+
+export const Products = () => {
+  const [products, setProducts] = useState([]);
+  useEffect(() => {
+    document.title = "Products";
+    console.log("fetching products");
+    setProducts(["test", "test2"]);
+  }, []);
+  return <div>{products}</div>;
+};
diff --git a/src/Users.js b/src/Users.js
new file mode 100644
index 0000000..f5d6f7d
--- /dev/null
+++ b/src/Users.js
@@ -0,0 +1,19 @@
+import React, { useEffect, useState } from "react";
+
+export const Users = () => {
+  const [users, setUsers] = useState([]);
+  useEffect(() => {
+    fetch("https://jsonplaceholder.typicode.com/users")
+      .then((response) => response.json())
+      .then((json) => setUsers(json));
+  }, []);
+  return (
+    <>
+      <ul>
+        {users.map((user) => (
+          <li key={user.id}>{user.name}</li>
+        ))}
+      </ul>
+    </>
+  );
+};