MDN Express チュートリアルを MERN スタック化 Pt.1: React の適用

"scripts": {
  "start": "node ./app.js",
  "dev": "concurrently -n frontend,backend \"npm run frontend-dev\" \"npm run backend-dev\"",
  "backend-dev": "nodemon ./app.js",
  "frontend-dev": "npm run start --prefix react"
},

  devServer: {
    proxy: {
      '/api': 'http://localhost:3000',
    },

exports.book_list = async function (req, res) {
  let query = new Object()
  if (req.query.authorId) {
    query["author"] = req.query.authorId
  }
  if (req.query.genreId) {
    query["genre"] = req.query.genreId
  }

  try {
    const list_books = await Book.find(query)
      .sort("title")
      //.select('title author')
      .populate("author")
      .exec()
    //res.json(list_books);
    res.json(list_books.map(book => book.toJSON({ virtuals: true })))
  } catch (err) {
    res.status(400).json("Error: " + err)
  }
}

res.json(book.toJSON({ virtuals: true }))

res.json(list_books.map(book => book.toJSON({ virtuals: true })))

exports.book_update = [
  // Convert the genre to an array
  (req, res, next) => {
    if (!(req.body.genre instanceof Array)) {
      if (req.body.genre === "undefined") {
        req.body.genre = []
      } else {
        req.body.genre = new Array(req.body.genre)
      }
    }
    next()
  },
  // Validate and sanitise fields.
  body("title", "Title must not be empty.")
    .trim()
    .isLength({ min: 1 })
    .escape(),
  body("author", "Author must not be empty.")
    .trim()
    .isLength({ min: 1 })
    .escape(),
  body("summary", "Summary must not be empty.")
    .trim()
    .isLength({ min: 1 })
    .escape(),
  body("isbn", "ISBN must not be empty.").trim().isLength({ min: 1 }).escape(),
  body("genre.*").escape(),
  async function (req, res) {
    // Extract the validation errors from a request.
    const errors = validationResult(req)
    // There are errors. Render form again with sanitized values/error messages.
    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array() })
    }

    // Create a Book object with escaped/trimmed data and old id.
    const book = new Book({
      title: req.body.title,
      author: req.body.author,
      summary: req.body.summary,
      isbn: req.body.isbn,
      genre: req.body.genre,
      _id: req.params.id, //This is required, or a new ID will be assigned!
    })

    try {
      // Data from form is valid. Update the record.
      await Book.findByIdAndUpdate(book._id, book).exec()
      return res.json(book)
    } catch (err) {
      return res.status(400).json("Error: " + err)
    }
  },
]

