fix: fix files with ESLint and Prettier rules

README.md

@@ -5,7 +5,6 @@
 Developers please see current milestones here:  
 https://github.com/Greenstand/treetracker-web-map/milestones
 
-
 Big picture UX/UI challenges are tracked at:  
 https://github.com/Greenstand/treetracker-web-map/issues?q=is%3Aissue+is%3Aopen+label%3AUX%2FUI
 
@@ -28,30 +27,221 @@ For more details see the [Tree Tracker Web Map Wiki] (https://github.com/Greenst
 ### Using online DB (Recommended)
 
 #### Frontend Only
+
 1. Make sure all npm modules are installed for client.
+
 ```
 npm i
 ```
-2. Open .env from the project root.  It should contain only the following lines
+
+2. Open .env from the project root. It should contain only the following lines
+
 ```
 REACT_APP_API=https://dev-k8s.treetracker.org/webmap/
 ```
+
 3. Start the client
+
 ```
 npm start
 ```
+
 4. Open the web map in the browser with URL: http://localhost:3000
 
+## Code style guide
+
+We follow the Airbnb JavaScript style guide. The superficial aspects of this style are enforced by a pre-commit hook in the project that runs [Prettier](https://prettier.io/) when you commit a change.
+
+If you are using VSCode as your IDE, please follow [this guide](https://www.digitalocean.com/community/tutorials/how-to-format-code-with-prettier-in-visual-studio-code) to set up Prettier and automatically format your code on file save.
+
+### Rules
+
+In .eslintrc.json, there is a set of rules with status **off or warn**. Whenever you are developing a new file or an existing file try to correct some warnings, because in the future the rules will be activated.
+
+**For more information about rules:** https://eslint.org/docs/2.0.0/rules/
+
+**Indention** 2 Spaces for indentation
+
+**Semicolon** Use semicolons at the end of each line
+
+**Characters** 80 characters per line
+
+**Equal Equal (eqeqeq)** Good practice to use the type-safe equality operators === and !== instead of their regular counterparts == and !=
+
+**Quotes** Use single quotes unless you are writing JSON
+
+```js
+const foo = "bar";
+```
+
+**Braces** Opening braces go on the same line as the statement
+
+```js
+if (true) {
+  console.log("here");
+}
+```
+
+**Variable declaration** Declare one Variable per statement
+
+```js
+const dog = ["bark", "woof"];
+let cat = ["meow", "sleep"];
+```
+
+**Variable, properties and function names** Use lowerCamelCase for variables, properties and function names
+
+```js
+const adminUser = db.query("SELECT * From users ...");
+```
+
+**Class names** Use UpperCamelCase for class names
+
+```js
+class Dog {
+  bark() {
+    console.log("woof");
+  }
+}
+```
+
+**Descriptive conditions** Make sure to have a descriptive name that tells the use and meaning of the code
+
+```js
+const isValidPassword =
+  password.length >= 4 && /^(?=.*\d).{4,}$/.test(password);
+```
+
+**Object/Array creation** Use trailing commas and put short declarations on a single line. Only quote keys when your interpreter complains:
+
+```js
+var a = ["hello", "world"];
+var b = {
+  good: "code",
+  "is generally": "pretty"
+};
+```
+
+### How to test the rules
+
+In package.json there is a topic called scripts that contains many scripts to run.
+To validate the rules manually, you must run:
+
+```
+lint
+```
+
+You will be able to run through this shortcut in VSCode
+![IDE VSCode](./public/images/VSCode_NPM_Script.png)
+
+To fix automatic rules
+
+```
+lint:fix
+```
+
+## Code style guide
+
+We follow the Airbnb JavaScript style guide. The superficial aspects of this style are enforced by a pre-commit hook in the project that runs [Prettier](https://prettier.io/) when you commit a change.
+
+If you are using VSCode as your IDE, please follow [this guide](https://www.digitalocean.com/community/tutorials/how-to-format-code-with-prettier-in-visual-studio-code) to set up Prettier and automatically format your code on file save.
+
+### Rules
+
+In .eslintrc.json, there is a set of rules with status **off or warn**. Whenever you are developing a new file or an existing file try to correct some warnings, because in the future the rules will be activated.
+
+**For more information about rules:** https://eslint.org/docs/2.0.0/rules/
+
+**Airbnb Style Guide:** https://airbnb.io/javascript/
+
+<sub><sup>**Indention:** 2 Spaces for indentation</sup></sub>
+<sub><sup>**Semicolon:** Use semicolons at the end of each line</sup></sub>
+<sub><sup>**Characters:** 80 characters per line</sup></sub>
+<sub><sup>**Equal Equal (eqeqeq):** Good practice to use the type-safe equality operators === and !== instead of their regular counterparts == and !=</sup></sub>
+<sub><sup>**Quotes:** Use single quotes unless you are writing JSON</sup></sub>
+
+```js
+const foo = "bar";
+```
+
+<sub><sup>**Braces:** Opening braces go on the same line as the statement</sup></sub>
+
+```js
+if (true) {
+  console.log("here");
+}
+```
+
+<sup><sub>**Variable declaration:** Declare one Variable per statement</sup></sub>
+
+```js
+const dog = ["bark", "woof"];
+let cat = ["meow", "sleep"];
+```
+
+<sup><sub>**Variable, properties and function names:** Use lowerCamelCase for variables, properties and function names</sup></sub>
+
+```js
+const adminUser = db.query("SELECT * From users ...");
+```
+
+<sup><sub>**Class names:** Use UpperCamelCase for class names</sup></sub>
+
+```js
+class Dog {
+  bark() {
+    console.log("woof");
+  }
+}
+```
+
+<sup><sub>**Descriptive conditions:** Make sure to have a descriptive name that tells the use and meaning of the code</sup></sub>
+
+```js
+const isValidPassword =
+  password.length >= 4 && /^(?=.*\d).{4,}$/.test(password);
+```
+
+<sup><sub>**Object/Array creation:** Use trailing commas and put short declarations on a single line. Only quote keys when your interpreter complains:</sup></sub>
+
+```js
+var a = ["hello", "world"];
+var b = {
+  good: "code",
+  "is generally": "pretty"
+};
+```
+
+### How to test the rules
+
+In package.json there is a topic called scripts that contains many scripts to run.
+To validate the rules manually, you must run:
+
+```
+lint
+```
+
+You will be able to run through this shortcut in VSCode
+![IDE VSCode](./public/images/VSCode_NPM_Script.png)
+
+To fix automatic rules
+
+```
+lint:fix
+```
+
 ### How to test
 
 We use Jest to build tests.
 
 1. To test client
+
 ```
 npm test
 ```
 
 ### Alternative development environment for MS Windows (Works on Linux and Mac also)
+
 On Windows, the easiest way to develop and debug Node.js applications is using Visual Studio Code.
 It comes with Node.js support out of the box.
 
@@ -60,7 +250,6 @@ https://code.visualstudio.com/docs
 &nbsp;
 &nbsp;
 
-
 ## Clustering Basics
 
 For performance and UX purposes, since this map needs to deal with an enormous amount of trees, a clustering strategy is used to group those trees, showing information in a way that is more digestible for the end-user.
@@ -80,9 +269,8 @@ When these values are overridden, you can zoom and drag the map freely, while ke
 
 Another useful tool to use in conjunction with this is the web browser's console (in Chrome or Firefox, hit F12 to open it). Whenever the map is updated, current zoom level and cluster radius used will be output to the console, so you have a better idea of what is going on.
 
-Future: 
-* Filters and Statistics
-* View photo together with tree data
-* View planter profile. 
-
+Future:
 
+- Filters and Statistics
+- View photo together with tree data
+- View planter profile.

src/map.js

@@ -2,8 +2,6 @@ import * as mapTools from "./mapTools";
 import MapModel from "./MapModel";
 import expect from "expect-runtime";
 import axios from "axios";
-import {sentryDSN} from "./config";
-import {theme} from "./App";
 import {parseMapName} from "./utils";
 import log from "loglevel";
 import {mapConfig} from "./mapConfig";
@@ -34,7 +32,7 @@ function load(
 const YES = "YES";
 const NO = "NO";
 var map = undefined; //Leaflet Map object
-var mc = undefined; //Marker Clusterer
+//var mc = undefined; //Marker Clusterer
 var markers = []; //All the markers
 var mapModel = undefined;
 var token;