From 4d1af8eed1c17588c0ae305ffc9833d03fb76881 Mon Sep 17 00:00:00 2001
From: petrus <holm.petrus@gmail.com>
Date: Fri, 28 Aug 2020 17:09:56 +0300
Subject: [PATCH] basics for hublist

---
 .../app/src/pages/Connected/HubInfo/index.js  | 270 +++++++++---------
 .../src/pages/Connected/HubInfo/texts.json    |  32 +--
 2 files changed, 149 insertions(+), 153 deletions(-)

diff --git a/frontend/app/src/pages/Connected/HubInfo/index.js b/frontend/app/src/pages/Connected/HubInfo/index.js
index aec24f71..6380d64e 100644
--- a/frontend/app/src/pages/Connected/HubInfo/index.js
+++ b/frontend/app/src/pages/Connected/HubInfo/index.js
@@ -1,150 +1,146 @@
-import React from "react";
-import "./style.scss";
+import React from 'react'
+import './style.scss'
 
-import KEYS from "../../../redux/staticcontent/keys";
-import MEDIA_KEYS from "../../../redux/staticmedia/keys";
+import KEYS from '../../../redux/staticcontent/keys'
+import MEDIA_KEYS from '../../../redux/staticmedia/keys'
 
-import { content as selectContent } from "../../../redux/staticcontent/selectors";
-import { connect } from "react-redux";
+import { content as selectContent } from '../../../redux/staticcontent/selectors'
+import { connect } from 'react-redux'
 
-import SectionImage from "../../../components/SectionImage";
-import Page from "../../PageHOC";
-import HeaderSection from "../../../components/HeaderSection";
-import SingleColumnSection from "../../../components/SingleColumnSection";
-import DividerLine from "../../../components/DividerLine";
-import Button from "../../../components/Button";
-import { Link, Element } from "react-scroll";
-
-const textsJSON = require("./texts.json");
+import SectionImage from '../../../components/SectionImage'
+import Page from '../../PageHOC'
+import HeaderSection from '../../../components/HeaderSection'
+import SingleColumnSection from '../../../components/SingleColumnSection'
+import DividerLine from '../../../components/DividerLine'
+import Button from '../../../components/Button'
+import { Link, Element } from 'react-scroll'
 
