Map.js

import React from 'react';
import { withRouter } from 'react-router';
import ChallengesJSON from './challenges.json';
import './styles/Map.css';

// Rendering is broken up into multiple functions. Don't let them intimdate you.
// Essentially each one returns a list of DOM elements.
// Menu > ChallengeList > Chapter > Lesson > Link
// Start component flow at bottom of file


/* 4. Render the list of lessons with a link that pushes the history to that particular challenge

  Also check the current challenge list to see if the challenge is completed.
  If so add a check mark!

*/
function renderLesson({title, id}, history, challengesList) {
  const url = title.toLowerCase().replace(" ", "-");
  const challenge = challengesList.find(c => c.title === title);
  const completed = challenge.completed;
  return (
    <li key={id} className="lesson-list-element">

      <button
        className="lesson-link"
        onClick={() => {
          history.push(`${url}`)
        }}
      >{ completed ? <i className="fa fa-check"></i> : null } {title}</button>
    </li>
  )
}

/* 3. make sure to add a key to each chapter element */
function renderChapter(title, lessons, history, challengesList) {
  return (
    <div key={title} className="chapter">
      <span className="chapter-title">{title}</span>
      <ul className="lesson-list">
        {/* nesting lessons under chapter name */}
        {lessons.map(lesson => renderLesson(lesson, history, challengesList))}
      </ul>
    </div>
  )
}

/* 2. Destructure challenges and chapters from JSON data
  Continue to pass the history and challengesList args through the functions
  */
function renderChallengeList({challenges, chapters}, history, challengesList) {
  return challenges.map((lessons, i) => {
    const title = chapters[i];
    return renderChapter(title, lessons, history, challengesList);
  });
}


// Start here
/* 1. Destructure variables from props object */
const Map = ({ challengesList, history, toggleMap, width }) => {
  return (
    <div className="map" style={{ width: width }}>
      <div className="challenge-list">
        {/* Pass the raw JSON object, the history object, and the current challengesList (inherited from App.js) */}
        {renderChallengeList(ChallengesJSON, history, challengesList)}
      </div>
      <a href="javascript:void(0)" className="close-map" onClick={() => toggleMap()}>&times;</a>
    </div>
  );
}

export default withRouter(Map);