314 Setup eslint extending airbnb and prettierjs

.eslintignore

@@ -0,0 +1,12 @@
+# vendor files
+app/javascript/vendor/*
+
+# FIXME: Can be split out later into refactoring tickets
+app/javascript/components/App.jsx
+app/javascript/components/Card.jsx
+app/javascript/components/Filter.jsx
+app/javascript/components/IntroPopup.jsx
+app/javascript/components/Map.jsx
+app/javascript/components/Sort.jsx
+app/javascript/components/StoryList.jsx
+app/javascript/components/StoryMedia.jsx

.eslintrc.json

@@ -0,0 +1,20 @@
+{
+    "env": {
+        "browser": true,
+        "es6": true
+    },
+    "extends": [
+      "airbnb",
+      "prettier"
+    ],
+    "globals": {
+        "Atomics": "readonly",
+        "SharedArrayBuffer": "readonly"
+    },
+    "parser": "babel-eslint",
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+    }
+}

SETUP.md

@@ -18,6 +18,8 @@ This instructions are for Mapbox Community Days and Hacktoberfest, which everyon
 
 7. [Adding languages to Terrastories](#adding-languages-to-terrastories)
 
+8. [Setting up your Development Environment](#setting-up-your-development-environment)
+
 ## Docker Prerequisites
 
 Install docker. On linux, you may have to install docker-compose separately.
@@ -136,3 +138,12 @@ For the `devise` and `administrate` files, there might be available translations
 If you want to change the default language for Terrastories, set the language on line 21 in `rails/config/application.rb`. To set it to Papiamentu, change this line to `config.i18n.default_locale = :pap`
 
 Once you are done, the language should be available the next time you start Terrastories.
+
+
+## Setting up your Development Environment
+
+### ESLint
+
+We use ESLint with Airbnb community style-guide for linting JavaScript and JSX for files under app/javascript.
+
+Please check [ESLint editor-integrations page](https://eslint.org/docs/user-guide/integrations#editors) to read about how to integrate ESLint with your IDE/editor

app/javascript/components/App.jsx

@@ -1,9 +1,9 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Map from './Map';
-import Card from './Card';
-import IntroPopup from './IntroPopup';
-import {FILTER_CATEGORIES} from '../constants/FilterConstants';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import Map from "./Map";
+import Card from "./Card";
+import IntroPopup from "./IntroPopup";
+import FILTER_CATEGORIES from "../constants/FilterConstants";
 import bbox from "@turf/bbox";
 
 class App extends Component {
@@ -15,7 +15,7 @@ class App extends Component {
       stories: this.props.stories,
       activePoint: null,
       activeStory: null
-    }
+    };
   }
 
   static propTypes = {
@@ -38,7 +38,7 @@ class App extends Component {
       features: points
     };
     return pointObj;
-  }
+  };
 
   filterMap = () => {
     // Build Filter Map for Dropdowns
@@ -48,41 +48,62 @@ class App extends Component {
       switch (category) {
         case FILTER_CATEGORIES[0]: {
           // first category: Region
-          const regionSet = new Set(this.props.stories.map(story => {
-            return story.points.map(point => point.properties.region);
-          }).flat());
+          const regionSet = new Set(
+            this.props.stories
+              .map(story => {
+                return story.points.map(point => point.properties.region);
+              })
+              .flat()
+          );
           filterMap[category] = Array.from(regionSet).sort();
           break;
         }
         case FILTER_CATEGORIES[1]: {
           // second category: Type of Place
-          const typeOfPlaceSet = new Set(this.props.stories.map(story => {
-            return story.points.map(point => point.properties.type_of_place);
-          }).flat());
+          const typeOfPlaceSet = new Set(
+            this.props.stories
+              .map(story => {
+                return story.points.map(
+                  point => point.properties.type_of_place
+                );
+              })
+              .flat()
+          );
           filterMap[category] = Array.from(typeOfPlaceSet).sort();
           break;
         }
         case FILTER_CATEGORIES[2]: {
           // third category: Speaker
-          const speakerSet = new Set(this.props.stories.map(story => {
-            return story.speakers.map(speaker => speaker.name)
-          }).flat());
+          const speakerSet = new Set(
+            this.props.stories
+              .map(story => {
+                return story.speakers.map(speaker => speaker.name);
+              })
+              .flat()
+          );
           filterMap[category] = Array.from(speakerSet).sort();
           break;
         }
       }
     });
     console.log(filterMap);
     return filterMap;
-  }
+  };
 
   handleFilter = (category, item) => {
     let filteredStories = [];
     switch (category) {
       case FILTER_CATEGORIES[0]: {
         // first category: region
         filteredStories = this.props.stories.filter(story => {
-          if (story.points.some(point => {return point.properties.region && point.properties.region.toLowerCase() === item.toLowerCase();})) {
+          if (
+            story.points.some(point => {
+              return (
+                point.properties.region &&
+                point.properties.region.toLowerCase() === item.toLowerCase()
+              );
+            })
+          ) {
             return story;
           }
         });
@@ -91,7 +112,15 @@ class App extends Component {
       case FILTER_CATEGORIES[1]: {
         // second category: type of places
         filteredStories = this.props.stories.filter(story => {
-          if (story.points.some(point => {return point.properties['type_of_place'] && point.properties['type_of_place'].toLowerCase() === item.toLowerCase();})) {
+          if (
+            story.points.some(point => {
+              return (
+                point.properties["type_of_place"] &&
+                point.properties["type_of_place"].toLowerCase() ===
+                  item.toLowerCase()
+              );
+            })
+          ) {
             return story;
           }
         });
@@ -100,7 +129,14 @@ class App extends Component {
       case FILTER_CATEGORIES[2]: {
         // third category: speaker name
         filteredStories = this.props.stories.filter(story => {
-          if (story.speakers.some(speaker => {return speaker.name && speaker.name.toLowerCase() === item.toLowerCase()})) {
+          if (
+            story.speakers.some(speaker => {
+              return (
+                speaker.name &&
+                speaker.name.toLowerCase() === item.toLowerCase()
+              );
+            })
+          ) {
             return story;
           }
         });
@@ -114,29 +150,38 @@ class App extends Component {
         bounds,
         maxZoom: 12
       };
-      this.setState({ stories: filteredStories, points: filteredPoints, framedView });
+      this.setState({
+        stories: filteredStories,
+        points: filteredPoints,
+        framedView
+      });
     }
-  }
+  };
 
   showMapPointStories = stories => {
     let storyTitles = stories.map(story => story.title);
     let filteredStories = [];
-    filteredStories = this.props.stories.filter(story => storyTitles.includes(story.title));
+    filteredStories = this.props.stories.filter(story =>
+      storyTitles.includes(story.title)
+    );
     if (filteredStories) {
-      this.setState({ stories: filteredStories, activeStory: filteredStories[0] });
+      this.setState({
+        stories: filteredStories,
+        activeStory: filteredStories[0]
+      });
     }
-  }
+  };
 
-  handleStoriesChanged = (stories) => {
-    this.setState({ stories: stories })
-  }
+  handleStoriesChanged = stories => {
+    this.setState({ stories: stories });
+  };
 
   handleStoryClick = story => {
     // set active to first point in story
     const point = story.points[0];
     const framedView = { center: point.geometry.coordinates };
-    this.setState({activePoint: point, activeStory: story, framedView});
-  }
+    this.setState({ activePoint: point, activeStory: story, framedView });
+  };
 
   resetStoriesAndMap = () => {
     const points = this.getPointsFromStories(this.props.stories);
@@ -147,14 +192,14 @@ class App extends Component {
       activePoint: null,
       activeStory: null
     });
-  }
+  };
 
   handleMapPointClick = (point, stories) => {
     console.log(point);
     this.showMapPointStories(stories);
     const framedView = { center: point.geometry.coordinates };
-    this.setState({activePoint: point, framedView});
-  }
+    this.setState({ activePoint: point, framedView });
+  };
 
   render() {
     return (