add component

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

@@ -0,0 +1,48 @@
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+import AppContainer from '../../../services/AppContainer';
+
+class CheckBoxForSerchUserOption extends React.Component {
+
+  render() {
+    const { t, option } = this.props;
+    return (
+      <div className="checkbox checkbox-info mb-5" key={`isAlso${option}Searched`}>
+        <input
+          type="checkbox"
+          id={`isAlso${option}Searched`}
+          className="form-check-input"
+          checked={this.props.checked}
+          onChange={this.props.onChange}
+        />
+        <label className="text-capitalize form-check-label ml-3" htmlFor={`isAlso${option}Searched`}>
+          {t('user_group_management.enable_option', { option })}
+        </label>
+      </div>
+    );
+  }
+
+}
+
+
+CheckBoxForSerchUserOption.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+
+  option: PropTypes.string.isRequired,
+  checked: PropTypes.bool.isRequired,
+  onChange: PropTypes.bool.isRequired,
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const CheckBoxForSerchUserOptionWrapper = (props) => {
+  return createSubscribedElement(CheckBoxForSerchUserOption, props, [AppContainer]);
+};
+
+export default withTranslation()(CheckBoxForSerchUserOptionWrapper);

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

@@ -5,20 +5,19 @@ import { withTranslation } from 'react-i18next';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
-import UserGroupDetailContainer from '../../../services/UserGroupDetailContainer';
 
 class RadioButtonForSerchUserOption extends React.Component {
 
   render() {
-    const { t, userGroupDetailContainer, searchType } = this.props;
+    const { t, searchType } = this.props;
     return (
       <div className="radio mb-5" key={`${searchType}Match`}>
         <input
           type="radio"
           id={`${searchType}Match`}
           className="form-check-radio"
-          checked={userGroupDetailContainer.state.searchType === searchType}
-          onChange={() => { userGroupDetailContainer.switchSearchType(searchType) }}
+          checked={this.props.checked}
+          onChange={this.props.onChange}
         />
         <label className="text-capitalize form-check-label ml-3" htmlFor={`${searchType}Match`}>
           {t(`user_group_management.${searchType}_match`)}
@@ -33,16 +32,17 @@ class RadioButtonForSerchUserOption extends React.Component {
 RadioButtonForSerchUserOption.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  userGroupDetailContainer: PropTypes.instanceOf(UserGroupDetailContainer).isRequired,
 
   searchType: PropTypes.string.isRequired,
+  checked: PropTypes.bool.isRequired,
+  onChange: PropTypes.bool.isRequired,
 };
 
 /**
  * Wrapper component for using unstated
  */
 const RadioButtonForSerchUserOptionWrapper = (props) => {
-  return createSubscribedElement(RadioButtonForSerchUserOption, props, [AppContainer, UserGroupDetailContainer]);
+  return createSubscribedElement(RadioButtonForSerchUserOption, props, [AppContainer]);
 };
 
 export default withTranslation()(RadioButtonForSerchUserOptionWrapper);

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

@@ -8,6 +8,7 @@ import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 import UserGroupDetailContainer from '../../../services/UserGroupDetailContainer';
 import RadioButtonForSerchUserOption from './RadioButtonForSerchUserOption';
+import CheckBoxForSerchUserOption from './CheckBoxForSerchUserOption';
 
 class UserGroupUserModal extends React.Component {
 
@@ -26,35 +27,33 @@ class UserGroupUserModal extends React.Component {
           <h2 className="border-bottom">{t('user_group_management.search_option')}</h2>
           <div className="row mt-4">
             <div className="col-xs-6">
-              <div className="checkbox checkbox-info mb-5" key="isAlsoMailSearched">
-                <input
-                  type="checkbox"
-                  id="isAlsoMailSearched"
-                  className="form-check-input"
-                  checked={userGroupDetailContainer.state.isAlsoMailSearched}
-                  onChange={userGroupDetailContainer.switchIsAlsoMailSearched}
-                />
-                <label className="text-capitalize form-check-label ml-3" htmlFor="isAlsoMailSearched">
-                  {t('user_group_management.enable_option', { option: 'mail' })}
-                </label>
-              </div>
-              <div className="checkbox checkbox-info mb-5" key="isAlsoNameSearched">
-                <input
-                  type="checkbox"
-                  id="isAlsoNameSearched"
-                  className="form-check-input"
-                  checked={userGroupDetailContainer.state.isAlsoNameSearched}
-                  onChange={userGroupDetailContainer.switchIsAlsoNameSearched}
-                />
-                <label className="text-capitalize form-check-label ml-3" htmlFor="isAlsoNameSearched">
-                  {t('user_group_management.enable_option', { option: 'name' })}
-                </label>
-              </div>
+              <CheckBoxForSerchUserOption
+                option="Mail"
+                checked={userGroupDetailContainer.state.isAlsoMailSearched}
+                onChange={userGroupDetailContainer.switchIsAlsoMailSearched}
+              />
+              <CheckBoxForSerchUserOption
+                option="Name"
+                checked={userGroupDetailContainer.state.isAlsoNameSearched}
+                onChange={userGroupDetailContainer.switchIsAlsoNameSearched}
+              />
             </div>
             <div className="col-xs-6">
-              <RadioButtonForSerchUserOption searchType="forward" />
-              <RadioButtonForSerchUserOption searchType="partial" />
-              <RadioButtonForSerchUserOption searchType="backward" />
+              <RadioButtonForSerchUserOption
+                searchType="forward"
+                checked={userGroupDetailContainer.state.searchType === 'forward'}
+                onChange={() => { userGroupDetailContainer.switchSearchType('forward') }}
+              />
+              <RadioButtonForSerchUserOption
+                searchType="partial"
+                checked={userGroupDetailContainer.state.searchType === 'partial'}
+                onChange={() => { userGroupDetailContainer.switchSearchType('partial') }}
+              />
+              <RadioButtonForSerchUserOption
+                searchType="backward"
+                checked={userGroupDetailContainer.state.searchType === 'backword'}
+                onChange={() => { userGroupDetailContainer.switchSearchType('backword') }}
+              />
             </div>
           </div>
         </Modal.Body>