support edit and delete text

src/Actions/TextAction.js

@@ -1,13 +1,20 @@
 import { createAction } from "redux-actions";
+import { notification } from "antd";
 import {
   createTextAsync,
+  deleteTextAsync,
+  editTextAsync,
+  getTextEditDetailAsync,
   getTextReadAsync,
   getTextsAsync
 } from "../Apis/TextApi";
 
 export const TEXT_FETCHED = "TEXT_FETCHED";
 export const TEXT_CREATED = "TEXT_CREATED";
+export const TEXT_DELETED = "TEXT_DELETED";
 export const TEXT_READ = "TEXT_READ";
+export const TEXT_EDITED = "TEXT_EDITED";
+export const TEXT_EDIT_DETAIL_FETCHED = "TEXT_EDIT_DETAIL_FETCHED";
 
 /**
  * get texts action
@@ -41,3 +48,39 @@ export const readTextAction = createAction(TEXT_READ, async textId =>
 export const createTextAction = createAction(TEXT_CREATED, async text =>
   createTextAsync(text)
 );
+
+export const deleteTextAction = createAction(TEXT_DELETED, async textId => {
+  try {
+    await deleteTextAsync(textId);
+    notification.success({ message: "Text deleted." });
+    return textId;
+  } catch {
+    notification.error({ message: "Can't not delete text, please try again." });
+    return null;
+  }
+});
+
+export const editTextAction = createAction(TEXT_EDITED, async (id, text) => {
+  try {
+    await editTextAsync(id, text);
+    notification.success({ message: "Text saved successfully." });
+    return text;
+  } catch {
+    notification.error({ message: "Can't not save text , please try again." });
+    return null;
+  }
+});
+
+export const getTextEditDetailAction = createAction(
+  TEXT_EDIT_DETAIL_FETCHED,
+  async textId => {
+    try {
+      return await getTextEditDetailAsync(textId);
+    } catch {
+      notification.error({
+        message: "Something wen't wrong, please try again."
+      });
+      return null;
+    }
+  }
+);

src/Apis/TextApi.js

@@ -1,5 +1,10 @@
 import { TEXT_API } from "../Constants";
-import { getAsync, postAsync } from "../Utilities/HttpRequest";
+import {
+  deleteAsync,
+  getAsync,
+  postAsync,
+  putAsync
+} from "../Utilities/HttpRequest";
 
 /**
  * Get the list of text
@@ -41,3 +46,15 @@ export async function getTextReadAsync(textId) {
     return false;
   }
 }
+
+export async function deleteTextAsync(textId) {
+  return deleteAsync(`${TEXT_API}/${textId}`);
+}
+
+export async function editTextAsync(id, text) {
+  return putAsync(TEXT_API, id, text);
+}
+
+export async function getTextEditDetailAsync(textId) {
+  return getAsync(`${TEXT_API}/edit-detail/${textId}`);
+}

src/Components/Forms/TextCreateForm/TextCreateForm.jsx

@@ -10,12 +10,11 @@ import { LanguageSelect } from "../../Inputs/LanguageSelect/LanguageSelect";
 function TextCreateForm(props) {
   const {
     form: { getFieldDecorator },
-    onSubmit,
     currentLanguage
   } = props;
 
   return (
-    <Form onSubmit={onSubmit}>
+    <Form>
       <Form.Item>
         {getFieldDecorator("language", { initialValue: currentLanguage })(
           <LanguageSelect />
@@ -47,6 +46,5 @@ export default Form.create()(
 
 TextCreateForm.propTypes = {
   currentLanguage: PropTypes.number.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  form: PropTypes.shape({})
+  form: PropTypes.shape({}).isRequired
 };

src/Components/Forms/TextEditForm/index.jsx

@@ -0,0 +1,54 @@
+import PropTypes from "prop-types";
+import { Form, Input } from "antd";
+import React from "react";
+import { connect } from "react-redux";
+import { LanguageSelect } from "../../Inputs/LanguageSelect/LanguageSelect";
+
+/**
+ * text create form
+ */
+function TextEditForm(props) {
+  const {
+    form: { getFieldDecorator },
+    editDetail
+  } = props;
+
+  return (
+    <Form>
+      <Form.Item>
+        {getFieldDecorator("language", { initialValue: editDetail.language })(
+          <LanguageSelect />
+        )}
+      </Form.Item>
+      <Form.Item>
+        {getFieldDecorator("title", { initialValue: editDetail.title })(
+          <Input placeholder="Title" />
+        )}
+      </Form.Item>
+      <Form.Item>
+        {getFieldDecorator("content", { initialValue: editDetail.content })(
+          <Input.TextArea
+            autosize={{ minRows: 10, maxRows: 20 }}
+            placeholder="Please input text content here ..."
+          />
+        )}
+      </Form.Item>
+    </Form>
+  );
+}
+
+export default Form.create()(
+  connect(
+    state => ({
+      currentLanguage: state.language.currentLanguage
+    }),
+    null
+  )(TextEditForm)
+);
+
+TextEditForm.propTypes = {
+  editDetail: PropTypes.shape({}).isRequired,
+  form: PropTypes.shape({
+    getFieldDecorator: PropTypes.func.isRequired
+  }).isRequired
+};

