Update met nextEditions voor 3 lokaties (#42)

* 3 cards for 3 locations
* 3x de juiste datum
* update info
* clean-up
* more cleaning
* copilot PR review suggestions

Author: ErnaOudman

src/content/editions.js

@@ -38,4 +38,8 @@ export let nextEditions = (editions
     (a, b) => a.date.getTime() - b.date.getTime()
 );
 
-export let nextEdition = nextEditions.length > 0 && nextEditions[0]
+export let nextEditionLocation = {
+    "DOK in OPEN": nextEditions.find(e => e.where === "DOK in OPEN"),
+    "DOK Voorhof": nextEditions.find(e => e.where === "DOK Voorhof"),
+    "DOK Tanthof": nextEditions.find(e => e.where === "DOK Tanthof")
+};

src/page/AgendaPage.js

@@ -15,7 +15,13 @@ export class AgendaPage extends Component {
                 <PageBody>
                     <h2>Komende Dojo's</h2>
                     <p>
-                        Coderdojo Delft wordt georganiseerd op de 4e zaterdag van de maand.
+                        Coderdojo Delft wordt georganiseerd op 3 verschillende locaties in Delft. De Dojo's worden georganiseerd op de volgende vaste dagen:
+                        <ol>
+                            <li>DOK in OPEN: 4e zaterdag van de maand van 14.00 tot 16.00</li>
+                            <li>DOK Voorhof: 2e zaterdag van de maand van 14.00 tot 16.00</li>
+                            <li>DOK Tanthof: 3e zaterdag van de maand van 10.30 tot 12.30</li>
+                        </ol>
+                    <br></br>
                         Af en toe wijken we hier vanaf als dit door feestdagen anders niet uitkomt - we organizeren soms ook Dojo's andere locaties.
                         In de zomervakantie komen de Dojo's mogelijk te vervallen.
                     </p>
@@ -27,7 +33,7 @@ export class AgendaPage extends Component {
                         })}
                     </ol>
                     <br></br>
-                    <p>Je kunt je vanaf de zondag 2 weken voor de Dojo <Link to={routes.nextEdition.url}>hier</Link> aanmelden.</p>
+                    <p>Je kunt je vanaf de zondag 2 weken voor de Dojo <a href="https://www.dok.info/jeugdjongeren/Jeugd9-14jr/coderdojo.html" target="_blank" rel="noopener noreferrer">hier</a> aanmelden.</p>
                 </PageBody>
             </Page>
         );

src/page/HomePage.js

@@ -4,18 +4,26 @@ import { Link } from 'react-router-dom';
 import { Page } from '../element/Page';
 import { PageBody } from '../element/PageBody';
 import { PageTitle } from '../element/PageTitle';