export default function App() {
  return (
    <Router>
      <div className="container-fluid">
        <div className="row">
          <div className="col-sm-2">
            <Sidebar />
          </div>
          <div className="col-sm-10">
            <Switch>
              <Route path="/" exact>
                <DynamicContent />
              </Route>
              <Route path="/books" exact>
                <BookList />
              </Route>
              <Route path="/book/create" exact>
                <BookCreate />
              </Route>
              <Route path="/book/:id" exact>
                <BookDetail />
              </Route>
              <Route path="/book/:id/update" exact>
                <BookUpdate />
              </Route>
              <Route path="/book/:id/delete" exact>
                <BookDelete />
              </Route>
              // 省略

import axios from "axios"

export default axios.create({
  baseURL: "http://localhost:8080/api",
  headers: {
    "Content-type": "application/json",
  },
})

import http from "../http-common"

const urlPrefix = "/books"

const getAll = () => {
  return http.get(urlPrefix)
}

const get = id => {
  return http.get(`${urlPrefix}/${id}`)
}

const create = data => {
  return http.post(urlPrefix, data)
}

const update = (id, data) => {
  return http.put(`${urlPrefix}/${id}`, data)
}

const remove = id => {
  return http.delete(`${urlPrefix}/${id}`)
}

const findByAuthorId = authorId => {
  return http.get(`${urlPrefix}?authorId=${authorId}`)
}

const findByGenreId = genreId => {
  return http.get(`${urlPrefix}?genreId=${genreId}`)
}

import React, { useState, useEffect } from "react"
import { Link } from "react-router-dom"

import BookService from "../services/BookService"

export default function BookList() {
  // ローカル状態変数: 本のリスト
  const [books, setBooks] = useState([])

  // コンポーネントのレンダリング後に一度だけ getBookList() 関数を呼ぶ
  useEffect(() => {
    getBookList()
  }, [])

  // 本のリストを取得して、ローカル状態にセットする
  async function getBookList() {
    try {
      const res = await BookService.getAll()
      setBooks(res.data)
    } catch (err) {
      console.log(err)
    }
  }

  const list =
    books.length === 0 ? (
      <li>There are no books.</li>
    ) : (
      books.map(item => {
        return (
          <li key={item._id}>
            <Link to={`/book/${item._id}`}>{item.title}</Link>
            <span> </span>({item.author.name})
          </li>
        )
      })
    )

  return (
    <>
      <h1>Books List</h1>

      <ul>{list}</ul>
    </>
  )
}

import React, { useState, useEffect } from "react"
import { useParams, Link } from "react-router-dom"

import BookService from "../services/BookService"
import BookInstanceService from "../services/BookInstanceService"

import InlineGenreList from "../genre/InlineGenreList"
import StatusView from "../bookinstance/StatusView"
import DueBackView from "../bookinstance/DueBackView"

export default function BookDetail() {
  const { id } = useParams()
  // ローカル状態変数: 本
  const [book, setBook] = useState()

  // コンポーネントのレンダリング後に一度だけ getBook() 関数を呼ぶ
  useEffect(() => {
    getBook()
  }, [])

  // 本の情報を取得して、ローカル状態にセットする
  async function getBook() {
    try {
      const res = await BookService.get(id)
      setBook(res.data)
    } catch (err) {
      console.log(err)
    }
  }

  // ローカル状態変数: 本の現物のリスト
  const [dependings, setDependings] = useState([])

  // コンポーネントのレンダリング後に一度だけ findBookInstance() 関数を呼ぶ
  useEffect(() => {
    findBookInstance()
  }, [])

  // 本の現物のリストを取得して、ローカル状態にセットする
  async function findBookInstance() {
    try {
      const res = await BookInstanceService.findByBookId(id)
      setDependings(res.data)
    } catch (err) {
      console.log(err)
    }
  }

  // 本の詳細表示を作成
  if (!book) return <></>
  const bookDetail = book ? (
    <>
      <h1>Title: {book.title}</h1>
      <p>
        <strong>Author:</strong>
        <Link to={`/author/${book.author._id}`}> {book.author.name}</Link>
      </p>
      <p>
        <strong>Summary:</strong> {book.summary}
      </p>
      <p>
        <strong>ISBN:</strong> {book.isbn}
      </p>
      <p>
        <strong>Genre:</strong> <InlineGenreList genre={book.genre} />
      </p>
    </>
  ) : (
    ""
  )

  // 本の現物のリスト表示を作成
  let bookInstanceList
  if (dependings.length === 0) {
    // No Deps Message
    bookInstanceList = <p>There are no copies of this book in the library.</p>
  } else {
    // Item List with listItemElement
    bookInstanceList = dependings.map(item => {
      return (
        <div key={item._id}>
          <hr />
          <StatusView viewType="p" status={item.status} />
          <p>
            <strong>Imprint:</strong> {item.imprint}
          </p>
          <DueBackView
            status={item.status}
            dueBackFormatted={item.due_back_formatted}
            viewType="box"
          />
          <p>
            <strong>Id:</strong>
            <Link to={`/bookinstance/${item.id}`}> {item.id}</Link>
          </p>
        </div>
      )
    })
  }

  const url = `/${"book"}/${id}`

  return (
    <>
      {bookDetail}

      <div className="list">
        <h4>Copies</h4>
        <dl>{bookInstanceList}</dl>
      </div>

      <hr />

      <p>
        <Link to={`${url}/delete`}>Delete Book</Link>
      </p>
      <p>
        <Link to={`${url}/update`}>Update Book</Link>
      </p>
    </>
  )
}

import React from "react"

import BookForm from "./BookForm"

const BookCreate = () => {
  return (
    <>
      <h1>Create Book</h1>
      <BookForm />
    </>
  )
}

export default BookCreate

import React, { useState, useEffect } from "react"
import PropTypes from "prop-types"
import { useHistory } from "react-router-dom"

import BookService from "../services/BookService"
import AuthorService from "../services/AuthorService"
import GenreService from "../services/GenreService"
import FormErrors from "../FormErrors"

const BookForm = props => {
  // 局所状態変数: フォームの入力値
  const [title, setTitle] = useState(props.title)
  const [author, setAuthor] = useState(props.author)
  const [summary, setSummary] = useState(props.summary)
  const [isbn, setIsbn] = useState(props.isbn)
  const [genre, setGenre] = useState(props.genre)

  const history = useHistory()
  const [errors, setErrors] = useState([])

  // フォームの選択肢を取得: Author
  const [authorList, setAuthorList] = useState([])

  useEffect(() => {
    getAuthorList()
  }, [])

  async function getAuthorList() {
    try {
      const res = await AuthorService.getAll()
      setAuthorList(res.data)
    } catch (err) {
      console.log(err)
    }
  }

  // フォームの選択肢を取得: Genre
  const [genreList, setGenreList] = useState([])

  useEffect(() => {
    getGenreList()
  }, [])

  async function getGenreList() {
    try {
      const res = await GenreService.getAll()
      setGenreList(res.data)
    } catch (err) {
      console.log(err)
    }
  }

  // フォームハンドラ
  async function handleSubmit(event) {
    event.preventDefault()
    const newBook = new Object({
      title: title,
      author: author,
      summary: summary,
      isbn: isbn,
      genre: genre,
    })
    try {
      const res = await (props.id
        ? // id が指定されている場合 → 更新
          BookService.update(props.id, newBook)
        : // id が指定されてない場合 → 新規作成
          BookService.create(newBook))
      // 上手く言った場合は、本の詳細表示へ繊維
      history.push(`/book/${res.data._id}`)
    } catch (err) {
      console.log(err)
      if (err.response) {
        // 入力値の検証エラーなどが発生した場合
        setErrors(err.response.data.errors)
      }
    }
  }

  // チェックボックスのフォームハンドラ
  function handleGenre(event) {
    if (genre.includes(event.target.value)) {
      setGenre(genre.filter(g => g !== event.target.value))
    } else {
      setGenre([...genre, event.target.value])
    }
  }

  // フォームの選択肢表示を生成: Author
  const authorOptions = authorList.map(author => {
    return (
      <option key={author._id} value={author._id}>
        {author.name}
      </option>
    )
  })

  // フォームの選択肢表示を生成: Genre
  const genreOptions = genreList.map(g => {
    return (
      <div className="form-check form-check-inline" key={g._id}>
        <input
          type="checkbox"
          id={`genre-${g._id}`}
          value={g._id}
          checked={genre.includes(g._id)}
          onChange={handleGenre}
          className="form-check-input"
        />
        <label htmlFor={`genre-${g._id}`} className="form-check-label">
          {g.name}
        </label>
      </div>
    )
  })

  return (
    <>
      <form method="POST" onSubmit={handleSubmit}>
        <div className="form-group">
          <label htmlFor="title">Title:</label>
          <input
            type="text"
            id="title"
            name="title"
            placeholder="Name of book"
            value={title}
            onChange={e => setTitle(e.target.value)}
            className="form-control"
            required
          />
        </div>

        <div className="form-group">
          <label htmlFor="author">Author:</label>
          <select
            id="author"
            name="author"
            placeholder="Select author"
            value={author}
            onChange={e => setAuthor(e.target.value)}
            className="form-control"
            required
          >
            <option hidden value="">
              Select author
            </option>
            {authorOptions}
          </select>
        </div>

        <div className="form-group">
          <label htmlFor="summary">Summary:</label>
          <textarea
            id="summary"
            name="summary"
            placeholder="Summary"
            value={summary}
            onChange={e => setSummary(e.target.value)}
            className="form-control"
            required
          />
        </div>

        <div className="form-group">
          <label htmlFor="isbn">ISBN:</label>
          <input
            type="text"
            id="isbn"
            name="isbn"
            placeholder="ISBN13"
            value={isbn}
            onChange={e => setIsbn(e.target.value)}
            className="form-control"
            required
          />
        </div>

        <div className="form-group">
          <label>Genre:</label>
          <div>{genreOptions}</div>
        </div>

        <input className={"btn btn-primary"} type="submit" />
      </form>

      <FormErrors errors={errors} />
    </>
  )
}

BookForm.propTypes = {
  id: PropTypes.string,
  title: PropTypes.string,
  author: PropTypes.string,
  summary: PropTypes.string,
  isbn: PropTypes.string,
  genre: PropTypes.array,
}

BookForm.defaultProps = {
  title: "",
  author: "",
  summary: "",
  isbn: "",
  genre: [],
}

export default BookForm

import React, { useState, useEffect } from "react"
import { useParams } from "react-router-dom"

import BookService from "../services/BookService"
import BookForm from "./BookForm"

const BookUpdate = () => {
  const { id } = useParams()
  // ローカル状態変数: 本
  const [book, setBook] = useState()

  // コンポーネントのレンダリング後に一度だけ getBook() 関数を呼ぶ
  useEffect(() => {
    getBook()
  }, [])

  // 本の情報を取得して、ローカル状態にセットする
  async function getBook() {
    try {
      const res = await BookService.get(id)
      setBook(res.data)
    } catch (err) {
      console.log(err)
    }
  }

  if (!book) return <></>

  return (
    <>
      <h1>Update Book</h1>

      <BookForm
        id={id}
        title={book.title}
        author={book.author._id}
        summary={book.summary}
        isbn={book.isbn}
        genre={book.genre.map(g => g._id)}
      />
    </>
  )
}

export default BookUpdate

import React, { useState, useEffect } from "react"
import { useParams, useHistory, Link } from "react-router-dom"

import BookService from "../services/BookService"
import BookInstanceService from "../services/BookInstanceService"

export default function BookDelete() {
  const { id } = useParams()
  // ローカル状態変数: 本
  const [book, setBook] = useState()

  // コンポーネントのレンダリング後に一度だけ getBook() 関数を呼ぶ
  useEffect(() => {
    getBook()
  }, [])

  // 本の情報を取得して、ローカル状態にセットする
  async function getBook() {
    try {
      const res = await BookService.get(id)
      setBook(res.data)
    } catch (err) {
      console.log(err)
    }
  }

  // ローカル状態変数: 本の現物のリスト
  const [dependings, setDependings] = useState([])

  // コンポーネントのレンダリング後に一度だけ findBookInstance() 関数を呼ぶ
  useEffect(() => {
    findBookInstance()
  }, [])

  // 本の現物のリストを取得して、ローカル状態にセットする
  async function findBookInstance() {
    try {
      const res = await BookInstanceService.findByBookId(id)
      setDependings(res.data)
    } catch (err) {
      console.log(err)
    }
  }

  const history = useHistory()

  // イベントハンドラ
  async function handleClick() {
    try {
      await BookService.remove(id)
      console.log("removeAuthor")
      // 削除が成功した場合 → 本のリストに遷移
      history.push(`/books`)
    } catch (err) {
      console.log(err)
    }
  }

  if (!book) return <></>

  return (
    <>
      <h1>Delete Book: {book.title}</h1>

      {dependings.length > 0 ? (
        <>
          <p>
            <strong>
              Delete the following copies before attempting to delete this book.
            </strong>
          </p>
          <div className="list">
            <h4>Copies</h4>
            <ul>
              {dependings.map(item => {
                return (
                  <li key={item._id}>
                    <Link to={`/bookinstance/${item._id}`}>
                      {item.book.title}
                    </Link>
                  </li>
                )
              })}
            </ul>
          </div>
        </>
      ) : (
        <>
          <p>Do you really want to delete this book?</p>
          <button
            type="button"
            onClick={handleClick}
            className="btn btn-primary"
          >
            Delete
          </button>
        </>
      )}
    </>
  )
}