# Improve/346 Disable group select-box when the user does not Choose the grant "Only inside the group"

* Fix code based on review feedback.(Delete unused code)
* Add comment and reshaping source code.

resource/js/app.js

@@ -159,7 +159,6 @@ if (pageEditorElem) {
         pageId={pageId} revisionId={pageRevisionId} pagePath={pagePath}
         markdown={markdown}
         editorOptions={editorOptions} previewOptions={previewOptions}
-        pageGrant={pageGrant}
         onSaveSuccess={onSaveSuccess} />,
     pageEditorElem
   );

resource/js/components/PageEditor.js

@@ -109,14 +109,6 @@ export default class PageEditor extends React.Component {
   onSave() {
     let endpoint;
     let data;
-    let grantData;
-    let grantGroupId;
-    if (this.state.pageGrant != null) {
-      grantData = this.state.pageGrant.grant;
-      if (this.state.pageGrant.grantGroup != null) {
-        grantGroupId = this.state.pageGrant.grantGroup.userGroupId;
-      }
-    }
 
     // update
     if (this.state.pageId != null) {
@@ -125,8 +117,6 @@ export default class PageEditor extends React.Component {
         page_id: this.state.pageId,
         revision_id: this.state.revisionId,
         body: this.state.markdown,
-        grant: grantData,
-        grantUserGroupId: grantGroupId,
       };
     }
     // create
@@ -135,8 +125,6 @@ export default class PageEditor extends React.Component {
       data = {
         path: this.props.pagePath,
         body: this.state.markdown,
-        grant: grantData,
-        grantUserGroupId: grantGroupId,
       };
     }
 

resource/js/components/PageEditor/GrantSelector.js

@@ -6,26 +6,26 @@ import FormControl from 'react-bootstrap/es/FormControl';
 import ControlLabel from 'react-bootstrap/es/ControlLabel';
 import Button from 'react-bootstrap/es/Button';
 
-import Dropdown from 'react-bootstrap/es/Dropdown';
-import MenuItem from 'react-bootstrap/es/MenuItem';
 import Modal from 'react-bootstrap/es/Modal';
 
-import OverlayTrigger  from 'react-bootstrap/es/OverlayTrigger';
-import Tooltip from 'react-bootstrap/es/Tooltip';
-
+/**
+ * Page grant select component
+ *
+ * @export
+ * @class GrantSelector
+ * @extends {React.Component}
+ */
 export default class GrantSelector extends React.Component {
 
   constructor(props) {
     super(props);
 
-    const config = this.props.crowi.getConfig();
-
     this.state = {
       pageGrant: this.props.pageGrant,
       isGroupModalShown: false,
-    }
+    };
 
-    this.availableGrants = [1, 2,/* 3,*/ 4, 5]
+    this.availableGrants = [1, 2, /*3, */4, 5];
 
     this.availableGrantLabels = {
       1: 'Public',
@@ -33,20 +33,27 @@ export default class GrantSelector extends React.Component {
       // 3:'Specified users only',
       4: 'Just me',
       5: 'Only inside the group',
-    }
+    };
 
     this.onChangeGrant = this.onChangeGrant.bind(this);
     // this.updateElementValue = this.updateElementValue.bind(this);
   }
 
+  // Init component when the component did mount.
   componentDidMount() {
     this.init();
   }
 
+  // Initialize the component.
   init() {
     this.grantSelectorInputEl.value = this.state.pageGrant.grant;
   }
 
+  /**
+   * On change event handler for pagegrant.
+   * @param {any} grant page grant
+   * @memberof GrantSelector
+   */
   onChangeGrant(grant) {
     const newValue = this.grantSelectorInputEl.value;
     const newGrant = Object.assign(this.state.pageGrant, {grant: newValue});
@@ -56,6 +63,11 @@ export default class GrantSelector extends React.Component {
     this.dispatchOnChange();
   }
 
+  /**
+   * On click event handler for grant usergroup.
+   *
+   * @memberof GrantSelector
+   */
   onClickGrantGroup() {
     const newValue = this.groupSelectorInputEl.value;
     const newGrant = Object.assign(this.state.pageGrant, { grantGroup: newValue });
@@ -71,6 +83,7 @@ export default class GrantSelector extends React.Component {
 
   /**
    * dispatch onChange event
+   * @memberof GrantSelector
    */
   dispatchOnChange() {
     if (this.props.onChange != null) {
@@ -78,6 +91,11 @@ export default class GrantSelector extends React.Component {
     }
   }
 
+  /**
+   * Render grant selector DOM.
+   * @returns
+   * @memberof GrantSelector
+   */
   renderGrantSelector() {
     const grantElems = this.availableGrants.map((grant) => {
       return <option key={grant} value={grant}>{this.availableGrantLabels[grant]}</option>;
@@ -89,23 +107,28 @@ export default class GrantSelector extends React.Component {
       <FormGroup controlId="formControlsSelect">
         <ControlLabel>Grant:</ControlLabel>
         <FormControl componentClass="select" placeholder="select" defaultValue={this.state.pageGrant.grant} bsClass={bsClassName} className="btn-group-sm selectpicker"
-            onChange={this.onChangeGrant}
-            inputRef={ el => this.grantSelectorInputEl=el }>
+          onChange={this.onChangeGrant}
+          inputRef={ el => this.grantSelectorInputEl=el }>
 
           {grantElems}
 
         </FormControl>
       </FormGroup>
-    )
+    );
   }
 
+  /**
+   * Render select grantgroup modal.
+   *
+   * @returns
+   * @memberof GrantSelector
+   */
   renderSelectGroupModal() {
-    const userRelatedGroups = this.props.userRelatedGroups;
+    // const userRelatedGroups = this.props.userRelatedGroups;
     const groupList = this.userRelatedGroups.map((group) => {
-      return
-      <li>
-        <Button onClick={this.onClickGrantGroup(group)} bsClass="btn btn-sm btn-primary">{group.name}</Button>
-      </li>
+      return <li>
+          <Button onClick={this.onClickGrantGroup(group)} bsClass="btn btn-sm btn-primary">{group.name}</Button>
+        </li>;
     });
     return (
       <Modal show={this.props.isGroupModalShown} onHide={this.props.cancel} className="select-grant-group">
@@ -116,7 +139,7 @@ export default class GrantSelector extends React.Component {
         </Modal.Header>
         <Modal.Body>
 
-          <ul class="list-inline">
+          <ul className="list-inline">
             {groupList}
           </ul>
         </Modal.Body>
@@ -127,7 +150,7 @@ export default class GrantSelector extends React.Component {
   render() {
     return <span>
       <span className="m-l-5">{this.renderGrantSelector()}</span>
-    </span>
+    </span>;
   }
 }
 
@@ -143,7 +166,7 @@ export class PageGrant {
 export class UserGroup {
   constructor(props) {
     this.userGroupId = '';
-    this.userGroup
+    this.userGroup;
 
     Object.assign(this, props);
   }
@@ -151,6 +174,7 @@ export class UserGroup {
 
 GrantSelector.propTypes = {
   crowi: PropTypes.object.isRequired,
+  isGroupModalShown: PropTypes.bool,
   userRelatedGroups: PropTypes.object,
   pageGrant: PropTypes.instanceOf(PageGrant),
   onChange: PropTypes.func,