fixed the location of api call

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

@@ -1,38 +1,20 @@
-import React, { useEffect, useState } from 'react';
+import React 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([]);
 
-  useEffect(() => {
-    const getContributors = async() => {
-      const res = await props.appContainer.apiv3Get('/staffs');
-      setContributors(res.data.contributorsCache);
-    };
-    getContributors();
-  }, [props.appContainer]);
+  return <StaffCredit onClosed={() => props.onDeleteRender(this)} />;
 
-  // do not render staffCredit if first 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,
 };
 
-ShowStaffCreditWrapper.getHotkeyStrokes = () => {
+ShowStaffCredit.getHotkeyStrokes = () => {
   return [['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a']];
 };
 
-export default ShowStaffCreditWrapper;
+export default ShowStaffCredit;

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

@@ -4,6 +4,8 @@ import loggerFactory from '@alias/logger';
 import {
   Modal, ModalBody,
 } from 'reactstrap';
+import AppContainer from '../../services/AppContainer';
+import { withUnstatedContainers } from '../UnstatedUtils';
 
 /**
  * Page staff credit component
@@ -23,6 +25,7 @@ class StaffCredit extends React.Component {
     super(props);
     this.state = {
       isShown: true,
+      contributors: null,
     };
     this.deleteCredit = this.deleteCredit.bind(this);
   }
@@ -56,7 +59,7 @@ class StaffCredit extends React.Component {
 
   renderContributors() {
     if (this.state.isShown) {
-      const credit = this.props.contributors.map((contributor) => {
+      const credit = this.state.contributors.map((contributor) => {
         // construct members elements
         const memberGroups = contributor.memberGroups.map((memberGroup, idx) => {
           return this.renderMembers(memberGroup, `${contributor.sectionName}-group${idx}`);
@@ -82,7 +85,11 @@ class StaffCredit extends React.Component {
     return null;
   }
 
-  componentDidMount() {
+  async componentDidMount() {
+    const res = await this.props.appContainer.apiv3Get('/staffs');
+    const contributors = res.data.contributorsCache;
+    this.setState({ contributors });
+
     setTimeout(() => {
       // px / sec
       const scrollSpeed = 200;
@@ -97,13 +104,15 @@ class StaffCredit extends React.Component {
         color: '#FFFFFF',
       });
     }, 10);
-
-
   }
 
   render() {
     const { onClosed } = this.props;
 
+    if (this.state.contributors === null) {
+      return <></>;
+    }
+
     return (
       <Modal
         isOpen={this.state.isShown}
@@ -125,9 +134,11 @@ class StaffCredit extends React.Component {
 
 }
 
+const StaffCreditWrapper = withUnstatedContainers(StaffCredit, [AppContainer]);
+
 StaffCredit.propTypes = {
   onClosed: PropTypes.func,
-  contributors: PropTypes.array.isRequired,
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 };
 
-export default StaffCredit;
+export default StaffCreditWrapper;