Add job title and US state controls

Swizec · Oct 29, 2018 · 813cdd4 · 813cdd4
1 parent af9dfe3
commit 813cdd4
Showing 1 changed file with 64 additions and 4 deletions.
diff --git a/src/components/Controls/index.js b/src/components/Controls/index.js
@@ -4,7 +4,11 @@ import ControlRow from "./ControlRow";
 class Controls extends React.Component {
     state = {
         yearFilter: () => true,
-        year: "*"
+        jobTitleFilter: () => true,
+        USstateFilter: () => true,
+        year: "*",
+        jobTitle: "*",
+        USstate: "*"
     };
 
     componentDidMount() {}
@@ -26,23 +30,64 @@ class Controls extends React.Component {
         );
     };
 
+    updateJobTitleFilter = (title, reset) => {
+        let filter = d => d.clean_job_title === title;
+
+        if (reset || !title) {
+            filter = () => true;
+            title = "*";
+        }
+
+        this.setState(
+            {
+                jobTitleFilter: filter,
+                jobTitle: title
+            },
+            () => this.reportUpdateUpTheChain()
+        );
+    };
+
+    updateUSstateFilter = (USstate, reset) => {
+        let filter = d => d.USstate === USstate;
+
+        if (reset || !USstate) {
+            filter = () => true;
+            USstate = "*";
+        }
+
+        this.setState(
+            {
+                USstateFilter: filter,
+                USstate: USstate
+            },
+            () => this.reportUpdateUpTheChain()
+        );
+    };
+
     reportUpdateUpTheChain() {
         window.location.hash = [this.state.year || "*"].join("-");
 
         this.props.updateDataFilter(
             (filters => {
-                return d => filters.yearFilter(d);
+                return d =>
+                    filters.yearFilter(d) &&
+                    filters.jobTitleFilter(d) &&
+                    filters.USstateFilter(d);
             })(this.state),
             {
-                year: this.state.year
+                year: this.state.year,
+                jobTitle: this.state.jobTitle,
+                USstate: this.state.USstate
             }
         );
     }
 
     render() {
         const { data } = this.props;
 
-        const years = new Set(data.map(d => d.submit_date.getFullYear()));
+        const years = new Set(data.map(d => d.submit_date.getFullYear())),
+            jobTitles = new Set(data.map(d => d.clean_job_title)),
+            USstates = new Set(data.map(d => d.USstate));
 
         return (
             <div>
@@ -52,6 +97,21 @@ class Controls extends React.Component {
                     picked={this.state.year}
                     updateDataFilter={this.updateYearFilter}
                 />
+
+                <ControlRow
+                    data={data}
+                    toggleNames={Array.from(jobTitles.values())}
+                    picked={this.state.jobTitle}
+                    updateDataFilter={this.updateJobTitleFilter}
+                />
+
+                <ControlRow
+                    data={data}
+                    toggleNames={Array.from(USstates.values())}
+                    picked={this.state.USstate}
+                    updateDataFilter={this.updateUSstateFilter}
+                    capitalize
+                />
             </div>
         );
     }