<file_sep># gamelist-app
a CRUD made with MERN stack

![alt test](https://user-images.githubusercontent.com/47251170/72296827-f41b9580-3630-11ea-9a2b-d4737fd54b19.png)
<file_sep>const {Router}= require('express');
const {getGames, createGame, getGame, deleteGame, editGame} = require('../controllers/gamesController');

//initialize
const router = Router();

//routes
router.route('/')
  .get(getGames)
  .post(createGame)

router.route('/:id')
  .get(getGame)
  .put(editGame)
  .delete(deleteGame)

module.exports = router;<file_sep>import React, { Component } from 'react'
import axios from 'axios'
import {Link} from 'react-router-dom'

export default class GameList extends Component {

  state = {
    games: []
  }

  async componentDidMount(){
    this.getGames()
  }

  getGames = async () => {
    const res = await axios.get('http://localhost:4000/api/games')
    console.log(res)
    this.setState({
      games: res.data.games
    })
  }

  deleteGame = async id => {
    await axios.delete('http://localhost:4000/api/games/'+ id)
    this.getGames()
  }


  render() {
    return (
      <div className="row">
        {this.state.games.map(game => 
          <div className="col-md-4 p-2" key={game._id}>
            <div className="card">
              <div className="card-header bg-dark text-light">
                <h5>{game.title}</h5>
              </div>
              <div className="card-body">
                <p>{game.genre}</p>
                <p>{game.status}</p>
              </div>
              <div className="card-footer bg-dark text-light d-flex justify-content-between">
                <button 
                  className="btn btn-danger"
                  onClick={() => this.deleteGame(game._id)}>
                  Delete
                </button>
                <Link 
                  className="btn btn-secondary"
                  to={'/edit/' + game._id}>
                  Edit
                </Link>
              </div>
            </div>
          </div>
        )}
      </div>
    )
  }
}
