<repo_name>TanuhaUA/Mate-hackathon<file_sep>/src/Components/BlogPage/Percentage.js
import React, { Component } from "react";
import StatisticInformation from "./StatisticInformation";

class Percentage extends Component {
  render() {
    return <div className='blogPage__percentage'>{ StatisticList(this.props.statistic) }</div>;
    
  }
}

export default Percentage;

function StatisticList(statistic) {
  let arr = [];

  for (let key of Object.keys(statistic)) {
    arr.push(
      <StatisticInformation key={key} title={key} percent={statistic[key]} />
    );
  }

  return arr;
}
<file_sep>/src/Components/Header/index.js
import React from 'react';
import { NavLink } from 'react-router-dom'
import Logo from '../Logo';
import './style.scss';

class Header extends React.Component {
  render() {
    return (
      <header className="header">
        <div className="content">
        <span className="content__item logo">
          <Logo color="#676767" fontSize="30px"/>
        </span>
          <nav className="content__item menu">
            <ul className="menu__items">
              <li className="menu__item"><NavLink exact to="/" activeClassName="active">
                <div className="menu__anim">Home</div>
              </NavLink></li>
              <li className="menu__item"><NavLink to="/about" activeClassName="active">
                <div className="menu__anim">About</div>
              </NavLink></li>
              <li className="menu__item"><NavLink to="/team" activeClassName="active">
                <div className="menu__anim">Team</div>
              </NavLink></li>
              <li className="menu__item"><NavLink to="/services" activeClassName="active">
                <div className="menu__anim">Services</div>
              </NavLink></li>
              <li className="menu__item"><NavLink to="/portfolio" activeClassName="active">
                <div className="menu__anim">Portfolio</div>
              </NavLink></li>
              <li className="menu__item"><NavLink to="/blog" activeClassName="active">
                <div className="menu__anim">Blog</div>
              </NavLink></li>
              <li className="menu__item"><NavLink to="/contact" activeClassName="active">
                <div className="menu__anim">Contact</div>
              </NavLink></li>
            </ul>
          </nav>
        </div>
      </header>
    );
  }
}

export default Header;<file_sep>/src/Components/OurSkills/Progress/index.js
import React, {Component} from 'react';

class Progress extends Component {
  render() {
    return (
      <div className="our-skills__item">
        <div className="our-skills__item-title">
          <span className="our-skills__skill">{this.props.skill}</span>
          <span className="our-skills__value">{this.props.value}%</span>
        </div>
        <progress className="our-skills__progress-bar" max="100" value={this.props.value}/>
      </div>
    )
  }
}

export default Progress;<file_sep>/src/Components/OurTeam/index.js
import React, { Component } from 'react';
import SliderInner from './SliderInner';
import Title from '../Title'
import './style.scss';

export class OurTeam extends Component {
  state = {
    teamList: [],
    countClicks: 0
  }  

  componentDidMount() {
    fetch('https://tanuhaua.github.io/datas-file-json/bhagaskara/team.json')
      .then((response) => {
        response.json().then((data) => {
          this.setState({
            teamList: data
          });
          const arr = JSON.parse(JSON.stringify(this.state.teamList));
          for (let i = 0; i < arr.length; i++) {
            let url = 'https://api.github.com/users/' + arr[i].githubName;
            fetch(url)
              .then((response) => {
                response.json().then((data) => {
                  arr[i].avatar_url = data.avatar_url;
                  this.setState({
                    teamList: arr
                  });
                });
              });
          }
        });
      });
  }

  handleClick(i) {
    let {countClicks} = this.state;
    this.setState({
      countClicks: countClicks + i
    })
  }

  setClick() {
    this.setState({
      countClicks: 0
    })
  }

