Add filters config

app/scripts/components/Explore/FilterTabs.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import Button from '../Button/Button';
 
+import filtersConfig from 'json!../../../scripts/filters.json';
+
 class FilterTabs extends React.Component {
   constructor() {
     super();
@@ -10,28 +12,19 @@ class FilterTabs extends React.Component {
       filterSelected: ''
     };
 
-    this.filtersName = {
-      topics: 'topics',
-      spatialExtent: 'spatial extend',
-      dataType: 'data type'
-    };
-
-    this.filters = {
-      topics: { 'flooding': 'Flooding', 'Energy': 'Energy', 'weather-climate': 'Weather climate', 'infrastructure': 'Infrastructure' },
-      spatialExtent: { global: 'Global', country: 'Country', region: 'Region' },
-      dataType: { model: 'Model', observation: 'Observation', historical: 'Historical', projections: 'Projections' }
-    };
+    this.filtersNames = filtersConfig.filtersNames;
+    this.filters = filtersConfig.filters;
   }
 
   componentWillMount() {
     let { activeFilters } = this.context.location.query;
     const setDatasetFilter = this.props.setDatasetFilter;
-    const filters = this.filters;
+
     if (activeFilters) {
       activeFilters = activeFilters.split(',');
-      Object.keys(filters).forEach((key) => {
+      Object.keys(filtersConfig.filters).forEach((key) => {
         for (let i = activeFilters.length - 1; i >= 0; i--) {
-          if (filters[key][activeFilters[i]]) {
+          if (filtersConfig.filters[key][activeFilters[i]]) {
             setDatasetFilter(key, activeFilters[i]);
           }
         }
@@ -78,7 +71,7 @@ class FilterTabs extends React.Component {
 
     let pointerPosition = 30;
     switch (this.state.filterSelected) {
-      case 'spatialExtent':
+      case 'geography':
         pointerPosition = 160;
         break;
       case 'dataType':
@@ -90,31 +83,31 @@ class FilterTabs extends React.Component {
 
     const filtersCount = {
       topics: filterChoosen['topics'] && filterChoosen['topics'].length ? filterChoosen['topics'].length : 0,
-      spatialExtent: filterChoosen['spatialExtent'] && filterChoosen['spatialExtent'].length ? filterChoosen['spatialExtent'].length : 0,
+      geography: filterChoosen['geography'] && filterChoosen['geography'].length ? filterChoosen['geography'].length : 0,
       dataType: filterChoosen['dataType'] && filterChoosen['dataType'].length ? filterChoosen['dataType'].length : 0,
     };
 
     return (
       <div className="filters-tab">
         <ul className="filters-toolbar  columns small-12">
           <li>
-            <Button themeColor click={() => this.openFilter('topics')}> {this.filtersName.topics} </Button>
+            <Button themeColor click={() => this.openFilter('topics')}> {this.filtersNames.topics} </Button>
             <span className={filtersCount.topics === 0 ? '-hide' : ''}>{filtersCount.topics}</span>
           </li>
           <li>
-            <Button themeColor click={() => this.openFilter('spatialExtent')}> {this.filtersName.spatialExtent} </Button>
-            <span className={filtersCount.spatialExtent === 0 ? '-hide' : ''}>{filtersCount.spatialExtent}</span>
+            <Button themeColor click={() => this.openFilter('geography')}> {this.filtersNames.geography} </Button>
+            <span className={filtersCount.geography === 0 ? '-hide' : ''}>{filtersCount.geography}</span>
           </li>
           <li>
-            <Button themeColor click={() => this.openFilter('dataType')}> {this.filtersName.dataType} </Button>
+            <Button themeColor click={() => this.openFilter('dataType')}> {this.filtersNames.dataType} </Button>
             <span className={filtersCount.dataType === 0 ? '-hide' : ''}>{filtersCount.dataType}</span>
           </li>
         </ul>
 
         {this.state.filterOpen &&
           <div className="filters-list-container columns small-12">
             <span style={{ transform: `translateX(${pointerPosition}px)` }} className="pointer"></span>
-            <h3>Filters by {this.filtersName[this.state.filterSelected]}</h3>
+            <h3>Filters by {this.filtersNames[this.state.filterSelected]}</h3>
             <svg className="close-button" title="Close this modal" onClick={() => this.closeFilter()}>
               <path d="M8.047.548l-3 3L2.025.524l-1.5 1.5 3.023 3.022-3 3 1.455 1.456 3-3 3.023 3.022 1.5-1.5-3.023-3.022 3-3" fillRule="evenodd"/>
             </svg>

app/scripts/filters.json

@@ -0,0 +1,37 @@
+{
+  "filtersNames": {
+    "topics": "topics",
+    "geography": "geography",
+    "dataType": "data type"
+  },
+  "filters": {
+    "topics":
+      {
+        "arctic": "Arctic",
+        "coast": "Coast",
+        "flooding": "Flooding",
+        "ecosystems": "Ecosystems",
+        "energy": "Energy",
+        "foodResilience": "Food Resilience",
+        "health": "Health",
+        "transportation": "Transportation",
+        "tribalNations": "Tribal Nations",
+        "water": "Water",
+        "weaderClimate": "Weather/Climate",
+        "builtEnvironment": "Built Environment",
+        "oceans": "Oceans"
+      },
+    "geography":
+      {
+        "global": "Global",
+        "national": "National",
+        "local": "Local"
+      },
+    "dataType":
+      {
+        "modeledHistorical":"Modeled - historical",
+        "modeledProjections":"Modeled - projections",
+        "observed": "Observed"
+      }
+  }
+}