renderd bots

MartinNyaga · Jul 28, 2023 · dd254d8 · dd254d8
1 parent 1e903a7
commit dd254d8
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 16 deletions.
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Bot Battlr</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,23 +1,25 @@
-import logo from './logo.svg';
+import React, {useState, useEffect} from 'react';
+import BotCollection from './components/BotCollection';
+
 import './App.css';
 
 function App() {
+  //Declared variables for rendering the bots
+    const [bots, setBots] = useState([]);
+
+
+    //Fetching the bot data from deployed db.json 
+    useEffect(() => {
+      fetch('https://bot-app-data.onrender.com/bots')
+        .then((response) => response.json())
+        .then((data) => setBots(data))
+        .catch((error) => console.error('Error fetching data:', error));
+    }, []);
+
   return (
+    //Rendering bots on the web page
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <BotCollection bots={bots}  />
     </div>
   );
 }

diff --git a/src/components/BotCollection.js b/src/components/BotCollection.js
@@ -0,0 +1,23 @@
+import React from "react";
+
+export default function BotCollection({bots}){
+    //Renderd bots
+        return(
+            <div>
+                {bots.map((bot) => (
+                    <div key={bot.id}>
+                        <img src={bot.avatar_url}/>
+                        <h3>Bot Name:  {bot.name}</h3>
+                        <p>Class :  {bot.bot_class}</p>
+                        <p>Catch Phrase :  {bot.catchphrase}</p>
+                        <p>Armor :  {bot.armor}</p>
+                        <p>Health :  {bot.health}</p>
+                        <p>Damage :  {bot.damage}</p>
+                        <p>Created At :  {bot.created_at}</p>
+                        <p>Updated at :  {bot.updated_at}</p>
+
+                    </div>
+                ))}
+            </div>
+        )
+}
diff --git a/src/components/YourBotArmy.js b/src/components/YourBotArmy.js