  render() {
    return (
      <section id="OurTeam">
        <div className="wrap">

        <Title title="Our" titlePurple="team" />

          <div className="slider">
            <div className="slider__controls">
              <img
                onClick={ () => {this.handleClick(1)} }
                className="slider__control"
                src="/img/arrow.png"
                alt="arrow to switch slider of team mates"
              />
              <img
                onClick={ () => {this.handleClick(-1)} }
                className="slider__control slider__control--reverse"
                src="/img/arrow_reverse.png"
                alt="arrow to switch slider of team mates"
              />
            </div>
            <SliderInner setClick={ this.setClick.bind(this) } countClicks={ this.state.countClicks } teamList={ this.state.teamList } />
          </div>
        </div>
      </section>
    );
  }
}



export default OurTeam<file_sep>/src/Components/Features/FeatureComponent/index.js
import React from 'react';
import './style.scss';

const FeatureComponent = (props) => {
  return (
    <div className="feature-component__wrapper">
      <div className="feature-component">
        <div className="feature-component__icon">
          <svg width="172" viewBox="0 0 172 186">
            <path className="feature-component__hexagon"
                  d="M1419.57,1583.07q-20.235-12.15-40.87-23.6t-20.24-35.04q0.42-23.6,0-47.19-0.4-23.61,20.24-35.05t40.87-23.59q20.235-12.165,40.46,0t40.87,23.59q20.64,11.445,20.24,35.05-0.42,23.6,0,47.19,0.4,23.6-20.24,35.04t-40.87,23.6Q1439.8,1595.22,1419.57,1583.07Z"
                  transform="translate(-1354 -1408)"/>
          </svg>
          <svg className="feature-component__hexagon-inner-svg" width={props.hexagonInnerWidth}
               viewBox={props.hexagonInnerViewbox}>
            <path className="feature-component__hexagon-inner" d={props.hexagonInnerPath}
                  transform={props.hexagonInnerTransform}/>
          </svg>
        </div>
        <h2 className="feature-component__headline">{props.headline}</h2>
        <p className="feature-component__paragraph">Fusce facilisis velit libero, nec
          dignissim lacus sagittis non.
          Sed nec porta ante. Pellentesque
          habitant morbi tristique senectus et.</p>
      </div>
    </div>
  );
};

export default FeatureComponent;<file_sep>/src/Components/HomePage/index.js
import React from 'react';
import './style.scss';
import '../../Styles/main.scss';
import Logo from '../Logo';
import settings from './img/settings.png';
import bubble from './img/bubble.png';
import paperplane from './img/paperplane.png';
import pen from './img/pen.png';
import photo from './img/photo.png';
import user from './img/user.png';
import { Link } from "react-router-dom";
import Features from "../Features";

class HomePage extends React.Component {
  render() {
    return (
      <div>
        <div className="home">
          <div className="home__content">
            <div className="home__logo">
              <Logo color='#fff' fontSize='6rem'/>
            </div>
            <h1 className="home__title home__title--main">Fusce rutrum pretium lorem sempter nulla</h1>
            <p className="home__title home__title--sub"> lorem ipsum furcum pretium lorem septer nulla gu op dunap
              sulem
              lorem do burta</p>
            <div className="home__icon-box">
              <Link to="/about" className="home__icon">
                <img className="icon__item" src={settings} alt="icon"/>
                <p className="home__icon-text">About</p>
              </Link>
              <Link to="/team" className="home__icon">
                <img className="icon__item" src={user} alt="icon"/>
                <p className="home__icon-text">Team</p>
              </Link>
              <Link to="/services" className="home__icon">
                <img className="icon__item" src={bubble} alt="icon"/>
                <p className="home__icon-text">Services</p>
              </Link>
              <Link to="/portfolio" className="home__icon">
                <img className="icon__item" src={photo} alt="icon"/>
                <p className="home__icon-text">Portfolio</p>
              </Link>
              <Link to="/blog" className="home__icon">
                <img className="icon__item" src={pen} alt="icon"/>
                <p className="home__icon-text">Blog</p>
              </Link>
              <Link to="/contact" className="home__icon">
                <img className="icon__item" src={paperplane} alt="icon"/>
                <p className="home__icon-text">Contact</p>
              </Link>
            </div>
          </div>
        </div>
        <Features/>
      </div>
    )
  }
}

