From 8ea7aac4ed6fe8bfa55514d65d1181c1591b5eb1 Mon Sep 17 00:00:00 2001
From: Eli Ribble <eli@theribbles.org>
Date: Tue, 27 Aug 2024 08:23:58 -0700
Subject: [PATCH] Make a basic remote request for data.

This uses an example from https://www.codingthesmartway.com/how-to-fetch-api-data-with-react/
and a public data API.
---
 src/App.tsx | 33 ++++++++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 854a891..399d4d1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,12 +1,39 @@
 import './App.css';
-import MailboxList from './Mailbox';
+//import MailboxList from './Mailbox';
+import React, { useEffect, useState } from 'react'
 
 
+interface IUser {
+  name: string;
+  id: string;
+}
+
+const App = () => {
+  const [users, setUsers] = useState<Array<IUser>>([])
+
+  const fetchUserData = () => {
+    fetch("https://jsonplaceholder.typicode.com/users")
+      .then(response => {
+        return response.json()
+      })
+      .then(data => {
+        setUsers(data)
+      })
+  }
+
+  useEffect(() => {
+    fetchUserData()
+  }, [])
 
-function App() {
   return (
     <div className="App">
-      <MailboxList></MailboxList>
+      {users.length > 0 && (
+        <ul>
+	  {users.map(user => (
+	    <li key={user.id}>{user.name}</li>
+	    ))}
+       </ul>
+      )}
     </div>
   );
 }