React×GoでTodoリスト作ってみた

基本の復習も兼ねてTodoリストを作りました。
Reactでは、非同期でHTTP通信を行うためにaxiosを使っています。
Goでは、GORMとechoを使っています。

##React

Todo.js

import React from 'react';
import InputField from './InputField';
import List from './List';
import http from './http';

class Todo extends React.Component {
  constructor() {
    super();
    this.state = {
      text: "",
      lists: [],
    }
  }

  componentDidMount() {
    this.getTodoList();
  }

  getTodoList = () => {
    return http
      .get('/todo')
      .then((response) => {
        this.setState({ lists: response.data })
      })
      .catch(error => {
        console.log(error)
      })
  }

  handleChange = e => {
    this.setState({ text: e.target.value })
  }

  handleSubmit = () => {
    if (this.state.text === "") {
      return window.alert("入力してください")
    }
    return http
      .post('/todo', {
        text: this.state.text
      })
      .then(() => {
        this.setState({ text: "" });
        this.getTodoList();
      }
      )
      .catch(error => {
        console.log(error)
      })
  }

  handleDelete = (list) => {
    return http
      .delete(`/todo/${list.id}`)
      .then(() =>
        this.getTodoList()
      )
      .catch(error => {
        console.log(error)
      })
  }

  render() {
    return (
      <div className="todo">
        <div className="todo-title">
          <h1>Todo</h1>
        </div>
        <InputField
          text={this.state.text}
          handleChange={this.handleChange}
          handleSubmit={this.handleSubmit}
        />
        <List
          lists={this.state.lists}
          handleDelete={this.handleDelete}
        />
      </div>
    )
  }
}

export default Todo;

InputField.js

import React from 'react';

export default function InputField(props) {
  return (
    <div className="todo-input-field">
      <input placeholder="入力しよう" value={props.text} onChange={e => props.handleChange(e)}></input>
      <button onClick={props.handleSubmit}>保存</button>
    </div>
  )
}

http.js

import axios from 'axios';

const API_HOST = process.env.REACT_APP_API_HOST || 'http://localhost:〇〇〇〇';

const http = axios.create({
  baseURL: API_HOST,
});

export default http;

##Go

main.go

package main

import (
	"context"
	"fmt"
	"log"
	"net/http"
	"os"
	"os/signal"

	"パスに合わせて他のパッケージをimport"

	"github.com/jinzhu/gorm"
	_ "github.com/jinzhu/gorm/dialects/mysql"
)

const defaultPort = "〇〇〇〇"

func port() string {
	p := os.Getenv("PORT")
	if p != "" {
		return ":" + p
	}
	return ":" + defaultPort
}

func main() {
	connStr := fmt.Sprintf(
		"%s:%s@tcp(%s)/%s?charset=utf8mb4&parseTime=True",
		"DBUSER",
		"DBPASSWORD",
		"DBPROTOCOL",
		"DBNAME",
	)

	db, err := gorm.Open("mysql", connStr)
	if err != nil {
		log.Fatal(err)
	}

	h := handler.New(db)

	server := &http.Server{
		Addr:    port(),
		Handler: h,
	}

	go func() {
		stop := make(chan os.Signal, 1)
		signal.Notify(stop, os.Interrupt)

		<-stop
		log.Println("Shutting down...")

		if err := server.Shutdown(context.Background()); err != nil {
			log.Println("Unable to shutdown:", err)
		}

		log.Println("Server stopped")
	}()

	log.Println("Listening on http://localhost" + port())
	if err := server.ListenAndServe(); err != http.ErrServerClosed {
		log.Fatal(err)
	}
}

handler.go

package handler

import (
	"net/http"

	"github.com/jinzhu/gorm"
	"github.com/labstack/echo"
	"github.com/labstack/echo/middleware"
)

func New(db *gorm.DB) http.Handler {
	e := echo.New()
	e.Use(middleware.CORS())

	h := &handler{
		DB: db,
	}

	e.GET("/health", h.health)

	e.GET("/todo", h.getTodoLists)
	e.POST("/todo", h.createTodo)
	e.DELETE("/todo/:id", h.deleteTodo)

	return e
}

type handler struct {
	DB *gorm.DB
}

func (h *handler) health(c echo.Context) error {
	return c.JSON(http.StatusOK, map[string]string{"message": "OK"})
}

list.go

package handler

import (
	"net/http"
	"time"

	"github.com/labstack/echo"
)

type List struct {
	ID        uint      `json:"id"`
	Text      string    `json:"text"`
	CreatedAt time.Time `json:"createdAt"`
	UpdatedAt time.Time `json:"updatedAt"`
}

func (h *handler) getTodoLists(c echo.Context) error {
	var lists []List
	err := h.DB.Find(&lists).Error
	if err != nil {
		return err
	}

	return c.JSON(http.StatusOK, lists)
}

func (h *handler) createTodo(c echo.Context) error {
	var list List
	err := c.Bind(&list)
	if err != nil {
		return err
	}

	err = h.DB.Create(&list).Error
	if err != nil {
		return err
	}

	return c.JSON(http.StatusOK, list)
}

func (h *handler) deleteTodo(c echo.Context) error {
	var list List
	paramID := c.Param("id")

	err := h.DB.Where("id=?", paramID).Delete(&list).Error
	if err != nil {
		return err
	}

	return c.JSON(http.StatusOK, list)
}

本来であれば、type ~ struct　構造体を他のパッケージからインポートするのがベストな気がするのですが、importがうまくできなかったので、list.goにまとめて書きました。
この問題は解決したい、、、

##DB
todoというデータベースの中にlistsテーブルがあり、中身は画像のようになってます。

##Todoリスト

このような形で簡単なTodoリストが作成できると思います。