BitesPageTab.js

import React, { Component } from 'react' ;
import {
  NavLink,
  withRouter
} from 'react-router-dom';
import { ApolloProvider } from 'react-apollo';
import ApolloClient from 'apollo-boost';
import { Query } from 'react-apollo';
import { bitesQuery } from './Query';
import Pagination from 'components/Pagination/pagination.js'
import Button from '@material-ui/core/Button';
import InfiniteScroll from 'react-infinite-scroller';
import CardLayout from 'components/cardlayout';
import './Style.css';
import ReactHashtag from 'react-hashtag';
import Tooltip from './tooltip';
import Tags from 'components/tags/tag';
import TagWrapper from 'components/tags/tag.style';
import Badge from 'components/badges/badge.style';
import ButtonModShuffle from 'components/Buttons/ButtonModShuffle.js';
import ButtonModPublish from 'components/Buttons/ButtonModPublish.js';
import Modals from "components/Modal/modal.js";
import ModalStyle, { ModalContent } from 'components/Modal/modal.style.js';
import WithDirection from 'components/common/withDirection';
import TextEditor from 'components/TextEditor';
import SlimImgCropper from 'components/SlimImgCropper/SlimImgCropper.js';
import Select, { SelectOption } from 'components/select/Select.js';
import ButtonModDL from 'components/Buttons/ButtonModDL';
import ButtonModShare from 'components/Buttons/ButtonModShare';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import makeAsyncScriptLoader from 'react-async-script';
import UserBadges from './UserBadges';
import Lightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css';
import Dropdown, {
  DropdownButtons,
  DropdownMenu,
  MenuItem,
  SubMenu
} from 'components/Filter';
import Switch from 'components/Switch';

const client = new ApolloClient({ uri: 'https://sageshift.io/graphql' });

const DropdownButton = DropdownButtons;

const Option = SelectOption;

