Merge pull request #21 from OrcaPracticas/add/routers

➕ADD: Integracion del router

Author: konami12

Tools/Tools.js

@@ -3,11 +3,15 @@ class Tools {
         const DATA = data.map((item) => {
             const { id, title, urls = {} } = item;
             const { logo_image: { original = "" } } = urls;
+
             return {
                 id,
                 logo: original,
                 title,
-                uri: `${link}?id=${id}`,
+                uri: {
+                    slug: title.toLocaleLowerCase().replace(/\s/g, "-"),
+                    id,
+                },
             };
         });
         return DATA;
@@ -17,13 +21,18 @@ class Tools {
         const DATA = data.map((item) => {
             const {
                 id, duration,
-                title,
+                channel, title,
             } = item;
             return {
                 id,
                 duration,
                 title,
-                uri: `${link}?id=${id}`,
+                uri: {
+                    slugChannel: channel.title.toLocaleLowerCase().replace(/\s/g, "-"),
+                    idChannel: channel.id,
+                    slug: title.toLocaleLowerCase().replace(/\s/g, "-"),
+                    id,
+                },
             };
         });
         return DATA;

components/Cards.js

@@ -1,8 +1,9 @@
 // Dependencias
-import Link from "next/link";
 import PropTypes from "prop-types";
 import React from "react";
 
+import { Link } from "../router";
+
 /**
  * Información por cada canal habilitado.
  *
@@ -17,8 +18,8 @@ const Card = ({ channels }) => (
                     logo = "/default-podcast.png", uri,
                 } = channel;
                 return (
-                    <Link href={uri} key={`Card-${id}`}>
-                        <a className="channel" href={uri}>
+                    <Link route="channel" params={uri} key={`Card-${id}`}>
+                        <a className="channel" >
                             <img src={logo} alt={title} />
                             <h3>{title}</h3>
                         </a>

components/Header.js

@@ -1,9 +1,10 @@
 // Dependencias
 import Head from "next/head";
-import Link from "next/link";
 import PropTypes from "prop-types";
 import React from "react";
 
+import { Link } from "../router";
+
 /**
  * Header general correspondientes a las paginas del sitio.
  *
@@ -26,8 +27,8 @@ const Header = (props) => {
             <header>
                 {
                     (back) ? (
-                        <Link href={back}>
-                            <a className="back" href={back}>&lt; Regresar </a>
+                        <Link route="channel" params={back}>
+                            <a className="back" > &lt; Regresar </a>
                         </Link>
                     ) : "PodCast"
                 }

components/PodCastList.js

@@ -1,8 +1,9 @@
 // Dependencias
-import Link from "next/link";
 import PropTypes from "prop-types";
 import React from "react";
 
+import { Link } from "../router";
+
 /**
  * Listdado de los ultimos podcast.
  *
@@ -16,8 +17,8 @@ const PodCastList = ({ podcasts }) => (
                     duration, id, title, uri,
                 } = podcast;
                 return (
-                    <Link href={uri} key={`List-${id}`}>
-                        <a className="podcast" href={uri}>
+                    <Link route="podcast" params={uri} key={`List-${id}`}>
+                        <a className="podcast">
                             <h3>{ title }</h3>
                             <div className="meta">
                                 {`${Math.ceil(duration / 60)} minutes`}

pages/channel.js

@@ -29,36 +29,36 @@ const Channel = ({
             (statusCode !== 200)
                 ? <Error statusCode={statusCode} />
                 : (
-                  <>
-                      {
-                          (channels.length > 0) && (
-                          <>
-                              <h2>Series</h2>
-                              <Cards channels={channels} />
-                          </>
-                          )
-                      }
+                    <>
+                        {
+                            (channels.length > 0) && (
+                                <>
+                                    <h2>Series</h2>
+                                    <Cards channels={channels} />
+                                </>
+                            )
+                        }
 
-                      {
-                          (list.length > 0) && (
-                          <>
-                              <h2>Ultimos Podcasts</h2>
-                              <PodCastList podcasts={list} />
-                          </>
-                          )
-                      }
+                        {
+                            (list.length > 0) && (
+                                <>
+                                    <h2>Ultimos Podcasts</h2>
+                                    <PodCastList podcasts={list} />
+                                </>
+                            )
+                        }
 
-                      <style jsx>
-                          {`
+                        <style jsx>
+                            {`
                           h2 {
                               padding: 15px;
                               font-size: 2em;
                               font-weight: 600;
                               margin: 0;
                           }
                       `}
-                      </style>
-                  </>
+                        </style>
+                    </>
                 )
         }
     </Layout>

pages/podcast.js

@@ -62,7 +62,10 @@ PodCast.getInitialProps = async ({ query, res }) => {
             RESPOSE.player.channel = channel.title;
             RESPOSE.player.poster = urls.image;
             RESPOSE.player.title = title;
-            RESPOSE.header.back = `/channel?id=${channel.id}`;
+            RESPOSE.header.back = {
+                slug: channel.title.toLocaleLowerCase().replace(/\s/g, "-"),
+                id: channel.id,
+            };
         }
     } catch (error) {
         res.statusCode = 503;