Add badge to new champion (#4)

Add badge to new champion

package.json

@@ -1,6 +1,6 @@
 {
   "name": "league-of-react",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "private": true,
   "dependencies": {
     "@actions/core": "^1.4.0",

scripts/download.js

@@ -2,54 +2,86 @@ const fs = require("fs");
 const fetch = require("node-fetch");
 const core = require("@actions/core");
 
-async function getLatestVersion() {
+async function getVersions() {
   const url = "https://ddragon.leagueoflegends.com/api/versions.json";
   const response = await fetch(url);
   const versions = await response.json();
-  return versions[0];
+
+  return {
+    latest: versions[0],
+    previous: versions[1]
+  };
 }
 
-getLatestVersion()
-  .then(async (latestVersion) => {
-    if (!fs.existsSync("public/data/version.txt")) {
-      return await download(latestVersion);
+getVersions()
+  .then(async (versions) => {
+    const latestVersion = versions.latest;
+    const versionFile = "public/data/version.txt";
+
+    if (!fs.existsSync(versionFile)) {
+      return await download(versions);
     }
 
-    const currentVersion = fs
-      .readFileSync("public/data/version.txt")
-      .toString();
+    const currentVersion = fs.readFileSync(versionFile).toString();
 
-    if (latestVersion === currentVersion) {
-      core.setOutput("should-update", false);
-      console.log(`Version ${latestVersion} it's already downloaded.`);
-      return;
+    if (latestVersion !== currentVersion) {
+      return await download(versions);
     }
 
-    await download(latestVersion);
+    core.setOutput("should-update", false);
+    console.log(`Version ${latestVersion} it's already downloaded.`);
   })
   .catch((error) => {
     console.error("There was an error");
     console.error(error);
   });
 
-async function download(version) {
-  console.log(`Downloading version ${version}...`);
+async function download(versions) {
+  const latestVersion = versions.latest;
 
-  const url = `http://ddragon.leagueoflegends.com/cdn/${version}/data/es_MX/champion.json`;
-  const response = await fetch(url);
-  const json = await response.json();
+  console.log(`Downloading version ${latestVersion}...`);
 
-  const data = JSON.stringify({
-    version,
-    champions: Object.values(json.data)
-  });
+  const latestData = await fetchVersion(latestVersion);
+  const previousData = await fetchVersion(versions.previous);
+
+  const newChampion = latestData.champions.find(
+    (champion, index) => previousData.champions[index]?.id !== champion.id
+  );
+
+  const modifiedChampions = latestData.champions.map((champion) => ({
+    new: champion.id === newChampion?.id,
+    ...champion
+  }));
+
+  latestData.champions = modifiedChampions;
 
-  await fs.promises.writeFile("public/data/latest.json", data);
-  await fs.promises.writeFile("public/data/version.txt", version);
+  await fs.promises.writeFile(
+    "public/data/latest.json",
+    JSON.stringify(latestData)
+  );
 
-  // Adding latest version to Github Actions output.
-  core.setOutput("latest-version", version);
+  await fs.promises.writeFile("public/data/version.txt", latestVersion);
+
+  // Add latest version to Github Actions output.
+  core.setOutput("latest-version", latestVersion);
   core.setOutput("should-update", true);
 
-  console.log(`Version ${version} successfully downloaded.`);
+  console.log(`Version ${latestVersion} successfully downloaded.`);
+}
+
+function getVersionUrl(version) {
+  return `http://ddragon.leagueoflegends.com/cdn/${version}/data/es_MX/champion.json`;
+}
+
+function formatData(payload) {
+  return {
+    version: payload.version,
+    champions: Object.values(payload.data)
+  };
+}
+
+async function fetchVersion(version) {
+  const response = await fetch(getVersionUrl(version));
+  const json = await response.json();
+  return formatData(json);
 }

src/components/Thumbnail.js

@@ -7,6 +7,7 @@ function Thumbnail({ champion }) {
     <div className="thumbnail">
       <Link href={`/champions/${champion.id}`}>
         <a>
+          {champion.new && <span className="badge">NUEVO</span>}
           <Image
             src={`https://ddragon.leagueoflegends.com/cdn/${champion.version}/img/champion/${champion.image.full}`}
             alt={champion.name}

src/pages/champions/[id].js

@@ -42,6 +42,7 @@ function Champion({ champion }) {
             <span className="title">{champion.title}</span>
           </div>
           <div className="images">
+            {champion.new && <span className="badge">NUEVO</span>}
             <img
               src={`http://ddragon.leagueoflegends.com/cdn/img/champion/loading/${champion.id}_0.jpg`}
               alt={champion.name}

src/styles/index.css

@@ -32,6 +32,16 @@ svg {
   width: 24px;
 }
 
+.badge {
+  background-color: var(--YELLOW);
+  font-weight: bold;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.85rem;
+  border-radius: 0.5rem 0 0 0;
+  position: absolute;
+  z-index: 1;
+}
+
 nav {
   align-items: center;
   background-color: var(--YELLOW);
@@ -116,6 +126,7 @@ main .grid {
   cursor: pointer;
   overflow: hidden;
   text-align: center;
+  position: relative;
 }
 
 .thumbnail img {