create fetch function

src/client/js/components/Admin/UserGroupDetail/UserGroupUserFormByInput.jsx

@@ -31,7 +31,7 @@ class UserGroupUserFormByInput extends React.Component {
     this.onKeyDown = this.onKeyDown.bind(this);
     this.renderMenuItemChildren = this.renderMenuItemChildren.bind(this);
 
-    this.filterApplicableUsersDebounce = debounce(1000, this.filterApplicableUsers);
+    this.searhApplicableUsersDebounce = debounce(1000, this.searhApplicableUsers);
   }
 
   /**
@@ -64,15 +64,9 @@ class UserGroupUserFormByInput extends React.Component {
     return this.state.input !== '';
   }
 
-  filterApplicableUsers() {
-    const applicableUsers = this.props.userGroupDetailContainer.state.unrelatedNames.filter((name) => {
-      return name.indexOf(this.state.input !== -1);
-    });
+  searhApplicableUsers() {
+    this.props.userGroupDetailContainer.searhApplicableUsers();
 
-    this.setState({
-      applicableUsers,
-      isLoading: false,
-    });
   }
 
   /**
@@ -90,7 +84,7 @@ class UserGroupUserFormByInput extends React.Component {
     }
 
     this.setState({ isLoading: true });
-    this.filterApplicableUsersDebounce();
+    this.searhApplicableUsersDebounce();
   }
 
   onKeyDown(event) {
@@ -141,7 +135,7 @@ class UserGroupUserFormByInput extends React.Component {
             caseSensitive={false}
           />
         </div>
-        <button type="submit" className="btn btn-sm btn-success" disabled={!this.validateForm()}>{ t('add') }</button>
+        <button type="submit" className="btn btn-sm btn-success" disabled={!this.validateForm()}>{t('add')}</button>
       </form>
     );
   }

src/client/js/services/UserGroupDetailContainer.js

@@ -51,20 +51,14 @@ export default class UserGroupDetailContainer extends Container {
       const [
         userGroupRelations,
         relatedPages,
-        unrelatedUsers,
       ] = await Promise.all([
         this.appContainer.apiv3.get(`/user-groups/${this.state.userGroup._id}/user-group-relations`).then((res) => { return res.data.userGroupRelations }),
         this.appContainer.apiv3.get(`/user-groups/${this.state.userGroup._id}/pages`).then((res) => { return res.data.pages }),
-        this.appContainer.apiv3.get(`/user-groups/${this.state.userGroup._id}/unrelated-users`).then((res) => { return res.data.users }),
       ]);
 
-      const unrelatedNames = unrelatedUsers.map(user => user.username);
-
       await this.setState({
         userGroupRelations,
         relatedPages,
-        unrelatedUsers,
-        unrelatedNames,
       });
     }
     catch (err) {
@@ -107,6 +101,15 @@ export default class UserGroupDetailContainer extends Container {
     await this.setState({ isUserGroupUserModalOpen: false });
   }
 
+  /**
+   * search user for invitation
+   * @param {string} username username of the user to be searched
+   */
+  async fetchApplicableUsers() {
+    console.log('ここはサーチ');
+  }
+
+
   /**
    * update user group
    *