const SectionStateGovernance = props => {
const usStateData = props.usStateMarkdown.frontmatter
const usStateFields = props.usStateMarkdown.fields || {}
return (
<div>
{usStateData.opt_in &&
<section id="state-governance">
<h2>State governance</h2>
<p>The state of {usStateData.title} participated in additional reporting about state and local natural resource governance, revenues, and disbursements.</p>
{ ReactHtmlParser(props.usStateMarkdown.html) }
</section>
}
{usStateData.priority &&
<section id="state-governance">
<h2>State governance</h2>
<p>Because {usStateData.title} has significant natural resource extraction, we gathered additional information about state agencies and regulations that govern natural resource extraction in {usStateData.title}:</p>
{ ReactHtmlParser(props.usStateMarkdown.html) }
</section>
}
</div>
)
}
render() {
let d = this.state;
let temp = <div/>;
if (Object.hasOwnProperty(d).length === 0){
temp = <p className="p-load">
<span className="fa fa-spinner fa-pulse"/>
Загрузка
</p>;
}else{
if(parseInt(d.public) === 1)
temp = <div>
<h1>{d.theme}</h1>
<small>
<Link to='/news/'> ← Назад</Link>
<Link to={`/user/${d.author}/`}>{d.author}</Link>
{d.date_of_create}
</small>
<div>
{ReactHtmlParser(d.source)}
</div>
</div>;
else
temp = <div><p>Статья не опубликованна.</p> <Link to='/news/'> ← Назад к новостям</Link></div>;
}
return (
temp
);
}
const OffshoreRegion = props => {
/// console.log(props.usStateData.nearby_offshore_region);
return (
<p>
{props.usStateData.title} also borders an offshore area with significant natural resource extraction, which may contribute to the state’s economy. For production and revenue data about offshore extraction near {props.usStateData.title}, see {ReactHtmlParser(props.usStateData.nearby_offshore_region)}.
</p>
)
}
const OptIn = props => {
return (
<div>
<p>
The state of {props.usStateData.title} chose to participate in an extended reporting process, so this page includes additional <a href="#state-revenue">state revenue</a> and <a href="#state-disbursements">disbursements</a> data, as well as contextual information about <a href="#state-governance">state governance</a> of natural resources.
</p>
{props.optInIntroHtml &&
<div>
{ReactHtmlParser(props.optInIntroHtml)}
</div>
}
</div>
)
}
render: function() {
let docList = this.state.docs.map((doc,i) => {
return (<DocItem
doc={doc}
openDoc={this.openDoc}
key={i}/>)
})
let docModal;
if (this.state.showDoc) {
let unParsedHTML = this.state.docToShow.body
let parsedHTML = ReactHtmlParser(unParsedHTML)
let docModalStyles = {
height: '80%',
width: '80%',
overflowY: 'scroll',
overflowX: 'hidden'
}
let containerStyles = {
background: 'rgba(0,0,0,0.3)'
}
docModal = (
<Modal
onScroll={this.scroll}
modalStyles={docModalStyles}
containerStyles={containerStyles}
onEndReached={this.scrolledToBottomOnDoc}
docId={this.state.docToShow._id}
>
<DocModal closeDoc={this.closeDoc} doc={this.state.docToShow}>
{parsedHTML}
</DocModal>
</Modal>
)
}
let listModalContainerStyles = {
height: 'calc(100vh - 75px)',
top: '75px',
zIndex: '30',
}
return (
<div className="modal-container" style={listModalContainerStyles}>
<div className="modal">
<ul id="doc-list">
{docList}
</ul>
</div>
{docModal}
</div>
)
}
createNewsItem = (newsItem) => {
//console.log(newsItem)
const title = newsItem.custom_data['wpcf-news-title'][0];
return (
<div className="news__wrapper" key={`news-list-${newsItem.id}`}>
<div data-container-type="flex-container">
<div className="news__image" data-width="45pct">
<figure style={{backgroundImage: `url(${newsItem.custom_data['wpcf-news-hero-image'][0]})`}}></figure>
</div>
<div className="news__details" data-width="55pct">
<h5>{title}</h5>
<h6>{newsItem.custom_data.hasOwnProperty('wpcf-original-article-date') && newsItem.custom_data['wpcf-original-article-date'][0] ? moment.unix(+newsItem.custom_data['wpcf-original-article-date'][0]).utc().format(config.getDateFormats().newsDates) : moment(newsItem.date).format(config.getDateFormats().newsDates)}</h6>
{newsItem.custom_data.hasOwnProperty('wpcf-news-excerpt') ? ReactHtmlParser(newsItem.custom_data['wpcf-news-excerpt'][0]) : ''}
<a
href={`/news/${newsItem.slug}`}
className="__btn--default __btn--small __btn--primary--border" data-reset-scroll="1">View Entire Article</a>
</div>
</div>
</div>
)
}
const StateRevenue = props => {
let revenueYear = props.usStateData.state_revenue_year || 2014
let revenueStreams = OPT_IN_STATE_REVENUES[props.usStateData.unique_id].streams
let revenueTotal = revenueStreams.All.Total[revenueYear]
return (
<div>
{revenueStreams &&
<div>
{ReactHtmlParser(props.usStateFields.state_revenue)}
<h4>{props.usStateData.title} revenue streams ({revenueYear})</h4>
<p>
In { revenueYear }, the state of {props.usStateData.title} collected <strong>{utils.formatToDollarInt(revenueTotal)} in state revenue from natural resource extraction</strong> (this includes both tax and non-tax revenue). Counties also collect and distribute their own revenue from natural resource extraction.
</p>
<p>
<Link to={'/downloads/USEITI_' + props.usStateData.title + '_revenue_streams.pdf'} className="data-downloads">
<DataAndDocs> Download: {props.usStateData.title} revenue streams (PDF)</DataAndDocs>
</Link>
</p>
<table is="bar-chart-table" class="table-basic">
<thead>
<tr>
<th><strong>Revenue stream</strong></th>
<th className="num"><strong>Amount collected</strong></th>
</tr>
</thead>
{
(lazy(revenueStreams).toArray()).map((stream, index) => {
let streamType = stream[0]
let streamName = streamType
if (streamName === 'All') {
streamName = 'Total'
}
let streamSlug = utils.formatToSlug(streamName)
let streamSources = stream[1]
let streamInfo = OPT_IN_STATE_STREAMS[props.usStateData.unique_id] && OPT_IN_STATE_STREAMS[props.usStateData.unique_id][streamType]
let streamDollars = streamSources.Total[revenueYear]
return (
<tbody key={index} id={'revenue-disbursement-stream-' + streamSlug} className="table-accordion-group">
<tr>
{streamInfo
? <td>
<button is="aria-toggle" aria-controls={'stream-' + streamSlug} aria-expanded="false" class="not-button-like">{ streamName }</button>
</td>
: <td>
{ streamName }
</td>
}
<td className="numeric" data-value={streamDollars} data-year-values={ JSON.stringify(streamSources.Total) }>
{ utils.formatToDollarInt(streamDollars) }
</td>
</tr>
{streamInfo &&
<tr id={'stream-' + streamSlug} >
<td colSpan="2">{streamInfo}</td>
</tr>
}
</tbody>
)
})
}
</table>
</div>
}
{props.usStateFields.state_revenue_sustainability &&
<div>
<h4 id="revenue-sustainability">Revenue sustainability</h4>
{ReactHtmlParser(props.usStateFields.state_revenue_sustainability)}
</div>
}
{props.usStateFields.state_tax_expenditures &&
<div>
<h4 id="tax-expenditures">Tax expenditures</h4>
<p>
Tax expenditure programs are policy instruments that reduce state and local revenue through changes to the tax code (for example, tax credits, exemptions, preferential tax rates, or deferrals of tax liability).
</p>
{ReactHtmlParser(props.usStateFields.state_tax_expenditures)}
</div>
}
</div>
)
}