Test

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
-
-// ❗ DO NOT CHANGE THE CODE  BELOW
-if (typeof module !== 'undefined' && module.exports) module.exports = App
+export default App;
+// comment
+// ❗ DO NOT CHANGE THE CODE BELOW
+if (typeof module !== 'undefined' && module.exports) module.exports = App;

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;

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'