added UserList

jmr85 · jmr85 · commit b78cde4cf48a · 2023-03-13T12:59:48.000-03:00
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>User List</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
+import UserList from './UserList';
 
 function App() {
   return (
     <div>
-     <h1>hola que tal</h1>
+     <h1>User List</h1>
+     <UserList/>
     </div>
   );
 }
diff --git a/src/UserList.tsx b/src/UserList.tsx
@@ -0,0 +1,75 @@
+import React, { useState, useEffect } from "react";
+
+interface User {
+  id: number;
+  name: string;
+  username: string;
+  email: string;
+  address: {
+    city: string;
+  };
+}
+
+const UserList: React.FC = () => {
+  const [users, setUsers] = useState<User[]>([]);
+  const [filteredUsers, setFilteredUsers] = useState<User[]>([]);
+  const [filterBy, setFilterBy] = useState<string>("name");
+
+  useEffect(() => {
+    fetch("https://jsonplaceholder.typicode.com/users")
+      .then((response) => response.json())
+      .then((data: User[]) => {
+        setUsers(data);
+        setFilteredUsers(data);
+      })
+      .catch((error) => console.log(error));
+  }, []);
+
+  const handleFilterChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setFilterBy(event.target.value);
+  };
+
+  const handleFilterInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const filterValue = event.target.value.toLowerCase();
+    const filtered = users.filter((user) =>
+      user[filterBy].toLowerCase().includes(filterValue)
+    );
+    setFilteredUsers(filtered);
+  };
+
+  return (
+    <div>
+      <label htmlFor="filterBy">Filter by:</label>
+      <select id="filterBy" value={filterBy} onChange={handleFilterChange}>
+        <option value="name">Name</option>
+        <option value="email">Email</option>
+        <option value="address.city">City</option>
+      </select>
+      <input type="text" onChange={handleFilterInput} />
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Name</th>
+            <th>Username</th>
+            <th>Email</th>
+            <th>City</th>
+          </tr>
+        </thead>
+        <tbody>
+          {filteredUsers.map((user) => (
+            <tr key={user.id}>
+              <td>{user.id}</td>
+              <td>{user.name}</td>
+              <td>{user.username}</td>
+              <td>{user.email}</td>
+              <td>{user.address.city}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default UserList;
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-// import './index.css';
 import App from './App';
 
 const root = ReactDOM.createRoot(
