Adding page components

- page header
- page footer
- modal
- resources
- wordcloud
- search
- interviews list
- projects list
- topics list

components/interviewsList/index.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import Modal from '../../components/modal';
+import Data from '../../data/archives/interviews';
+import './style.scss';
+
+class InterviewsList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { isInterviewsListModalOpen: false };
+    this.toggleInterviewsListModal = this.toggleInterviewsListModal.bind(this);
+  }
+
+  toggleInterviewsListModal() {
+    const { isInterviewsListModalOpen } = this.state;
+    this.setState({ isInterviewsListModalOpen: !isInterviewsListModalOpen });
+  }
+
+  render() {
+    const { isInterviewsListModalOpen } = this.state;
+
+    return (
+      <div className="interviews-list-wrap">
+        <div className="mob-interviews-link">
+          <span role="button" tabIndex="0" onClick={this.toggleInterviewsListModal}>Interviews (100)</span> {/* eslint-disable-line */}
+          <span role="button" tabIndex="0" onClick={this.toggleInterviewsListModal}>View</span> {/* eslint-disable-line */}
+        </div>
+        <Modal
+          isModalOpen={isInterviewsListModalOpen}
+          closeModal={this.toggleInterviewsListModal}
+          modalOnMobileOnly
+        >
+          {
+            (
+              <React.Fragment>
+                <h4>Interviews</h4>
+                <ul>
+                  {
+                    Data.map(interview => <li key={interview.id}>{ `${interview.name} ${interview.surname}`}</li>)
+                  }
+                </ul>
+              </React.Fragment>
+            )
+          }
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default InterviewsList;

components/interviewsList/style.scss

@@ -0,0 +1,37 @@
+@import './assets/styles/global.scss';
+
+.mob-interviews-link {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: calculateRem(24);
+
+  @media (min-width: $desktop) {
+    display: none;
+  }
+
+  span {
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.interviews-list-wrap .modal {
+
+  @media (min-width: $desktop) {
+    display: block;
+    width: calculateRem($desktop-related-interviews-width);
+  }
+
+  li {
+    font-size: calculateRem(14);
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

components/modal/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import './style.scss';
+
+const Modal = props => (
+  <div className={`modal ${props.isModalOpen ? 'modal-open' : ''} ${props.modalOnMobileOnly ? 'modal-on-mobile-only' : ''} `}>
+    <div className="modal-inner">
+      {props.children}
+      <div role="button" tabIndex="0" onClick={props.closeModal} className="modal-close">x</div> {/* eslint-disable-line */}
+    </div>
+  </div>
+);
+
+Modal.propTypes = {
+  isModalOpen: PropTypes.bool.isRequired,
+  children: PropTypes.shape({}).isRequired,
+  closeModal: PropTypes.func.isRequired,
+  modalOnMobileOnly: PropTypes.bool,
+};
+
+Modal.defaultProps = {
+  modalOnMobileOnly: false,
+};
+
+export default Modal;

components/modal/style.scss

@@ -0,0 +1,71 @@
+@import './assets/styles/global.scss';
+
+.modal {
+  display: none;
+
+  &.modal-open {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.6);
+    z-index: 3;
+  }
+
+  &.modal-on-mobile-only {
+
+    @media (min-width: $desktop) {
+      background-color: transparent;
+      height: auto;
+
+      .modal-inner {
+        position: initial;
+        padding: 0;
+        width: auto;
+        height: auto;
+        top: inherit;
+        left: inherit;
+      }
+
+      .modal-close {
+        display: none;
+      }
+    }
+  }
+}
+
+.modal-inner {
+  position: relative;
+  z-index: 4;
+  background-color: #fff;
+  width: 90%;
+  height: 90%;
+  top: 5%;
+  left: 5%;
+  overflow: auto;
+  padding: calculateRem(20);
+
+  @media (min-width: $tablet) {
+    padding-top: calculateRem(60);
+  }
+}
+
+.modal-close {
+  position: absolute;
+  top: calculateRem(12);
+  right: calculateRem(12);
+  padding: calculateRem(4);
+  background-color: #cfcfcf;
+  text-align: center;
+  width: calculateRem(32);
+  height: calculateRem(32);
+  border-radius: 50%;
+  cursor: pointer;
+  outline: none;
+
+  &:hover {
+    background-color: #c1c1c1;
+  }
+}

components/pageFooter/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import './style.scss';
+
+export default () => (
+  <div className="page-footer">
+    <div className="container">
+      <p>Copyright { (new Date()).getFullYear() }</p>
+    </div>
+  </div>
+);

components/pageFooter/style.scss

@@ -0,0 +1,8 @@
+@import './assets/styles/global.scss';
+
+.page-footer {
+  background-color: #efefef;
+  padding: calculateRem(8) 0;
+  text-align: center;
+  font-size: calculateRem(12);
+}

components/pageHeader/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import './style.scss';
+
+export default () => (
+  <div className="page-header">
+    <div className="container">
+      <h1>Ethereum Report</h1>
+      <p>
+        We&rsquo;ve interviewed 100+ developers to showcase the biggest opportunities in the
+        Ethereum ecosystem
+      </p>
+    </div>
+  </div>
+);

components/pageHeader/style.scss

@@ -0,0 +1,14 @@
+@import './assets/styles/global.scss';
+
+.page-header {
+  background-color: #efefef;
+  padding: calculateRem(24) 0;
+  text-align: center;
+  margin-bottom: calculateRem(24);
+
+  h1 {
+    margin-bottom: calculateRem(24);
+    font-family: $secondary-font;
+    font-size: calculateRem(36);
+  }
+}

components/projectsList/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Data from '../../data/archives/projects';
+import './style.scss';
+
+export default () => (
+  <div className="projects-list">
+    <h4>Projects</h4>
+    <ul>
+      {
+        Data.map(project => <li key={project}><span>{ `${project}`}</span></li>)
+      }
+    </ul>
+  </div>
+);

components/projectsList/style.scss

@@ -0,0 +1,25 @@
+@import './assets/styles/global.scss';
+
+.projects-list {
+  margin-bottom: calculateRem(24);
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  li {
+    font-size: calculateRem(14);
+    padding: 0 calculateRem(8) calculateRem(8) 0;
+    cursor: pointer;
+
+    span {
+      background-color: rgba(0, 0, 0, 0.1);
+      padding: calculateRem(4) calculateRem(12);
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.3);
+      }
+    }
+  }
+}

components/resources/index.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import Parser from 'html-react-parser';
+import Slider from 'react-slick';
+import Modal from '../../components/modal';
+import WordCloud from '../../components/wordCloud';
+import Data from '../../data/resources/wordclouds';
+import './style.scss';
+
+class Resources extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isWordCloudModalOpen: false,
+      activeSlide: 1,
+    };
+    this.toggleWordCloudModal = this.toggleWordCloudModal.bind(this);
+  }
+
+  toggleWordCloudModal(event) {
+    const { isWordCloudModalOpen } = this.state;
+    const clickedIndex = event.target.dataset.index;
+
+    this.setState({
+      isWordCloudModalOpen: !isWordCloudModalOpen,
+      activeSlide: clickedIndex,
+    });
+
+    this.slider.slickGoTo(clickedIndex);
+  }
+
+  render() {
+    const { isWordCloudModalOpen, activeSlide } = this.state;
+
+    const settings = {
+      infinite: true,
+      speed: 500,
+      slidesToShow: 1,
+      slidesToScroll: 1,
+      initialSlide: activeSlide,
+      className: 'resources-content-slider',
+      arrows: false,
+    };
+
+    return (
+      <div className="resources-wrap">
+        <div className="container">
+          <h2>Resources</h2>
+          <div className="wordclouds-wrap">
+            {
+              Data.map((wordCloud, index) =>
+                (<WordCloud
+                  index={index}
+                  toggleWordCloudModal={this.toggleWordCloudModal}
+                  key={wordCloud.title}
+                  words={wordCloud}
+                />))
+            }
+          </div>
+          <Modal
+            isModalOpen={isWordCloudModalOpen}
+            closeModal={this.toggleWordCloudModal}
+          >
+            <Slider ref={slider => (this.slider = slider)} {...settings}> {/* eslint-disable-line */}
+              {
+                Data.map((slide, index, array) => {
+                  const prevItemIndex = index - 1 === -1 ? array.length - 1 : index - 1;
+                  const nextItemIndex = index + 1 === array.length ? 0 : index + 1;
+
+                  return (
+                    <div key={slide.title}>
+                      <div className="slide-inner">
+                        <div className="slide-header">
+                          <div className="slide-arrow" role="button" tabIndex="0" onClick={() => this.slider.slickGoTo(prevItemIndex)}> {/* eslint-disable-line */}
+                            &lt; <span>{ array[prevItemIndex].title }</span>
+                          </div>
+                          <h3>{ slide.title }</h3>
+                          <div className="slide-arrow" role="button" tabIndex="0" onClick={() => this.slider.slickGoTo(nextItemIndex)}> {/* eslint-disable-line */}
+                            <span>{ array[nextItemIndex].title }</span> &gt;
+                          </div>
+                        </div>
+                        <div className="slide-content">
+                          { Parser(slide.slideContent) }
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })
+              }
+            </Slider>
+          </Modal>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Resources;

components/resources/style.scss

@@ -0,0 +1,75 @@
+@import './assets/styles/global.scss';
+
+.resources-wrap h2 {
+  text-transform: uppercase;
+  font-family: $secondary-font;
+  font-size: calculateRem(36);
+}
+
+.wordclouds-wrap {
+  margin-bottom: calculateRem(24);
+
+  @media (min-width: $bigMobile) {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.resources-content-slider {
+
+  @media (min-width: $tablet) {
+
+    .slick-arrow {
+      top: calculateRem(8);
+    }
+  }
+
+  .slide-inner {
+    text-align: center;
+    outline: none;
+
+    &:focus,
+    &:active {
+      outline: none;
+    }
+  }
+
+  .slide-header {
+    display: flex;
+    justify-content: space-between;
+
+    @media (min-width: $tablet) {
+      margin-bottom: calculateRem(24);
+    }
+
+    h3 {
+      margin: 0 calculateRem(40);
+    }
+  }
+
+  .slide-content {
+    max-width: calculateRem(1024);
+    margin: 0 auto;
+    padding: 0 calculateRem(32);
+  }
+
+  .slide-arrow {
+    cursor: pointer;
+    margin-top: calculateRem(32);
+    outline: none;
+
+    @media (min-width: $tablet) {
+      margin-top: 0;
+    }
+
+    span {
+      display: none;
+
+      @media (min-width: $tablet) {
+        display: inline-block;
+        margin: 0 calculateRem(8);
+        font-size: calculateRem(12);
+      }
+    }
+  }
+}

components/search/index.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import TopicsList from '../../components/topicsList';
+import ProjectsList from '../../components/projectsList';
+import InterviewsList from '../interviewsList';
+import './style.scss';
+
+class Search extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { term: '' };
+    this.onInputChange = this.onInputChange.bind(this);
+  }
+
+  onInputChange(event) {
+    this.setState({ term: event.target.value });
+  }
+
+  render() {
+    return (
+      <div className="search-wrap">
+        <div className="search-bar">
+          <div className="container">
+            <h3>Browse Archives</h3>
+            <input
+              className="search-input"
+              type="search"
+              placeholder="Search archives"
+              value={this.state.term}
+              onChange={this.onInputChange}
+            />
+          </div>
+        </div>
+        <div className="search-results-wrap container">
+          <InterviewsList />
+          <div className="search-results">
+            <TopicsList />
+            <ProjectsList />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Search;

components/search/style.scss

@@ -0,0 +1,50 @@
+@import './assets/styles/global.scss';
+
+.search-bar {
+  background-color: #efefef;
+  margin-bottom: calculateRem(56);
+
+  h3 {
+    padding: calculateRem(32) 0 0;
+    text-align: center;
+    text-transform: uppercase;
+    font-family: $secondary-font;
+    font-size: calculateRem(36);
+  }
+}
+
+.search-input {
+  width: 100%;
+  height: calculateRem(48);
+  border: 5px solid #efefef;
+  padding: calculateRem(12);
+  font-size: calculateRem(16);
+  position: relative;
+  bottom: calculateRem(-24);
+
+  &:focus,
+  &:active {
+    outline: none;
+  }
+}
+
+.search-results-wrap.container {
+  margin-bottom: calculateRem(48);
+
+  @media (min-width: $desktop) {
+    display: flex;
+    max-width: calculateRem($container-width + $desktop-related-interviews-width*2 + $container-padding*2);
+  }
+
+  h4 {
+    margin-bottom: calculateRem(24);
+  }
+}
+
+.search-results {
+
+  @media (min-width: $desktop) {
+    width: calculateRem($container-width);
+    padding: 0 calculateRem($container-padding);
+  }
+}

components/topicsList/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Data from '../../data/archives/topics';
+import './style.scss';
+
+export default () => (
+  <div className="topics-list">
+    <h4>Topics</h4>
+    <ul>
+      {
+        Data.map(topic => <li key={topic}><span>{ `${topic}`}</span></li>)
+      }
+    </ul>
+  </div>
+);

components/topicsList/style.scss

@@ -0,0 +1,25 @@
+@import './assets/styles/global.scss';
+
+.topics-list {
+  margin-bottom: calculateRem(24);
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  li {
+    font-size: calculateRem(14);
+    padding: 0 calculateRem(8) calculateRem(8) 0;
+    cursor: pointer;
+
+    span {
+      background-color: rgba(0, 0, 0, 0.1);
+      padding: calculateRem(4) calculateRem(12);
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.3);
+      }
+    }
+  }
+}

components/wordCloud/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import './style.scss';
+
+const WordCloud = props => (
+  // eslint-disable-next-line
+  <div
+    className="wordcloud"
+    data-index={props.index}
+    onClick={props.toggleWordCloudModal}
+    role="button"
+    tabIndex="0"
+  >
+    <h3 data-index={props.index}>{ props.words.title }</h3>
+    <div data-index={props.index}>
+      { props.words.cloud.map(word => (
+        <span key={word.word} className={`size-${word.size}`}>
+          { word.word }
+        </span>
+        ))
+      }
+    </div>
+  </div>
+);
+
+WordCloud.propTypes = {
+  index: PropTypes.number.isRequired,
+  words: PropTypes.shape({
+    title: PropTypes.string,
+    cloud: PropTypes.array,
+  }).isRequired,
+  toggleWordCloudModal: PropTypes.func.isRequired,
+};
+
+export default WordCloud;

components/wordCloud/style.scss

@@ -0,0 +1,33 @@
+@import './assets/styles/global.scss';
+
+.wordcloud {
+  text-align: center;
+  padding: calculateRem(24);
+  cursor: pointer;
+  outline: none;
+
+  h3{
+    margin-bottom: calculateRem(8);
+  }
+
+  span {
+    display: inline-block;
+    padding: 0 calculateRem(8);
+
+    &.size-1 {
+      font-size: calculateRem(30);
+    }
+
+    &.size-2 {
+      font-size: calculateRem(25);
+    }
+
+    &.size-3 {
+      font-size: calculateRem(20);
+    }
+
+    &.size-4 {
+      font-size: calculateRem(15);
+    }
+  }
+}

pages/index.js

@@ -1,8 +1,22 @@
 import React from 'react';
+import PageHeader from '../components/pageHeader';
+import PageFooter from '../components/pageFooter';
+import Resources from '../components/resources';
+import Search from '../components/search';
 import '../styles.scss';
 
-export default () => (
+class PageWrapper extends React.Component {
-  <div className="home page-wrapper">
+
-    <h1><strong>ETHPrize website</strong> <br />coming soon!</h1>
+  render() {
-  </div>
+    return (
-);
+      <div className="page-wrapper">
+        <PageHeader />
+        <Resources />
+        <Search />
+        <PageFooter />
+      </div>
+    );
+  }
+}
+
+export default PageWrapper;