Create Form Components

src/client/js/components/Admin/Users/GiveAdminForm.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+import AppContainer from '../../../services/AppContainer';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
+
+class AdminMenuForm extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+
+    };
+
+  }
+
+  render() {
+    const { t, user } = this.props;
+    const me = this.props.appContainer.me;
+
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <div id="giveAdminForm" className="collapse">
+          <div className="form-group">
+            <label htmlFor="name">{ t('user_group_management.group_name') }</label>
+            <textarea
+              id="name"
+              name="name"
+              className="form-control"
+              placeholder={t('user_group_management.group_example')}
+              value={this.state.name}
+              onChange={this.handleChange}
+            >
+            </textarea>
+          </div>
+        </div>
+      </form>
+    );
+  }
+
+}
+
+/**
+ * Wrapper component for using unstated
+ */
+const AdminMenuFormWrapper = (props) => {
+  return createSubscribedElement(AdminMenuForm, props, [AppContainer]);
+};
+
+AdminMenuForm.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+
+  user: PropTypes.object.isRequired,
+};
+
+export default withTranslation()(AdminMenuFormWrapper);

src/client/js/components/Admin/Users/RemoveAdminForm.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+import AppContainer from '../../../services/AppContainer';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
+
+class AdminMenuForm extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+
+    };
+
+  }
+
+  render() {
+    const { t, user } = this.props;
+    const me = this.props.appContainer.me;
+
+    return (
+      <Fragment>
+          <p>
+            {user.username !== me
+              ? (
+                <a data-toggle="collapse" href="#removeAdminForm">
+                  <i className="icon-fw icon-user-unfollow mb-2"></i> { t('user_management.remove_admin_access') }
+                </a>
+
+              )
+              : (
+                <div className="mx-4">
+                  <i className="icon-fw icon-user-unfollow mb-2"></i>{ t('user_management.remove_admin_access') }
+                  <p className="alert alert-danger">{ t('user_management.cannot_remove') }</p>
+                </div>
+              )
+            }
+          </p>
+          <form onSubmit={this.handleSubmit}>
+            <div id="removeAdminForm" className="collapse">
+              <div className="form-group">
+                <label htmlFor="name">{ t('user_group_management.group_name') }</label>
+                <textarea
+                  id="name"
+                  name="name"
+                  className="form-control"
+                  placeholder={t('user_group_management.group_example')}
+                  value={this.state.name}
+                  onChange={this.handleChange}
+                >
+                </textarea>
+              </div>
+            </div>
+          </form>
+    );
+  }
+
+}
+
+/**
+ * Wrapper component for using unstated
+ */
+const AdminMenuFormWrapper = (props) => {
+  return createSubscribedElement(AdminMenuForm, props, [AppContainer]);
+};
+
+AdminMenuForm.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+
+  user: PropTypes.object.isRequired,
+};
+
+export default withTranslation()(AdminMenuFormWrapper);

src/client/js/components/Admin/Users/StatusActivateForm.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+import AppContainer from '../../../services/AppContainer';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
+
+class StatusActivateForm extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+
+    };
+
+  }
+
+  render() {
+    const { t, user }= this.props;
+    const me = this.props.appContainer.me;
+
+    return ();
+  }
+
+}
+
+/**
+ * Wrapper component for using unstated
+ */
+const StatusActivateFormWrapper = (props) => {
+  return createSubscribedElement(StatusActivateForm, props, [AppContainer]);
+};
+
+StatusActivateForm.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+
+  user: PropTypes.object.isRequired,
+};
+
+export default withTranslation()(StatusActivateFormWrapper);

src/client/js/components/Admin/Users/StatusSuspendedForm.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+import AppContainer from '../../../services/AppContainer';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
+
+class StatusSuspendedForm extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+
+    };
+
+  }
+
+  render() {
+    const { t, user }= this.props;
+    const me = this.props.appContainer.me;
+
+    return ();
+  }
+
+}
+
+/**
+ * Wrapper component for using unstated
+ */
+const StatusSuspendedFormWrapper = (props) => {
+  return createSubscribedElement(StatusSuspendedForm, props, [AppContainer]);
+};
+
+StatusSuspendedForm.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+
+  user: PropTypes.object.isRequired,
+};
+
+export default withTranslation()(StatusSuspendedFormWrapper);

