index.js

component.js

import React, { useState, useEffect } from "react";
import axios from "axios";

const Test = () => {
  const [data, setData] = useState([]);
  const [land, setLand] = useState("");
  const [pop, setPop] = useState({
    country: "",
    population: "",
    year: "",
  });


  useEffect(() => {
    fetchData();
  }, [land, deleteData]);

  const fetchData = () => {
    axios
      .get(`http://localhost:3002/pop/${land}`)
      .then((res) => setData(res.data));
  };

  const postData = (e) => {
    e.preventDefault();
    axios
      .post(`http://localhost:3002/population`, pop)
      .catch((err) => console.log(err))

      .then(setLand(pop.country));
  };

  function deleteData(e, countries, years) {
    e.preventDefault();
    console.log(countries, years);
    axios
      .delete(`http://localhost:3002/pop/${countries}/${years}`)
      .catch((err) => console.log(err))
      .then()
  }

  return (
    <>
      <input
        value={land}
        onChange={(e) => {
          setLand(e.target.value);
        }}
      />
      {data.map((elem) => {
        return (
          <li>
            {elem.country} {elem.population} {elem.year}
            <button
              type="submit"
              onClick={(e) => {
                deleteData(e, elem.country, elem.year);
              }}
            >
              delete
            </button>
          </li>
        );
      })}
      <form onSubmit={postData}>
        <input
          value={pop.country}
          type="text"
          onChange={(e) => {
            setPop({ ...pop, country: e.target.value });
            console.log(pop);
          }}
        />
        <input
          value={pop.population}
          type="text"
          onChange={(e) => setPop({ ...pop, population: e.target.value })}
        />
        <input
          value={pop.year}
          type="number"
          onChange={(e) => setPop({ ...pop, year: e.target.value })}
        />
        <button type="submit">Add data</button>
      </form>
    </>
  );
};

export default Test;

gistfile1.txt

require('dotenv').config()
const cors = require('cors')
const express = require('express')
const app = express()
const connexion = require('./conf')
const BodyParser = require('body-parser')
const { request } = require('express')

app.use(express.json())
app.use(BodyParser.urlencoded({
    extended : true
}))

app.use(cors())


app.get('/pop', (request, response) => {
    connexion.query(`SELECT DISTINCT country, population, year FROM population_years where year = 2010`, (err, results) => {
        response.send(results)
    })
})

app.get('/pop/:country/', (request, response) => {
    const {country, year} = request.params
    connexion.query(`Select * from population_years where country = ?`, [country, year], (err, results) => {
        response.send(results)
    })
})

app.post('/population', (request, response) => {
    const formData = request.body
    connexion.query('INSERT into population_years SET ?', formData, (err, results) => {
        if(err) throw err
        response.send('Data inserted')
    })
})

app.put('/pop/:country/:year', (request, response) => {
    const formData = request.body
    const country = request.params.country
    const year = request.params.year
    connexion.query('UPDATE population_years SET ? where country = ? and year = ? ', [formData, country, year ], (err, results) => {
        if(err) throw err
        response.send('Data updated')
    } )
})

app.delete('/pop/:country/:year', (request, response) => {
    const {country, year} = request.params
    connexion.query('DELETE from  population_years  where country = ? and year = ? ', [country, year ], (err, results) => {
        if(err) throw err
        response.send('Data deleted')
    } )
})


app.listen(3002, () => console.log('Hello world'))