@fortawesome/free-solid-svg-icons#faHistory JavaScript Examples

render() {
        let t = this.props.t;
        let userStyle = {};
        if (this.props.user?.faveColor) {
            userStyle.color = this.props.user.faveColor;
        }
        let userClass = 'username' + (this.props.user.role ? ` ${this.props.user.role.toLowerCase()}-role` : '');

        let playerAvatar = (
            <div className='state'>
                <Avatar imgPath={this.props.user?.avatar} />
                <b className={userClass} style={userStyle}>{this.props.user?.username || t('Noone')}</b>
            </div>
        );

        let statsClass = classNames('panel player-stats', {
            'active-player': this.props.activePlayer
        });

        let firstPlayerToken = this.props.firstPlayer ? (
            <div className='state'>
                <img src={FirstPlayerImage} title='First Player' />
            </div>
        ) : (
            ''
        );

        return (
            <div className={statsClass}>
                {playerAvatar}
                {this.renderLifeRemaining()}
                {this.renderActions()}
                {firstPlayerToken}
                {this.props.activePlayer && (
                    <div className='state first-player-state'>
                        <Trans>Active Player</Trans>
                    </div>
                )}

                {this.props.showMessages && (
                    <div className='state chat-status'>
                        <div className='state'>
                            <a href='#' className='pr-1 pl-1' title='Show dice/card history'>
                                <FontAwesomeIcon
                                    icon={faHistory}
                                    onClick={this.props.onDiceHistoryClick}
                                ></FontAwesomeIcon>
                            </a>
                        </div>
                        <div className='state'>
                            <a href='#' className='pr-1 pl-1' title='Mute spectators'>
                                <FontAwesomeIcon
                                    icon={this.props.muteSpectators ? faEyeSlash : faEye}
                                    onClick={this.props.onMuteClick}
                                ></FontAwesomeIcon>
                            </a>
                        </div>
                        {this.props.showManualMode && (
                            <div className='state'>
                                <a
                                    href='#'
                                    className={this.props.manualModeEnabled ? 'text-danger' : ''}
                                    onClick={this.props.onManualModeClick}
                                >
                                    <FontAwesomeIcon icon={faWrench}></FontAwesomeIcon>
                                    <span className='ml-1'>
                                        <Trans>Manual Mode</Trans>
                                    </span>
                                </a>&nbsp;
                                <a href='#' className='pr-1 pl-1' title='Show manual command list'>
                                    <FontAwesomeIcon
                                        icon={faList}
                                        onClick={this.props.onManualCommandsClick}
                                    />
                                </a>
                            </div>
                        )}
                        <div className='state'>
                            <a
                                href='#'
                                onClick={this.onSettingsClick.bind(this)}
                                className='pr-1 pl-1'
                            >
                                <FontAwesomeIcon icon={faCogs}></FontAwesomeIcon>
                                <span className='ml-1'>
                                    <Trans>Settings</Trans>
                                </span>
                            </a>
                        </div>
                        <div className='state'>
                            <a href='#' className='pr-1 pl-1' title='Copy chat to clipboard'>
                                <FontAwesomeIcon
                                    icon={faCopy}
                                    onClick={this.writeChatToClipboard.bind(this)}
                                ></FontAwesomeIcon>
                            </a>
                        </div>
                        <div>
                            <a
                                href='#'
                                onClick={this.props.onMessagesClick}
                                className='pl-1'
                                title='Toggle chat'
                            >
                                <FontAwesomeIcon icon={faComment}></FontAwesomeIcon>
                                {this.props.numMessages > 0 && (
                                    <Badge variant='danger'>{this.props.numMessages}</Badge>
                                )}
                            </a>
                        </div>
                    </div>
                )}
            </div>
        );
    }