-import { nextEdition } from '../content/editions';
+import { nextEditionLocation } from '../content/editions';
 import { routes } from '../routes';
 
 export class HomePage extends Component {
     render() {
         let upcoming;
-        if (nextEdition) {
+            const inOpen = nextEditionLocation["DOK in OPEN"];
+            const voorhof = nextEditionLocation["DOK Voorhof"];
+            const tanthof = nextEditionLocation["DOK Tanthof"];
+        if (inOpen || voorhof || tanthof) {
             upcoming = (
                 <React.Fragment>
-                    <p>We organiseren de volgende CoderDojo op:</p>
-                    <p><strong>{nextEdition.displayDate} in {nextEdition.where}</strong></p>
-                    <p>Kijk op onze pagina <Link to={routes.nextEdition.url}>‘Volgende editie’</Link> voor meer informatie over de komende CoderDojo!</p>
+                    <p>We organiseren de volgende CoderDojo's op:</p>
+                    <ol>
+                        {inOpen && <li><strong>{inOpen.where}: {inOpen.displayDate}</strong></li>}
+                        {voorhof && <li><strong>{voorhof.where}: {voorhof.displayDate}</strong></li>}
+                        {tanthof && <li><strong>{tanthof.where}: {tanthof.displayDate}</strong></li>}
+                    </ol>
+                    <br></br>
+                    <p>Kijk op onze pagina <Link to={routes.nextEdition.url}>‘Volgende editie’</Link> voor meer informatie over de komende CoderDojo's!</p>
                 </React.Fragment>
             );
         }

src/page/NextEditionPage.js

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 import { PageTitle } from '../element/PageTitle';
 import { Page } from '../element/Page';
 import { PageBody } from '../element/PageBody';
-import { nextEdition } from '../content/editions';
+import { nextEditionLocation } from '../content/editions';
 import { routes } from '../routes';
 
 export class NextEditionPage extends Component {
@@ -18,12 +18,45 @@ export class NextEditionPage extends Component {
     }
 
     dojos() {
+
+    const inOpen = nextEditionLocation["DOK in OPEN"];
+    const voorhof = nextEditionLocation["DOK Voorhof"];
+    const tanthof = nextEditionLocation["DOK Tanthof"];
+
+    if (!inOpen && !voorhof && !tanthof) {
+        return this.noDojos();
+    }
+
         return (
             <React.Fragment>
-                <h2>{nextEdition.displayDate}</h2>
-                <p>De volgende CoderDojo in Delft wordt georganiseerd op {nextEdition.displayDate} in {nextEdition.where}.</p>
-                <p>De link om in te schrijven vind je onder aan deze pagina. De inschrijving gaat open op {nextEdition.registrationStart} om 12:00 (’s middags) –  Wees er snel bij!</p>
-                <p>Voor een overzicht van de komende CoderDojo's, kijk <Link to={routes.agenda.url}>hier</Link>.</p>
+                
+                <p>De volgende CoderDojo's in Delft worden georganiseerd op:</p>
+
+                <div className="cards">
+                    <div className="card">
+                        <h3>{inOpen.where}</h3>
+                        <p>Vesteplein 100</p>
+                        <p>{inOpen.displayDate}<br></br>14.00 - 16.00</p>
+                        <p><a href={inOpen.registrationUrl} target="_blank" rel="noopener noreferrer">Inschrijven</a></p>
+                    </div>
+
+                    <div className="card">
+                        <h3>{voorhof.where}</h3>
+                        <p>Duke Ellingtonstraat 203</p>
+                        <p>{voorhof.displayDate}<br></br>14.00 - 16.00</p>
+                        <p><a href={voorhof.registrationUrl} target="_blank" rel="noopener noreferrer">Inschrijven</a></p>
+                    </div>
+
+                    <div className="card">
+                        <h3>{tanthof.where}</h3>
+                        <p>Dasstraat 6</p>
+                        <p>{tanthof.displayDate}<br></br>10.30 - 12.30</p>
+                        <p><a href={tanthof.registrationUrl} target="_blank" rel="noopener noreferrer">Inschrijven</a></p>
+                    </div>
+                </div>
+                <br></br>
+                <p>De inschrijving van elke CoderDojo gaat 2 weken van tevoren open om 12:00 's middags. Wees er snel bij!</p>
+                <p>Een overzicht van de geplande CoderDojo's voor de komende maanden, vind je <Link to={routes.agenda.url}>hier</Link>.</p>
                 <h3>Wat gaan we doen?</h3>
                 <ul>
                     <li>Scratch</li>
@@ -34,23 +67,21 @@ export class NextEditionPage extends Component {
                 </ul>
                 <p>Kortom, je mag komen met elk project waar je eerder aan gewerkt hebt. Ben je nog nooit geweest? Dan hebben we opdrachten voor je klaarliggen en helpen we je op weg. Maar je mag natuurlijk ook zelf iets verzinnen. Misschien kun je alvast een karakter tekenen voor in een spel dat je wilt maken, of een filmpje zoeken voor een website die je wilt maken.</p>
                 <p><Link to={routes.whatWeDo.url}>Hier</Link> vind je meer details over wat je op een CoderDojo kunt doen.</p>
-                <h3>Waar?</h3>
-                <p>De CoderDojo vindt plaats bij OPEN (Vesteplein 100).</p>
-                <h3>Hoe laat?</h3>
-                <p>De CoderDojo is van 14:00 tot 16:00 uur. In deze tijd kun je zelf lekker aan de slag. Aan het einde maken we een rondje, zodat je ook aan de anderen kunt laten zien wat je gemaakt hebt!</p>
+                <h3>Hoe</h3>
+                <p>Een CoderDojo duurt 2 uur. In deze tijd kun je zelf lekker aan de slag. Aan het einde maken we een rondje, zodat je ook aan de anderen kunt laten zien wat je gemaakt hebt!</p>
                 <h3>Ouders</h3>
                 <p>We vinden het erg fijn als ouders actief meehelpen, zeker voor de jongere kinderen (minimaal 8 jaar). Ouders kunnen ondertussen ook gebruik maken van de faciliteiten van de bibliotheek. Er is beperkt zitplek voor ouders aan de tafels van de kinderen.</p>
+                <h3>Laptops & accounts</h3>
+                <p>Wij hebben voor iedereen laptops beschikbaar en klaarstaan voor gebruik. Natuurlijk mag je ook je eigen laptop meenemen. Deze moet minimaal beschikken over WiFi en een browser (Chrome / Firefox). Vergeet ook je oplader niet. Wij kunnen helaas niet alle kinderen helpen om alles werkend te krijgen dus wij vertrouwen erop dat alles werkt bij binnenkomst! Zorg er ook voor dat er een e-mailadres beschikbaar is om een account aan te kunnen maken voor online programma’s.</p>
                 <h3>Wat moet ik meenemen?</h3>
                 <ul>
-                    <li>Een werkende laptop*</li>
-                    <li>Een 3-uurtje &#8211; wij zorgen voor een pakje drinken</li>
+                    <li>Een 3-uurtje &#8211; wij zorgen voor een iets te drinken</li>
                     <li>Een goed humeur!</li>
+                    <li>Optioneel: Eigen laptop</li>
                 </ul>
-                <p><em>*) Zorg dat je laptop minimaal over WiFi, een browser (Chrome / Firefox) beschikt. Vergeet ook je oplader niet. Wij kunnen helaas niet alle kinderen helpen om alles werkend te krijgen dus wij vertrouwen erop dat alles werkt bij binnenkomst! Zorg er ook voor dat er een e-mailadres beschikbaar is om een account aan te kunnen maken voor online programma’s.</em></p>
-                <p>We hebben een beperkt aantal laptops te leen. Laat het ons via het inschrijfformulier weten als je daarvan gebruik wilt maken.</p>
                 <h3>Inschrijven</h3>
-                <p>Voor deze Dojo hebben we maar beperkt plek! Er is ruimte voor een maximaal aantal deelnemers. Elke deelnemer heeft zijn eigen ticket nodig, en je kunt maximaal twee tickets reserveren. Als de plekken voor deze CoderDojo bezet zijn, kun je je naam op de wachtlijst zetten, we nemen dan contact met je op zodra er een plek vrijkomt. Laat het ons dus ook weten als je verhinderd bent.</p>
-                <p>Vanaf januari 2020 wordt de inschrijving verzorgt door DOK. <a href={nextEdition.registrationUrl} target="_blank" rel="noopener noreferrer">Klik hier</a> om naar de inschrijvingspagina te gaan.</p>
+                <p>Voor elke CoderDojo hebben we maar beperkt plek! Er is ruimte voor een maximaal aantal deelnemers. Elke deelnemer heeft zijn eigen ticket nodig, en je kunt maximaal twee tickets reserveren. Als de plekken voor deze CoderDojo bezet zijn, kun je je naam op de wachtlijst zetten, we nemen dan contact met je op zodra er een plek vrijkomt. Laat het ons dus ook weten als je verhinderd bent.</p>
+                <p>Een registratielink voor de komende CoderDojo's vind je bovenaan deze pagina bij de betreffende edities.</p>
                 <p><i>Is de Dojo vol, of kun je niet op die dag? Je kunt ook kijken of er plek is bij een CoderDojo in de buurt: <a href="http://www.coderdojo-zoetermeer.nl" target="_blank" rel="noopener noreferrer">CoderDojo Zoetermeer</a>,  <a href="http://www.coderdojo-denhaag.nl" target="_blank" rel="noopener noreferrer">CoderDojo Den Haag</a> of <a href="http://www.coderdojo-rotterdam.nl" target="_blank" rel="noopener noreferrer">CoderDojo Rotterdam</a>.</i></p>
             </React.Fragment>
         );
@@ -59,7 +90,7 @@ export class NextEditionPage extends Component {
     render() {
         let content;
 
-        if (nextEdition) {
+        if (nextEditionLocation) {
             content = this.dojos();
         } else {
             content = this.noDojos();

src/style/main.css

@@ -33,6 +33,7 @@ body {
 
 ol, ul {
     list-style: none;
+    padding-left: 40px;
 }
 
 blockquote, q {
@@ -295,3 +296,18 @@ h4 {
     width: 100%;
     height: auto;
 }
+
+
+/* Cards */
+.cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+}
+
+.card {
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background: white;
+}