src/Components/Modals/TextEditModal/index.jsx

@@ -0,0 +1,106 @@
+import PropTypes from "prop-types";
+import { Modal } from "antd";
+import React from "react";
+import { connect } from "react-redux";
+import TextEditForm from "../../Forms/TextEditForm";
+import {
+  editTextAction,
+  getTextEditDetailAction
+} from "../../../Actions/TextAction";
+import { selectEditDetail } from "../../../Reducers/TextReducer";
+
+/**
+ * text create modal
+ */
+class TextEditModal extends React.Component {
+  formRef = null;
+
+  constructor(props) {
+    super(props);
+    this.saveFormRef = this.saveFormRef.bind(this);
+    this.handleOk = this.handleOk.bind(this);
+    this.handleCancel = this.handleCancel.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    const { hide, editingText, getEditDetail, editDetail } = this.props;
+    if (prevProps.editingText !== editingText && editingText) {
+      getEditDetail(editingText);
+    }
+    if (prevProps.editDetail !== editDetail) {
+      if (!editDetail) {
+        hide();
+      }
+    }
+  }
+
+  handleOk() {
+    const { form } = this.formRef.props;
+    const { editText, hide, editingText, onEdit } = this.props;
+    form.validateFields((err, values) => {
+      if (err) {
+        return;
+      }
+      editText(editingText, values).then(onEdit);
+      form.resetFields();
+      hide();
+    });
+  }
+
+  handleCancel() {
+    const { hide } = this.props;
+    const { form } = this.formRef.props;
+    form.resetFields();
+    hide();
+  }
+
+  saveFormRef(formRef) {
+    this.formRef = formRef;
+  }
+
+  render() {
+    const { visible, editDetail } = this.props;
+    if (!editDetail) {
+      return null;
+    }
+    return (
+      <Modal
+        visible={visible}
+        title="Edit text"
+        okText="Save"
+        onOk={this.handleOk}
+        onCancel={this.handleCancel}
+      >
+        <TextEditForm
+          editDetail={editDetail}
+          wrappedComponentRef={this.saveFormRef}
+        />
+      </Modal>
+    );
+  }
+}
+
+export default connect(
+  state => ({
+    editDetail: selectEditDetail(state)
+  }),
+  {
+    editText: editTextAction,
+    getEditDetail: getTextEditDetailAction
+  }
+)(TextEditModal);
+
+TextEditModal.defaultProps = {
+  editingText: null,
+  editDetail: null
+};
+
+TextEditModal.propTypes = {
+  editText: PropTypes.func.isRequired,
+  hide: PropTypes.func.isRequired,
+  visible: PropTypes.bool.isRequired,
+  onEdit: PropTypes.func.isRequired,
+  editDetail: PropTypes.shape({}),
+  getEditDetail: PropTypes.func.isRequired,
+  editingText: PropTypes.string
+};