Merge pull request boolean-bobcats#14 from Bavarian05/dev

Component file organization & Small Map Improvement

client/components/charts/top20Chart.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { HorizontalBar } from 'react-chartjs-2';
+
+// Function to format names from ProPublica Top 20 response
+    // const formatName = (str) => {
+    //   let strArray = str.split('/');
+    //   strArray.forEach()
+    //   const re = /\s*,\s*/;
+    // };
+    // function toTitleCase(str) {
+    //   return str.replace(/\w\S*/g, function(txt){
+    // return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
+    // }
+
+const dataSet = {
+  labels: [],
+  datasets: [
+    {
+      label: 'U.S. Dollars',
+      backgroundColor: 'rgba(255,99,132,0.2)',
+      borderColor: 'rgba(255,99,132,1)',
+      borderWidth: 1,
+      hoverBackgroundColor: 'rgba(255,99,132,0.4)',
+      hoverBorderColor: 'rgba(255,99,132,1)',
+      hoverBorderWidth: 4,
+      data: []
+    }
+  ]
+};
+
+const options = {};
+
+const Top20Chart = (props) => {
+  const metric = props.search;
+  // console.log('---- In Top20Chart, props.search = ', props.search);
+
+  dataSet.labels = props.data.map(
+    (candidate, index) => `${index + 1}. ${candidate.name}`
+  );
+
+  dataSet.datasets[0].data = props.data.map(
+    candidate => candidate[metric]
+  );
+
+  return (
+    <HorizontalBar data={dataSet} options={options} />
+  );
+};
+
+export default Top20Chart;

client/components/Top20Console.js → client/components/charts/top20Console.js

@@ -1,13 +1,12 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-
-import Chart from './Top20Chart';
-import top20Search from '../actions/top20SearchActions';
-import { categories, cycles } from '../constants/top20SelectorOptions';
 import Spinning from 'grommet/components/icons/Spinning';
 import Select from 'grommet/components/Select';
 import Form from 'grommet/components/Form';
-import FormField from 'grommet/components/FormField';
+// import shortid from 'shortid';
+import Chart from './top20Chart';
+import top20Search from '../../actions/top20SearchActions';
+import { categories, cycles } from '../../constants/top20SelectorOptions';
 
 
 class Top20Console extends Component {
@@ -18,9 +17,7 @@ class Top20Console extends Component {
         value: 'contribution-total',
         label: 'Total Raised'
       },
-      // 'contribution-total'
       catKey: 'total_contributions',
-      // cycle: '2016'
       cycle: {
         value: '2016',
         label: '2016'
@@ -82,61 +79,49 @@ class Top20Console extends Component {
     });
   }
 
