WIP: refactor - GrantSelector

resource/js/app.js

@@ -13,7 +13,7 @@ import SearchPage       from './components/SearchPage';
 import PageEditor       from './components/PageEditor';
 import OptionsSelector  from './components/PageEditor/OptionsSelector';
 import { EditorOptions, PreviewOptions } from './components/PageEditor/OptionsSelector';
-import GrantSelector, { UserGroup, PageGrant } from './components/PageEditor/GrantSelector';
+import GrantSelector, { UserGroup } from './components/PageEditor/GrantSelector';
 import Page             from './components/Page';
 import PageListSearch   from './components/PageListSearch';
 import PageHistory      from './components/PageHistory';
@@ -191,9 +191,11 @@ const userRelatedGroupsElem = document.getElementById('user-related-group-data')
 const pageEditorGrantSelectorElem = document.getElementById('page-grant-selector');
 const pageGrantElem = document.getElementById('page-grant');
 const pageGrantGroupElem = document.getElementById('grant-group');
-function updatePageGrantElems(newPageGrant) {
-  pageGrantElem.value = newPageGrant.grant;
-  pageGrantGroupElem.value = newPageGrant.grantGroup.userGroupId || '';
+function updatePageGrantElem(pageGrant) {
+  pageGrantElem.value = pageGrant;
+}
+function updatePageGrantGroupElem(pageGrantGroupId) {
+  pageGrantGroupElem.value = pageGrantGroupId;
 }
 if (pageEditorGrantSelectorElem) {
   let userRelatedGroups;
@@ -205,20 +207,14 @@ if (pageEditorGrantSelectorElem) {
       });
     }
   }
-  pageGrant = new PageGrant();
-  pageGrant.grant = document.getElementById('page-grant').value;
-  const grantGroupData = JSON.parse(document.getElementById('grant-group').textContent || '{}');
-  if (grantGroupData != null) {
-    const grantGroup = new UserGroup();
-    grantGroup.userGroupId = grantGroupData.id;
-    grantGroup.userGroup = grantGroupData;
-    pageGrant.grantGroup = grantGroup;
-  }
+  pageGrant = +(document.getElementById('page-grant').value);
+  const pageGrantGroup = JSON.parse(document.getElementById('grant-group').textContent || '{}');
   ReactDOM.render(
     <I18nextProvider i18n={i18n}>
       <GrantSelector crowi={crowi}
-        userRelatedGroups={userRelatedGroups} pageGrant={pageGrant}
-        onChange={updatePageGrantElems} />
+        userRelatedGroups={userRelatedGroups} pageGrant={pageGrant} pageGrantGroup={pageGrantGroup}
+        onChangePageGrant={updatePageGrantElem}
+        onDeterminePageGrantGroupId={updatePageGrantGroupElem} />
     </I18nextProvider>,
     pageEditorGrantSelectorElem
   );

resource/js/components/PageEditor/GrantSelector.js

@@ -21,13 +21,7 @@ class GrantSelector extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = {
-      pageGrant: this.props.pageGrant,
-      isGroupModalShown: false,
-    };
-
     this.availableGrants = [1, 2, /*3, */4, 5];
-
     this.availableGrantLabels = {
       1: 'Public',
       2: 'Anyone with the link',
@@ -36,6 +30,9 @@ class GrantSelector extends React.Component {
       5: 'Only inside the group',
     };
 
+    this.state = {
+    };
+
     this.onChangeGrant = this.onChangeGrant.bind(this);
   }
 
@@ -46,7 +43,7 @@ class GrantSelector extends React.Component {
 
   // Initialize the component.
   init() {
-    this.grantSelectorInputEl.value = this.state.pageGrant.grant;
+    this.grantSelectorInputEl.value = this.props.pageGrant;
   }
 
   /**
@@ -55,15 +52,12 @@ class GrantSelector extends React.Component {
    * @memberof GrantSelector
    */
   onChangeGrant(grant) {
-    const newValue = this.grantSelectorInputEl.value;
-    const newGrant = Object.assign(this.state.pageGrant, {grant: newValue});
-    this.setState({ pageGrant: newGrant });
+    const pageGrant = this.grantSelectorInputEl.value;
 
     // dispatch event
-    this.dispatchOnChange();
+    this.dispatchOnChange(pageGrant);
   }
 
-  // (TBD)
   // /**
   //  * On click event handler for grant usergroup.
   //  *
@@ -75,7 +69,7 @@ class GrantSelector extends React.Component {
   //   this.setState({ pageGrant: newGrant });
 
   //   // dispatch event
-  //   this.dispatchOnChange();
+  //   // this.dispatchOnChange();
   //   // close group select modal
   //   if (this.state.isModalShown) {
   //     this.setState({ isGroupModalShown: false });
@@ -86,9 +80,15 @@ class GrantSelector extends React.Component {
    * dispatch onChange event
    * @memberof GrantSelector
    */
-  dispatchOnChange() {
-    if (this.props.onChange != null) {
-      this.props.onChange(this.state.pageGrant);
+  dispatchOnChange(pageGrant) {
+    if (this.props.onChangePageGrant != null) {
+      this.props.onChangePageGrant(pageGrant);
+    }
+  }
+
+  dispatchOnDeterminePageGrantGroup(pageGrantGroup) {
+    if (this.props.onDeterminePageGrantGroupId != null) {
+      this.props.onDeterminePageGrantGroupId(pageGrantGroup);
     }
   }
 
@@ -103,11 +103,12 @@ class GrantSelector extends React.Component {
       return <option key={grant} value={grant}>{t(this.availableGrantLabels[grant])}</option>;
     });
 
-    const bsClassName = 'form-control-dummy'; // set form-control* to shrink width
+    const pageGrant = this.props.pageGrant || 1;  // default: 1
 
+    const bsClassName = 'form-control-dummy'; // set form-control* to shrink width
     return (
       <FormGroup controlId="formControlsSelect" className="m-b-0">
-        <FormControl componentClass="select" placeholder="select" defaultValue={this.state.pageGrant.grant} bsClass={bsClassName} className="btn-group-sm selectpicker"
+        <FormControl componentClass="select" placeholder="select" defaultValue={pageGrant} bsClass={bsClassName} className="btn-group-sm selectpicker"
           onChange={this.onChangeGrant}
           inputRef={ el => this.grantSelectorInputEl=el }>
 
@@ -154,15 +155,6 @@ class GrantSelector extends React.Component {
   }
 }
 
-export class PageGrant {
-  constructor(props) {
-    this.grant = '';
-    this.grantGroup = null;
-
-    Object.assign(this, props);
-  }
-}
-
 export class UserGroup {
   constructor(props) {
     this.userGroupId = '';
@@ -177,8 +169,10 @@ GrantSelector.propTypes = {
   crowi: PropTypes.object.isRequired,
   isGroupModalShown: PropTypes.bool,
   userRelatedGroups: PropTypes.object,
-  pageGrant: PropTypes.instanceOf(PageGrant),
-  onChange: PropTypes.func,
+  pageGrant: PropTypes.number,
+  pageGrantGroup: PropTypes.object,
+  onChangePageGrant: PropTypes.func,
+  onDeterminePageGrantGroupId: PropTypes.func,
 };
 
 export default translate()(GrantSelector);