content: 
  import React from 'react';
  import PropTypes from 'prop-types';
  import { Row, Col, FormGroup, HelpBlock , Alert , 
           ControlLabel, Button , Well , FormControl , ProgressBar ,
           Jumbotron , ListGroup , ListGroupItem , Table , 
           Panel , Label , ButtonToolbar , ButtonGroup , Media } from 'react-bootstrap';
  import renderHTML from 'react-render-html';
  import { Meteor } from 'meteor/meteor';
  import { Capitalize , sumMeUp ,paperStatus, AuthorRank , capAllFirstLetter } from '../../../modules/utilities';
  import { RemoveSpaces , NumberOfJournalEditions , ReplaceSpace , 
           GroupArchivedJournalEdition , extractPulishedArchivedEdition , ArchivedJournalEdition } from '../../../modules/utilities2';
  import { Bert } from 'meteor/themeteorchef:bert';
  import Loading from '../../components/Loading/Loading';
  import JournalBanner from '../../components/JournalBanner/JournalBanner';
  import JournalHomePageMenu from '../../components/JournalHomePageMenu/JournalHomePageMenu';
  import Journal from '../../../api/Journal/Journal';
  import Papers from '../../../api/Papers/Papers';
  import { createContainer } from 'meteor/react-meteor-data';
  import moment from 'moment';
  import {_} from 'meteor/underscore';
  import './JournalArchives.scss';
  
                      
                                                                                 
  class JournalArchives extends React.Component {
      constructor(props){
          super(props)
            this.state = {
                ArchivedEdition : [],
                archived :[ {open : [] , 
                             readMore : [],
                            }  ],
            }
            this.open = this.open.bind( this );
            this.reduceWordsLength = this.reduceWordsLength.bind( this );
            this.toggleReadState = this.toggleReadState.bind( this );
      }
  
      componentWillReceiveProps(nextProps) {
          const {journal} = nextProps;
          const archivedEdition = ArchivedJournalEdition( journal && journal[0] && journal[0].publishedEditions);
          if ((archivedEdition.length)){
              let archived = [];
              for (let i=0; i < archivedEdition.length; i++){
                  let papers = archivedEdition[i].papers;
                  let readMore = [];
                  let open = [];
                  let edition = {};
                  papers.map((paper , index )=>{
                      readMore.push( false );
                      open.push( false );
                  });
                  edition.readMore = readMore;
                  edition.open = open;
                  archived.push(edition);
              }
              this.setState({"archived" : archived});
          }
          
      } 
  
      open( event , index , paperIndex ){
          event.preventDefault();
          let archived = this.state.archived
          archived[index].open[paperIndex] = !this.state.archived[index].open[paperIndex];
          this.setState({"archived" : archived});
      }
  
      reduceWordsLength( word ){
          if (word != "undefined" || word != undefined ){
            const wordToShorten = word;
            const newWord = wordToShorten.substr(0 , 120);
            return (newWord + "--------");
          }
        }
  
        toggleReadState( index , paperIndex ){
          let archived = this.state.archived;
          archived[index].readMore[paperIndex] = !this.state.archived[index].readMore[paperIndex];
          this.setState({"archived" : archived});
        }
  
      
      render(){
          const {loading , journal , history , match , paperCount } = this.props;
          const {ArchivedEdition} = this.state;
          const archives = ArchivedJournalEdition(journal && journal[0] && journal[0].publishedEditions);
          return ( !loading ? (journal.length ? (
              <div className="archivesJournal">
                <Row>
                  <Col md={12}>
                     <JournalBanner journal={journal[0]} />
                  </Col>
                </Row>
  
                <Row>
                  <Col md={3} className="menu">
                      <JournalHomePageMenu journal={journal[0]}/>
                  </Col>
  
                  <Col mdOffset={1} md={8}>
                    <h3 className="text-center">
                     {capAllFirstLetter(ReplaceSpace(match.params.journalName))}
                    </h3>
                    {archives.length ? (
                       <div>
                          <p className="text-center lead"><b>Archived Journal Edition</b></p>
                         { archives.map(({editionName , editionImage , creationDate , papers } , index )=>{
                             return (
                              <Row className="journalEdition" key={sumMeUp (index , 20)}>
                                <Col md={12} lg={12} sm={12}>
                               <Media>
                                <Media.Left align="top">
                                    <img className="img img-responsive"
                                      src={editionImage && editionImage.imageUrl} 
                                      alt="journal Archived edition" />
                                </Media.Left>
                                <Media.Body>
                                    <Media.Heading><p className="bigText">
                                      Edition Name : <b>{editionName}</b></p>
                                     </Media.Heading>
                                        
                                        <p>Created On : {moment(creationDate).format('MMMM Do, YYYY')}</p>
                                        <p>Total Papers : <Label bsStyle="success">
                                                             {papers && papers.length } 
                                                           </Label>
                                        </p>
                                        {papers && papers.length ? (
                                              papers.map(({paperTitle , abstract , authors , links } , papersIndex )=> {
                                                  return (
                                                    <div key={papersIndex}>
                                                      <Button className="btnPanel" 
                                                        onClick={(event) => this.open(event , index , papersIndex)}>
                                                        {`Paper Title : ${paperTitle}`}
                                                      </Button>
                                                     <Panel collapsible 
                                                       expanded={ papers && this.state.archived[index].open[papersIndex]}>
                                                       <p><b>Authors</b></p>
                                                          {authors.map(({title , firstname , surname , rank} , Authorindex )=> {
                                                             return ( <p key={sumMeUp(Authorindex , 10)}>{Capitalize(title)} {Capitalize(firstname)} {Capitalize(surname)}  
                                                                &nbsp;&nbsp;||&nbsp;&nbsp;{AuthorRank(rank)} </p> )
                                                           })}
                                                       <p><b>Abstract :</b> </p> 
                                                          {journal && this.state.archived[index].readMore[papersIndex] ? (<div>{ renderHTML(abstract) }</div>)
                                                       : ( <div> { renderHTML(this.reduceWordsLength(abstract))} </div>)
      
                                                           }
                                              
                                                       <br/>
                          
                                                       <p>
                                                         <Button
                                                          bsStyle= {journal && this.state.archived[index].readMore[papersIndex]  ? "default" : "info" }
                                                          bsSize="xsmall"
                                                          onClick={ ()=> this.toggleReadState(index , papersIndex)}>
                                                          {journal && this.state.archived[index].readMore[papersIndex]  ? "Show Less" : "Show More" }
                                                         </Button> 
                                                      </p>  
      
                                                      <p> 
                                                      <a target="_blank"
                                                       href={links}>
                                                      <img src="/image/pdf.jpg"/>
                                                       <br/>&nbsp;&nbsp;Download Paper</a>
                                                    </p>
                                                    </Panel>
                                               </div>
                                                  )
                                              })
                                        ): <div></div>}
                                    <hr />
                                </Media.Body>
                              </Media>
                             </Col>     
                           </Row>
                             )
                         })}
                      
                      </div>
                    ) : <div>
                          <Well>
                              <h1>No archived edition yet.</h1>
                          </Well>
  
                        </div>}
  
                    
                  </Col>
                </Row>
  
              </div>
              
             ) : 
               
                <Alert bsStyle="warning">
                  <h3>No such journal <b>{match.params.journalName }</b></h3>
                </Alert>
                 
                 ) : 
                  
           <Loading /> )
      
      }
  
  }
  
  export default createContainer(({match}) => {
      const journalId = match.params._id;
      const subscription = Meteor.subscribe('journals.getOneJournalAndPapers' , journalId);
      let journal;
      let papers;
      let paperCount;
      if ( subscription.ready()){
          journal = Journal.find( journalId ).fetch();
          papers = Papers.find( {"journalID" : journalId , "paperPublished" : true } ).fetch();
          paperCount = Papers.find({"journalID" : journalId , "paperPublished" : true }).count();
      }
      return {
        loading: !subscription.ready() ,
        journal ,
        papers ,
        paperCount
      };
    }, JournalArchives );
  
  
  
  