Todolist 2

index.js

const express = require('express');
const router = express.Router();
const mysql = require('mysql2');

const allowOrigins = ['http://127.0.0.1:3000', 'http://localhost:3000'];

/* GET home page. */
router.get('/todos', function(req, res, next) {
    const { origin } = req.headers;
    if (allowOrigins.includes(origin)) {
        res.setHeader('Access-control-allow-origin', origin);
    }
    let todos = [];

    const connection = mysql.createConnection({
        host: process.env.DB_HOST,
        user: process.env.DB_USER,
        password: process.env.DB_PASSWORD,
        database: process.env.DB_SCHEMA_TODOS,
    });

    connection.connect();

    connection.query(
        'SELECT * FROM todo_list',
        async (err, results, fields) => {
            if (err) throw err;
            for (let i = 0; i < results.length; i++) {
                const { todo, add_time } = results[i];
                todos.push(todo);
            }
            res.send({ todos });
        }
    );

    connection.end();
});

module.exports = router;

initdb.sql

CREATE DATABASE IF NOT EXISTS local_bookstore;

CREATE DATABASE IF NOT EXISTS todos;

GRANT ALL ON todos.* TO 'local_bookstore' @'%';

FLUSH PRIVILEGES;

USE todos;

CREATE TABLE IF NOT EXISTS todo_list (
    id int(11) NOT NULL auto_increment,
    add_time DATETIME NOT NULL,
    todo text NOT NULL,
    PRIMARY KEY (id)
);

INSERT INTO
    todo_list (add_time, todo)
VALUES
    (
        '2020-01-27 14:20:12',
        'add db table'
    );

INSERT INTO
    todo_list (add_time, todo)
VALUES
    (
        '2020-01-29 14:20:12',
        'enable utf8 to use korean'
    );

Todo.js

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import { List } from './List';
import uuidv1 from 'uuid/v1';

const AddButton = styled.button`
    margin-left: 2px;
`;

export const Todo = () => {
    const [text, setText] = useState('');
    const [todoList, setTodoList] = useState([]);

    const onChangeFunction = (evt) => {
        setText(evt.target.value);
    };

    const addFunction = (evt) => {
        if (!text) return;
        updateList();
    };

    const keyDownFunction = (evt) => {
        if (evt.keyCode !== 13) return;
        updateList();
    };

    const updateList = () => {
        setTodoList([...todoList, <List value={text} key={uuidv1()} />]);
        setText('');
    };

    useEffect(() => {
        fetch('http://127.0.0.1:3001/api/todos')
            .then((res) => {
                return res.json();
            })
            .then(({ todos }) => {
                setTodoList(() =>
                    todos.map((item) => <List value={item} key={uuidv1()} />)
                );
            });
    }, []);

    return (
        <>
            <input
                type="text"
                value={text}
                onKeyDown={keyDownFunction}
                onChange={onChangeFunction}
            ></input>
            <AddButton onClick={addFunction}>add</AddButton>
            <ol>{todoList}</ol>
        </>
    );
};