From 82dc3fe40f5c89e6a3702d6b33589fcf0dd142ce Mon Sep 17 00:00:00 2001
From: mvargasmoran <mvargasmoran@gmail.com>
Date: Thu, 22 Apr 2021 03:10:47 -0400
Subject: [PATCH 1/2] Add a new component for schedule list

---
 components/CountrySchedule.jsx | 71 ++++++++++++++++++++++++++++++++++
 components/Grid.jsx            | 30 ++------------
 styles/globals.css             | 43 ++++++++++++++++++++
 3 files changed, 118 insertions(+), 26 deletions(-)
 create mode 100644 components/CountrySchedule.jsx

diff --git a/components/CountrySchedule.jsx b/components/CountrySchedule.jsx
new file mode 100644
index 0000000..dde05ad
--- /dev/null
+++ b/components/CountrySchedule.jsx
@@ -0,0 +1,71 @@
+import React from "react";
+
+const countryZones = [
+  {
+    'gmt': -3,
+    'countries': 'chile, argentina, brazil, uruguay',
+  },
+  {
+    'gmt': -5,
+    'countries': 'colombia, ecuador, peru',
+  },
+  {
+    'gmt': -4,
+    'countries': 'bolivia, paraguay, venezuela',
+  },
+  {
+    'gmt': -7,
+    'countries': 'mexico',
+  },
+  {
+    'gmt': 2,
+    'countries': 'usa',
+  }
+];
+
+function CountryFlags(props) {
+  console.log(props.countryName);
+  return (
+    <span className={`flag-${props.countryName.trim()}`}></span>
+  );
+}
+
+function CountryTimesListItem(props) {
+  const gmtItem = props.value;
+  const countryFlags = gmtItem.countries.split(',').map((country) => {
+    return <CountryFlags countryName={country} />
+  });
+  return (
+    <li>
+    <span className="flags">
+    {countryFlags}
+    </span>
+    <span className="times">
+    GMT {gmtItem.gmt.toString()}
+    </span>
+    </li>
+  );
+}
+
+function CountryTimeList(props) {
+  const gmtList = props.countryZones;
+  const listItmes =gmtList.map((gmtItem) => {
+    console.log("gmtItem kappa", gmtItem);
+    return <CountryTimesListItem value={gmtItem} />
+  });
+
+  return (
+    <ul className="is-size-6 stream-times">
+      {listItmes}
+    </ul>
+  );
+}
+
+
+
+const CountrySchedule = () => (
+
+  <CountryTimeList countryZones={countryZones} />
+);
+
+export default CountrySchedule;
diff --git a/components/Grid.jsx b/components/Grid.jsx
index 66b5dda..8519d38 100644
--- a/components/Grid.jsx
+++ b/components/Grid.jsx
@@ -1,5 +1,7 @@
 import React from "react";
 import Link from "next/link";
+import CountrySchedule from "./CountrySchedule";
+
 import {
   faTwitch,
   faYoutube,
@@ -9,6 +11,7 @@ import {
 import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+
 const Grid = () => (
   <div className="section-grid">
     <div className="tile">
@@ -22,32 +25,7 @@ const Grid = () => (
               <span className="ml-3">Twitch</span>
             </p>
             <p className="is-size-6">En vivo cada Jueves</p>
-            <ul className="is-size-6 stream-times">
-              <li>
-                <span className="flags">🇨🇱🇦🇷🇧🇷🇺🇾</span>
-                <span className="times">9 pm GMT-3</span>
-              </li>
-              <li>
-                <span className="flags">🇨🇴🇪🇨🇵🇪</span>{" "}
-                <span className="times">7 pm GMT-5</span>
-              </li>
-              <li>
-                <span className="flags">🇧🇴🇵🇾🇻🇪</span>
-                <span className="times">8 pm GMT-4</span>
-              </li>
-              <li>
-                <span className="flags">🇲🇽</span>
-                <span className="times">6 pm CST GMT-7</span>
-              </li>
-              <li>
-                <span className="flags">🇪🇸</span>
-                <span className="times">2 am GMT+2</span>
-              </li>
-              <li>
-                <span className="flags">🇺🇸</span>
-                <span className="times">5 pm PDT GMT-7</span>
-              </li>
-            </ul>
+            <CountrySchedule />
           </a>
         </article>
         <article className="tile is-child box discord-tile">
diff --git a/styles/globals.css b/styles/globals.css
index 4a5f95d..831daa4 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -175,6 +175,10 @@ a {
 .stream-times .times {
   flex: 5;
 }
+.stream-next-session-notice {
+  font-size: 10px;
+  margin-top: 1rem;
+}
 
 @media (max-width: 768px) {
   .footer-container {
@@ -182,3 +186,42 @@ a {
     margin-top: 3rem;
   }
 }
+
+
+.flag-chile:before {
+   content: '🇨🇱';
+}
+.flag-argentina:before {
+  content: '🇦🇷';
+}
+.flag-brazil:before {
+   content: '🇧🇷';
+}
+.flag-uruguay:before {
+   content: '🇺🇾';
+}
+.flag-colombia:before {
+   content: '🇨🇴';
+}
+.flag-ecuador:before {
+   content: '🇪🇨';
+}
+.flag-peru:before {
+   content: '🇵🇪';
+}
+.flag-bolivia:before {
+   content: '🇧🇴';
+}
+.flag-paraguay:before {
+  content: '🇵🇾';
+}
+.flag-venezuela:before {
+  content: '🇻🇪';
+}
+.flag-mexico:before {
+  content: '🇲🇽';
+}
+.flag-usa:before {
+  content: '🇺🇸';
+}
+

From bf3ef724e28ab6e9a4af93a23e6ba9dda2159621 Mon Sep 17 00:00:00 2001
From: mvargasmoran <mvargasmoran@gmail.com>
Date: Thu, 22 Apr 2021 13:36:52 -0400
Subject: [PATCH 2/2] Clean up my mess

---
 components/CountrySchedule.jsx | 29 ++++++-----------------------
 1 file changed, 6 insertions(+), 23 deletions(-)

diff --git a/components/CountrySchedule.jsx b/components/CountrySchedule.jsx
index dde05ad..dc13aab 100644
--- a/components/CountrySchedule.jsx
+++ b/components/CountrySchedule.jsx
@@ -23,17 +23,9 @@ const countryZones = [
   }
 ];
 
-function CountryFlags(props) {
-  console.log(props.countryName);
-  return (
-    <span className={`flag-${props.countryName.trim()}`}></span>
-  );
-}
-
-function CountryTimesListItem(props) {
-  const gmtItem = props.value;
+function CountryTimesListItem({gmtItem}) {
   const countryFlags = gmtItem.countries.split(',').map((country) => {
-    return <CountryFlags countryName={country} />
+    return <span className={`flag-${country.trim()}`}></span>
   });
   return (
     <li>
@@ -47,25 +39,16 @@ function CountryTimesListItem(props) {
   );
 }
 
-function CountryTimeList(props) {
-  const gmtList = props.countryZones;
-  const listItmes =gmtList.map((gmtItem) => {
-    console.log("gmtItem kappa", gmtItem);
-    return <CountryTimesListItem value={gmtItem} />
+const CountrySchedule = () => {
+  const listItmes = countryZones.map((gmtItem) => {
+    return <CountryTimesListItem gmtItem={gmtItem} />
   });
 
   return (
     <ul className="is-size-6 stream-times">
-      {listItmes}
+    {listItmes}
     </ul>
   );
 }
 
-
-
-const CountrySchedule = () => (
-
-  <CountryTimeList countryZones={countryZones} />
-);
-
 export default CountrySchedule;