-
-//   onChange      {function ({target: , option: , value: })}
-// Function that will be called when the user selects an option. The target corresponds to the embedded input element, allowing you to distinguish which component triggered the event. The option contains the object chosen from the supplied options. The value contains all selected options when multiple={true}.
-
-  // handleSubmit(event) {
-  //   event.preventDefault();
-  // }
-
   render() {
-    const catOptions = categories.map(category =>
-      (
-        <option key={category[1]} value={category[0]}>{ category[3] }</option>
-      )
-    );
-    const cycleOptions = cycles.map(cycle =>
-      (
-        <option value={cycle}>{cycle}</option>
-      )
-    );
+    // const catOptions = categories.map(category =>
+    //   (
+    //     <option key={category[1]} value={category[0]}>{ category[3] }</option>
+    //   )
+    // );
+    // const cycleOptions = cycles.map(cycle =>
+    //   (
+    //     <option value={cycle}>{cycle}</option>
+    //   )
+    // );
 
     const catOptionsNew = categories.map((category) => {
+      const val = category[0];
+      const lab = category[3];
       return {
-        value: category[0],
-        label: category[3]
+        value: val,
+        label: lab
       };
     });
+
     const cycleOptionsNew = cycles.map((cycle) => {
+      const val = cycle;
+      const lab = cycle;
       return {
-        value: cycle,
-        label: cycle
+        value: val,
+        label: lab
       };
     });
 
     if (this.props.data && this.props.data.results) {
-      const results = this.props.data.results;
-      const spend = results.map((candidate, index) => {
-          return (
-            <div
-              key={index}
-            >
-              {candidate.name}
-            </div>
-          )
-      });
-
+      // const results = this.props.data.results;
+      // const spend = results.map(candidate =>
+      //     (
+      //       <div key={shortid.generate()} >
+      //         {candidate.name}
+      //       </div>
+      //     )
+      // );
 
-
-
-      // pad       none|small|medium|large|{...}
-      // The amount of padding to put around the contents. An object can be specified to distinguish horizontal and vertical padding: {horizontal: none|small|medium|large, vertical: none|small|medium|large}. Defaults to none.
       return (
         <div className="top20-console">
-          <Form
-            className="row"
-          >
+          <Form className="row" >
             <Select
               value={this.state.category}
               onChange={this.catHandleChangeNew}
@@ -151,11 +136,12 @@ class Top20Console extends Component {
               placeHolder="Election Cycle"
               className="top20-cycle-selector"
             />
-
-
-
-
           </Form>
+          <Chart
+            data={this.props.data.results}
+            search={this.state.catKey}
+          />
+
           {/* <div className="row">
             <form>
               <label>
@@ -172,12 +158,6 @@ class Top20Console extends Component {
               </label>
             </form>
           </div> */}
-          {/* <div> */}
-            <Chart
-              data={this.props.data.results}
-              search={this.state.catKey}
-            />
-          {/* </div> */}
         </div>
       );
     }

client/components/Top20Wrapper.js → client/components/charts/top20Wrapper.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import Console from './Top20Console';
 import Section from 'grommet/components/Section';
 import Header from 'grommet/components/Header';
 import Title from 'grommet/components/Title';
-import HeaderContainer from '../containers/headerContainer';
+import Console from './top20Console';
+import HeaderContainer from '../../containers/headerContainer';
 
 
 const Top20Wrapper = () =>
@@ -12,17 +12,12 @@ const Top20Wrapper = () =>
       <Header className="landing-main-nav" size="small" float={false} fixed={true}>
         <HeaderContainer />
       </Header>
-      <Header
-        className="top20-header header"
-        size="small"
-      >
+      <Header className="top20-header header" size="small" >
         <Title>
           Campaign Finance Top 20 Lists
         </Title>
       </Header>
-      <Section
-        className="top20-main"
-      >
+      <Section className="top20-main" >
         <Console />
       </Section>
     </div>

client/components/congress/repBio.js

@@ -18,15 +18,15 @@ const RepBio = ({ bio, google }) => {
   // static info is available via props.rep
   const { party } = google;
   const { title } = bio.roles[0];
-  const { facebook_account, facebook_id, twitter_account, 
+  const { facebook_account, facebook_id, twitter_account,
           youtube_account, url, google_entity_id } = bio;
 
   const { first_name, middle_name, last_name } = bio;
   const first = `${first_name} ${middle_name}`;
 
   return (
     <div className="rep-bio">
-      <img src={google.photoUrl} alt={bio.name} style={{maxHeight:"300px"}} />
+      <img src={google.photoUrl} alt={bio.name} style={{ maxHeight: '300px' }} />
       <Title>{ party }</Title>
       <Title>{ title }</Title>
       <h3>{ first }</h3>

client/components/events/eventsDisplay.js

@@ -3,10 +3,10 @@ import Split from 'grommet/components/Split';
 import Sidebar from 'grommet/components/Sidebar';
 import Box from 'grommet/components/Box';
 import Header from 'grommet/components/Header';
-import Title from 'grommet/components/Title';
-import Map from '../../containers/GoogleMapContainer';
-import Search from './meetupSearchBar';
-import EventList from './meetupEventsList';
+// import Title from 'grommet/components/Title';
+import Map from './eventsMap';
+import Search from './eventsSearchBar';
+import EventList from './eventsList';
 import HeaderContainer from '../../containers/headerContainer';
 
 const EventsDisplay = () =>

client/components/events/meetupEventsList.js → client/components/events/eventsList.js

@@ -2,7 +2,7 @@ import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import Accordion from 'grommet/components/Accordion';
 import AccordionPanel from 'grommet/components/AccordionPanel';
-import ListItem from './meetupEventListItem';
+import ListItem from './eventsListItem';
 
 
 class EventListComponent extends Component {
@@ -100,8 +100,8 @@ EventListComponent.defaultProps = {
 
 function mapStateToProps(state) {
   return {
-    events: state.Meetup.eventResults,
-    InfoWindow: state.MeetupMap
+    events: state.Events.eventResults,
+    InfoWindow: state.EventsMap
   };
 }