Housekeeping

* Style updates per Issue #15
* Add linter, linter rules. And lint
* Use a `.babelrc`

.eslintignore

@@ -0,0 +1,3 @@
+*/node_modules/*
+client/semantic/*
+client/build/*

.eslintrc.json

@@ -0,0 +1,19 @@
+{
+  "extends": "airbnb",
+  "parser": "babel-eslint",
+  "rules": {
+    "array-bracket-spacing": [2, "always"],
+    "jsx-quotes": [1, "prefer-single"],
+    "jsx-a11y/no-static-element-interactions": 0,
+    "max-len": ["error", { "code": 80, "ignoreTrailingComments": true }],
+    "no-use-before-define": [2, "nofunc"],
+    "no-shadow": 0,
+    "prefer-const": 1,
+    "quote-props": [1, "consistent-as-needed"],
+    "react/no-multi-comp": 0,
+    "react/prop-types": 0,
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "react/no-array-index-key": 0,
+    "space-before-function-paren": [2, {"anonymous": "always", "named": "never"}]
+  }
+}

client/package.json

@@ -4,13 +4,14 @@
   "private": true,
   "proxy": "http://localhost:3001/",
   "devDependencies": {
-    "enzyme": "^2.4.1",
-    "react-addons-test-utils": "^15.4.0",
-    "react-scripts": "0.7.0"
+    "enzyme": "2.4.1",
+    "react-addons-test-utils": "15.4.0",
+    "react-scripts": "0.8.5"
   },
   "dependencies": {
-    "react": "^15.4.0",
-    "react-dom": "^15.4.0"
+    "babel-plugin-transform-class-properties": "6.22.0",
+    "react": "15.4.0",
+    "react-dom": "15.4.0",
     "semantic-ui": "2.2.7"
   },
   "scripts": {

client/src/App.js

@@ -1,30 +1,32 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import SelectedFoods from './SelectedFoods';
 import FoodSearch from './FoodSearch';
 
 class App extends Component {
   state = {
-      selectedFoods : []
+    selectedFoods: [],
   }
-    
+
   removeFoodItem = (itemIndex) => {
-      const filteredFoods = this.state.selectedFoods.filter( (item, idx) => itemIndex !== idx);
-      this.setState({selectedFoods : filteredFoods});
+    const filteredFoods = this.state.selectedFoods.filter(
+      (item, idx) => itemIndex !== idx,
+    );
+    this.setState({ selectedFoods: filteredFoods });
   }
-    
+
   addFood = (food) => {
-      const newFoods = this.state.selectedFoods.concat(food);
-      this.setState({selectedFoods : newFoods});
+    const newFoods = this.state.selectedFoods.concat(food);
+    this.setState({ selectedFoods: newFoods });
   }
-    
+
   render() {
-    const {selectedFoods} = this.state;
-        
+    const { selectedFoods } = this.state;
+
     return (
       <div className='App'>
         <div className='ui text container'>
-	        <SelectedFoods
-	          foods={selectedFoods}
+          <SelectedFoods
+            foods={selectedFoods}
             onFoodClick={this.removeFoodItem}
           />
           <FoodSearch

client/src/Client.js

@@ -10,13 +10,12 @@ function search(query, cb) {
 function checkStatus(response) {
   if (response.status >= 200 && response.status < 300) {
     return response;
-  } else {
-    const error = new Error(`HTTP Error ${response.statusText}`);
-    error.status = response.statusText;
-    error.response = response;
-    console.log(error); // eslint-disable-line no-console
-    throw error;
   }
+  const error = new Error(`HTTP Error ${response.statusText}`);
+  error.status = response.statusText;
+  error.response = response;
+  console.log(error); // eslint-disable-line no-console
+  throw error;
 }
 
 function parseJSON(response) {

client/src/FoodSearch.js

@@ -45,6 +45,22 @@ class FoodSearch extends React.Component {
   };
 
   render() {
+    const { showRemoveIcon, foods } = this.state;
+    const removeIconStyle = showRemoveIcon ? {} : { visibility: 'hidden' };
+
+    const foodRows = foods.map((food, idx) => (
+      <tr
+        key={idx}
+        onClick={() => this.props.onFoodClick(food)}
+      >
+        <td>{food.description}</td>
+        <td className='right aligned'>{food.kcal}</td>
+        <td className='right aligned'>{food.protein_g}</td>
+        <td className='right aligned'>{food.fat_g}</td>
+        <td className='right aligned'>{food.carbohydrate_g}</td>
+      </tr>
+    ));
+
     return (
       <div id='food-search'>
         <table className='ui selectable structured large table'>
@@ -62,14 +78,11 @@ class FoodSearch extends React.Component {
                     />
                     <i className='search icon' />
                   </div>
-                  {
-                    this.state.showRemoveIcon ? (
-                      <i
-                        className='remove icon'
-                        onClick={this.handleSearchCancel}
-                      />
-                    ) : ''
-                  }
+                  <i
+                    className='remove icon'
+                    onClick={this.handleSearchCancel}
+                    style={removeIconStyle}
+                  />
                 </div>
               </th>
             </tr>
@@ -82,21 +95,8 @@ class FoodSearch extends React.Component {
             </tr>
           </thead>
           <tbody>
-          {
-            this.state.foods.map((food, idx) => (
-              <tr
-                key={idx}
-                onClick={() => this.props.onFoodClick(food)}
-              >
-                <td>{food.description}</td>
-                <td className='right aligned'>{food.kcal}</td>
-                <td className='right aligned'>{food.protein_g}</td>
-                <td className='right aligned'>{food.fat_g}</td>
-                <td className='right aligned'>{food.carbohydrate_g}</td>
-              </tr>
-            ))
-          }
-        </tbody>
+            {foodRows}
+          </tbody>
         </table>
       </div>
     );

client/src/SelectedFoods.js

@@ -1,6 +1,21 @@
 import React from 'react';
 
 export default function SelectedFoods(props) {
+  const { foods } = props;
+
+  const foodRows = foods.map((food, idx) => (
+    <tr
+      key={idx}
+      onClick={() => props.onFoodClick(idx)}
+    >
+      <td>{food.description}</td>
+      <td className='right aligned'>{food.kcal}</td>
+      <td className='right aligned'>{food.protein_g}</td>
+      <td className='right aligned'>{food.fat_g}</td>
+      <td className='right aligned'>{food.carbohydrate_g}</td>
+    </tr>
+  ));
+
   return (
     <table className='ui selectable structured large table'>
       <thead>
@@ -18,20 +33,7 @@ export default function SelectedFoods(props) {
         </tr>
       </thead>
       <tbody>
-        {
-          props.foods.map((food, idx) => (
-            <tr
-              key={idx}
-              onClick={() => props.onFoodClick(idx)}
-            >
-              <td>{food.description}</td>
-              <td className='right aligned'>{food.kcal}</td>
-              <td className='right aligned'>{food.protein_g}</td>
-              <td className='right aligned'>{food.fat_g}</td>
-              <td className='right aligned'>{food.carbohydrate_g}</td>
-            </tr>
-          ))
-        }
+        {foodRows}
       </tbody>
       <tfoot>
         <tr>
@@ -40,25 +42,25 @@ export default function SelectedFoods(props) {
             className='right aligned'
             id='total-kcal'
           >
-            {sum(props.foods, 'kcal')}
+            {sum(foods, 'kcal')}
           </th>
           <th
             className='right aligned'
             id='total-protein_g'
           >
-            {sum(props.foods, 'protein_g')}
+            {sum(foods, 'protein_g')}
           </th>
           <th
             className='right aligned'
             id='total-fat_g'
           >
-            {sum(props.foods, 'fat_g')}
+            {sum(foods, 'fat_g')}
           </th>
           <th
             className='right aligned'
             id='total-carbohydrate_g'
           >
-            {sum(props.foods, 'carbohydrate_g')}
+            {sum(foods, 'carbohydrate_g')}
           </th>
         </tr>
       </tfoot>

client/src/index.js

@@ -6,5 +6,5 @@ import '../semantic/dist/semantic.min.css';
 
 ReactDOM.render(
   <App />,
-  document.getElementById('root')
+  document.getElementById('root'), // eslint-disable-line no-undef
 );

client/tests/.eslintrc.json

@@ -0,0 +1,7 @@
+// Use this file as a starting point for your project's .eslintrc.
+// Copy this file, and add rule overrides as needed.
+{
+  "rules": {
+    "no-undef": 0
+  }
+}

client/tests/App.test.js

@@ -9,18 +9,17 @@ describe('App', () => {
 
   beforeEach(() => {
     wrapper = shallow(
-      <App />
+      <App />,
     );
   });
 
   it('initializes `selectedFoods` to a blank array', () => {
     expect(
-      wrapper.state().selectedFoods
-    ).toEqual([])
+      wrapper.state().selectedFoods,
+    ).toEqual([]);
   });
 
   describe('when `FoodSearch` invokes `onFoodClick` twice', () => {
-
     const food1 = {
       description: 'Sample food 1',
       kcal: '100.0',
@@ -39,14 +38,14 @@ describe('App', () => {
     const foods = [ food1, food2 ];
 
     beforeEach(() => {
-      foods.forEach((food) => (
+      foods.forEach(food => (
         wrapper.find('FoodSearch').props().onFoodClick(food)
       ));
     });
 
     it('should add the foods to `selectedFoods`', () => {
       expect(
-        wrapper.state().selectedFoods
+        wrapper.state().selectedFoods,
       ).toEqual(foods);
     });
 
@@ -57,7 +56,7 @@ describe('App', () => {
 
       it('removes the food at idx from array', () => {
         expect(
-          wrapper.state().selectedFoods
+          wrapper.state().selectedFoods,
         ).toEqual([ food2 ]);
       });
     });