+const textsJSON = require('./texts.json')
 
 const HubInfo = (props) => {
-    return (
-        <Page
-            className="Connected ConnectedContent Hubs"
-            pageTitle="Hub Info"
-            metaDescKey={KEYS.whoAreWeBody}
-            ogImageKey={MEDIA_KEYS.homePageHeaderImage}
+  return (
+    <Page
+      className="Connected ConnectedContent Hubs"
+      pageTitle="Hub Info"
+      metaDescKey={KEYS.whoAreWeBody}
+      ogImageKey={MEDIA_KEYS.homePageHeaderImage}
+    >
+      <HeaderSection title={props.HeaderTitle} body={props.HeaderBody}>
+        <Link
+          activeClass="active"
+          to="whatishub"
+          spy={true}
+          smooth={true}
+          duration={500}
+        >
+          <Button className="Button-default" text="What is a hub" />
+        </Link>
+        <Link
+          activeClass="active"
+          to="central"
+          spy={true}
+          smooth={true}
+          duration={500}
+        >
+          <Button className="Button-default" text="Central Hub" />
+        </Link>
+        <Link
+          activeClass="active"
+          to="hubstories"
+          spy={true}
+          smooth={true}
+          duration={500}
         >
-            <HeaderSection
-                title={props.HeaderTitle}
-                body={props.HeaderBody}
-            >
-                <Link
-                    activeClass="active"
-                    to="whatishub"
-                    spy={true}
-                    smooth={true}
-                    duration={500}
-                >
-                    <Button className="Button-default" text="What is a hub"/>
-                </Link>
-                <Link
-                    activeClass="active"
-                    to="central"
-                    spy={true}
-                    smooth={true}
-                    duration={500}
-                >
-                    <Button className="Button-default" text="Central Hub" />
-                </Link>
-                <Link
-                    activeClass="active"
-                    to="hubstories"
-                    spy={true}
-                    smooth={true}
-                    duration={500}
-                >
-                    <Button className="Button-default" text="Hub locations" />
-                </Link>
-            </HeaderSection>
-            <DividerLine />
-            <SectionImage
-                image={{
-                    url: require("../../../assets/images/hubs/Stockholm_hub.JPG"),
-                }}
-                alt="Stockholm hub"
-            ></SectionImage>
-            <DividerLine />
-            <Element name="whatishub" />
-            <SingleColumnSection
-                title={props.Section1Title}
-                center
-                halfpage
-                className="ScrollSnapElem"
-            >
-                <p className="align">{props.Section1Body}</p>
-            </SingleColumnSection>
-            <DividerLine />
-            <SectionImage
-                image={{
-                    url: require("../../../assets/images/hubs/Helsinki_hub.JPG"),
-                }}
-                alt="Helsinki hub"
-            />
-            <DividerLine />
-            <Element name="central" />
-            <SingleColumnSection
-                title={props.Section2Title}
-                subtitle={props.Section2Subtitle}
-                halfpage
-                center
-                className="ScrollSnapElem"
-            >
-                <p className="align">{props.Section2Body}</p>
-            </SingleColumnSection>
-            <DividerLine />
-            <SectionImage
-                image={{
-                    url: require("../../../assets/images/hubs/Chengdu_hub.JPG"),
-                }}
-                alt="Chengdu hub"
-            />
-            <DividerLine />
-            <Element name="hubstories" />
+          <Button className="Button-default" text="Hub locations" />
+        </Link>
+      </HeaderSection>
+      <DividerLine />
+      <SectionImage
+        image={{
+          url: require('../../../assets/images/hubs/Stockholm_hub.JPG'),
+        }}
+        alt="Stockholm hub"
+      ></SectionImage>
+      <DividerLine />
+      <Element name="whatishub" />
+      <SingleColumnSection
+        title={props.Section1Title}
+        center
+        halfpage
+        className="ScrollSnapElem"
+      >
+        <p className="align">{props.Section1Body}</p>
+      </SingleColumnSection>
+      <DividerLine />
+      <SectionImage
+        image={{
+          url: require('../../../assets/images/hubs/Helsinki_hub.JPG'),
+        }}
+        alt="Helsinki hub"
+      />
+      <DividerLine />
+      <Element name="central" />
+      <SingleColumnSection
+        title={props.Section2Title}
+        subtitle={props.Section2Subtitle}
+        halfpage
+        center
+        className="ScrollSnapElem"
+      >
+        <p className="align">{props.Section2Body}</p>
+      </SingleColumnSection>
+      <DividerLine />
+      <SectionImage
+        image={{
+          url: require('../../../assets/images/hubs/Chengdu_hub.JPG'),
+        }}
+        alt="Chengdu hub"
+      />
+      <DividerLine />
+      <Element name="hubstories" />
 
-            <SingleColumnSection
-                title={props.Section3Title}
-                subtitle={props.Section3Subtitle}
-                center
-                halfpage
-                className="ScrollSnapElem"
-            >
-                <p className="align">{props.Section3Body}</p>
-            </SingleColumnSection>
-            <DividerLine />
-            <SectionImage
-                image={{
-                    url: require("../../../assets/images/hubs/Cambridge_hub.JPG"),
-                }}
-                alt="Cambridge hub"
-            />
-            <DividerLine />
-            <SingleColumnSection
-                center
-                halfpage
-                title={props.Section4Title}
-                subtitle={props.Section4Subtitle}
-                className="ScrollSnapElem"
-            >
-                <p className="align">{props.Section4Body}</p>
-            </SingleColumnSection>
-        </Page>
-    )
+      <SingleColumnSection
+        title={props.Section3Title}
+        subtitle={props.Section3Subtitle}
+        center
+        className="ScrollSnapElem"
+      >
+        <p className="align">{props.Section3Body}</p>
+        <h1>Currently confirmed Hub cities</h1>
+        <p className="align">{props.hublist}</p>
+        <h1>Currently confirmed Hub cities</h1>
+      </SingleColumnSection>
+      <DividerLine />
+      <SectionImage
+        image={{
+          url: require('../../../assets/images/hubs/Cambridge_hub.JPG'),
+        }}
+        alt="Cambridge hub"
+      />
+      <DividerLine />
+      <SingleColumnSection
+        center
+        halfpage
+        title={props.Section4Title}
+        subtitle={props.Section4Subtitle}
+        className="ScrollSnapElem"
+      >
+        <p className="align">{props.Section4Body}</p>
+      </SingleColumnSection>
+    </Page>
+  )
 }
 
-
 const mapStateToProps = (state) => {
-    const content = selectContent(state);
-    let contentTexts = {}
-    
-    for (let key of Object.keys(textsJSON))
-    {
-        //Find key in strapi if exists, else use fallback in texts.json
-        contentTexts[key] = content[textsJSON.prefix+key] || textsJSON[key];
-    }
+  const content = selectContent(state)
+  let contentTexts = {}
+
+  for (let key of Object.keys(textsJSON)) {
+    //Find key in strapi if exists, else use fallback in texts.json
+    contentTexts[key] = content[textsJSON.prefix + key] || textsJSON[key]
+  }
 
-    return contentTexts;
-};
+  return contentTexts
+}
 
