From cc07b8d66d7b5fbe80b5d0ad0aac37b42eb0a568 Mon Sep 17 00:00:00 2001
From: "Alejandro E. Rendon" <alejandro@rendon.co>
Date: Mon, 29 Jan 2024 13:21:30 -0500
Subject: [PATCH] Redireccionar URL de acuerdo al lenguaje

---
 src/app/[lang]/components/NavbarCustom.js    |  15 ++--
 src/app/[lang]/keynotes/[uniquepage]/page.js |  80 +++++++++++++++++++
 src/app/[lang]/keynotes/images/avatar.jpeg   | Bin 0 -> 5303 bytes
 src/app/[lang]/keynotes/page.js              |  49 ++++++++++++
 src/app/[lang]/layout.js                     |  11 ++-
 src/app/[lang]/speakers/page.js              |  45 +++++++----
 src/data/speakers.json                       |   2 +
 7 files changed, 177 insertions(+), 25 deletions(-)
 create mode 100644 src/app/[lang]/keynotes/[uniquepage]/page.js
 create mode 100644 src/app/[lang]/keynotes/images/avatar.jpeg
 create mode 100644 src/app/[lang]/keynotes/page.js

diff --git a/src/app/[lang]/components/NavbarCustom.js b/src/app/[lang]/components/NavbarCustom.js
index bfc2084..bb3ac74 100644
--- a/src/app/[lang]/components/NavbarCustom.js
+++ b/src/app/[lang]/components/NavbarCustom.js
@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { useRouter, usePathname } from 'next/navigation';
+import { useRouter, useSelectedLayoutSegments } from 'next/navigation';
 import Link from 'next/link';
 import propTypes from 'prop-types';
 import Container from 'react-bootstrap/Container';
