fixing wordcloud modal initialSlide index

components/resources/index.js

@@ -12,22 +12,34 @@ class Resources extends React.Component {
 
     this.state = {
       isWordCloudModalOpen: false,
-      activeSlide: 1,
+      activeSlide: 0,
     };
-    this.toggleWordCloudModal = this.toggleWordCloudModal.bind(this);
+    this.openWordCloudModal = this.openWordCloudModal.bind(this);
+    this.closeWordCloudModal = this.closeWordCloudModal.bind(this);
   }
 
-  toggleWordCloudModal(event) {
-    const { isWordCloudModalOpen } = this.state;
-    const clickedIndex = event.target.dataset.index;
+  openWordCloudModal(event) {
+    /*
+    /* Check if clicked element is a child and doesn't have a data-index,
+    /* then go get data-index from the parentNode
+     */
+    let clic  kedElement = event.target;
+    while (clickedElement.dataset.index === undefined) {
+      clickedElement = clickedElement.parentNode;
+    }
+    const clickedIndex = clickedElement.dataset.index;
 
     this.setState({
-      isWordCloudModalOpen: !isWordCloudModalOpen,
+      isWordCloudModalOpen: true,
       activeSlide: clickedIndex,
     });
     this.slider.slickGoTo(clickedIndex);
   }
 
+  closeWordCloudModal() {
+    this.setState({ isWordCloudModalOpen: false });
+  }
+
   render() {
     const { isWordCloudModalOpen, activeSlide } = this.state;
     const settings = {
@@ -49,7 +61,7 @@ class Resources extends React.Component {
               Data.map((wordCloud, index) =>
                 (<WordCloud
                   index={index}
-                  toggleWordCloudModal={this.toggleWordCloudModal}
+                  openWordCloudModal={this.openWordCloudModal}
                   key={wordCloud.title}
                   words={wordCloud}
                 />))
@@ -57,7 +69,7 @@ class Resources extends React.Component {
           </div>
           <Modal
             isModalOpen={isWordCloudModalOpen}
-            closeModal={this.toggleWordCloudModal}
+            closeModal={this.closeWordCloudModal}
           >
             <Slider ref={slider => (this.slider = slider)} {...settings}> {/* eslint-disable-line */}
               {

components/wordCloud/index.js

@@ -7,14 +7,17 @@ const WordCloud = props => (
   <div
     className="wordcloud"
     data-index={props.index}
-    onClick={props.toggleWordCloudModal}
+    onClick={props.openWordCloudModal}
     role="button"
     tabIndex="0"
   >
-    <h3 data-index={props.index}>{ props.words.title }</h3>
-    <div data-index={props.index}>
+    <h3>{ props.words.title }</h3>
+    <div>
       { props.words.cloud.map(word => (
-        <span key={word.word} className={`size-${word.size}`}>
+        <span
+          key={word.word}
+          className={`size-${word.size}`}
+        >
           { word.word }
         </span>
         ))
@@ -29,7 +32,7 @@ WordCloud.propTypes = {
     title: PropTypes.string,
     cloud: PropTypes.array,
   }).isRequired,
-  toggleWordCloudModal: PropTypes.func.isRequired,
+  openWordCloudModal: PropTypes.func.isRequired,
 };
 
 export default WordCloud;