src/client/js/components/Admin/Users/UserMenu.jsx

@@ -3,6 +3,11 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
 import PasswordResetModal from './PasswordResetModal';
+import StatusActivateForm from './StatusActivateForm';
+import StatusSuspendedForm from './StatusSuspendedForm';
+import RemoveUserForm from './RemoveUserForm';
+import RemoveAdminForm from './RemoveAdminForm';
+import GiveAdminForm from './GiveAdminForm';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
@@ -10,113 +15,57 @@ import AppContainer from '../../../services/AppContainer';
 class UserMenu extends React.Component {
 
 
-  activateUser() {
-    const { appContainer } = this.props;
-
-    appContainer.apiPost('/admin/user/{userId}/activate');
-  }
-
-  susupendUser() {
-    const { appContainer } = this.props;
-
-    appContainer.apiPost('/admin/user/{userId}/suspend');
-  }
-
-  removeUser() {
-    const { appContainer } = this.props;
-
-    appContainer.apiPost('/admin/user/{user._id}/removeCompletely');
-  }
-
-  removeFromAdmin() {
-    const { appContainer } = this.props;
-
-    appContainer.apiPost('/admin/user/{user._id}/removeFromAdmin');
-  }
-
-  giveAdminAccess() {
-    const { appContainer } = this.props;
-
-    appContainer.apiPost('/admin/user/{user._id}/makeAdmin');
-  }
-
-
   render() {
     const { t, user } = this.props;
-    const me = this.props.appContainer.me;
 
-    let contentOfStatus;
-    let adminMenu;
-
-    if (user.status === 1) {
-      contentOfStatus = (
-        <a className="mx-4" onClick={this.activateUser}>
-          <i className="icon-fw icon-user-following"></i> { t('user_management.accept') }
-        </a>
-      );
-    }
-    if (user.status === 2) {
-      contentOfStatus = (
-        user.username !== me
-          ? (
-            <a onClick={this.susupendUser}>
-              <i className="icon-fw icon-ban"></i>{ t('user_management.deactivate_account') }
-            </a>
-          )
-          : (
-            <div className="mx-4">
-              <i className="icon-fw icon-ban mb-2"></i>{ t('user_management.deactivate_account') }
-              <p className="alert alert-danger">{ t('user_management.your_own') }</p>
-            </div>
-          )
-      );
-    }
-    if (user.status === 3) {
-      contentOfStatus = (
-        <div>
-          <a className="mx-4" onClick={this.activateUser}>
-            <i className="icon-fw icon-action-redo"></i> { t('Undo') }
-          </a>
-          {/* label は同じだけど、こっちは論理削除 */}
-          <a className="mx-4" onClick={this.removeUser}>
-            <i className="icon-fw icon-fire text-danger"></i> { t('Delete') }
-          </a>
-        </div>
-      );
-    }
-    if (user.status === 1 || user.status === 5) {
-      contentOfStatus = (
-        <li className="dropdown-button">
-          <a className="mx-4" onClick={this.removeUser}>
-            <i className="icon-fw icon-fire text-danger"></i> { t('Delete') }
-          </a>
-        </li>
-      );
-    }
-
-    if (user.admin === true && user.status === 2) {
-      adminMenu = (
-        user.username !== me
-          ? (
-            <a onClick={this.removeFromAdmin}>
-              <i className="icon-fw icon-user-unfollow mb-2"></i> { t('user_management.remove_admin_access') }
-            </a>
-          )
-          : (
-            <div className="mx-4">
-              <i className="icon-fw icon-user-unfollow mb-2"></i>{ t('user_management.remove_admin_access') }
-              <p className="alert alert-danger">{ t('user_management.cannot_remove') }</p>
-            </div>
-          )
-      );
-    }
-    if (user.admin === false && user.status === 2) {
-      adminMenu = (
-        <a onClick={this.giveAdminAccess}>
-          <i className="icon-fw icon-magic-wand"></i>{ t('user_management.give_admin_access') }
-        </a>
-      );
-    }
+    // let contentOfStatus;
+    // let adminMenu;
+
+    // if (user.status === 1) {
+    //   contentOfStatus = (
+    //     <a className="mx-4" onClick={this.activateUser}>
+    //       <i className="icon-fw icon-user-following"></i> { t('user_management.accept') }
+    //     </a>
+    //   );
+    // }
+    // if (user.status === 2) {
+    //   contentOfStatus = (
+    //     user.username !== me
+    //       ? (
+    //         <a onClick={this.susupendUser}>
+    //           <i className="icon-fw icon-ban"></i>{ t('user_management.deactivate_account') }
+    //         </a>
+    //       )
+    //       : (
+    //         <div className="mx-4">
+    //           <i className="icon-fw icon-ban mb-2"></i>{ t('user_management.deactivate_account') }
+    //           <p className="alert alert-danger">{ t('user_management.your_own') }</p>
+    //         </div>
+    //       )
+    //   );
+    // }
+    // if (user.status === 3) {
+    //   contentOfStatus = (
+    //     <div>
+    //       <a className="mx-4" onClick={this.activateUser}>
+    //         <i className="icon-fw icon-action-redo"></i> { t('Undo') }
+    //       </a>
+    //       {/* label は同じだけど、こっちは論理削除 */}
+    //       <a className="mx-4" onClick={this.removeUser}>
+    //         <i className="icon-fw icon-fire text-danger"></i> { t('Delete') }
+    //       </a>
+    //     </div>
+    //   );
+    // }
+    // if (user.status === 1 || user.status === 5) {
+    //   contentOfStatus = (
+    //     <li className="dropdown-button">
+    //       <a className="mx-4" onClick={this.removeUser}>
+    //         <i className="icon-fw icon-fire text-danger"></i> { t('Delete') }
+    //       </a>
+    //     </li>
+    //   );
+    // }
 
     return (
       <Fragment>
@@ -134,11 +83,16 @@ class UserMenu extends React.Component {
             <li className="divider"></li>
             <li className="dropdown-header">{ t('status') }</li>
             <li>
-              {contentOfStatus}
+              {(user.status === 1 || user.status === 3) && <StatusActivateForm user={user} />}
+              {user.status === 2 && <StatusSuspendedForm user={user} />}
+              {(user.status === 1 || user.status === 3 || user.status === 5) && <RemoveUserForm user={user} />}
             </li>
             <li className="divider pl-0"></li>
             <li className="dropdown-header">{ t('user_management.administrator_menu') }</li>
-            <li>{adminMenu}</li>
+            <li>
+              {user.status === 2 && user.admin === true && <RemoveAdminForm user={user} />}
+              {user.status === 2 && user.admin === false && <GiveAdminForm user={user} />}
+            </li>
           </ul>
         </div>
       </Fragment>

src/client/js/components/Admin/Users/UserRemoveForm.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+import AppContainer from '../../../services/AppContainer';
+import { toastSuccess, toastError } from '../../../util/apiNotification';
+
+class UserRemoveForm extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+
+    };
+
+  }
+
+  render() {
+    const { t, user }= this.props;
+    const me = this.props.appContainer.me;
+
+    return ();
+  }
+
+}
+
+/**
+ * Wrapper component for using unstated
+ */
+const UserRemoveFormWrapper = (props) => {
+  return createSubscribedElement(UserRemoveForm, props, [AppContainer]);
+};
+
+UserRemoveForm.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+
+  user: PropTypes.object.isRequired,
+};
+
+export default withTranslation()(UserRemoveFormWrapper);