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} from 'react-bootstrap';
  import renderHTML from 'react-render-html';
  import { Meteor } from 'meteor/meteor';
  import { Capitalize , sumMeUp , GetJournalSettingsYetToFill , GetNameFromUserId  } from '../../../modules/utilities';
  import { GetJournalEditionPaperCount } from '../../../modules/utilities2';
           
  import { Bert } from 'meteor/themeteorchef:bert';
  import Loading from '../../components/Loading/Loading';
  import Journal from '../../../api/Journal/Journal';
  import Papers from '../../../api/Papers/Papers';
  import { withTracker } from 'meteor/react-meteor-data';
  import { ReactiveVar } from 'meteor/reactive-var';
  import moment from 'moment';
  
                      
                                                    
                                                  
  class AdminViewAllJournals extends React.Component {
      constructor(props){
          super(props)
            this.state = {
  
            }
            this.handleCheckboxChange = this.handleCheckboxChange.bind( this );
      }
  
  
      handleCheckboxChange( event ){
          const journalId = event.currentTarget.getAttribute('data-journalid');
          let status;
          if (event.target.checked){
             status = {
                approved : true ,
                active : true
            }
            
          }
          else{
            status = {
              approved : false ,
              active : false
          }
          }
          Meteor.call('journal.updateJournalStatus' , journalId , status , (error) => {
              if (! error ){
                  Bert.alert('updated' , 'success')
              }
              else{
                  Bert.alert(`There was an error || ${error.reason}`)
              }
          })
        }
      
  
      render(){
          const {loading , journals , history } = this.props;
          return ( !loading ? (
              <div>
               {journals.length ? (
                  <div>
                      
                   <Row>
                     <Col md={12}>
                          <Table responsive>
                        <thead>
                        <tr>
                            <th>S/N</th>
                            <th>Journal</th>
                            <th>Contact</th>
                            <th>Editions/Papers</th>
                            <th>Settings Filled</th>
                            <th>Status</th>
                        </tr>
                        </thead>
                        <tbody>
                            {journals && journals.map(({ journalName , phone , settings , owner , _id ,
                                             publishedEditions , dateCreated , 
                                             approved , active },index) => {
                                              const count = GetJournalEditionPaperCount(journals[index].publishedEditions)
                                return (<tr key={index} >
                                          <td>{sumMeUp(index , 1)}</td>
                                          <td>{Capitalize( journalName )}</td>
                                          <td>
                                            <p>Owner : {GetNameFromUserId(owner)} </p>
                                              {phone && phone.map((number  , index )=> {
                                              return ( <p key={sumMeUp(index , 90)}>   
                                                          <span> { number } </span><br/>
                                                      </p> 
                                                      )
                                              })}
                                          </td>
                                          <td>
                                            <p>
                                                Edition(s) <Label bsStyle="success">{count.editionCount}</Label>
                                                &nbsp;/ Paper(s) <Label bsStyle="success">{count.paperCount}</Label>
                                            </p>
                                          </td>
                                          <td>
                                              <Label bsStyle="success">{GetJournalSettingsYetToFill(journals && journals[index])}</Label>
                                          </td>
                                        
                                          <td>
  
                                              <div className="fine">
                                                  <div className="fine-success">
                                                      <input type="checkbox" checked={ approved && active }
                                                       id={ index } data-journalid={_id } 
                                                       onChange={this.handleCheckboxChange} />
                                                      <label htmlFor={index} className={approved && active ? ("success") : 'danger'}>
                                                        {approved && active ? ("Active") : 'Not Active'} 
                                                      </label>
                                                  </div>
                                              </div>
                                          </td>
                                      
                                       </tr>)
                            })}
                        
                       
                        </tbody>
                    </Table>
                   </Col>
                  </Row>
                    
                 
  
                  </div>
                      ) : <Alert bsStyle="info"><h2>No Journal Saved Yet!</h2></Alert> }        
              </div>) 
           : <Loading /> )
      
      }
  
  }
  
  
  export default AdminViewAllJournalsContainer = withTracker(() => {
      const subscription = Meteor.subscribe('journals.allJournals');
      return {
        loading: !subscription.ready() ,
        journals : Journal.find({}).fetch(),
      };
    }) (AdminViewAllJournals );
  
  
  
  