jsx import * as React from 'react' ; import { StaticQuery , graphql } from 'gatsby' ; import { jsx } from 'theme-ui' ; import { History } from '@reach/router' ; import queryString from 'query-string' ; import { CardList } from './CardList' ; import { Search } from '../Search' ; interface ICardListContainerProps extends History { } const DIR_NAME = 'posts' ; const STATUS = 'draft' ; export const CardListContainer = ( { location } ) => { const [ searchParam , setSearchParam ] = React . useState ( '' ) ; const handleSearchParam = ( filterValue ) => { ! filterValue ? history . replaceState ( null , '' , location . pathname ) : history . replaceState ( { } , '' , `?tag=${ filterValue }` ) ; setSearchParam ( filterValue ) ; } ; React . useEffect ( ( ) => { const filterVal = queryString . parse ( location . search ) . tag ; filterVal && setSearchParam ( filterVal as string ) ; } , [ ] ) ; return ( < StaticQuery query = { graphql `
        query listQuery {
          allMdx(
            sort: { order: DESC, fields: [frontmatter___date] }
            filter: { frontmatter: { status: { ne: "draft" } } }
          ) {
            group(field: frontmatter___tags) {
              fieldValue
              totalCount
            }
            edges {
              node {
                fileAbsolutePath
                excerpt(pruneLength: 100)
                fields {
                  slug
                }
                timeToRead
                wordCount {
                  words
                }
                frontmatter {
                  title
                  tags
                  date
                  status
                  featuredImage {
                    childImageSharp {
                      fixed(fit: COVER, width: 130, height: 130) {
                        aspectRatio
                        width
                        height
                        src
                        srcSet
                      }
                      fluid {
                        aspectRatio
                        sizes
                        src
                        srcSet
                      }
                    }
                  }
                }
              }
            }
          }
        }
      ` } render = { data => { const listItems = data . allMdx . edges . map ( ( item ) => { return item ; } ) . filter ( ( item ) => item . node . fileAbsolutePath . includes ( `/${ DIR_NAME }/` ) ) . filter ( ( obj ) => obj . node . frontmatter . tags . includes ( searchParam ) || searchParam === '' ) ; const listTags = data . allMdx . group . map ( ( item ) => item . fieldValue ) . reduce ( ( newTags , tag ) => { newTags . push ( { value : tag } ) ; return newTags ; } , [ ] ) . filter ( ( obj ) => obj . value === searchParam || searchParam === '' ) ; return ( < React . Fragment > < Search selectedTag = { searchParam } filterData = { listTags } onSearch = { filterValue => handleSearchParam ( filterValue ) } / > < CardList listItems = { listItems } /> < /React.Fragment>); } } />); } ;