refactor props

lib/views/_form.html

@@ -20,7 +20,7 @@
   </div>
 
   <div id="save-page-controls"
-    data-page-grant="{{ page.grant }}"
+    data-grant="{{ page.grant }}"
     data-grant-group="{{ pageRelatedGroup._id.toString() }}"
     data-grant-group-name="{{ pageRelatedGroup.name }}">
     <!--

resource/js/app.js

@@ -220,15 +220,15 @@ const saveWithSubmitButton = function(options) {
 let savePageControls = null;
 const savePageControlsElem = document.getElementById('save-page-controls');
 if (savePageControlsElem) {
-  const pageGrant = +savePageControlsElem.dataset.pageGrant;
-  const pageGrantGroupId = savePageControlsElem.dataset.grantGroup;
-  const pageGrantGroupName = savePageControlsElem.dataset.grantGroupName;
+  const grant = +savePageControlsElem.dataset.grant;
+  const grantGroupId = savePageControlsElem.dataset.grantGroup;
+  const grantGroupName = savePageControlsElem.dataset.grantGroupName;
   ReactDOM.render(
     <I18nextProvider i18n={i18n}>
       <SavePageControls crowi={crowi} onSubmit={saveWithSubmitButton}
           ref={(elem) => { savePageControls = elem.getWrappedInstance() }}
           pageId={pageId} pagePath={pagePath} slackChannels={slackChannels}
-          pageGrant={pageGrant} pageGrantGroupId={pageGrantGroupId} pageGrantGroupName={pageGrantGroupName} />
+          grant={grant} grantGroupId={grantGroupId} grantGroupName={grantGroupName} />
     </I18nextProvider>,
     savePageControlsElem
   );
@@ -328,27 +328,6 @@ if (pageEditorOptionsSelectorElem) {
     pageEditorOptionsSelectorElem
   );
 }
-// render GrantSelector
-// const pageEditorGrantSelectorElem = document.getElementById('page-grant-selector');
-// if (pageEditorGrantSelectorElem) {
-//   const grantElem = document.getElementById('page-grant');
-//   const grantGroupElem = document.getElementById('grant-group');
-//   const grantGroupNameElem = document.getElementById('grant-group-name');
-//   const pageGrant = +grantElem.value;
-//   const pageGrantGroupId = grantGroupElem.value;
-//   const pageGrantGroupName = grantGroupNameElem.value;
-//   ReactDOM.render(
-//     <I18nextProvider i18n={i18n}>
-//       <GrantSelector crowi={crowi}
-//         pageGrant={pageGrant} pageGrantGroupId={pageGrantGroupId} pageGrantGroupName={pageGrantGroupName}
-//         onChangePageGrant={updateGrantElem}
-//         onDeterminePageGrantGroupId={updateGrantGroupElem}
-//         onDeterminePageGrantGroupName={updateGrantGroupNameElem} />
-//     </I18nextProvider>,
-//     pageEditorGrantSelectorElem
-//   );
-// }
-
 
 // render for admin
 const customCssEditorElem = document.getElementById('custom-css-editor');

resource/js/components/SavePageControls.jsx

@@ -56,9 +56,9 @@ class SavePageControls extends React.PureComponent {
         <div className="mr-2">
           <GrantSelector crowi={this.props.crowi}
               ref={(elem) => { this.refs.grantSelector = elem.getWrappedInstance()} }
-              pageGrant={this.props.pageGrant}
-              pageGrantGroupId={this.props.pageGrantGroupId}
-              pageGrantGroupName={this.props.pageGrantGroupName} />
+              grant={this.props.grant}
+              grantGroupId={this.props.grantGroupId}
+              grantGroupName={this.props.grantGroupName} />
         </div>
 
         <button className="btn btn-primary btn-submit" onClick={this.submit}>{label}</button>
@@ -76,9 +76,9 @@ SavePageControls.propTypes = {
   pagePath: PropTypes.string,
   slackChannels: PropTypes.string,
   // for GrantSelector
-  pageGrant: PropTypes.number,
-  pageGrantGroupId: PropTypes.string,
-  pageGrantGroupName: PropTypes.string,
+  grant: PropTypes.number,
+  grantGroupId: PropTypes.string,
+  grantGroupName: PropTypes.string,
 };
 
 export default translate()(SavePageControls);

resource/js/components/SavePageControls/GrantSelector.jsx

@@ -23,23 +23,23 @@ class GrantSelector extends React.Component {
     super(props);
 
     this.availableGrants = [
-      { pageGrant: 1, iconClass: 'icon-people', styleClass: '', label: 'Public' },
-      { pageGrant: 2, iconClass: 'icon-link', styleClass: 'text-info', label: 'Anyone with the link' },
-      // { pageGrant: 3, iconClass: '', label: 'Specified users only' },
-      { pageGrant: 4, iconClass: 'icon-lock', styleClass: 'text-danger', label: 'Just me' },
-      { pageGrant: 5, iconClass: 'icon-options', styleClass: '', label: 'Only inside the group' },  // appeared only one of these 'pageGrant: 5'
-      { pageGrant: 5, iconClass: 'icon-options', styleClass: '', label: 'Reselect the group' },     // appeared only one of these 'pageGrant: 5'
+      { grant: 1, iconClass: 'icon-people', styleClass: '', label: 'Public' },
+      { grant: 2, iconClass: 'icon-link', styleClass: 'text-info', label: 'Anyone with the link' },
+      // { grant: 3, iconClass: '', label: 'Specified users only' },
+      { grant: 4, iconClass: 'icon-lock', styleClass: 'text-danger', label: 'Just me' },
+      { grant: 5, iconClass: 'icon-options', styleClass: '', label: 'Only inside the group' },  // appeared only one of these 'grant: 5'
+      { grant: 5, iconClass: 'icon-options', styleClass: '', label: 'Reselect the group' },     // appeared only one of these 'grant: 5'
     ];
 
     this.state = {
-      pageGrant: this.props.pageGrant || 1,  // default: 1
+      grant: this.props.grant || 1,  // default: 1
       userRelatedGroups: [],
       isSelectGroupModalShown: false,
     };
-    if (this.props.pageGrantGroupId !== '') {
-      this.state.pageGrantGroup = {
-        _id: this.props.pageGrantGroupId,
-        name: this.props.pageGrantGroupName
+    if (this.props.grantGroupId !== '') {
+      this.state.grantGroup = {
+        _id: this.props.grantGroupId,
+        name: this.props.grantGroupName
       };
     }
 
@@ -61,7 +61,7 @@ class GrantSelector extends React.Component {
      * set SPECIFIED_GROUP_VALUE to grant selector
      *  cz: bootstrap-select input element has the defferent state to React component
      */
-    if (this.state.pageGrantGroup != null) {
+    if (this.state.grantGroup != null) {
       this.grantSelectorInputEl.value = SPECIFIED_GROUP_VALUE;
     }
 
@@ -77,10 +77,10 @@ class GrantSelector extends React.Component {
 
   getCurrentOptionsToSave() {
     const options = {
-      grant: this.state.pageGrant
+      grant: this.state.grant
     };
-    if (this.state.pageGrantGroup != null) {
-      options.grantGroup = this.state.pageGrantGroup._id;
+    if (this.state.grantGroup != null) {
+      options.grantGroup = this.state.grantGroup._id;
     }
     return options;
   }
@@ -94,8 +94,8 @@ class GrantSelector extends React.Component {
   }
 
   getGroupName() {
-    const pageGrantGroup = this.state.pageGrantGroup;
-    return pageGrantGroup ? this.xss.process(pageGrantGroup.name) : '';
+    const grantGroup = this.state.grantGroup;
+    return grantGroup ? this.xss.process(grantGroup.name) : '';
   }
 
   /**
@@ -115,53 +115,31 @@ class GrantSelector extends React.Component {
   }
 
   /**
-   * change event handler for pageGrant selector
+   * change event handler for grant selector
    */
   changeGrantHandler() {
-    const pageGrant = +this.grantSelectorInputEl.value;
+    const grant = +this.grantSelectorInputEl.value;
 
     // select group
-    if (pageGrant === 5) {
+    if (grant === 5) {
       this.showSelectGroupModal();
       /*
        * reset grant selector to state
        */
-      this.grantSelectorInputEl.value = this.state.pageGrant;
+      this.grantSelectorInputEl.value = this.state.grant;
       return;
     }
 
-    this.setState({ pageGrant, pageGrantGroup: null });
-    // // dispatch event
-    // this.dispatchOnChangePageGrant(pageGrant);
-    // this.dispatchOnDeterminePageGrantGroup(null);
+    this.setState({ grant, grantGroup: null });
   }
 
-  groupListItemClickHandler(pageGrantGroup) {
-    this.setState({ pageGrant: 5, pageGrantGroup });
-
-    // // dispatch event
-    // this.dispatchOnChangePageGrant(5);
-    // this.dispatchOnDeterminePageGrantGroup(pageGrantGroup);
+  groupListItemClickHandler(grantGroup) {
+    this.setState({ grant: 5, grantGroup });
 
     // hide modal
     this.hideSelectGroupModal();
   }
 
-  // dispatchOnChangePageGrant(pageGrant) {
-  //   if (this.props.onChangePageGrant != null) {
-  //     this.props.onChangePageGrant(pageGrant);
-  //   }
-  // }
-
-  // dispatchOnDeterminePageGrantGroup(pageGrantGroup) {
-  //   if (this.props.onDeterminePageGrantGroupId != null) {
-  //     this.props.onDeterminePageGrantGroupId(pageGrantGroup ? pageGrantGroup._id : '');
-  //   }
-  //   if (this.props.onDeterminePageGrantGroupName != null) {
-  //     this.props.onDeterminePageGrantGroupName(pageGrantGroup ? pageGrantGroup.name : '');
-  //   }
-  // }
-
   /**
    * Render grant selector DOM.
    * @returns
@@ -171,14 +149,14 @@ class GrantSelector extends React.Component {
     const { t } = this.props;
 
     let index = 0;
-    let selectedValue = this.state.pageGrant;
-    const grantElems = this.availableGrants.map((grant) => {
-      const dataContent = `<i class="icon icon-fw ${grant.iconClass} ${grant.styleClass}"></i> <span class="${grant.styleClass}">${t(grant.label)}</span>`;
-      return <option key={index++} value={grant.pageGrant} data-content={dataContent}>{t(grant.label)}</option>;
+    let selectedValue = this.state.grant;
+    const grantElems = this.availableGrants.map((opt) => {
+      const dataContent = `<i class="icon icon-fw ${opt.iconClass} ${opt.styleClass}"></i> <span class="${opt.styleClass}">${t(opt.label)}</span>`;
+      return <option key={index++} value={opt.grant} data-content={dataContent}>{t(opt.label)}</option>;
     });
 
-    const pageGrantGroup = this.state.pageGrantGroup;
-    if (pageGrantGroup != null) {
+    const grantGroup = this.state.grantGroup;
+    if (grantGroup != null) {
       selectedValue = SPECIFIED_GROUP_VALUE;
       // DIRTY HACK -- 2018.05.25 Yuki Takei
       // remove 'Only inside the group' item
@@ -199,7 +177,7 @@ class GrantSelector extends React.Component {
 
     // add specified group option
     grantElems.push(
-      <option ref="specifiedGroupOption" key="specifiedGroupKey" value={SPECIFIED_GROUP_VALUE} style={{ display: pageGrantGroup ? 'inherit' : 'none' }}
+      <option ref="specifiedGroupOption" key="specifiedGroupKey" value={SPECIFIED_GROUP_VALUE} style={{ display: grantGroup ? 'inherit' : 'none' }}
           data-content={`<i class="icon icon-fw icon-organization text-success"></i> <span class="group-name text-success">${this.getGroupName()}</span>`}>
         {this.getGroupName()}
       </option>
@@ -272,9 +250,9 @@ class GrantSelector extends React.Component {
 GrantSelector.propTypes = {
   t: PropTypes.func.isRequired,               // i18next
   crowi: PropTypes.object.isRequired,
-  pageGrant: PropTypes.number,
-  pageGrantGroupId: PropTypes.string,
-  pageGrantGroupName: PropTypes.string,
+  grant: PropTypes.number,
+  grantGroupId: PropTypes.string,
+  grantGroupName: PropTypes.string,
 };
 
 export default translate()(GrantSelector);