export default HomePage;
<file_sep>/src/Components/OurTeam/SliderInner.js
import React, { Component } from 'react';
import sizeMe from 'react-sizeme';
import './style.scss';

export class SliderInner extends Component {
  state = {
    moveOn: 0
  }

  render() {
    let showItemFromTeamList = () => {
      let arr = this.props.teamList,
          result = [];
      if (!arr[arr.length - 1]) return;
      if (!arr[arr.length - 1].avatar_url) return;
      for (let i = 0; i < arr.length; i++) {
        result.push(
          <div className="slider__item" key={ i }>
            <img className="slider__photo" src={ arr[i].avatar_url } alt="photo of person from team"/>
            <h3 className="slider__name">
              { arr[i].fullName }
            </h3>
            <p className="slider__position">
              CEO / Google inc.
            </p>
            <div>
              <a href="#" className="slider__icon">f</a>
              <a href="#" className="slider__icon">g</a>
            </div>
          </div>
        );
      }
      return result;
    };

    this.state.moveOn = this.props.size.width * this.props.countClicks;

    return (
      <div className="slider__inner" >
        <div className="slider__slides" style={{ transform: `translateX(${ this.state.moveOn }px)` }}>
          { showItemFromTeamList() }
        </div>
      </div>

    );
  }
}

export default sizeMe()(SliderInner);
// transform: `translateX(${this.props.size.width * this.props.countClicks}px)` <file_sep>/src/Components/PortfolioPage/index.js
import React from 'react';
import './style.scss';
import PPImagesItem from '../PPImagesItem';
import Title from '../Title';

class PortfolioPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      isLoading: false,
      currentAmountOnPage: 6,
      filteredData: [],
      pressedTab: 'ALL',
    }
  }

  componentDidMount() {
    fetch('https://tanuhaua.github.io/datas-file-json/bhagaskara/portfolio.json')
      .then(response => response.json().then(response => this.setState({
          data: response,
          filteredData: response,
          isLoading: false,
        })
      ))
  }

  handleClick() {
    const {currentAmountOnPage} = this.state;
    if (currentAmountOnPage + 6 > this.state.filteredData.length) {
      this.setState({currentAmountOnPage: currentAmountOnPage + (this.state.filteredData.length - currentAmountOnPage)});
    } else {
      this.setState({currentAmountOnPage: currentAmountOnPage + 6});
    }
  }

  handleClickByFilter(type, event) {

    if (this.state.filteredData.length >= 6) {
      this.setState({currentAmountOnPage: 6});
    } else {
      this.setState({currentAmountOnPage: this.state.filteredData.length});
    }

    let filteredArray = [];
    this.state.data.map((item) => {
      if (item.type === type) {
        filteredArray.push(item);
      } else if (type === 'ALL') {
        filteredArray = this.state.data;
      }
      return filteredArray;
    });
    this.setState({filteredData: filteredArray, pressedTab: type});
  }



  render() {
    const tabsNameArray = [];
    const {data: dataArray, currentAmountOnPage} = this.state;
    dataArray.forEach((dataArrayItem) => {
      if (tabsNameArray.indexOf(dataArrayItem.type) === -1) {
        tabsNameArray.push(dataArrayItem.type);
      }
    });

    const addSixItems = () => {
      const sixItems = [];
      if (dataArray.length && currentAmountOnPage <= dataArray.length) {
        for (let i = 0; i < currentAmountOnPage; i++) {
          sixItems.push(<PPImagesItem key={i} title={dataArray[i].title} keywords={dataArray[i].keywords}
                                      alt={dataArray[i].title} src={dataArray[i].image}/>);
        }
      }
      return sixItems;
    };

    return (
      <section className="portfolio-page">
        <div className="portfolio-page__wrapper">
          <Title title="Our" titlePurple="portfolio"/>
          <ul className="portfolio-page__tabs">
            <li className={'portfolio-page__tabs-item ' + (this.state.pressedTab === 'ALL' ? 'portfolio-page__tabs-item--active' : '')} onClick={(event) => this.handleClickByFilter('ALL', event)}>All</li>
            {tabsNameArray.map((tabsNameArrayItem, i) => {
              return <li key={i} className={'portfolio-page__tabs-item ' + (this.state.pressedTab === tabsNameArrayItem ? 'portfolio-page__tabs-item--active' : '')}
              onClick={(event) => this.handleClickByFilter(tabsNameArrayItem, event)}>
                {tabsNameArrayItem}</li>
            })}
          </ul>

          <div className="portfolio-page__images">
            {addSixItems()}
          </div>
          {this.state.currentAmountOnPage !== this.state.filteredData.length ? <button className="portfolio-page__button" type="button" onClick={this.handleClick.bind(this)}>Watch more
          </button> : null}
        </div>
      </section>
    )
  }
}

