can show staff credit of growi and cloud member

src/client/js/components/Hotkeys/Subscribers/ShowStaffCredit.jsx

@@ -1,20 +1,38 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import StaffCredit from '../../StaffCredit/StaffCredit';
+import AppContainer from '../../../services/AppContainer';
+import { withUnstatedContainers } from '../../UnstatedUtils';
 
 const ShowStaffCredit = (props) => {
+  const [contributors, setContributors] = useState([]);
 
-  return <StaffCredit onClosed={() => props.onDeleteRender(this)} />;
+  useEffect(() => {
+    const getContributors = async() => {
+      const res = await props.appContainer.apiv3Get('/staffs');
+      setContributors(res.data.contributors);
+    };
+    getContributors();
+  }, [props.appContainer]);
 
+  // 初回のrender時は StaffCredit を render しないようにする
+  if (contributors.length === 0) {
+    return <></>;
+  }
+
+  return <StaffCredit contributors={contributors} onClosed={() => props.onDeleteRender(this)} />;
 };
 
+const ShowStaffCreditWrapper = withUnstatedContainers(ShowStaffCredit, [AppContainer]);
+
 ShowStaffCredit.propTypes = {
   onDeleteRender: PropTypes.func.isRequired,
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 };
 
-ShowStaffCredit.getHotkeyStrokes = () => {
+ShowStaffCreditWrapper.getHotkeyStrokes = () => {
   return [['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a']];
 };
 
-export default ShowStaffCredit;
+export default ShowStaffCreditWrapper;

src/client/js/components/StaffCredit/StaffCredit.jsx

@@ -4,7 +4,6 @@ import loggerFactory from '@alias/logger';
 import {
   Modal, ModalBody,
 } from 'reactstrap';
-import contributors from './Contributor';
 import AppContainer from '../../services/AppContainer';
 import { withUnstatedContainers } from '../UnstatedUtils';
 
@@ -26,7 +25,6 @@ class StaffCredit extends React.Component {
     super(props);
     this.state = {
       isShown: true,
-      gcContributors: null,
     };
     this.deleteCredit = this.deleteCredit.bind(this);
   }
@@ -60,10 +58,7 @@ class StaffCredit extends React.Component {
 
   renderContributors() {
     if (this.state.isShown) {
-      if (this.state.gcContributors != null && contributors[1].sectionName !== 'GROWI-cloud') {
-        contributors.splice(1, 0, this.state.gcContributors);
-      }
-      const credit = contributors.map((contributor) => {
+      const credit = this.props.contributors.map((contributor) => {
         // construct members elements
         const memberGroups = contributor.memberGroups.map((memberGroup, idx) => {
           return this.renderMembers(memberGroup, `${contributor.sectionName}-group${idx}`);
@@ -105,9 +100,6 @@ class StaffCredit extends React.Component {
       });
     }, 10);
 
-    this.props.appContainer.apiv3Get('/staffs').then((res) => {
-      this.setState({ gcContributors: res.data });
-    });
 
   }
 
@@ -139,6 +131,7 @@ const StaffCreditWrapper = withUnstatedContainers(StaffCredit, [AppContainer]);
 
 StaffCredit.propTypes = {
   onClosed: PropTypes.func,
+  contributors: PropTypes.array.isRequired,
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 };