src/components/agencies/agencies.component.js
import React from 'react'
import ReactHtmlParser from 'react-html-parser'
import Breadcrumbs from 'components/breadcrumbs'
import FilterBoxes from 'components/filter-boxes'
import FilterTags from 'components/filter-tags'
import Pagination from 'components/pagination'
import QualityPopover from 'components/quality-popover'
import QuickSearchBox from 'components/quick-search-box'
import SiteBanner from 'components/site-banner'
import SortSection from 'components/sort-section'
import RepoCard from 'components/repo-card'
import AgencyCard from 'components/agency-card'
import { refreshView, scrollToTopOfResults } from 'utils/other'
import { some } from '@code.gov/cautious'
import { connect } from 'react-redux'
import syncUrlSearchParams from 'actions/sync-url-search-params'
import { getReposCount } from '../../utils/repos-count'
class Agencies extends React.Component {
componentDidMount() {
refreshView()
if (!this.props.filterData) {
this.props.saveFilterData()
console.log('this.props.filterData',this.props.filterData)
}
}
onFilterBoxChange(category, values) {
scrollToTopOfResults()
this.props.onFilterBoxChange(category, values)
}
get reposContainer() {
let filt = []
if (this.props.boxes && this.props.boxes.agencies) {
filt = this.props.boxes.agencies.reduce((acc, val) => {
if (val.checked) acc.push(val.value)
return acc
}, [])
}
if (some(this.props.AgencyList)) {
try {
const filters = this.props.filterTags
return (
<div>
<FilterTags filters={this.props.filterTags} onClick={::this.props.onFilterTagClick} />
<div />
<ul className="usa-card-group padding-top-3">
{this.props.AgencyList.map(agency => {
if (filt.length) {
if (filt.indexOf(agency.acronym) !== -1) {
return <AgencyCard key={agency.id} agency={agency} />
}
return
}
return <AgencyCard key={agency.id} agency={agency} />
})}
</ul>
</div>
)
} catch (error) {
console.error('reposContainer error with this.props.repos', this.props.repos)
throw error
}
}
}
updatePage(newPage) {
scrollToTopOfResults()
this.props.updatePage(newPage)
document.getElementsByClassName('project-link')[0].focus()
}
render() {
// const numPages = Math.ceil(this.props.total / this.props.selectedPageSize)
console.log('props.boxes', this.props.boxes)
return (
<main className="search-results-content" id="main-content">
<SiteBanner title="Agencies" />
{/* <Breadcrumbs crumbs={[{ text: 'Home', to: '/' }, { text: 'Agencies' }]} /> */}
<div className="grid-container grid-row tablet-lg:margin-top-4 margin-top-2">
<div className="grid-row grid-gap" />
</div>
<div className="grid-container">
<div className="grid-row grid-gap">
<div id="filter-boxes-section" className="tablet-lg:grid-col-3">
<FilterBoxes
boxes={this.props.boxes}
config={[['Federal Agency', 'agencies']]}
onFilterBoxChange={::this.onFilterBoxChange}
/>
</div>
<div id="filter-results-section" className=" tablet-lg:grid-col-9">
<div className="usa-alert usa-alert--info usa-alert--slim">
<div className="usa-alert__body">
<p className="usa-alert__text">
For inquiries into agency source code, please refer to the{' '}
<a href="https://github.com/GSA/code-gov/tree/master/docs/CoPMeetingMins/SupportingDocs">
agency liaison list
</a>
.
</p>
</div>
</div>
<div className="card-list">{this.reposContainer}</div>
</div>
</div>
</div>
</main>
)
}
}
export default connect(null, { syncUrlSearchParams })(Agencies)