13/Apr/2018 Technical Code-Review notes

[x] Move .eslintrc from src folder to the root of the project
[x] Can you please try to use an airbnb instead of airbnb-base?
[ ] Add eslint script to package.json and run it from ./node_modules
```
node ./node_modules/eslint/bin/eslint.js ./src
```
[ ] Eslint fails. How about adding a pre-commit hook to run eslint? Or at least adding a general rule to run it before commit manually. Fix all the issues as well, and try to avoid warnings.
[ ] Change all .jsx extension to .js since it's pretty much outdated. https://github.com/facebook/create-react-app/issues/87
[x] Add env config to .eslintrc, because there is issue with undeclared variables (window, localStorage....)
```
"env": {
"browser": true,
"node": true,
....
}
```
[x] Separate devDependencies from dependencies, so packages like eslint-plugin-flowtype and etc wouldn't be included in app build file.
[ ] In config.js file pull app version and name from package.json instead of hardcode.
[x] Always keep methods ordering, render method should be last in the class, so in ./src/App/App.js method componentDidMount goes after render but should be on the top after the constructor. Also, method toggleCalendarListVisibility is not a class method but a function avoid mixing this in future and use only class method syntax aka nameOfMethod(){...}

[x] Using `bindActionCreators will make your life easier, here is a code example


import { myAction } from './action'
....
Class test extends Component {
someMethod() {
this.props.myAction()
}
}
....

const mapDispatchToProps = dispatch => bindActionCreators({ myAction, }, dispatch);

export default connect( mapStateToProps, mapDispatchToProps, )(test);


- [ ] There is a lot of places where your code is hard to read, most of them are a JSX code, so try to setup your text editor or IDE to auto-prettify code following eslint plugin rules.
- [x] Keep similar syntax everywhere, so adding semicolumns in one place require you to add it everywhere.
- [ ] Some of the containers are pretty big, like 250+ lines of code, this is because they contain too much is business logic, which has to be moved from components to actions. You can keep only internal login in components. For example - when you have a `Switch` component - there is no need to have an action for it, so it can be controlled by `state`, but the result of toggling have to be operated in actions and saved in store.
- [x] Local storage is case sensitive, so to avoid any issues - keep it in lower case with underscores `localStorage.removeItem('Events');`
- [x] Empty tags have to be self-closed `<span class="slider round"></span>`
- [x] Move API endpoint to config file `https://www.googleapis.com/calendar/v3` so it will be easy to update every HTTP call
- [x] Business logic is forbidden in reducers, so keep only store update code there
```JavaScript
case 'ERROR_HANDLER':
    {
      navigator.notification.alert(action.payload, null, 'Room Manager', 'OK'); // this is bad
      return state;
    }

[ ] Why do you have images folder in ./src?

meetio-room / Project-X

13/Apr/2018 Technical Code-Review notes #3