From 51b6cc9ea4792735c3ea2bb60478d5926b85855d Mon Sep 17 00:00:00 2001
From: Matheus Rocha <matheus.rocha89@gmail.com>
Date: Thu, 2 Feb 2023 13:02:37 +0000
Subject: [PATCH] Create component to list Users

---
 src/App.tsx                            |  2 ++
 src/components/UsersList/UsersList.tsx | 34 ++++++++++++++++++++++++++
 src/components/UsersList/index.ts      |  1 +
 3 files changed, 37 insertions(+)
 create mode 100644 src/components/UsersList/UsersList.tsx
 create mode 100644 src/components/UsersList/index.ts

diff --git a/src/App.tsx b/src/App.tsx
index 9cc63d9..4836cca 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import logo from "./logo.svg";
 import "./App.css";
+import { UsersList } from "./components/UsersList";
 
 function App() {
   return (
@@ -19,6 +20,7 @@ function App() {
           Learn React
         </a>
       </header>
+      <UsersList />
     </div>
   );
 }
diff --git a/src/components/UsersList/UsersList.tsx b/src/components/UsersList/UsersList.tsx
new file mode 100644
index 0000000..53d2c80
--- /dev/null
+++ b/src/components/UsersList/UsersList.tsx
@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from "react";
+
+type User = {
+  id: string;
+  fullName: string;
+  email: string;
+  username: string;
+};
+
+const UsersList = () => {
+  const [loading, setLoading] = useState(false);
+  const [users, setUsers] = useState<User[]>([]);
+  useEffect(() => {
+    const loadUsers = async () => {
+      setLoading(true);
+      const data = await fetch("http://127.0.0.1:3001/users");
+      setUsers(data);
+    };
+
+    loadUsers();
+  });
+
+  if (loading) return <h1>Loading</h1>;
+
+  return (
+    <ul>
+      {users.map(user => (
+        <li>{user.fullName}</li>
+      ))}
+    </ul>
+  );
+};
+
+export { UsersList };
diff --git a/src/components/UsersList/index.ts b/src/components/UsersList/index.ts
new file mode 100644
index 0000000..cf3777f
--- /dev/null
+++ b/src/components/UsersList/index.ts
@@ -0,0 +1 @@
+export * from "./UsersList";