@@ -15,10 +15,10 @@ import { locales } from '@/utils/locale';
 const NavbarCustom = ({ lang }) => {
   const i18nDictionary = useI18n();
   const router = useRouter();
-  const pathname = usePathname();
+  const urlSegments = useSelectedLayoutSegments();
 
   const onChangeLocale = (locale) => {
-    router.replace(pathname, { locale });
+    router.replace(`/${locale}/${urlSegments.join('/')}`);
   };
 
   return (
@@ -54,16 +54,13 @@ const NavbarCustom = ({ lang }) => {
             </Nav.Link>
           </Nav>
           <Nav>
-            <NavDropdown
-              title={lang}
-              id="collapsible-nav-dropdown"
-              onChange={(e) => onChangeLocale(e.target.value)}>
+            <NavDropdown title={lang} id="collapsible-nav-dropdown" onSelect={onChangeLocale}>
               {locales.map(
                 (locale) =>
                   locale !== lang && (
-                    <Nav.Link as={Link} key={locale} href={`/${locale}`}>
+                    <NavDropdown.Item key={locale} eventKey={locale}>
                       {locale}
-                    </Nav.Link>
+                    </NavDropdown.Item>
                   )
               )}
             </NavDropdown>
diff --git a/src/app/[lang]/keynotes/[uniquepage]/page.js b/src/app/[lang]/keynotes/[uniquepage]/page.js
new file mode 100644
index 0000000..b56fc94
--- /dev/null
+++ b/src/app/[lang]/keynotes/[uniquepage]/page.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import propTypes from 'prop-types';
+import { notFound } from 'next/navigation';
+import Image from 'next/image';
+import Link from 'next/link';
+import speakerslist from '@/data/speakers.json';
+import talksList from '@/data/talks.json';
+import Avatar from '@/app/[lang]/speakers/images/avatar.jpeg';
+
+export async function generateStaticParams() {
+  return speakerslist.map((p) => ({
+    uniquepage: p.id.toString()
+  }));
+}
+
+const Speaker = ({ params: { uniquepage, lang } }) => {
+  const speaker = speakerslist.find((p) => p.id.toString() === uniquepage);
+  let talks = [];
+
+  if (!speaker) {
+    console.info('speaker not found');
+    notFound();
+  } else {
+    talks = talksList.filter((talk) => talk.speakers.includes(speaker.id));
+  }
+
+  return (
+    <>
+      <Image src={Avatar} width={200} height={200} placeholder="blur" alt="Picture of the author" />
+      <h1>
+        {speaker.first_name} {speaker.last_name}
+      </h1>
+      <h2>{speaker.affiliation}</h2>
+      <h3>{speaker.country_residence}</h3>
+      <ul>
+        <li>
+          <Link href={speaker.facebook} target="_blank">
+            {speaker.facebook}
+          </Link>
+        </li>
+        <li>
+          <Link href={speaker.twitter} target="_blank">
+            {speaker.twitter}
+          </Link>
+        </li>
+        <li>
+          <Link href={speaker.linkedin} target="_blank">
+            {speaker.linkedin}
+          </Link>
+        </li>
+        <li>
+          <Link href={speaker.github} target="_blank">
+            {speaker.github}
+          </Link>
+        </li>
+        <li>
+          <Link href={speaker.website} target="_blank">
+            {speaker.website}
+          </Link>
+        </li>
+      </ul>
+      {speaker.biography ? <p>{speaker.biography[lang]}</p> : null}
+      <h3>Talks</h3>
+      {talks.map((talk) => (
+        <Link key={talk.id} href={`/talks/${talk.id}`} locale={lang}>
+          <h1>{talk.title[lang]}</h1>
+        </Link>
+      ))}
+    </>
+  );
+};
+
+Speaker.propTypes = {
+  params: propTypes.shape({
+    uniquepage: propTypes.string,
+    lang: propTypes.string
+  })
+};
+
+export default Speaker;
diff --git a/src/app/[lang]/keynotes/images/avatar.jpeg b/src/app/[lang]/keynotes/images/avatar.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..00f7cda6e8d7c0a497d615c3474a03f603b8e6d9
GIT binary patch
literal 5303
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
My%W^<VSo6403UTEg8%>k

literal 0
HcmV?d00001

diff --git a/src/app/[lang]/keynotes/page.js b/src/app/[lang]/keynotes/page.js
new file mode 100644
index 0000000..4bda72d
--- /dev/null
+++ b/src/app/[lang]/keynotes/page.js
@@ -0,0 +1,49 @@
+'use client';
+
+import React from 'react';
+import propTypes from 'prop-types';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Image from 'next/image';
+import Link from 'next/link';
+import speakerslist from '@/data/speakers.json';
+
+import Avatar from '@/app/[lang]/speakers/images/avatar.jpeg';
+
+const Speakers = ({ params: { lang } }) => {
+  return (
+    <>
+      {speakerslist.map(
+        (speaker) =>
+          speaker.type === 'keynote' && (
+            <Row key={speaker.id}>
+              <Col md={4}>
+                <Link href={`/keynotes/${speaker.id}`} locale={lang}>
+                  <Image src={Avatar} width={200} height={200} alt="Picture of the author" />
+                </Link>
+              </Col>
+              <Col md={8}>
+                <Link href={`/keynotes/${speaker.id}`} locale={lang}>
+                  <h1>
+                    {speaker.first_name} {speaker.last_name}
+                  </h1>
+                  <h2>{speaker.affiliation}</h2>
+                </Link>
+                <Link href={`https://twitter.com/${speaker.twitter}`} target="_blank">
+                  <span>{speaker.twitter}</span>
+                </Link>
+              </Col>
+            </Row>
+          )
+      )}
+    </>
+  );
+};
+
+Speakers.propTypes = {
+  params: propTypes.shape({
+    lang: propTypes.string.isRequired
+  }).isRequired
+};
+
+export default Speakers;
diff --git a/src/app/[lang]/layout.js b/src/app/[lang]/layout.js
index e879624..7d0e2ab 100644
--- a/src/app/[lang]/layout.js
+++ b/src/app/[lang]/layout.js
@@ -2,6 +2,9 @@
 
 import React, { useState, useEffect } from 'react';
 import props from 'prop-types';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
 import NavbarCustom from '@/app/[lang]/components/NavbarCustom';
 import { I18nContext } from '@/contexts/I18nContext';
 
@@ -24,7 +27,13 @@ const Root = ({ children, params: { lang } }) => {
       <html lang={lang}>
         <body>
           <NavbarCustom lang={lang} />
-          {children}
+          <main>
+            <Container>
+              <Row className="justify-content-md-center">
+                <Col lg={10}>{children}</Col>
+              </Row>
+            </Container>
+          </main>
         </body>
       </html>
     </I18nContext.Provider>
diff --git a/src/app/[lang]/speakers/page.js b/src/app/[lang]/speakers/page.js
index 353e35a..2feed04 100644
--- a/src/app/[lang]/speakers/page.js
+++ b/src/app/[lang]/speakers/page.js
@@ -2,26 +2,41 @@
 
 import React from 'react';
 import propTypes from 'prop-types';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Image from 'next/image';
 import Link from 'next/link';
 import speakerslist from '@/data/speakers.json';
 
+import Avatar from '@/app/[lang]/speakers/images/avatar.jpeg';
+
 const Speakers = ({ params: { lang } }) => {
   return (
-    <main>
-      {speakerslist.map((speaker) => (
-        <div key={speaker.id}>
-          <Link href={`./speakers/${speaker.id}`} locale={lang}>
-            <h1>
-              {speaker.first_name} {speaker.last_name}
-            </h1>
-            <h2>{speaker.affiliation}</h2>
-          </Link>
-          <Link href={`https://twitter.com/${speaker.twitter}`} target="_blank">
-            <span>{speaker.twitter}</span>
-          </Link>
-        </div>
-      ))}
-    </main>
+    <>
+      {speakerslist.map(
+        (speaker) =>
+          speaker.type === 'speaker' && (
+            <Row key={speaker.id}>
+              <Col md={4}>
+                <Link href={`/${lang}/speakers/${speaker.id}`} locale={lang}>
+                  <Image src={Avatar} width={200} height={200} alt="Picture of the author" />
+                </Link>
+              </Col>
+              <Col md={8}>
+                <Link href={`/${lang}/speakers/${speaker.id}`} locale={lang}>
+                  <h1>
+                    {speaker.first_name} {speaker.last_name}
+                  </h1>
+                  <h2>{speaker.affiliation}</h2>
+                </Link>
+                <Link href={`https://twitter.com/${speaker.twitter}`} target="_blank">
+                  <span>{speaker.twitter}</span>
+                </Link>
+              </Col>
+            </Row>
+          )
+      )}
+    </>
   );
 };
 
diff --git a/src/data/speakers.json b/src/data/speakers.json
index cd95a22..30aff8e 100644
--- a/src/data/speakers.json
+++ b/src/data/speakers.json
@@ -1,6 +1,7 @@
 [
   {
     "id": "john-doe",
+    "type": "speaker",
     "first_name": "John",
     "last_name": "Doe",
     "email": "bYQJ9@example.com",
@@ -20,6 +21,7 @@
   },
   {
     "id": "jane-doe",
+    "type": "keynote",
     "first_name": "Jane",
     "last_name": "Doe",
     "email": "bYQJ9@example.com",