refactor

src/client/js/components/Admin/AdminHome/AdminHome.jsx

@@ -57,7 +57,7 @@ class AdminHome extends React.Component {
         <div className="row mb-5">
           <div className="col-md-12">
             <h2 className="admin-setting-header">環境変数一覧</h2>
-            {adminHomeContainer.state.envVars.crowi && <EnvVarsTable />}
+            {adminHomeContainer.state.envVars.crowi && <EnvVarsTable envVars={adminHomeContainer.state.envVars} />}
           </div>
         </div>
       </Fragment>

src/client/js/components/Admin/AdminHome/EnvVarsTable.jsx

@@ -1,46 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
-import AppContainer from '../../../services/AppContainer';
-import AdminHomeContainer from '../../../services/AdminHomeContainer';
-
-class EnvVarsTable extends React.Component {
-
-  render() {
-    const { adminHomeContainer } = this.props;
-
-    return (
-      <table className="table table-bordered">
-        <tbody>
-          {Object.entries(adminHomeContainer.state.envVars.crowi).map((env) => {
-            if (env[1] == null) { return null }
-            return (
-              <tr key={env[0]}>
-                <th className="col-sm-4">{env[0]}</th>
-                <td>{env[1].toString()}</td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
-    );
+const EnvVarsTable = (props) => {
+  const envVarRows = [];
+
+  for (const [key, value] of Object.entries(props.envVars.crowi)) {
+    if (value != null) {
+      envVarRows.push(
+        <tr key={key}>
+          <th className="col-sm-4">{key}</th>
+          <td>{value.toString()}</td>
+        </tr>,
+      );
+    }
   }
 
-}
+  return (
+    <table className="table table-bordered">
+      <tbody>
+        {envVarRows}
+      </tbody>
+    </table>
+  );
 
-EnvVarsTable.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  adminHomeContainer: PropTypes.instanceOf(AdminHomeContainer).isRequired,
 };
 
-/**
- * Wrapper component for using unstated
- */
-const EnvVarsTableWrapper = (props) => {
-  return createSubscribedElement(EnvVarsTable, props, [AppContainer, AdminHomeContainer]);
+EnvVarsTable.propTypes = {
+  envVars: PropTypes.object.isRequired,
 };
 
-export default withTranslation()(EnvVarsTableWrapper);
+export default EnvVarsTable;