06_react/unterricht/tag38/02_react-api-with-hooks/src/components/lists/ListTodo.jsx

@@ -1,14 +1,50 @@
+import { useEffect, useState } from 'react';
+
 const ListTodo = (props) => {
   // const { } = props;
 
+  const [todos, setTodos] = useState([]);
+
+  useEffect(() => {
+    fetch('https://dummyjson.com/todos/random/6')
+      .then((res) => {
+        if (!res.ok) {
+          throw new Error('HTTP-Request went wrong');
+        }
+        return res.json(); // -> Promise HTTP-Response->Body
+      })
+      .then((data) => {
+        setTodos(data);
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+
+    return () => {
+      // cleanup
+    };
+  }, []);
+
   return (
     <ul className="list-todo list-group list-group-flush">
-      <li className="list-group-item list-item-todo">
-        <input type="checkbox" name="todo-cb" id="input-todo-1" className="form-check-input" checked={true} />
-        <label htmlFor="input-todo-1" className="form-check-label">
-          Gassi Gehen
-        </label>
-      </li>
+      {todos.length > 0 &&
+        todos.map(({ completed, id, todo }, idx) => (
+          <li className="list-group-item list-item-todo" key={`list-item-todo-${idx}`}>
+            <div className="form-check">
+              <input
+                type="checkbox"
+                name="todo-cb"
+                id={`input-todo-${id}`}
+                className="form-check-input"
+                checked={completed}
+                readOnly={true}
+              />
+              <label htmlFor={`input-todo-${id}`} className="form-check-label">
+                {todo}
+              </label>
+            </div>
+          </li>
+        ))}
     </ul>
   );
 };

06_react/unterricht/tag38/02_react-api-with-hooks/src/components/lists/ListUser.jsx

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+
+const ListUser = (props) => {
+  // const { } = props;
+
+  const [users, setUsers] = useState([]);
+
+  useEffect(() => {
+    const fetchUsers = async () => {
+      try {
+        const { data } = await axios.get('https://dummyjson.com/users?limit=5&select=firstName,lastName,age,email');
+
+        if (!data) throw Error('Something went wrong');
+        setUsers(data.users);
+      } catch (error) {
+        console.error(error);
+        throw Error(`Error: ${error}`);
+      }
+    };
+
+    fetchUsers();
+
+    // axios
+    //   .get('https://dummyjson.com/users?limit=10&select=firstName,lastName,age,email')
+    //   .then(({ data }) => {
+    //     setUsers(data.users);
+    //   })
+    //   .catch((err) => {
+    //     console.error(err);
+    //   });
+
+    return () => {};
+  }, []);
+
+  return (
+    <ul className="list-user list-group">
+      {users.length > 0 &&
+        users.map(({ firstName, lastName, age, email }, idx) => (
+          <li className="list-group-item list-item-user" key={`list-item-user-${idx}`}>
+            <p>
+              <strong>Name:</strong> {firstName} {lastName}
+              <br />
+              <strong>Age:</strong> {age}
+              <br />
+              <strong>Email:</strong> {email}
+            </p>
+          </li>
+        ))}
+    </ul>
+  );
+};
+export default ListUser;

06_react/unterricht/tag38/02_react-api-with-hooks/src/pages/ApiPage.jsx

@@ -1,4 +1,5 @@
 import ListTodo from '../components/lists/ListTodo';
+import ListUser from '../components/lists/ListUser';
 
 const ApiPage = (props) => {
   // const { } = props;
@@ -7,6 +8,8 @@ const ApiPage = (props) => {
     <div className="page-api">
       <div className="container py-5">
         <h1>APIs auslesen mit React</h1>
+        <h2>Users</h2>
+        <ListUser />
         <hr />
         <h2>Todos</h2>
         <ListTodo />