-export default connect(mapStateToProps)(HubInfo);
\ No newline at end of file
+export default connect(mapStateToProps)(HubInfo)
diff --git a/frontend/app/src/pages/Connected/HubInfo/texts.json b/frontend/app/src/pages/Connected/HubInfo/texts.json
index 7b4bd4c9..9a4d53df 100644
--- a/frontend/app/src/pages/Connected/HubInfo/texts.json
+++ b/frontend/app/src/pages/Connected/HubInfo/texts.json
@@ -1,17 +1,17 @@
 {
-    "__COMMENT": "This file is used to store the strapi keys and fallback values for the text in index.js",
-    "prefix": "ConnectedHub",
-    "HeaderTitle": "Hubs",
-    "HeaderBody": "Participants can join physical hacking hubs or participate in the event online. This global-online approach will make our event more accessible for everyone.",
-    "Section1Title": "What is a hub",
-    "Section1Body": "A hub is a physical location for all our participants to enjoy. Junction is usually held Espoo, Finland, to where participants have travelled from all around the world. This year, we have turned the tables, by bringing the event chez you. We've gathered amazing organizers and spaces for all accepted applicants to join, from Cambridge to New Delhi. If you'd like to join the community by organizing a hub yourself, shoot us a message at hello(at)hackjunction.com!",
-    "Section2Title": "Junction Central Hub",
-    "Section2Subtitle": "The organizational hub located in the center of well Finland",
-    "Section2Body": "The Central Hub is from where Junction will coordinate the world's leading hackathon of 2020 and from where the stream studio connecting all of the hubs will be hosted. For once, Finland gets to be the center of something, as the hub is located in the Helsinki metropolitan area. To attend, you need to apply for the hub separately.",
-    "Section3Title": "Junction Hubs all over the world",
-    "Section3Subtitle": "Your official Junction location",
-    "Section3Body": "Junction Hubs are locations all over Tellus, to which you can apply to or join freely, depending on the hub. These official hacking centers are organized by independent, remarkable hackathon organizers who have taken action and joined us to build this year's finest hackathon.",
-    "Section4Title": "Junction Partner Hubs",
-    "Section4Subtitle": "Brought to you by Junction's official partners",
-    "Section4Body": "Some of our outstanding partners will open up their work spaces for your team to enjoy a weekend full of hacking! The best part? You could be hacking at your future office. Find out more about the partner hubs closer to the application period."
-}
\ No newline at end of file
+  "__COMMENT": "This file is used to store the strapi keys and fallback values for the text in index.js",
+  "prefix": "ConnectedHub",
+  "HeaderTitle": "Hubs",
+  "HeaderBody": "Participants can join physical hacking hubs or participate in the event online. This global-online approach will make our event more accessible for everyone.",
+  "Section1Title": "What is a hub",
+  "Section1Body": "A hub is a physical location for all our participants to enjoy. Junction is usually held Espoo, Finland, to where participants have travelled from all around the world. This year, we have turned the tables, by bringing the event chez you. We've gathered amazing organizers and spaces for all accepted applicants to join, from Cambridge to New Delhi. If you'd like to join the community by organizing a hub yourself, shoot us a message at hello(at)hackjunction.com!",
+  "Section2Title": "Junction Central Hub",
+  "Section2Subtitle": "The organizational hub located in the center of well Finland",
+  "Section2Body": "The Central Hub is from where Junction will coordinate the world's leading hackathon of 2020 and from where the stream studio connecting all of the hubs will be hosted. For once, Finland gets to be the center of something, as the hub is located in the Helsinki metropolitan area. To attend, you need to apply for the hub separately.",
+  "Section3Title": "Junction Hubs all over the world",
+  "Section3Subtitle": "Your official Junction location",
+  "Section3Body": "Junction Hubs are locations all over Tellus where you as a participant can apply to join one of our official venues. These are organized by independent remarkable hackathon organizers that we gathered together to join this year's finest online hackathon. You will be asked about attending a hub in the application form. All needed safety measurements are taken and regulations are being followed in the hubs. Our team is happy to answer any questions you might have, so please shoot us a message if there is something on your mind. We serve the rights to all changes regarding hubs.",
+  "Section4Title": "Junction Partner Hubs",
+  "Section4Subtitle": "Brought to you by Junction's official partners",
+  "Section4Body": "Some of our outstanding partners will open up their work spaces for your team to enjoy a weekend full of hacking! The best part? You could be hacking at your future office. Find out more about the partner hubs closer to the application period."
+}