API change

Author: Andres Bedoya

.gitignore

@@ -1,20 +1,19 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
 # dependencies
 /node_modules
 
 # testing
 /coverage
 
 # production
-/build
+/dist
 
 # misc
 .DS_Store
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
+.cache
 
 npm-debug.log*
 yarn-debug.log*

dist/src.7ed060e2.css

@@ -0,0 +1,37 @@
+import React from "react";
+import Particles from "react-particles-js";
+import useResources from "../../hooks/useResources";
+import Card from "../Card/Card";
+import { formatNum, getCoinColor } from "../../libs/utils";
+import particlesConfig from "../../libs/particlesconfig";
+
+import "./App.css";
+
+const App = () => {
+  const { resources, isLoading, isError } = useResources(9);
+
+  const mapCoins = resources.map(coin => ({
+    name: coin.name,
+    symbol: coin.symbol,
+    rank: coin.rank,
+    price: formatNum(coin.price),
+    change24hr: coin.change,
+    img: coin.iconUrl,
+    color: getCoinColor(coin.symbol)
+  }));
+
+  return (
+    <div className="app">
+      <Particles className="particles" params={particlesConfig} />
+      <div className="container">
+        <div className="coins">
+          {mapCoins.map((coin, i) => (
+            <Card coin={coin} key={i} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default App;

dist/src.7ed060e2.css.map

@@ -7,6 +7,7 @@
 }
 
 .coin {
+  background-color: #fff;
   border: 1px solid #eee;
   flex: 1 0 30%;
   margin: 9px;
@@ -25,7 +26,6 @@
 }
 
 .card-body {
-  background-color: #fff;
   padding: 10px;
 }
 

dist/src.7ed060e2.js

@@ -1,11 +1,10 @@
-import React from 'react';
-import { getColorClass, determineSign, timeConverter } from '../../libs/utils';
-import './Card.css';
+import React from "react";
+import { getColorClass, determineSign } from "../../libs/utils";
+import "./Card.css";
 
 const Card = ({ coin }) => {
   const cardColorClass = getColorClass(coin.color);
   const signCoin = determineSign(coin.change24hr);
-  const lastUpdate = timeConverter(coin.lastUpdate);
 
   return (
     <div className="coin">
@@ -19,12 +18,9 @@ const Card = ({ coin }) => {
           <p className="coin-value">${coin.price}</p>
           <span className={`coin-change ${signCoin}`}>{coin.change24hr}%</span>
         </div>
-        <div>
-          <p className="coin-last-update">Last update: {lastUpdate}</p>
-        </div>
       </div>
     </div>
   );
-}
+};
 
-export default Card;
+export default Card;

dist/src.7ed060e2.js.map

@@ -9,10 +9,10 @@ const useResources = num => {
     try {
       setIsLoading(true);
       const response = await fetch(
-        `https://api.coinmarketcap.com/v1/ticker/?limit=${num}`
+        `https://api.coinranking.com/v1/public/coins?base=USD&timePeriod=24h&limit=${num}`
       );
       const jsonData = await response.json();
-      setResources(jsonData);
+      setResources(jsonData.data.coins);
     } catch (e) {
       setIsError(e);
     } finally {
@@ -39,4 +39,4 @@ const useResources = num => {
   };
 };
 
-export default useResources;
+export default useResources;

package-lock.json

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./App";
+import App from "./components/App/App";
 
 import "./style.css";
 
-ReactDOM.render(<App />, document.getElementById("root"));
+ReactDOM.render(<App />, document.getElementById("root"));