編輯視窗的介面

EditingWindow.js

import React, { useState } from 'react';
import { Button, Modal, Form } from 'react-bootstrap';

const EditingWindow = ({ onHide, show, post, status }) => {
  const newPost = { title: '', author: '', body: '', }
  const [thisPost, setThisPost] = useState(post ? post : newPost)

  const changePost = (e) => {
    setThisPost({
      ...thisPost,
      [e.target.name]: e.target.value ,
    })
  }

  return (
    <Modal
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      {...{ onHide, show }
      /* 不太懂為什麼一定要加 ... 直接寫也會出 bug 只知道等同於下面
      onHide={onHide} show={show}，這樣的寫法是另外變成物件，然後傳給子 component 之後解構嗎
      */}
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          {status === "editing" ? "你正在編輯文章" : "你正在新增文章"}
        </Modal.Title>
      </Modal.Header>
      <Form>
        <Modal.Body>
          <Form.Group controlId="formBasicEmail">
            <Form.Label>標題</Form.Label>
            <Form.Control
              name="title"
              type="text"
              placeholder="Enter title"
              value={thisPost && thisPost.title}
              onChange={(e) => { changePost(e, 'title') }} // 似乎可以抽出來，就是用變數名稱取代
            />
          </Form.Group>
          <Form.Group controlId="formBasicPassword">
            <Form.Label>作者</Form.Label>
            <Form.Control
              name="author"
              type="text"
              placeholder="author/作者"
              value={thisPost && thisPost.author}
              onChange={(e) => { changePost(e, 'author') }}
            />
          </Form.Group>
          <Form.Group controlId="exampleForm.ControlTextarea1">
            <Form.Label>內文</Form.Label>
            <Form.Control
              name="body"
              as="textarea"
              rows="5"
              placeholder="輸入內文"
              value={thisPost && thisPost.body}
              onChange={(e) => { changePost(e, 'body') }}
            />
          </Form.Group>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="outline-secondary" onClick={onHide}>Close</Button>
          <Button variant="outline-primary" onClick={() => console.log('送出', thisPost)} > Save changes</Button>
        </Modal.Footer>
      </Form>
    </Modal>
    /* 編輯送出之後，還要讓整個資料可以改變 */
  );
}

const DeleteWindow = ({ onHide, show, post }) => {
  return (
    <Modal
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
      {...{ onHide, show }}
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          警告！你正在刪除文章
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        你確定要刪除文章嗎？
      </Modal.Body>
      <Modal.Footer>
        <Button variant="outline-secondary" onClick={onHide}>
          不了，我不要刪除
          </Button>
        <Button variant="outline-primary" onClick={() => console.log(`已刪：${post.id}`)} >
          是的，我要刪除
        </Button>
      </Modal.Footer>
    </Modal>
  );
}

export { EditingWindow, DeleteWindow };