set try-catch inside of fetchHogeData method

packages/app/src/components/Admin/Security/BasicSecuritySetting.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';
 
 import PropTypes from 'prop-types';
 
@@ -13,13 +13,9 @@ import BasicSecurityManagementContents from './BasicSecuritySettingContents';
 const BasicSecurityManagement = (props) => {
   const { adminBasicSecurityContainer } = props;
 
-  useEffect(() => {
-    const fetchBasicSecuritySettingsData = async() => {
-      await adminBasicSecurityContainer.retrieveSecurityData();
-    };
-
+  const fetchBasicSecuritySettingsData = useCallback(async() => {
     try {
-      fetchBasicSecuritySettingsData();
+      await adminBasicSecurityContainer.retrieveSecurityData();
     }
     catch (err) {
       const errs = toArrayIfNot(err);
@@ -27,6 +23,10 @@ const BasicSecurityManagement = (props) => {
     }
   }, [adminBasicSecurityContainer]);
 
+  useEffect(() => {
+    fetchBasicSecuritySettingsData();
+  }, [adminBasicSecurityContainer, fetchBasicSecuritySettingsData]);
+
 
   return <BasicSecurityManagementContents />;
 };

packages/app/src/components/Admin/Security/FacebookSecuritySetting.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-danger */
 import React from 'react';
 
 import { withTranslation } from 'next-i18next';

packages/app/src/components/Admin/Security/GitHubSecuritySetting.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';
 
 import PropTypes from 'prop-types';
 
@@ -11,16 +11,12 @@ import { withUnstatedContainers } from '../../UnstatedUtils';
 
 import GitHubSecuritySettingContents from './GitHubSecuritySettingContents';
 
-function GitHubSecurityManagement(props) {
+const GitHubSecurityManagement = (props) => {
   const { adminGitHubSecurityContainer } = props;
 
-  useEffect(() => {
-    const fetchGitHubSecuritySettingsData = async() => {
-      await adminGitHubSecurityContainer.retrieveSecurityData();
-    };
-
+  const fetchGitHubSecuritySettingsData = useCallback(async() => {
     try {
-      fetchGitHubSecuritySettingsData();
+      await adminGitHubSecurityContainer.retrieveSecurityData();
     }
     catch (err) {
       const errs = toArrayIfNot(err);
@@ -28,8 +24,12 @@ function GitHubSecurityManagement(props) {
     }
   }, [adminGitHubSecurityContainer]);
 
+  useEffect(() => {
+    fetchGitHubSecuritySettingsData();
+  }, [adminGitHubSecurityContainer, fetchGitHubSecuritySettingsData]);
+
   return <GitHubSecuritySettingContents />;
-}
+};
 
 
 GitHubSecurityManagement.propTypes = {

packages/app/src/components/Admin/Security/GoogleSecuritySetting.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';
 
 import PropTypes from 'prop-types';
 
@@ -10,16 +10,12 @@ import { withUnstatedContainers } from '../../UnstatedUtils';
 
 import GoogleSecurityManagementContents from './GoogleSecuritySettingContents';
 
-function GoogleSecurityManagement(props) {
+const GoogleSecurityManagement = (props) => {
   const { adminGoogleSecurityContainer } = props;
 
-  useEffect(() => {
-    const fetchGoogleSecuritySettingsData = async() => {
-      await adminGoogleSecurityContainer.retrieveSecurityData();
-    };
-
+  const fetchGoogleSecuritySettingsData = useCallback(async() => {
     try {
-      fetchGoogleSecuritySettingsData();
+      await adminGoogleSecurityContainer.retrieveSecurityData();
     }
     catch (err) {
       const errs = toArrayIfNot(err);
@@ -27,8 +23,13 @@ function GoogleSecurityManagement(props) {
     }
   }, [adminGoogleSecurityContainer]);
 
+
+  useEffect(() => {
+    fetchGoogleSecuritySettingsData();
+  }, [adminGoogleSecurityContainer, fetchGoogleSecuritySettingsData]);
+
   return <GoogleSecurityManagementContents />;
-}
+};
 
 
 GoogleSecurityManagement.propTypes = {

packages/app/src/components/Admin/Security/LdapSecuritySetting.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';
 
 import PropTypes from 'prop-types';
 
@@ -10,16 +10,12 @@ import { withUnstatedContainers } from '../../UnstatedUtils';
 
 import LdapSecuritySettingContents from './LdapSecuritySettingContents';
 
-function LdapSecuritySetting(props) {
+const LdapSecuritySetting = (props) => {
   const { adminLdapSecurityContainer } = props;
 
-  useEffect(() => {
-    const fetchLdapSecuritySettingsData = async() => {
-      await adminLdapSecurityContainer.retrieveSecurityData();
-    };
-
+  const fetchLdapSecuritySettingsData = useCallback(async() => {
     try {
-      fetchLdapSecuritySettingsData();
+      await adminLdapSecurityContainer.retrieveSecurityData();
     }
     catch (err) {
       const errs = toArrayIfNot(err);
@@ -27,8 +23,12 @@ function LdapSecuritySetting(props) {
     }
   }, [adminLdapSecurityContainer]);
 
+  useEffect(() => {
+    fetchLdapSecuritySettingsData();
+  }, [adminLdapSecurityContainer, fetchLdapSecuritySettingsData]);
+
   return <LdapSecuritySettingContents />;
-}
+};
 
 LdapSecuritySetting.propTypes = {
   adminLdapSecurityContainer: PropTypes.instanceOf(AdminLdapSecurityContainer).isRequired,

packages/app/src/components/Admin/Security/LocalSecuritySetting.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';
 
 import PropTypes from 'prop-types';
 
@@ -10,16 +10,12 @@ import { withUnstatedContainers } from '../../UnstatedUtils';
 
 import LocalSecuritySettingContents from './LocalSecuritySettingContents';
 
-function LocalSecuritySetting(props) {
+const LocalSecuritySetting = (props) => {
   const { adminLocalSecurityContainer } = props;
 
-  useEffect(() => {
-    const fetchLocalSecuritySettingsData = async() => {
-      await adminLocalSecurityContainer.retrieveSecurityData();
-    };
-
+  const fetchLocalSecuritySettingsData = useCallback(async() => {
     try {
-      fetchLocalSecuritySettingsData();
+      await adminLocalSecurityContainer.retrieveSecurityData();
     }
     catch (err) {
       const errs = toArrayIfNot(err);
@@ -27,8 +23,13 @@ function LocalSecuritySetting(props) {
     }
   }, [adminLocalSecurityContainer]);
 
+
+  useEffect(() => {
+    fetchLocalSecuritySettingsData();
+  }, [adminLocalSecurityContainer, fetchLocalSecuritySettingsData]);
+
   return <LocalSecuritySettingContents />;
-}
+};
 
 LocalSecuritySetting.propTypes = {
   adminLocalSecurityContainer: PropTypes.instanceOf(AdminLocalSecurityContainer).isRequired,

packages/app/src/components/Admin/Security/OidcSecuritySetting.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';
 
 import PropTypes from 'prop-types';
 
@@ -10,16 +10,12 @@ import { withUnstatedContainers } from '../../UnstatedUtils';
 
 import OidcSecurityManagementContents from './OidcSecuritySettingContents';
 
-function OidcSecurityManagement(props) {
+const OidcSecurityManagement = (props) => {
   const { adminOidcSecurityContainer } = props;
 
-  useEffect(() => {
-    const fetchOidcSecuritySettingsData = async() => {
-      await adminOidcSecurityContainer.retrieveSecurityData();
-    };
-
+  const fetchOidcSecuritySettingsData = useCallback(async() => {
     try {
-      fetchOidcSecuritySettingsData();
+      await adminOidcSecurityContainer.retrieveSecurityData();
     }
     catch (err) {
       const errs = toArrayIfNot(err);
@@ -27,8 +23,12 @@ function OidcSecurityManagement(props) {
     }
   }, [adminOidcSecurityContainer]);
 
+  useEffect(() => {
+    fetchOidcSecuritySettingsData();
+  }, [adminOidcSecurityContainer, fetchOidcSecuritySettingsData]);
+
   return <OidcSecurityManagementContents />;
-}
+};
 
 OidcSecurityManagement.propTypes = {
   adminOidcSecurityContainer: PropTypes.instanceOf(AdminOidcSecurityContainer).isRequired,

packages/app/src/components/Admin/Security/SamlSecuritySetting.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';
 
 import PropTypes from 'prop-types';
 
@@ -10,16 +10,12 @@ import { withUnstatedContainers } from '../../UnstatedUtils';
 
 import SamlSecuritySettingContents from './SamlSecuritySettingContents';
 
-function SamlSecurityManagement(props) {
+const SamlSecurityManagement = (props) => {
   const { adminSamlSecurityContainer } = props;
 
-  useEffect(() => {
-    const fetchSamlSecuritySettingsData = async() => {
-      await adminSamlSecurityContainer.retrieveSecurityData();
-    };
-
+  const fetchSamlSecuritySettingsData = useCallback(async() => {
     try {
-      fetchSamlSecuritySettingsData();
+      await adminSamlSecurityContainer.retrieveSecurityData();
     }
     catch (err) {
       const errs = toArrayIfNot(err);
@@ -27,8 +23,12 @@ function SamlSecurityManagement(props) {
     }
   }, [adminSamlSecurityContainer]);
 
+  useEffect(() => {
+    fetchSamlSecuritySettingsData();
+  }, [adminSamlSecurityContainer, fetchSamlSecuritySettingsData]);
+
   return <SamlSecuritySettingContents />;
-}
+};
 
 SamlSecurityManagement.propTypes = {
   adminSamlSecurityContainer: PropTypes.instanceOf(AdminSamlSecurityContainer).isRequired,

packages/app/src/components/Admin/Security/SecurityManagement.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';
 
 import PropTypes from 'prop-types';
 
@@ -13,13 +13,9 @@ import SecurityManagementContents from './SecurityManagementContents';
 function SecurityManagement(props) {
   const { adminGeneralSecurityContainer } = props;
 
-  useEffect(() => {
-    const fetchGeneralSecuritySettingsData = async() => {
-      await adminGeneralSecurityContainer.retrieveSecurityData();
-    };
-
+  const fetchGeneralSecuritySettingsData = useCallback(async() => {
     try {
-      fetchGeneralSecuritySettingsData();
+      await adminGeneralSecurityContainer.retrieveSecurityData();
     }
     catch (err) {
       const errs = toArrayIfNot(err);
@@ -27,6 +23,10 @@ function SecurityManagement(props) {
     }
   }, [adminGeneralSecurityContainer]);
 
+  useEffect(() => {
+    fetchGeneralSecuritySettingsData();
+  }, [adminGeneralSecurityContainer, fetchGeneralSecuritySettingsData]);
+
   return <SecurityManagementContents />;
 }
 

packages/app/src/components/Admin/Security/TwitterSecuritySetting.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';
 
 import PropTypes from 'prop-types';
 
@@ -10,16 +10,12 @@ import { withUnstatedContainers } from '../../UnstatedUtils';
 
 import TwitterSecuritySettingContents from './TwitterSecuritySettingContents';
 
-function TwitterSecurityManagement(props) {
+const TwitterSecurityManagement = (props) => {
   const { adminTwitterSecurityContainer } = props;
 
-  useEffect(() => {
-    const fetchTwitterSecuritySettingsData = async() => {
-      await adminTwitterSecurityContainer.retrieveSecurityData();
-    };
-
+  const fetchTwitterSecuritySettingsData = useCallback(async() => {
     try {
-      fetchTwitterSecuritySettingsData();
+      await adminTwitterSecurityContainer.retrieveSecurityData();
     }
     catch (err) {
       const errs = toArrayIfNot(err);
@@ -27,8 +23,12 @@ function TwitterSecurityManagement(props) {
     }
   }, [adminTwitterSecurityContainer]);
 
+  useEffect(() => {
+    fetchTwitterSecuritySettingsData();
+  }, [adminTwitterSecurityContainer, fetchTwitterSecuritySettingsData]);
+
   return <TwitterSecuritySettingContents />;
-}
+};
 
 TwitterSecurityManagement.propTypes = {
   adminTwitterSecurityContainer: PropTypes.instanceOf(AdminTwitterSecurityContainer).isRequired,