From 6cfcb857a4045d7c36d0f71f41e591a90914ab00 Mon Sep 17 00:00:00 2001
From: drejmin <djjamn@gmail.com>
Date: Tue, 5 Sep 2023 08:24:45 -0700
Subject: [PATCH] 	modified:   src/pages/App.js

---
 src/pages/App.js | 78 +++++++++++++++++++++++++++---------------------
 1 file changed, 44 insertions(+), 34 deletions(-)

diff --git a/src/pages/App.js b/src/pages/App.js
index 7900e4b..ad8798d 100644
--- a/src/pages/App.js
+++ b/src/pages/App.js
@@ -1,42 +1,52 @@
-// IMPORT useEffect and useRef
-import { useState} from 'react';
-import * as usersAPI from '../utilities/users-api'
+import { useState, useEffect, useRef } from 'react';
+import * as usersAPI from '../utilities/users-api';
 import './App.css';
 
 function App() {
-	const [userData, setUserData] = useState([]);
-  // ADD useRef
+  const [userData, setUserData] = useState([]);
+  const countriesRef = useRef([]);
 
-  // ADD useEffect
+  useEffect(() => {
+    const getUsers = async () => {
+      const data = await usersAPI.getUsers();
+      setUserData(data);
 
-	return (
-		<div>
-			<header></header>
-			<main>
-				<h1>Current Users</h1>
-				<article>
-					<section>
-						<h2 id='countries'>Countries</h2>
-						<ul aria-labelledby='countries'>
-              {/* RENDER THE LIST OF COUNTRY NAMES */}
-						</ul>
-					</section>
-					<section>
-						<h2 id='profiles'>User Profiles</h2>
-						<ul aria-labelledby='profiles'>
-							{userData.map((user, index) => {
-								return (
-									<li key={index}>
-										{user.name.first} - {user.location.country}
-									</li>
-								);
-							})}
-						</ul>
-					</section>
-				</article>
-			</main>
-		</div>
-	);
+      // Generate unique list of countries
+      const uniqueCountries = Array.from(new Set(data.map(u => u.location.country)));
+      countriesRef.current = uniqueCountries;
+    };
+
+    getUsers();
+  }, []);
+
+  return (
+    <div>
+      <header></header>
+      <main>
+        <h1>Current Users</h1>
+        <article>
+          <section>
+            <h2 id='countries'>Countries</h2>
+            <ul aria-labelledby='countries'>
+              {countriesRef.current.map((country, index) => (
+                <li key={index}>{country}</li>
+              ))}
+            </ul>
+          </section>
+          <section>
+            <h2 id='profiles'>User Profiles</h2>
+            <ul aria-labelledby='profiles'>
+              {userData.map((user, index) => (
+                <li key={index}>
+                  {user.name.first} - {user.location.country}
+                </li>
+              ))}
+            </ul>
+          </section>
+        </article>
+      </main>
+    </div>
+  );
 }
 
 export default App;