replace code to user-select component (#3033)

frontend/src/components/dialog/org-add-admin-dialog.js

@@ -1,9 +1,8 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import AsyncSelect from 'react-select/lib/Async';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../utils/constants';
-import { seafileAPI } from '../../utils/seafile-api';
+import UserSelect from '../user-select';
 
 const propTypes = {
   toggle: PropTypes.func.isRequired,
@@ -19,39 +18,16 @@ class AddOrgAdminDialog extends React.Component {
     this.options = [];
   }
 
-  loadOptions = (value, callback) => {
-    if (value.trim().length > 0) {
-      seafileAPI.searchUsers(value.trim()).then((res) => {
-        this.options = [];
-        for (let i = 0 ; i < res.data.users.length; i++) {
-          let obj = {};
-          obj.value = res.data.users[i].name;
-          obj.email = res.data.users[i].email;
-          obj.label =
-            <Fragment>
-              <img src={res.data.users[i].avatar_url} className="select-module select-module-icon avatar" alt="Avatar"/>
-              <span className='select-module select-module-name'>{res.data.users[i].name}</span>
-            </Fragment>;
-          this.options.push(obj);
-        }
-        callback(this.options);
-      });
-    }
-  }
-
   handleSelectChange = (option) => {
     this.setState({selectedOption: option});
     this.options = [];
   }
 
   addOrgAdmin = () => {
-    let users = [];
-    if (this.state.selectedOption && this.state.selectedOption.length > 0 ) {
-      for (let i = 0; i < this.state.selectedOption.length; i ++) {
-        users[i] = this.state.selectedOption[i].email;
-      }
+    if (this.state.selectedOption) {
+      let userEmail = this.state.selectedOption.email;
+      this.props.addOrgAdmin(userEmail)
     }
-    this.props.addOrgAdmin(users)
   }
 
   toggle = () => {
@@ -63,18 +39,12 @@ class AddOrgAdminDialog extends React.Component {
       <Modal isOpen={true}>
         <ModalHeader>{gettext('Add Admins')}</ModalHeader>
         <ModalBody>
-          <AsyncSelect
-            inputId={'react-select-1-input'}
-            className='reviewer-select'
+          <UserSelect
+            ref="userSelect"
+            isMulti={false}
+            className="reviewer-select"
             placeholder={gettext('Select a user as admin...')}
-            loadOptions={this.loadOptions}
-            onChange={this.handleSelectChange}
-            value={this.state.selectedOption}
-            maxMenuHeight={200}
-            isMulti
-            isFocused
-            isClearable
-            classNamePrefix
+            onSelectChange={this.handleSelectChange}
           />
         </ModalBody>
         <ModalFooter>