content: import React from 'react';
  import PropTypes from 'prop-types';
  import { Table, Alert, Button , ControlLabel , Image ,
           Col , Row , FormGroup } from 'react-bootstrap';
  import { Meteor } from 'meteor/meteor';
  import moment from 'moment';
  import { withTracker } from 'meteor/react-meteor-data';
  import { Bert } from 'meteor/themeteorchef:bert';
  import Loading from '../../components/Loading/Loading';
  import Journal from '../../../api/Journal/Journal';
  import { Capitalize , sumMeUp } from '../../../modules/utilities';
  import { RemoveSpaces } from '../../../modules/utilities2';
  import Icon from '../../components/Icon/Icon';
  import { Carousel } from 'react-responsive-carousel';
  import '../../../../node_modules/react-responsive-carousel/lib/styles/carousel.min.css'
  import { _ } from 'meteor/underscore';
  import { Link } from 'react-router-dom';
  //import styles from 'react-responsive-carousel/lib/styles/carousel.min.css'
  import './HomePageCarousel.scss';
  
  class HomePageCarousel extends React.Component{
      constructor(props){
          super(props);
          
      }
  
   
      render(){
          const { loading , carouselArray , history } = this.props;
          return (!loading ? ( carouselArray.length ? 
            (
             
                <Carousel showArrows={true} infiniteLoop={true} 
                  autoPlay={true} showThumbs={false} thumbWidth={30} >
                  
                  <div>
                    <Image src="/image/homepagebanner.jpg" responsive 
                     className="carouselImage" />
                     <p className="legend">Erudite Scholar</p>
                  </div>
                       
                   {
                       carouselArray.map(({ imageUrl , journalName , _id } , index)=> (
                          
                            <div key={sumMeUp(2000 , index)}>
                                   <Image src={imageUrl} responsive className="carouselImage"/>
                          
                                  <p className="legend"> 
                  
                                     <Link to={`/journal/${RemoveSpaces(journalName)}/${_id}`}>
                                        {journalName}
                                     </Link>
                                   
                                   
                                  </p>
                              </div>
                   )
                  )
                 }
                 
              </Carousel>
          
           
          
          ) : 
                   <Carousel showArrows={true} infiniteLoop={true} 
                     showStatus={false} showThumbs={false}
                      >
                  
                       <div>
                         <Image src="/image/eruditehomepage.png" 
                                responsive className="carouselImage"/>
                          <p className="legend">Erudite Scholars</p>
                       </div>  
                 </Carousel>
          
              ) :  <Loading/> )
      }
  }
  
  
  
  export default HomePageCarouselContainer = withTracker(({}) => {
      const subscription = Meteor.subscribe('journals.getAllHomePageCarouselAndNames');
      let carouselArray = [];
      if ( subscription.ready()){
          const journals = Journal.find({} , {sort : {"journalName" : 1 }}).fetch();
          //extract the images here
          for ( let i=0; i < journals.length; i++){
              const images = journals[i].carouselImage || [];
              const journalName = journals[i].journalName;
              images.map((image , index) => {
                  const obj = {}
                  obj.imageUrl = image.imageUrl;
                  obj.journalName = journalName;
                  obj._id = journals[i]._id;
                  carouselArray.push( obj );
              })
          }
          carouselArray = _.shuffle( carouselArray );
      }
      return {
        loading: !subscription.ready(),
        carouselArray : carouselArray,
      };
    })(HomePageCarousel);
    