# REDUX CART
### APRIL 29, 2020
- great job doing redux :clap:
- we can also seperate the redux logic in seperate `redux` folder
- the `action types` can be made in a seperate file
- you can also make a `root_reduer` to combine all the reducers, since there is only one reducer, it may be overkill too.
- you have done `store` code in `App.js` it is better to keep it at a different file, its a better practice.
- in `action.js` there is only one action to remove item but redux dev tools shows other actions too, how is it working
- Oh i see. you put other actions in `CartItem.js` directly in `mapStateToProps`
- little shortcut

function mapStateToProps(store) {
  const { cart, total } = store
  return { cart, total }
}

can be written as

const mapStateToProps = ({ cart, total }) => ({ cart, total })

# TODO APP
## BACKEND
### APRIL 24, 2020
- great project nice :clap: :clap:
### APRIL 23, 2020
- you may have forgotten to use doten. you have made `.env` file but you are not registering it in the node app. you can do this by adding `require('dotenv').config()` at the top of entrypoing, in this case `server.js`
- the best practice is not to push the `.env` file to github. so you may want to `.gitignore` it
- you are using local mongodb so thats okay to include the mongo URI hardcoded, but while using [MongoDB Atlas](https://www.mongodb.com/cloud/atlas) you may also want to put it in the `.env` file
- try using es6 features, you know its a new thing 😉
- I saw that you are using `callback` for router callbacks, you can also consider using `async`-`await` syntax for more code readablity too. but this is also good :smile:
### APRIL 22, 2020
- following best practices by organising code like in MVC format
- you may not want to include your node_modules folder to the github
- you can check this out [dotenv](https://www.npmjs.com/package/dotenv) for using `.env` configuration
- in `todo-router.js`

you forgot to import `express` 😉

module.exports = todoRouter.route('/').get(function (req, res) {
  Todo.find(function (err, todos) {
    if (err) {
      console.log(err)
    } else {
      res.json(todos)
    }
  })
})

you have done `module.exports = object.key1`
and also `module.exports = object.key2`
what we can also do is

object.key1
object.key2
module.exports=object

- you dont have to do `todoRouter.route('/').get(callback)`
- you can simply do `todoRouter.get('/',callback)`

- in `todo.model.js`
while defining schema you may want to specify some required fields too like

description: {
   type: String,
   required:true,
 },

if there is only need of type property in the object then you can do

description: String

## FRONTEND
### APRIL 24, 2020
- after creating todo, the app navigates to homepage, but shows old todo values, it would be better to load new values when going to that page
- Looks like delete button is missing :wink:
- good job :+1: :+1: :100:
### APRIL 23, 2020
- in `todos.component.jsx` you have used `props.todo.something`
- you can do it like this also

export default function Todo({todo:{_id,description,responsible,priority}}) {
  return (
    <tr>
      <td>{description}</td>
      <td>{responsible}</td>
      <td>{priority}</td>
      <td>
        <Link to={`/edit/${_id}`}>Edit</Link>
      </td>
    </tr>
  );
}

I have destructered the props here. You may check about destructuring [here](https://www.youtube.com/watch?v=_ApRMRGI-6g)
### APRIL 22, 2020
- you can also extract the navbar to different component
- nice you read articles from [Coding Smart Way](https://codingthesmartway.com),nice website
- Nice use or _exact_ you can also check this article from stackoverflow [stackoverflow](https://stackoverflow.com/questions/49162311/react-difference-between-route-exact-path-and-route-path)

- I see that you have used `.bind()` to bind the `this` value
- binding is not necessary with the use of es6 arrow funcitons

  onSubmit(e) {
    e.preventDefault()
    console.log('Form Submitted')
    console.log(`TODO Description: ${this.state.description}`)
    console.log(`TODO Responsible: ${this.state.responsible}`)
    console.log(`TODO Priority: ${this.state.priority}`)

    this.setState({
      priority: '',
      description: '',
      responsible: '',
      completed: false,
    })
  }

this code could be replaced with

  onSubmit = e => {
    e.preventDefault()
    console.log('Form Submitted')
    console.log(`TODO Description: ${this.state.description}`)
    console.log(`TODO Responsible: ${this.state.responsible}`)
    console.log(`TODO Priority: ${this.state.priority}`)

    this.setState({
      priority: '',
      description: '',
      responsible: '',
      completed: false,
    })
  }

and there will be no need of binding `this`

- like I have said using arrow functions reduces from binding `this`
you can see why use arrow function and whats the need of binding from [here](https://www.codementor.io/@dariogarciamoya/understanding-this-in-javascript-with-arrow-functions-gcpjwfyuc)
- in `create-todo.component.jsx`

onChangeTodoDescription(e) {
    this.setState({
      description: e.target.value,
    });
  }
  onChangeTodoResponsible(e) {
    this.setState({
      responsible: e.target.value,
    });
  }
  onChangeTodoPriority(e) {
    this.setState({
      priority: e.target.value,
    });
  }

all the code above can be replaced with single function

onFormFieldChange = e => {
  this.setState({
    [e.target.name]: e.target.value,
  })
}

you can learn more about dynamic object casting from [here](https://www.samanthaming.com/tidbits/37-dynamic-property-name-with-es6/)

- in `edit-todo.component.jsx` since you are just returning `jsx` we can simply use a functional component

export default () => {
  return (
    <div>
      <p>Welcome to Edit Todo Component!!</p>
    </div>
  )
}

- same in `todos-list.component.jsx`

const youDidFantasticWork = () => {
  console.log('Proud of you 💗 ')
}