function TagsBlock({ t, data }) {
  const {
    production_countries, genres, release_date, runtime
  } = data;

  if (
    (production_countries.length < 1) &&
    (genres.length < 1) &&
    !release_date &&
    !runtime
  ) return null;

  const getDuration = (mins) => {
    const h = Math.floor(mins / 60);
    let m = mins % 60;
    m = m < 10 ? `0${m}` : m;
    return `${h}${t('movie_details.duration.hours')} ${m}${t('movie_details.duration.minutes')}`;
  };

  const getReleaseDate = (val) => val.split('-').reverse().join('.');

  const mapWithSemicolons = (list) => list.map((item, index) => {

    const value = (
      <span className="tag-value">
        {capitalize(item.name)}
      </span>
    );

    return (
      <Fragment key={`${index}_${item.name}`}>
        {index !== (list.length - 1)
          ? (
            <>
              {value}
              <span className={styles.tagSemicolon}>,</span>
            </>
          )
          : value}
      </Fragment>
    );
  });

  const tags = [];

  const fields = [
    {
      value: genres, icon: faVideo, func: mapWithSemicolons, cls: styles.tagGenres
    },
    {
      value: production_countries, icon: faGlobe, func: mapWithSemicolons, cls: 'countries'
    },
    {
      value: release_date, icon: faCalendarAlt, func: getReleaseDate, cls: 'release-date'
    },
    {
      value: runtime, icon: faHistory, func: getDuration, cls: 'runtime'
    },
  ];

  fields.forEach(({
    value, icon, cls, func
  }) => {
    if (!isEmpty(value)) {
      tags.push({ icon, cls, text: func(value) });
    }
  });

  return (
    <div className={styles.tagsBlock}>
      {tags.map((item, index) => (
        <span
          key={`${index}_${item.text}`}
          className={cn(styles.tagItem, item.cls)}
        >
          <FontAwesomeIcon
            className={styles.tagIcon}
            icon={item.icon}
          />
          <span className={styles.tagText}>
            {item.text}
          </span>
        </span>
      ))}
    </div>
  );
}

GithubRepo = ({ reponame, title, auth_token }) => {

  const [loading, setLoading] = useState(true)
  const [repo, setRepo] = useState(null)

  useEffect(() => {
    const repoFetchUrl = `https://api.github.com/repos/${reponame}?access_token=${auth_token}`
    setLoading(true)
    fetch(repoFetchUrl, { 
      method: 'GET', 
      headers: new Headers({
        'Authorization': auth_token, 
        'Content-Type': 'application/json'
    })})
    .then((res) => res.json()).then((data) => {
      setRepo(data)
      setLoading(false)
    })
    .catch((err) => { throw err });
  }, [reponame, auth_token])

  return (
    <div className="github-repo-component">
      {title ? <div className="header-component">
        <h2><FontAwesomeIcon className="icon-h2" icon={faGithub} /> <span className="h2-title">{title}</span></h2>
      </div> : null}
      {repo && !repo.message ?
      <Container>
        {loading && <p>Fetching the details</p>}
        {repo ? 
          <GithubCard name={repo.name} description={repo.description.substring(0, 300)} 
                      image={repo.organization.avatar_url}
                      username={repo.full_name} url={repo.html_url}
                      from={repo.created_at} /> 
        : null}
        <div style={{textAlign: "center"}}>
            {loading && <p>Fetching the details</p>}
            {repo ?
                <Row>   
                  <Col lg={3}>
                    <div className="repo-card-github">
                      <p className="repo-title"><FontAwesomeIcon icon={faAsterisk} /> Owner</p>
                      <p className="card-para">{repo.owner.login}</p>
                    </div> 
                  </Col>
                  <Col lg={3}>
                    <div className="repo-card-github">
                      <p className="repo-title"><FontAwesomeIcon icon={faCode} /> Languages</p>
                      <p className="card-para">{repo.language}</p>
                    </div> 
                  </Col>
                  <Col lg={3}>
                    <div className="repo-card-github">
                      <p className="repo-title"><FontAwesomeIcon icon={faCodeBranch} /> No. of Forks</p>
                      <p className="card-para">{repo.forks}</p>
                    </div> 
                  </Col>
                  <Col lg={3}>
                    <div className="repo-card-github">
                      <p className="repo-title"><FontAwesomeIcon icon={faHistory} /> Last Updated</p>
                      <p className="card-para">{moment(repo.upadted_at).format("MMMM Do YYYY")}</p>
                    </div> 
                  </Col>
                  <Col lg={3}>
                    <div className="repo-card-github">
                      <p className="repo-title"><FontAwesomeIcon icon={faExclamation} /> Open Issues</p>
                      <p className="card-para">{repo.open_issues_count} Issues Opened</p>
                    </div> 
                  </Col>
                  <Col lg={3}>
                    <div className="repo-card-github">
                      <p className="repo-title"><FontAwesomeIcon icon={faUser} /> No. of Contributors</p>
                      <p className="card-para">{repo.subscribers_count}</p>
                    </div> 
                  </Col>
                  <Col lg={3}>
                    <div className="repo-card-github">
                      <p className="repo-title"><FontAwesomeIcon icon={faGithubAlt} /> default Branch</p>
                      <p className="card-para">{repo.default_branch}</p>
                    </div> 
                  </Col>
                  <Col lg={3}>
                    <div className="repo-card-github">
                      <p className="repo-title"><FontAwesomeIcon icon={faIdBadge} /> License</p>
                      <p className="card-para">{repo.license.name}</p>
                    </div> 
                  </Col>
                </Row> 
            : null}
        </div>
        
      </Container>    
      : <div style={{textAlign: "center"}}><h2>Repo Not Found, Please check the repo name or the Auth Token</h2></div>} 
    </div>
  )
}