feat: ✨ add download feature

src/App.js

@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
 import Dex from "./components/Dex";
 import Home from "./components/Home";
+import Download from "./components/Download";
 
 function App() {
   return (
@@ -15,6 +16,7 @@ function App() {
           <Route exact path="/lucky" element={<Dex />} />
           <Route exact path="/unown" element={<Dex />} />
           <Route exact path="/shadow" element={<Dex />} />
+          <Route exact path="/download" element={<Download />} />
           <Route path="*" element={<NotFound />} />
         </Routes>
       </Router>

src/components/Dex.js

@@ -104,7 +104,6 @@ export default function Dex() {
 
   React.useEffect(() => {
     document.title = "GOChecklists: " + DexModes.getPageTitle(pageMode);
-
     const mons = pokemonService.getMons(pageMode);
     const sortedMons = pokemonService.sort(mons, sortOrder);
     setMons(sortedMons);

src/components/Download.js

@@ -0,0 +1,29 @@
+import PokemonService from "../services/pokemon";
+
+export default function Download() {
+  const pokemonService = new PokemonService();
+  const pokemonServiceGetInformation = pokemonService.getLocalStorageInformation();
+  const finalArray = [];
+  finalArray.push(pokemonServiceGetInformation);
+
+
+  const csvContent =
+    "data:text/csv;charset=utf-8," +
+    ["ID,Dex,Shadows,Unown", ...finalArray.map((item) => `${item.id},${item.dex},${item.shadows},${item.unown}`)].join(
+      "\n"
+    );
+
+  const blob = new Blob([decodeURIComponent(encodeURI(csvContent))], { type: "text/csv;charset=utf-8;" });
+
+  const link = document.createElement("a");
+  const url = URL.createObjectURL(blob);
+  link.href = url;
+  link.download = "pokemon_data.csv";
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+
+  console.log(blob)
+  console.log()
+}

src/components/Home.js

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import styled from "styled-components";
 
 import Header from "./Header";
+import Download from "./Download";
 
 const List = styled.ul`
   font-size: 1.25em;
@@ -17,6 +18,35 @@ const List = styled.ul`
   ul li {
     margin: 0;
   }
+
+`;
+
+const StyledButton = styled.button`
+  padding: 10px 20px;
+  margin-top: 10px;
+  font-size: 1em;
+  font-size: 14px;
+  width: 130px;
+  font-weight: bold;
+  color: #fff;
+  background-color: #007bff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+
+  &:hover {
+    background-color: #0056b3;
+  }
+
+  &:active {
+    background-color: #004494;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
+  }
 `;
 
 function Home() {
@@ -59,6 +89,12 @@ function Home() {
             <li>Track how many shadow Pokémon you have.</li>
           </ul>
         </li>
+        <li>
+          <StyledButton onClick={Download}>Download</StyledButton>
+          <ul>
+            <li>Download your Pokémon history.</li>
+          </ul>
+        </li>
       </List>
     </React.Fragment>
   )

src/services/pokemon.js

@@ -130,6 +130,18 @@ export default class PokemonService {
     return groups;
   }
 
+  getLocalStorageInformation() {
+    const items = {};
+
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      const value = localStorage.getItem(key);
+      items[key] = value;
+    }
+
+    return items;
+  }
+
   getGroups() {
     return [
       [1, 2, 3],