'use strict';

function ProjectList(props) {
  return <div className="holder">
      <ol>
        {
            props.list.map(
                (item, index) => (
                    <li key={index}>
                        <strong>{item.title}</strong>
                        <p>{item.description}</p>
                        <p>{item.date}</p>
                        <a href={item.URL}>Link to Project</a> <br /><br />
                        <img src={item.image_path} alt={item.title} /> <br /><br /><br />
                    </li>
                )
            )
        }
  </ol>
  </div>
}


jQuery.getJSON(
  'http://localhost:3000/projects',
  function(jsonFromJquery) {
    ReactDOM.render(
      <ProjectList list={jsonFromJquery} />,
      document.getElementById('myfirstapp')
    ); 

    const mc = new Hammer( document.getElementById('myfirstapp') );
    mc.get("swipe").set( {direction: Hammer.DIRECTION_HORIZONTAL} );
    mc.on(
      "swipe",
      function(ev) {
        console.log(ev.direction);
        if (ev.direction == 2 ) {
          jQuery('.holder ol').css('left', '+=300px');
        } else if (ev.direction == 4) {
          jQuery('.holder ol').css('left', '-=300px');
        }
      }
    );
  }
);