const children = [];
for (let i = 10; i < 36; i++) {
  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

const Tag = props => (
  <TagWrapper>
    <Tags {...props}>
      {props.children}
    </Tags>
  </TagWrapper>
);

const isoModal = ModalStyle(Modals);
const Modal = WithDirection(isoModal);

const confirm = Modals.confirm;

function info() {
  Modals.info({
    title: <h3>This is a notification message</h3>,
    content: (
      <ModalContent>
      <SlimImgCropper />
      </ModalContent>
    ),
    onOk() {},
    okText: 'OK',
    cancelText: 'Cancel'
  });
}

class BitesPageTab extends Component {

  constructor(props) {
    super(props);
    this.state = {
      expanded: false,
      highlights: 0,
      photoIndex: 0,
      isOpen: false,
    };
  }
     
  state = {
    loading: false,
    visible: false,
    value: '',
    copied: false,
  };
  
  /*renderLightbox() {
    var d1 = document.getElementsByClassName("sageshiftImg");
    var i;
    for (i = 0; i < d1.length; i++) {
      d1[i].insertAdjacentHTML('beforebegin', '<div class="Flutters flutEffect_2">');
      d1[i].insertAdjacentHTML('afterend', '<div class="overlay"><a href="#lightbox-4"><i class="zmdi zmdi-eye"/></a></div></div>');
    }
  }*/
  
  renderList() {
    var uList = document.getElementsByClassName('adjacentList');
    var i;
    for (i = 0; i < uList.length; i++) {
      uList[i].insertAdjacentHTML('afterbegin', '<i class="zmdi zmdi-caret-right" />');
    }

    var blockQuote = document.getElementsByTagName('blockquote');
    var b;
    for (b = 0; b < blockQuote.length; b++) {
      blockQuote[b].insertAdjacentHTML('afterbegin', '<i class="zmdi zmdi-quote" />');
    }
  }

  handleChange = value => {};
  
  /*highlightThis() {
    var hlText = document.getElementsByClassName("highlighted-text");
    var i;
    for (i = 0; i < hlText.length; i++) {
      hlText[i].style.backgroundColor = "red";
    }
  }*/
  


  renderBadges() {
    var str = this.props.bite.author.userBadgeURLS;
    var badges = str.split(',');
    let badge1 = badges[0];
    let badge2 = badges[1];
    let badge3 = badges[2];
    
    const badgeImg1 = (badge1 !== undefined ? 
    <img src={`${badge1}`} /> 
    : null);
    const badgeImg2 = (badge2 !== undefined ? 
    <img src={`${badge2}`} /> 
    : null);
    const badgeImg3 = (badge3 !== undefined ? 
    <img src={`${badge3}`} /> 
    : null);

    var title = this.props.bite.author.userBadgeTitles;
    var badgeTitles = title.split(',');
    var badgeTitle1 = badgeTitles[0];
    var badgeTitle2 = badgeTitles[1];
    var badgeTitle3= badgeTitles[2];

    let tooltipTitle1 = (badge1 !== undefined ? 
    badgeTitle1
    : null);
    let tooltipTitle2 = (badge2 !== undefined ? 
    badgeTitle2
    : null);
    let tooltipTitle3 = (badge3 !== undefined ? 
    badgeTitle3
    : null);
  }

  showModal = () => {
    this.setState({
      visible: true
    });
  };
  handleOk = () => {
    this.setState({ loading: true });
    setTimeout(() => {
      this.setState({ loading: false, visible: false });
    }, 2000);
  };
  handleCancel = () => {
    this.setState({ visible: false });
  };

  handleVisibleChange = flag => {
    this.setState({ visible: flag });
  };

    render() {

      const menuHover = (
        <DropdownMenu>
          <MenuItem>
            <a target="_blank" rel="noopener noreferrer" href="#">
              Concepts
            </a>
          </MenuItem>
          <MenuItem>
            <a target="_blank" rel="noopener noreferrer" href="#">
              Tutorials
            </a>
          </MenuItem>
          <MenuItem>
            <a target="_blank" rel="noopener noreferrer" href="#">
              Book Summaries
            </a>
          </MenuItem>
          <MenuItem>
            <a target="_blank" rel="noopener noreferrer" href="#">
              Misc
            </a>
          </MenuItem>
        </DropdownMenu>
      ); 

      const menuClicked = (
        <DropdownMenu onClick={this.handleMenuClickToLink}>
        <SubMenu title="Type >">
          <MenuItem key="1">
            Concepts
          </MenuItem>
          <MenuItem key="2">
            Tutorials
          </MenuItem>
          <MenuItem key="3">
            Book Summaries
          </MenuItem>
          <MenuItem key="4">
            Misc
          </MenuItem>
          </SubMenu>
          <SubMenu title="Level >">
          <MenuItem key="1">
            Basic
          </MenuItem>
          <MenuItem key="2">
            Intermediate
          </MenuItem>
          <MenuItem key="3">
            Difficult
          </MenuItem>
          </SubMenu>
        </DropdownMenu>
      );

      const { photoIndex, isOpen } = this.state;

      let starImg1 =    
      <p className="pointerText starSpan">        
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
      </p>;
      
      let starImg2 =    
      <p className="pointerText starSpan">       
        <i className="zmdi zmdi-star-half zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
      </p>;
  
      let starImg3 =    
      <p className="pointerText starSpan"> 
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
      </p>;
  
      let starImg4 =    
      <p className="pointerText starSpan">  
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-half zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
      </p>;
  
      let starImg5 =    
      <p className="pointerText starSpan"> 
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
      </p>;
  
      let starImg6 =    
      <p className="pointerText starSpan">     
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-half zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
      </p>;
  
      let starImg7 =    
      <p className="pointerText starSpan">     
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
      </p>;
  
      let starImg8 =    
      <p className="pointerText starSpan">       
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-half zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
      </p>;
  
      let starImg9 =    
      <p className="pointerText starSpan">       
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-outline zmdi-hc-fw tealTheme"/>
      </p>;

      let starImg10 =    
      <p className="pointerText starSpan">       
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star-half zmdi-hc-fw tealTheme"/>
      </p>;

      let starImg11 =    
      <p className="pointerText starSpan">       
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
        <i className="zmdi zmdi-star zmdi-hc-fw tealTheme"/>
      </p>;

      // Renders a random background image when the page loads.
      var bgColorArray = [
      '/assets/images/bg-gradient/BG03.jpg',
      '/assets/images/bg-gradient/BG05.jpg',
      '/assets/images/bg-gradient/BG08.jpg',
      '/assets/images/bg-gradient/BG09.jpg',
      '/assets/images/bg-gradient/BG10.jpg',
      ]
      var selectBG = bgColorArray[Math.floor(Math.random() * bgColorArray.length)];
      var randomBG = {
        backgroundImage: 'url(' + selectBG + ')'
      };

          return (
          <ApolloProvider client={client}>
            <Query query={bitesQuery} onCompleted={ this.renderList }>
              {({ data, loading, error, refetch }) => {
                if (loading) {
                  return (
                    <div className="flex w-100 h-100 items-center justify-center pt7 pushDown loading">
                      <div className="darkText loading">
                        <center>
                          <img src="/assets/images/loading.svg" />
                        </center>
                      </div>
                    </div>
                  )
                }
      
                if (error) {
                  return (
                    <div className="flex w-100 h-100 items-center justify-center pt7">
                      <div className="darkText">
                      <center>
                          <h1>
                            <strong>
                              There's currently some issues connecting to the server.  
                            </strong>
                          </h1>
                          <h3>
                            We're really sorry. Please retry in a few minutes!
                          </h3>
                          <img src="/assets/images/connection-error.png" />
                        </center>
                      </div>
                    </div>
                  )
                }
      
                return (
                  <div>
                    <div className="container">
                      <div className="row bootstrapRowFix">
                        <div className="col-md-6 forceMinWidth">
                          <ButtonModPublish
                            onClick={this.showModal}
                          >
                            <strong>
                              Publish
                            </strong>
                          </ButtonModPublish>&nbsp;                     
                          <ButtonModShuffle>
                            <strong>
                              Shuffle
                            </strong>
                          </ButtonModShuffle>
                          <Modal
                            visible={this.state.visible}
                            onOk={this.handleOk}
                            onCancel={this.handleCancel}
                            footer={[
                              <Button
                                variant="outlined" 
                                key="back" 
                                size="large" 
                                onClick={this.handleCancel}
                              >
                                Cancel
                              </Button>,                  
                              <Button
                                key="submit"
                                variant="contained"
                                size="large"
                                color="secondary"
                                loading={this.state.loading}
                                onClick={this.handleOk}
                              >
                                Share
                              </Button>
                              ]}
                            >
                            <SlimImgCropper />
                            <br />
                            <div className="metaEditor inline-text">
                              <Select
                                defaultValue="Basic"
                                style={{ width: '120px' }}
                              >
                                <Option value="basic">
                                  Basic
                                </Option>
                                <Option value="intermediate">
                                  Intermediate
                                </Option>
                                <Option value="advanced">
                                  Advanced
                                </Option>
                              </Select>&nbsp;
                              <Select
                                mode="tags"
                                style={{ width: '100%' }}
                                placeholder="Add your #hashtags"
                                onChange={this.handleChange}
                              >
                               {children}
                              </Select>
                            </div>
                            <br />
                            <TextEditor />
                          </Modal>
                        </div>
                        <div className="col-md-6 textAlignRight">
                        <Switch />&nbsp;
                          <DropdownButton
                            overlay={menuClicked}
                          >
                            Filter
                          </DropdownButton>&nbsp;
                          <div className="mdn-group block-group modern-forms inline-text">
                            <span className="switch-label inline-text">
                              <strong>           
                                User Notes
                              </strong>
                            </span>&nbsp;
                            <label className="mdn-switch inline-text">
                              <input 
                                type="checkbox"
                                checked 
                                onClick={() => this.setState({ expanded: !this.state.expanded })}
                              />
                              <span className="switch-toggle" />
                            </label>
                          </div> 
                        </div>
                        <br />
                        <br />
                      </div>     
                    </div>             
                      <div className="biteGrid">      
                        {data.bites.nodes.map(bite => { 
                          return (
                            <div key={bite.id} className="biteAdjust darkText">
                              <CardLayout childrenStyle="card-highlight">
                                <div className="biteHeader">
                                  <div className="container">
                                    <div className="row rowMod">
                                      <div className="col-sm-2">
                                        <img src={bite.featuredImage.sourceUrl}
                                          className="biteCoverImage"
                                          onClick={() => this.setState({ isOpen: true })}
                                        />
                                        {isOpen && (
                                          <Lightbox
                                            mainSrc={`${bite.featuredImage.sourceUrl}`[photoIndex]}
                                            animationDuration="450"
                                            imageTitle={`${bite.featuredImage.title}`}
                                            onCloseRequest={() => this.setState({ isOpen: false })}
                                          />
                                        )}
                                      </div>
                                      <div className="col-md-7 column two-thirds">                 
                                        <div className="biteTitle inline-text">                               
                                          <Tooltip
                                          title=
                                          {
                                            <div dangerouslySetInnerHTML=
                                            {
                                              {
                                                __html: '<p>'
                                                +
                                                bite.title
                                                +
                                                '</p>'
                                              }
                                            } 
                                            />
                                          }
                                          >
                                            <NavLink to={`/bite/${bite.id}`}>  
                                            <div 
                                            className="smallText"
                                            dangerouslySetInnerHTML=
                                            {
                                              {
                                                __html: '<h6 class="biteTitleText ellipsisText titleText"><strong>'
                                                +
                                                bite.title
                                                +
                                                '</strong></h6>'
                                              }
                                            } 
                                            />
                                          </NavLink>
                                          </Tooltip>  
                                      </div>                                       
                                            <div className="smallText">
                                            <NavLink to={`/profile/${bite.author.id}`}>  
                                              <img src={`${bite.author.userAvatarURL}`} height="25" />
                                            </NavLink>&nbsp;
                                                <div className="userText">
                                                  <em>
                                                  A bite by&nbsp;
                                                  <Tooltip title=
                                                  {
                                                    (
                                                    bite.author.description !== null
                                                    ?
                                                    <div dangerouslySetInnerHTML=
                                                      {
                                                        {
                                                          __html: 
                                                          '<p>'
                                                          +
                                                          bite.author.description
                                                          +
                                                          '</p>'
                                                        }
                                                      } 
                                                    />
                                                    :
                                                    'This user hasn\'t filled out their bio yet.'
                                                    )
                                                    }
                                                    >                
                                                    <NavLink to={`/profile/${bite.author.id}`}>  
                                                      <strong>
                                                      {bite.author.firstName}
                                                      </strong>
                                                    </NavLink>
                                                  </Tooltip>
                                                  </em>&nbsp;
                                                </div>
                                          </div>                           
                                        </div>                                                           
                                        <div className="col-sm-2 inline-text downloadIcnMarginMod">
                                        <CopyToClipboard onCopy={this.onCopy} text={`https://sageshift.com/bite/${bite.id}`}>
                                            <ButtonModShare>
                                              <i className="zmdi zmdi-copy zmdi-hc-fw lightgreyTheme" />
                                            </ButtonModShare>
                                        </CopyToClipboard>&nbsp;
                                          <Tooltip title="Download this bite as a PDF">    
                                            <ButtonModDL
                                              href={`https://sageshift.io/bite/${bite.slug}/?print-posts=pdf`} 
                                              target="blank"
                                            >
                                              <img src="/assets/images/bookmarkIcons/save.svg" width="35" />
                                            </ButtonModDL> 
                                          </Tooltip>
                                      </div>           
                                    </div>
                                    <div className="row rowMod inline-text">
                                      <div className="inline-text">
                                        <Tooltip
                                          title=
                                          {
                                            (
                                              `${bite.starRatingCount}` == 1
                                              ?
                                              `${bite.starRatingCount}`
                                              +
                                              ' person has rated this bite '
                                              +
                                              `${bite.starRating}`
                                              +
                                              ' stars'
                                              :
                                              `${bite.starRatingCount}` >= 2
                                              ?
                                              `${bite.starRatingCount}`
                                              +
                                              ' people have rated this bite '
                                              +
                                              `${bite.starRating}`
                                              + 
                                              ' stars'
                                              : 
                                              'Rate this bite'
                                            )
                                          }
                                        >
                                        {
                                          (
                                            `${bite.starRating}` >= 0.25 && `${bite.starRating}` <= 0.74
                                            ?
                                            starImg2
                                            :
                                            `${bite.starRating}` >= 0.75 && `${bite.starRating}` <= 1.24
                                            ?
                                            starImg3
                                            :
                                            `${bite.starRating}` >= 1.25 && `${bite.starRating}` <= 1.74
                                            ?
                                            starImg4
                                            :
                                            `${bite.starRating}` >= 1.75 && `${bite.starRating}` <= 2.24
                                            ?
                                            starImg5
                                            :
                                            `${bite.starRating}` >= 2.25 && `${bite.starRating}` <= 2.74
                                            ?
                                            starImg6
                                            :
                                            `${bite.starRating}` >= 2.75 && `${bite.starRating}` <= 3.24
                                            ?
                                            starImg7
                                            :
                                            `${bite.starRating}` >= 3.25 && `${bite.starRating}` <= 3.74
                                            ?
                                            starImg8
                                            :
                                            `${bite.starRating}` >= 3.75 && `${bite.starRating}` <= 4.24
                                            ?
                                            starImg9
                                            :
                                            `${bite.starRating}` >= 4.25 && `${bite.starRating}` <= 4.74
                                            ?
                                            starImg10
                                            :
                                            `${bite.starRating}` >= 4.75
                                            ?
                                            starImg11
                                            :
                                            starImg1
                                          )
                                        }
                                        </Tooltip>       
                                      </div>&nbsp;
                                      {// Hashtag nodes are nested within bite nodes and so must be mapped to unique keys.
                                        bite.hashtags.nodes.map(hashtag => {
                                          return (                                
                                            <div key={hashtag.id} className="darkText inline-text">   
                                              <h6>
                                                  <Tag>
                                                    <ReactHashtag
                                                      renderHashtag={(hashtagValue) => (
                                                        <div>
                                                          <strong> 
                                                            <a className="hashtagText" href={`/app/${hashtagValue}`}>
                                                              {hashtagValue}&nbsp;
                                                            </a>
                                                          </strong>
                                                        </div>
                                                      )}
                                                    >
                                                      {hashtag.name}
                                                    </ReactHashtag>
                                                  </Tag>                    
                                              </h6>
                                            </div>
                                          );
                                        })
                                      }
                                      </div>
                                    </div>
                                  </div>
                                  <div className="cardText">
                                    <center>
                                      <Pagination size="small" total={50} />
                                    </center> 
                                    <p className="cardMainText darkText apply-font" dangerouslySetInnerHTML={{__html: bite.content}} />
                                    {/*<div class="flutter-lightbox" id="lightbox-4">
                                      <a href="#" className="close-me"></a>
                                      <img src="/assets/images/sshift.png" />
                                    </div>*/}
          
                                      <div className="container container32">
                                        <div className="row">
                                          <div className="col-md-1">
                                            <Tooltip
                                              title=
                                              {
                                                (
                                                  bite.saves == 1
                                                  ?
                                                  bite.saves
                                                  +
                                                  ' person has saved this bite'
                                                  :
                                                  bite.saves >= 2
                                                  ?
                                                  bite.saves
                                                  +
                                                  ' people have saved this bite'
                                                  :
                                                  'Click to save this bite to your profile'
                                                )
                                              }
                                            >
                                              <i className="zmdi zmdi-collection-plus collectionPlus zmdi-hc-fw footerBadgeIcn greyThemepointerText" />
                                            </Tooltip>
                                            </div>
                                            <div className="col-md-10 biteMeta inline-text">
                                              <h6>
                                                <strong>
                                                {bite.type}&nbsp;||&nbsp;
                                                </strong>
                                              </h6>
                                              <h6>
                                                <strong>
                                                {bite.level}&nbsp;||&nbsp;
                                                </strong>
                                              </h6>
                                              {
                                                bite.source !== '' 
                                                ?
                                                <h6>
                                                  <strong>
                                                    Source:&nbsp;
                                                  </strong>
                                                  <a className="sourceText ellipsisText" href={bite.source} target="_blank">
                                                    {bite.source}
                                                  </a>
                                                </h6>
                                                :
                                                null
                                              }
                                            </div>
                                            <div className="col-md-1">
                                              <Tooltip title="Please flag content suspected of being spam, inaccurate, or misleading.">
                                                <h3 className="flagIcn">
                                                  <i className="zmdi zmdi-flag zmdi-hc-fw greyIcnText pointerText" />
                                                </h3>
                                              </Tooltip>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                      {
                                        (                             
                                          !this.state.expanded ?  
                                            <div className="commentContainerMain">
                                              <div className="row row55">
                                                <div className="col-md-1">
                                                <Tooltip
                                                title="View all notes"
                                                >                                                          
                                                  <Badge count=
                                                  {
                                                    ( 
                                                      bite.commentCount !== null
                                                      ?
                                                      `${bite.commentCount}`
                                                      :
                                                      0
                                                    )
                                                  }
                                                  >       
                                                    <i className="zmdi zmdi-comment-text-alt notesIcn zmdi-hc-fw footerBadgeIcn greyTheme" />
                                                  </Badge>
                                                </Tooltip>
                                                </div>
                                                  {
                                                    // Comment nodes are nested within bite nodes and so must be mapped to unique keys.             
                                                      (
                                                        bite.commentCount !== null 
                                                        ? 
                                                        bite.comments.nodes.map(comment => {
                                                          return (
                                                            <div className="row row75 pushRight10 marginPush10 inline-text">
                                                            <div className="col-md-10">                                  
                                                                <div key={comment.id} className="darkText inline-text commentContainer">                                 
                                                                  {/*<div className="userCommentMeta inline-text">
                                                                      <Tooltip
                                                                    title={
                                                                    'Message sentiment: ' 
                                                                    +
                                                                    (`${comment.sentimentCategory}` == `neu`
                                                                    ?
                                                                    `neutral` 
                                                                    :
                                                                    `${comment.sentimentCategory}` == `pos`
                                                                    ?
                                                                    `positive`
                                                                    :
                                                                    `${comment.sentimentCategory}` == `neg`
                                                                    ?
                                                                    `negative`
                                                                    :
                                                                    null)    
                                                                    }
                                                                    >
                                                                    {
                                                                      (
                                                                        `{comment.sentimentCategory}` !== null 
                                                                        ? 
                                                                        <img 
                                                                        src={`/assets/images/sentimentIcons/sentiment${comment.sentimentCategory}.png`}
                                                                        width="17"
                                                                        height="16" 
                                                                        />
                                                                        :
                                                                        null
                                                                      )
                                                                    }
                                                                  </Tooltip>&nbsp;*/}                                  
                                                                    {/*<Tooltip
                                                                    title={'Note left by: ' + `${comment.author.__typename}`}
                                                                    >
                                                                    <h6 className="tealTheme inline-text pointerText">
                                                                      <strong>
                                                                        <em>
                                                                          {comment.author.__typename}
                                                                        </em>
                                                                        ...
                                                                      </strong>
                                                                    </h6>
                                                                    </Tooltip>&nbsp;
                                                                </div>*/}
                                                                <Tooltip title="Click this preview to view the entire discussion.                     ">
                                                                    <h5 className="inline-text pointerText" dangerouslySetInnerHTML = 
                                                                      {
                                                                        {
                                                                          __html: '<em>' + comment.content + '</em>'
                                                                        }
                                                                      } 
                                                                      />
                                                                </Tooltip>
                                                                    &nbsp;                                   
                                                                  </div>
                                                                  </div>
                                                                  <div className="col-md-2">
                                                                    <span className="like-btn">
                                                                        <img 
                                                                          src="/assets/images/sentimentIcons/sentimentNeu.png"
                                                                          className="pointerText"
                                                                          width="17"
                                                                          height="16" 
                                                                        />
                                                                        <ul className="reactions-box">
                                                                          <Badge count={`${comment.reactHappy}`}>                 
                                                                            <li className="reaction reaction-like" />        
                                                                          </Badge>
                                                                          <Badge count={`${comment.reactLove}`}>                 
                                                                            <li className="reaction reaction-love" />        
                                                                          </Badge>
                                                                          <Badge count={`${comment.reactSad}`}>                 
                                                                            <li className="reaction reaction-wow" />        
                                                                          </Badge>
                                                                        </ul>
                                                                      </span>
                                                                      </div>              
                                                            </div>                           
                                                          );
                                                        })    
                                                        :
                                                        <div className="col-md-9 postNoteContainer"> 
                                                            <div className="postNotes">
                                                              <h3>
                                                                <strong>
                                                                  Attach a note or resource&nbsp;
                                                                  <i className="zmdi zmdi-edit greyTheme zmdi-hc-fw" />
                                                                </strong>
                                                              </h3>
                                                          </div>
                                                        </div>                      
                                                      )
                                                    }
                               

                                                  <div className="col-md-1 biteFlip">
                                                    <span className="pointerText">
                                                      <Button>
                                                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                      <br />
                                                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                      </Button>
                                                    </span>
                                                  </div>
                                                </div>
                                              </div> 
                                              : 
                                              null
                                              )
                                            }
                                </CardLayout>
                              </div>
                              )
                            }
                          )
                        }                    
                        {this.props.children}
                      </div>       
                    </div>
                    )
                    }
                  }
                  </Query>
                </ApolloProvider>
              )
            }   
        }

export default withRouter(BitesPageTab);