fix: admin requests

admin/src/components/ActionButtons/index.jsx

@@ -4,15 +4,16 @@ import { useDispatch, useSelector } from 'react-redux';
 import { isEmpty } from 'lodash';
 import { Button } from '@strapi/design-system';
 import { Map } from 'immutable';
-import { useNotification } from '@strapi/strapi/admin';
+import { getFetchClient, useNotification } from '@strapi/strapi/admin';
 import { useIntl } from 'react-intl';
 
 import ConfirmModal from '../ConfirmModal';
 import { exportAllConfig, importAllConfig } from '../../state/actions/Config';
 
 const ActionButtons = () => {
+  const { post, get } = getFetchClient();
   const dispatch = useDispatch();
-  const toggleNotification = useNotification();
+  const { toggleNotification } = useNotification();
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const [actionType, setActionType] = useState('');
   const partialDiff = useSelector((state) => state.getIn(['config', 'partialDiff'], Map({}))).toJS();
@@ -43,7 +44,7 @@ const ActionButtons = () => {
         isOpen={modalIsOpen}
         onClose={closeModal}
         type={actionType}
-        onSubmit={(force) => actionType === 'import' ? dispatch(importAllConfig(partialDiff, force, toggleNotification)) : dispatch(exportAllConfig(partialDiff, toggleNotification))}
+        onSubmit={(force) => actionType === 'import' ? dispatch(importAllConfig(partialDiff, force, toggleNotification, formatMessage, post, get)) : dispatch(exportAllConfig(partialDiff, toggleNotification, formatMessage, post, get))}
       />
     </ActionButtonsStyling>
   );

admin/src/components/FirstExport/index.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
-import { useNotification } from '@strapi/strapi/admin';
+import { getFetchClient, useNotification } from '@strapi/strapi/admin';
 import { Button, EmptyStateLayout } from '@strapi/design-system';
 import { EmptyDocuments } from '@strapi/icons';
 
@@ -9,7 +9,8 @@ import { exportAllConfig } from '../../state/actions/Config';
 import ConfirmModal from '../ConfirmModal';
 
 const FirstExport = () => {
-  const toggleNotification = useNotification();
+  const { post, get } = getFetchClient();
+  const { toggleNotification } = useNotification();
   const dispatch = useDispatch();
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const { formatMessage } = useIntl();
@@ -20,7 +21,7 @@ const FirstExport = () => {
         isOpen={modalIsOpen}
         onClose={() => setModalIsOpen(false)}
         type="export"
-        onSubmit={() => dispatch(exportAllConfig([], toggleNotification))}
+        onSubmit={() => dispatch(exportAllConfig([], toggleNotification, formatMessage, post, get))}
       />
       <EmptyStateLayout
         content={formatMessage({ id: 'config-sync.FirstExport.Message' })}

admin/src/containers/ConfigPage/index.jsx

@@ -8,21 +8,26 @@ import {
   Typography,
 } from '@strapi/design-system';
 import { useNotification } from '@strapi/strapi/admin';
+import { getFetchClient } from '@strapi/admin/strapi-admin';
 
 import { getAllConfigDiff, getAppEnv } from '../../state/actions/Config';
 import ConfigList from '../../components/ConfigList';
 import ActionButtons from '../../components/ActionButtons';
+import { useIntl } from 'react-intl';
 
 const ConfigPage = () => {
-  const toggleNotification = useNotification();
+  const { toggleNotification } = useNotification();
+  const { get } = getFetchClient();
+  const { formatMessage } = useIntl();
+
   const dispatch = useDispatch();
   const isLoading = useSelector((state) => state.getIn(['config', 'isLoading'], Map({})));
   const configDiff = useSelector((state) => state.getIn(['config', 'configDiff'], Map({})));
   const appEnv = useSelector((state) => state.getIn(['config', 'appEnv', 'env']));
 
   useEffect(() => {
-    dispatch(getAllConfigDiff(toggleNotification));
+    dispatch(getAllConfigDiff(toggleNotification, formatMessage, get));
-    dispatch(getAppEnv(toggleNotification));
+    dispatch(getAppEnv(toggleNotification, formatMessage, get));
   }, []);
 
   return (

admin/src/state/actions/Config.js

@@ -4,19 +4,16 @@
  *
  */
 
-import { useFetchClient } from '@strapi/admin/strapi-admin';
+export function getAllConfigDiff(toggleNotification, formatMessage, get) {
-
-export function getAllConfigDiff(toggleNotification) {
   return async function(dispatch) {
-    const { get } = useFetchClient();
     dispatch(setLoadingState(true));
     try {
       const configDiff = await get('/config-sync/diff');
       dispatch(setConfigPartialDiffInState([]));
-      dispatch(setConfigDiffInState(configDiff));
+      dispatch(setConfigDiffInState(configDiff.data));
       dispatch(setLoadingState(false));
     } catch (err) {
-      toggleNotification({ type: 'warning', message: { id: 'notification.error' } });
+      toggleNotification({ type: 'warning', message: formatMessage({ id: 'notification.error' }) });
       dispatch(setLoadingState(false));
     }
   };
@@ -38,36 +35,34 @@ export function setConfigPartialDiffInState(config) {
   };
 }
 
-export function exportAllConfig(partialDiff, toggleNotification) {
+export function exportAllConfig(partialDiff, toggleNotification, formatMessage, post, get) {
   return async function(dispatch) {
-    const { post } = useFetchClient();
     dispatch(setLoadingState(true));
     try {
       const response = await post('/config-sync/export', partialDiff);
-      toggleNotification({ type: 'success', response });
+      toggleNotification({ type: 'success', message: response.data.message });
-      dispatch(getAllConfigDiff(toggleNotification));
+      dispatch(getAllConfigDiff(toggleNotification, formatMessage, get));
       dispatch(setLoadingState(false));
     } catch (err) {
-      toggleNotification({ type: 'warning', message: { id: 'notification.error' } });
+      toggleNotification({ type: 'warning', message: formatMessage({ id: 'notification.error' }) });
       dispatch(setLoadingState(false));
     }
   };
 }
 
-export function importAllConfig(partialDiff, force, toggleNotification) {
+export function importAllConfig(partialDiff, force, toggleNotification, formatMessage, post, get) {
   return async function(dispatch) {
-    const { post } = useFetchClient();
     dispatch(setLoadingState(true));
     try {
       const response = await post('/config-sync/import', {
         force,
         config: partialDiff,
       });
-      toggleNotification({ type: 'success', response });
+      toggleNotification({ type: 'success', message: response.data.message });
-      dispatch(getAllConfigDiff(toggleNotification));
+      dispatch(getAllConfigDiff(toggleNotification, formatMessage, get));
       dispatch(setLoadingState(false));
     } catch (err) {
-      toggleNotification({ type: 'warning', message: { id: 'notification.error' } });
+      toggleNotification({ type: 'warning', message: formatMessage({ id: 'notification.error' }) });
       dispatch(setLoadingState(false));
     }
   };
@@ -81,14 +76,13 @@ export function setLoadingState(value) {
   };
 }
 
-export function getAppEnv(toggleNotification) {
+export function getAppEnv(toggleNotification, formatMessage, get) {
   return async function(dispatch) {
-    const { get } = useFetchClient();
     try {
       const envVars = await get('/config-sync/app-env');
-      dispatch(setAppEnvInState(envVars));
+      dispatch(setAppEnvInState(envVars.data));
     } catch (err) {
-      toggleNotification({ type: 'warning', message: { id: 'notification.error' } });
+      toggleNotification({ type: 'warning', message: formatMessage({ id: 'notification.error' }) });
     }
   };
 }