Skip to content
This repository has been archived by the owner on Jan 7, 2020. It is now read-only.

Commit

Permalink
Merge pull request #27 from cfpb/alt-disclosure
Browse files Browse the repository at this point in the history
Disclosure s3 server and select component
  • Loading branch information
awolfe76 authored Apr 17, 2018
2 parents a7930e1 + ffd2421 commit ff9674c
Show file tree
Hide file tree
Showing 22 changed files with 269 additions and 305 deletions.
4 changes: 2 additions & 2 deletions .yarnrc
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@

lastUpdateCheck 1496303126136
yarn-offline-mirror "./npm-packages-offline-cache"
#--install.pure-lockfile true
#--install.offline true
--install.pure-lockfile true
--install.offline true
2 changes: 1 addition & 1 deletion nginx/nginx.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ http {
add_header Strict-Transport-Security 'max-age=31536000; includeSubDomains; preload';

# CSP
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' data: https://www.googletagmanager.com https://www.google-analytics.com; img-src 'self' https://www.google-analytics.com; style-src 'self'; font-src 'self'; object-src 'none'; frame-src ##APP_SERVER## https://www.youtube.com/; connect-src ##APP_SERVER## ##HMDA_API_SERVER## https://ffiec-api.cfpb.gov https://www.google-analytics.com https://s3.amazonaws.com;";
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' data: https://www.googletagmanager.com https://www.google-analytics.com; img-src 'self' https://www.google-analytics.com; style-src 'self'; font-src 'self'; object-src 'none'; frame-src ##APP_SERVER## https://www.youtube.com/; connect-src ##APP_SERVER## ##HMDA_API_SERVER## https://ffiec-api.cfpb.gov https://www.google-analytics.com https://s3.amazonaws.com http://localhost:1337;";

# Prevent buffer tampering
client_body_buffer_size 16k;
Expand Down
Binary file added npm-packages-offline-cache/classnames-2.2.5.tgz
Binary file not shown.
Binary file not shown.
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
"react": "16.2.0",
"react-dom": "16.2.0",
"react-router-dom": "4.2.2",
"react-select": "1.2.1",
"uswds": "1.4.6"
},
"devDependencies": {
Expand All @@ -59,7 +60,7 @@
"eslint-config-react-app": "2.1.0",
"eslint-plugin-flowtype": "2.44.0",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.6.1",
"html-minifier": "3.5.9",
"jest-cli": "22.3.0",
Expand Down
1 change: 0 additions & 1 deletion src/App.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react'
import { Switch, Route } from 'react-router-dom'
import BannerUSA from './common/BannerUSA.jsx'
import AppHeader from './common/AppHeader.jsx'
import Footer from './common/Footer.jsx'
import Home from './Home.jsx'
Expand Down
3 changes: 2 additions & 1 deletion src/app.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import 'sass/uswds-customer-vars.scss';
@import 'node_modules/uswds/src/stylesheets/all.scss';
@import 'node_modules/react-select/dist/react-select';
// HDMA customizations to USWDS
@import 'sass/header.scss';
@import 'sass/hero.scss';
Expand All @@ -15,4 +16,4 @@
@import 'reports/modified-lar/Modified-LAR.scss';
@import 'reports/modified-lar/Results.scss';
@import 'reports/disclosure/Disclosure.scss';
@import 'reports/disclosure/tables/tables.scss';
@import 'reports/tables/tables.scss';
12 changes: 5 additions & 7 deletions src/common/LoadingIcon.jsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,11 @@
import React from 'react'

const LoadingIcon = () => {
const LoadingIcon = props => {
let className = 'LoadingIconWrapper'
if (props.className) className += ' ' + props.className
return (
<div className="LoadingIconWrapper">
<img
src="/data-publication/img/LoadingIcon.png"
className="LoadingIcon"
alt="Loading"
/>
<div className={className}>
<div className="LoadingIcon" />
</div>
)
}
Expand Down
49 changes: 40 additions & 9 deletions src/common/LoadingIcon.scss
Original file line number Diff line number Diff line change
@@ -1,21 +1,52 @@
.LoadingIconWrapper {
.LoadingInline.LoadingIconWrapper {
height: 22px;
width: 22px;
display: inline-block;
position: relative;
transform: rotateX(180deg);
width: 40px;
margin-left: 5px;
margin-top: 0;
padding-top: 3px;
.LoadingIcon {
height: 22px;
width: 22px;
}
}

.LoadingIcon {
animation: loading-spin 2s infinite linear;
position: absolute;
top: -7px;
.status .LoadingInline {
height: 18px;
width: 18px;
}


@keyframes loading-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-359deg);
transform: rotate(360deg);
}
}

.LoadingIconWrapper {
position: relative;
height: 30px;
width: 30px;
display: inline-block;
margin-top: 2em;
margin-left: 48%;
}

.LoadingIcon {
position:absolute;
margin: 0 auto;
border: 4px solid $color-gray-lightest;
border-left-color: $color-primary;
border-radius: 50%;
width: 30px;
height: 30px;
animation: loading-spin 1.2s linear infinite;
}

.usa-alert .LoadingIcon {
border: 4px solid $color-gray-lighter;
border-left-color: $color-primary;
}
Binary file removed src/img/LoadingIcon.png
Binary file not shown.
1 change: 0 additions & 1 deletion src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/data-publication/img/favicons/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="/data-publication/css/app.min.css">
<link rel="prefetch" href="/data-publication/img/LoadingIcon.png">
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
Expand Down
131 changes: 16 additions & 115 deletions src/reports/MsaMds.jsx
Original file line number Diff line number Diff line change
@@ -1,119 +1,20 @@
import React from 'react'
import Header from '../common/Header.jsx'

const MSAMDS = [
{ id: '25420', name: 'Harrisburg-Carlisle, PA' },
{ id: '25180', name: 'Hagerstown-Martinsburg, MD-WV' },
{ id: '25060', name: 'Gulfport-Biloxi, MS' },
{ id: '25020', name: 'Guayama, PR' },
{ id: '24860', name: 'Greenville, SC' },
{ id: '24780', name: 'Greenville, NC' },
{ id: '25500', name: 'Harrisonburg, VA' },
{ id: '25540', name: 'Hartford-West Hartford-East Hartford, CT' },
{ id: '25620', name: 'Hattiesburg, MS' },
{ id: '25860', name: 'Hickory-Lenoir-Morganton, NC' },
{ id: '25980', name: 'Hinesville-Fort Stewart, GA' },
{ id: '26100', name: 'Holland-Grand Haven, MI' },
{ id: '26180', name: 'Honolulu, HI' },
{ id: '26300', name: 'Hot Springs, AR' },
{ id: '26380', name: 'Houma-Bayou Cane-Thibodaux, LA' }
]

class MsaMds extends React.Component {
constructor(props) {
super(props)

this.state = {
error: null,
isLoaded: false,
msamds: [],
selectValue: ''
}

this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}

componentDidMount() {
// TODO: load either MSA/MDs for an institution or for a state
let fetchURL = ''
if (this.props.match.params.institutionId)
fetchURL = `https://ffiec-api.cfpb.gov/public/filers/${
this.props.match.params.institutionId
}/msamds`
if (this.props.match.params.stateId)
fetchURL = `https://ffiec-api.cfpb.gov/public/msamds?state=${
this.props.match.params.stateId
}`

this.setState({ msamds: MSAMDS, isLoaded: true, selectValue: MSAMDS[0].id })
/*
fetch(fetchURL)
.then(res => res.json())
.then(
result => {
this.setState({
isLoaded: true,
msamds: result.msamds
})
},
error => {
this.setState({
isLoaded: true,
error
})
}
)*/
}

handleChange(event) {
this.setState({ selectValue: event.target.value })
}

handleSubmit(event) {
this.props.history.push({
pathname: `${this.props.match.url}/msa-md/${this.state.selectValue}`
})
event.preventDefault()
}

render() {
let msaMdsFor = ''
if (this.props.match.params.institutionId)
msaMdsFor = this.props.match.params.institutionId
if (this.props.match.params.stateId)
msaMdsFor = this.props.match.params.stateId

return (
<div className="usa-grid msa-mds" id="main-content">
<Header
type={1}
headingText={`Choose an available MSA/MD for ${msaMdsFor}`}
/>

<form onSubmit={this.handleSubmit}>
<label htmlFor="states">Select a MSA/MD</label>

<select
name="msamds"
id="msamds"
value={this.state.selectValue}
onChange={this.handleChange}
>
{this.state.msamds.map((msamd, index) => {
return (
<option key={index} value={msamd.id}>
{msamd.id} - {msamd.name}
</option>
)
})}
</select>

<input type="submit" value="Next - Find a Report" />
</form>
</div>
)
}
import Selector from './Selector.jsx'

const MsaMds = props => {
return (
<Selector
target="msa-md"
placeholder="Select MSA/MD..."
paragraphText="Listed below are all the MSA/MDs for this institution"
getHeader={function() {
return `Choose an available MSA/MD for institution ${
this.props.match.params.institutionId
}`
}}
{...props}
/>
)
}

export default MsaMds
86 changes: 27 additions & 59 deletions src/reports/Report.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react'
import Header from '../common/Header.jsx'
import FiveDashOne from './disclosure/tables/FiveDashOne.jsx'
import LoadingIcon from '../common/LoadingIcon.jsx'
import Five from './tables/Five.jsx'

class Report extends React.Component {
constructor(props) {
Expand All @@ -14,16 +15,13 @@ class Report extends React.Component {
}

componentDidMount() {
let fetchURL = 'https://s3.amazonaws.com/cfpb-hmda-public/prod/reports'
if (this.props.match.params.institutionId)
fetchURL = `${fetchURL}/disclosure`
if (this.props.match.params.stateId) fetchURL = `${fetchURL}/aggregate`

fetchURL = `${fetchURL}/2017/${this.props.match.params.msaMdId}/${
this.props.match.params.reportId
}.txt`

fetch(fetchURL)
fetch(
`https://s3.amazonaws.com/cfpb-hmda-public/prod/reports/disclosure/2017/${
this.props.match.params.institutionId
}/${this.props.match.params.msaMdId}/${
this.props.match.params.reportId
}.txt`
)
.then(res => res.json())
.then(
result => {
Expand All @@ -42,38 +40,7 @@ class Report extends React.Component {
}

render() {
if (this.state.error) {
const { params } = this.props.match

let alertHeading = 'Report not found'
if (params.stateId)
alertHeading = `Report ${params.reportId} for 2017 -> ${
params.stateId
} -> ${params.msaMdId} not found`
if (params.institutionId)
alertHeading = `Report ${params.reportId} for 2017 -> ${
params.institutionId
} -> ${params.msaMdId} not found`

return (
<div
className="usa-grid"
id="main-content"
style={{ marginTop: '3em' }}
>
<div className="usa-alert usa-alert-error" role="alert">
<div className="usa-alert-body">
<h3 className="usa-alert-heading">{alertHeading}</h3>
<p className="usa-alert-text">
Sorry, we couldn't find that report. Try to refresh the page. If
the problem persists please contact HMDA Help.
</p>
</div>
</div>
</div>
)
}

if (!this.state.isLoaded) return <LoadingIcon />
if (this.state.report === null) return null

const report = this.state.report
Expand All @@ -83,24 +50,25 @@ class Report extends React.Component {
return (
<div className="report" id="main-content">
<Header type={4} headingText={headingText}>
<React.Fragment>
<p style={{ width: '50%', display: 'inline-block' }}>
Institution: {report.respondentId} - {report.institutionName}
</p>
<p
style={{
width: '50%',
display: 'inline-block',
textAlign: 'right'
}}
>
MSA/MD: {report.msa.id} - {report.msa.name}
</p>
</React.Fragment>
{report ? (
<React.Fragment>
<p style={{ width: '50%', display: 'inline-block' }}>
Institution: {report.respondentId} - {report.institutionName}
</p>
<p
style={{
width: '50%',
display: 'inline-block',
textAlign: 'right'
}}
>
MSA/MD: {report.msa.id} - {report.msa.name}
</p>
</React.Fragment>
) : null}
</Header>

<FiveDashOne report={report} />

<Five report={report} />
<p className="usa-text-small report-date">
Report date: {report.reportDate}
</p>
Expand Down
Loading

0 comments on commit ff9674c

Please sign in to comment.