From 1260787c36d32da987e423288e20b9dedc0d9bb0 Mon Sep 17 00:00:00 2001
From: Jarret Lovelace <jarretlovelace@Jarrets-iMac.local>
Date: Fri, 26 Apr 2024 15:45:51 -0600
Subject: [PATCH 1/2] working with z

---
 frontend/components/App.js       | 55 +++++++++++++++++++++++++-------
 frontend/components/Character.js | 26 +++++++++++----
 frontend/index.js                |  4 +++
 3 files changed, 67 insertions(+), 18 deletions(-)

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 3ec074a12..253cb00aa 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -1,23 +1,54 @@
-import React from 'react'
-import axios from 'axios'
-import Character from './Character'
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import Character from './Character';
 
-const urlPlanets = 'http://localhost:9009/api/planets'
-const urlPeople = 'http://localhost:9009/api/people'
+const urlPlanets = 'http://localhost:9009/api/planets';
+const urlPeople = 'http://localhost:9009/api/people';
+
+function CharacterCard({ name, homeworld }) {
+  return (
+<div className="character-card">
+  <h3>{name}</h3>
+  <p>Homeworld: {homeworld}</p>
+</div>
+  );
+}
 
 function App() {
-  // ❗ Create state to hold the data from the API
-  // ❗ Create effects to fetch the data and put it in state
+  const [data1, setData1] = useState(null);
+  const [data2, setData2] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [planetsResponse, peopleResponse] = await Promise.all([
+          axios.get(urlPlanets),
+          axios.get(urlPeople)
+        ]);
+        setData1(planetsResponse.data);
+        setData2(peopleResponse.data);
+      } catch (error) {
+        console.error('Error', error);
+      }
+    };
+
+    fetchData();
+  }, []);
+
   return (
     <div>
       <h2>Star Wars Characters</h2>
       <p>See the README of the project for instructions on completing this challenge</p>
-      {/* ❗ Map over the data in state, rendering a Character at each iteration */}
+      <div className = 'character-card'>
+      {data1 && data2 && data1.map((planet, index) => (
+        <CharacterCard key={index} name={data2[index].name} homeworld={planet.name} />
+      ))}
+    </div>
     </div>
-  )
+  );
 }
 
-export default App
+export default App;
 
-// ❗ DO NOT CHANGE THE CODE  BELOW
-if (typeof module !== 'undefined' && module.exports) module.exports = App
+// ❗ DO NOT CHANGE THE CODE BELOW
+if (typeof module !== 'undefined' && module.exports) module.exports = App;
diff --git a/frontend/components/Character.js b/frontend/components/Character.js
index bba3747d8..ff93998f4 100644
--- a/frontend/components/Character.js
+++ b/frontend/components/Character.js
@@ -1,13 +1,27 @@
-import React from 'react'
+import React, { useState } from 'react';
 
-function Character() { // ❗ Add the props
+function Character({ name, homeworld }) {  
+  const [showHomeworld, setShowHomeworld] = useState(false);
+  
+  const toggleHomeworld = () => {
+    setShowHomeworld(prevState => !prevState);
+  }; // ❗ Add the props
   // ❗ Create a state to hold whether the homeworld is rendering or not
   // ❗ Create a "toggle" click handler to show or remove the homeworld
   return (
-    <div>
+    <div onClick={toggleHomeworld} style={{ cursor: 'pointer' }}>
+      <h3>{name}</h3>
+      {showHomeworld && (
+        <p className="character-planet">Planet: {homeworld}</p>
+      )}
       {/* Use the same markup with the same attributes as in the mock */}
-    </div>
-  )
+</div>
+  );
 }
 
-export default Character
+  
+ 
+
+
+
+export default Character;
diff --git a/frontend/index.js b/frontend/index.js
index 7abb1830e..f20ad968c 100755
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -1,4 +1,8 @@
+<<<<<<< HEAD
 import React from 'react'
+=======
+import React from 'react';
+>>>>>>> 275407b (testing with zach)
 import { createRoot } from 'react-dom/client'
 import App from './components/App'
 import './styles/reset.css'

From 5b57b04ae25d9d883fb2bae5bf01e7ef7664c837 Mon Sep 17 00:00:00 2001
From: Jarret Lovelace <jarretlovelace@Jarrets-iMac.local>
Date: Fri, 26 Apr 2024 15:47:10 -0600
Subject: [PATCH 2/2] working with z

---
 frontend/components/App.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/App.js b/frontend/components/App.js
index 253cb00aa..886a103cb 100644
--- a/frontend/components/App.js
+++ b/frontend/components/App.js
@@ -49,6 +49,6 @@ function App() {
 }
 
 export default App;
-
+// comment
 // ❗ DO NOT CHANGE THE CODE BELOW
 if (typeof module !== 'undefined' && module.exports) module.exports = App;