FB

src/client/js/components/Admin/Notification/UserNotificationList.jsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-
-import { createSubscribedElement } from '../../UnstatedUtils';
-
-import AppContainer from '../../../services/AppContainer';
-import AdminNotificationContainer from '../../../services/AdminNotificationContainer';
-
-
-class UserNotificationList extends React.Component {
-
-  render() {
-    const { t, adminNotificationContainer } = this.props;
-    return (
-      <React.Fragment>
-        {adminNotificationContainer.state.userNotifications.map((notification) => {
-          return (
-            <tr className="admin-notif-row" key={notification._id}>
-              <td>
-                {notification.pathPattern}
-              </td>
-              <td>
-                {notification.channel}
-              </td>
-              <td>
-                {/* TODO GW-806 create apiV3 for delete notification */}
-                <button type="submit" className="btn btn-default">{t('Delete')}</button>
-              </td>
-            </tr>
-          );
-        })
-        }
-      </React.Fragment>
-    );
-
-  }
-
-}
-
-
-const UserNotificationListWrapper = (props) => {
-  return createSubscribedElement(UserNotificationList, props, [AppContainer, AdminNotificationContainer]);
-};
-
-UserNotificationList.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  adminNotificationContainer: PropTypes.instanceOf(AdminNotificationContainer).isRequired,
-
-};
-
-export default withTranslation()(UserNotificationListWrapper);

src/client/js/components/Admin/Notification/UserNotificationRow.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+
+import AppContainer from '../../../services/AppContainer';
+import AdminNotificationContainer from '../../../services/AdminNotificationContainer';
+
+
+class UserNotificationRow extends React.Component {
+
+  render() {
+    const { t, notification } = this.props;
+    return (
+      <React.Fragment>
+        <tr className="admin-notif-row" key={notification._id}>
+          <td>
+            {notification.pathPattern}
+          </td>
+          <td>
+            {notification.channel}
+          </td>
+          <td>
+            {/* TODO GW-806 create apiV3 for delete notification */}
+            <button type="submit" className="btn btn-default">{t('Delete')}</button>
+          </td>
+        </tr>
+      </React.Fragment>
+    );
+
+  }
+
+}
+
+
+const UserNotificationRowWrapper = (props) => {
+  return createSubscribedElement(UserNotificationRow, props, [AppContainer, AdminNotificationContainer]);
+};
+
+UserNotificationRow.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminNotificationContainer: PropTypes.instanceOf(AdminNotificationContainer).isRequired,
+
+  notification: PropTypes.object.isRequired,
+
+};
+
+export default withTranslation()(UserNotificationRowWrapper);

src/client/js/components/Admin/Notification/UserTriggerNotification.jsx

@@ -9,7 +9,7 @@ import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
 import AdminNotificationContainer from '../../../services/AdminNotificationContainer';
-import UserNotificationList from './UserNotificationList';
+import UserNotificationRow from './UserNotificationRow';
 
 const logger = loggerFactory('growi:slackAppConfiguration');
 
@@ -110,8 +110,9 @@ class UserTriggerNotification extends React.Component {
                 <button type="button" className="btn btn-primary" disabled={!this.validateForm()} onClick={this.onClickSubmit}>{t('add')}</button>
               </td>
             </tr>
-            {adminNotificationContainer.state.userNotifications.length !== 0
-              && <UserNotificationList />
+            {adminNotificationContainer.state.userNotifications.map((notification) => {
+              return <UserNotificationRow notification={notification} />;
+            })
             }
           </tbody>
         </table>