export default PortfolioPage;<file_sep>/src/Components/ContactPage/index.js
import React from 'react';
import './style.scss';
import Logo from '../Logo';
import Title from '../Title';

class ContactPage extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      email: '',
      formErrors: {email: ''},
      emaildValid: false,
      formValid: true
    }
  }

  handleUserInput = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    this.setState({[name]: value}, () => { this.validateField(name, value)});
  };

  validateField(fieldName, value) {
    const fieldValidationErrors = this.state.formErrors;
    let emailValid = this.state.emailValid;
    
    switch(fieldName) {
      case 'email':
        emailValid = value.match(/^([a-z0-9_-]+\.)*[a-z0-9_-]+@[a-z0-9_-]+(\.[a-z0-9_-]+)*\.[a-z]{2,6}$/i);
      break;
      default:
      break;
    }

    this.setState({formErrors: fieldValidationErrors,
      emailValid: emailValid,
    }, this.validateForm);
  }

  validateForm() {
    this.setState({formValid: this.state.emailValid});
  }

  render() {
    return (
      <div className="contact">
        <div className="wrapper">
          <Title
            title={'Get'}
            titlePurple={'in touch'}
          />
          <div className="contact-block">
            <div className="contact-form">
              <form method="POST" action="#">
                <div className="contact-form__name">
                  <input type="text" className="contact-form__control" name="text" placeholder="Your Name" required/>
                </div>
                <div className="contact-form__email">
                  <input type="email" className="contact-form__control" name="email" placeholder="Your Email" required value={this.state.email} onChange={this.handleUserInput}/>
                  {!this.state.formValid && (
                    <p className="contact-form__error">Email is not valid</p>
                  )}
                </div>
                <div className="contact-form__message">
                  <textarea name="comment" cols="23" rows="10" className="contact-form__control"placeholder="Your Message" required></textarea>
                </div>
                <button type="submit" className="contact-form__btn" onClick={function(e){e.preventDefault()}}>
                  Send Email
                </button>
              </form>
            </div>
            <div className="contact-info">
              <p className="contact-info__text">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
              </p>
              <p className="contact-info__details">
                1600 Pennsylvania Ave NW, Washington, <br/>
                DC 20500, United States of America.
              </p>
              <p className="contact-info__details">
                T: (202) 456-1111 <br/>
                M: (202) 456-1212
              </p>
              <div className="contact-info">
                <a href="#" className="contact-info__social">f</a>
                <a href="#" className="contact-info__social">t</a>
                <a href="#" className="contact-info__social">g</a>
              </div>
            </div>
          </div>
        <Logo color='#676767' fontSize='50px'/>
        </div>
      </div>
    );
  }
}

export default ContactPage;<file_sep>/src/Components/PPImagesItem/index.js
import React from 'react';
import './style.scss';

class PPImagesItem extends React.Component {
  render() {
      return (
        <div className="portfolio-page__images-item">
          <div className="portfolio-page__image-wrapper">
            <img className="portfolio-page__image" src={this.props.src} alt={this.props.title} />
          </div>
          <p className="portfolio-page__images-title">{this.props.title}</p>
          <p className="portfolio-page__images-keywords">{this.props.keywords}</p>
        </div>
      )
    }
}

export default PPImagesItem;