/* eslint-disable max-len */

import React from 'react';
import PropTypes from 'prop-types';
import Helmet from 'react-helmet';

import Header from 'components/Header/Header';
import Footer from 'components/Footer/Footer';
import Info from './components/Info/Info';
import Category from './components/Category/Category';

import styles from './Challenges.scss';

const CATEGORIES = [
  {
    name: 'Urban Planning',
    description: 'Description',
    challenges: [
      {
        name: '14th Street',
      },
      {
        name: 'Gaslamp',
      },
    ],
  },
  {
    name: 'Category 2',
    description: 'Description',
    challenges: [
      {
        name: 'Challenge 1',
      },
      {
        name: 'Challenge 2',
      },
    ],
  },
];

/**
 * Challenges
 */

const propTypes = {};

const contextTypes = {
  router: PropTypes.object,
};

const defaultProps = {};

function Challenges() {
  return (
    <div className={styles.challenges}>
      <Helmet
        title="Challenges"
      />
      <Header
        backgroundImg={''}
        headerText={'Challenges'}
        subheaderText={''}
        showButton={false}
      />
      <Info />
      <div>
        {CATEGORIES.map(category =>
          <Category key={category.name} {...category} />
        )}
      </div>
      <Footer />
    </div>
  );
}

Challenges.propTypes = propTypes;
Challenges.contextTypes = contextTypes;
Challenges.defaultProps = defaultProps;

export default Challenges;

/* eslint-disable max-len */

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Helmet from 'react-helmet';

import Header from 'components/Header/Header';
import Footer from 'components/Footer/Footer';
import Info from './components/Info/Info';
import Category from './components/Category/Category';

import styles from './Challenges.scss';

/**
 * Challenges
 */

const propTypes = {};

const contextTypes = {
  router: PropTypes.object,
};

const defaultProps = {};

class Challenges extends Component {
  constructor(props) {
    super(props);
    this.state = { categories: [] };
  }

  componentDidMount() {
    fetch('https://d4sd-api.ucsd.edu/categories?challenges=true')
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        this.setState({ categories: data.categories });
      });
  }

  render() {
    return (
      <section className={styles.challenges}>
        <Helmet
          title="Challenges"
        />
        <Header
          backgroundImg={''}
          headerText={'Challenges'}
          subheaderText={''}
          showButton={false}
        />
        <Info />
        <div>
          {this.state.categories.map(category =>
            <Category key={category.name} {...category} />
          )}
        </div>
        <Footer />
      </section>
    );
  }
}

Challenges.propTypes = propTypes;
Challenges.contextTypes = contextTypes;
Challenges.defaultProps = defaultProps;

export default Challenges;

Use API data on Challenge index
Use API data on Challenge index

