usable tag form

src/client/js/components/Page/RevisionPath.js

@@ -14,6 +14,7 @@ export default class RevisionPath extends React.Component {
     this.state = {
       pages: [],
       pageTags: [],
+      newPageTags: [],
       isListPage: false,
       isLinkToListPage: true,
       isOpenEditTagModal: false,
@@ -22,6 +23,7 @@ export default class RevisionPath extends React.Component {
     // retrieve xss library from window
     this.xss = window.xss;
     this.getPageTags = this.getPageTags.bind(this);
+    this.updateTags = this.updateTags.bind(this);
     this.handleShowEditTagModal = this.handleShowEditTagModal.bind(this);
     this.handleCloseEditTagModal = this.handleCloseEditTagModal.bind(this);
     this.handleSubmitEditTagModal = this.handleSubmitEditTagModal.bind(this);
@@ -58,8 +60,7 @@ export default class RevisionPath extends React.Component {
 
     // set pageTag on button
     if (this.props.pageId) {
-      const pageId = this.props.pageId;
-      const pageTags = await this.getPageTags(pageId);
+      const pageTags = await this.getPageTags(this.props.pageId);
       this.setState({ pageTags });
     }
   }
@@ -69,6 +70,10 @@ export default class RevisionPath extends React.Component {
     return res.tags;
   }
 
+  updateTags(newPageTags) {
+    this.setState({ newPageTags });
+  }
+
   handleCloseEditTagModal() {
     this.setState({ isOpenEditTagModal: false });
   }
@@ -77,9 +82,10 @@ export default class RevisionPath extends React.Component {
     this.setState({ isOpenEditTagModal: true });
   }
 
-  handleSubmitEditTagModal() {
-    this.props.crowi.apiPost('/pages.updateTags', { pageId: this.props.pageId, newTags: this.state.pageTags });
-    this.setState({ isOpenEditTagModal: false });
+  async handleSubmitEditTagModal() {
+    this.props.crowi.apiPost('/pages.updateTags', { pageId: this.props.pageId, newTags: this.state.newPageTags });
+    const pageTags = await this.getPageTags(this.props.pageId);
+    this.setState({ pageTags, isOpenEditTagModal: false });
   }
 
   showToolTip() {
@@ -177,7 +183,7 @@ export default class RevisionPath extends React.Component {
             <Modal.Title className="text-white">ページタグ</Modal.Title>
           </Modal.Header>
           <Modal.Body>
-            <PageTagForm crowi={this.props.crowi} defaultPageTags={this.state.pageTags} />
+            <PageTagForm crowi={this.props.crowi} defaultPageTags={this.state.pageTags} updateTags={this.updateTags} />
           </Modal.Body>
           <Modal.Footer>
             <Button variant="primary" onClick={this.handleSubmitEditTagModal}>

src/client/js/components/PageTagForm.jsx

@@ -22,12 +22,10 @@ export default class PageTagForm extends React.Component {
       selected: [],
     };
     this.crowi = this.props.crowi;
-
-    this.handleSubmit = this.handleSubmit.bind(this);
   }
 
-  handleSubmit() {
-    this.props.handleSubmit(this.state.selected);
+  componentWillMount() {
+    this.setState({ selected: this.props.defaultPageTags });
   }
 
   render() {
@@ -42,9 +40,10 @@ export default class PageTagForm extends React.Component {
           minLength={1}
           multiple
           newSelectionPrefix=""
-          // onBlur={this.handleSubmit}
           onChange={(selected) => {
-            this.setState({ selected });
+            this.setState({ selected }, () => {
+              this.props.updateTags(this.state.selected);
+            });
           }}
           onSearch={async(query) => {
             this.setState({ isLoading: true });
@@ -68,7 +67,7 @@ export default class PageTagForm extends React.Component {
 PageTagForm.propTypes = {
   crowi: PropTypes.object.isRequired,
   defaultPageTags: PropTypes.array,
-  handleSubmit: PropTypes.func,
+  updateTags: PropTypes.func,
 };
 
 PageTagForm.defaultProps = {