{"size": 1643, "ext": "js", "max_stars_repo_path": "src/components/topTags.js", "max_stars_repo_name": "chrissearle/www_cso", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/topTags.js", "max_issues_repo_name": "chrissearle/www_cso", "max_issues_repo_issues_event_min_datetime": "2018-11-09T07:15:13.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-19T10:40:26.000Z", "max_forks_repo_path": "src/components/topTags.js", "max_forks_repo_name": "chrissearle/www_cso", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 44, "max_forks_count": null, "avg_line_length": 21.6184210526, "max_line_length": 78, "alphanum_fraction": 0.489957395}
import React from 'react'

import { StaticQuery, graphql, Link } from 'gatsby'

import { Card, CardHeader, ListGroup, ListGroupItem, Badge } from 'reactstrap'

const TopTags = ({ data }) => {
  const { allMarkdownRemark } = data
  const { edges } = allMarkdownRemark

  const postCountByTag = {}

  edges.forEach(({ node }) => {
    if (node.frontmatter.tags) {
      const tags = node.frontmatter.tags.split(/, */)

      tags.forEach(tag => {
        if (!postCountByTag[tag]) {
          postCountByTag[tag] = 0
        }

        postCountByTag[tag] += 1
      })
    }
  })

  const tags = Object.keys(postCountByTag)
    .sort((a, b) => {
      return postCountByTag[b] - postCountByTag[a]
    })
    .slice(0, 10)

  return (
    <Card className="mb-4">
      <CardHeader>Popular Tags</CardHeader>
      <ListGroup>
        {tags.map(tag => {
          return (
            <ListGroupItem key={tag}>
              <Link to={`/tags/${tag}`}>{tag}</Link>
              <Badge pill color="dark" className="float-right">
                {postCountByTag[tag]}
              </Badge>
            </ListGroupItem>
          )
        })}
      </ListGroup>
    </Card>
  )
}

const WrappedTopTags = () => {
  return (
    <StaticQuery
      query={graphql`
        query {
          allMarkdownRemark(
            filter: { fields: { collection: { eq: "blog" } } }
          ) {
            edges {
              node {
                frontmatter {
                  tags
                }
              }
            }
          }
        }
      `}
      render={data => <TopTags data={data} />}
    />
  )
}

export default WrappedTopTags
