Chore: Reorganize ee hooks

packages/core/admin/ee/admin/hooks/index.js

@@ -1,4 +0,0 @@
-// eslint-disable-next-line import/prefer-default-export
-export { default as useAuthProviders } from './useAuthProviders';
-export { default as useLicenseLimitNotification } from './useLicenseLimitNotification';
-export { useLicenseLimits } from './useLicenseLimits';

packages/core/admin/ee/admin/hooks/tests/useLicenseLimitNotification.js

@@ -3,8 +3,8 @@ import React from 'react';
 import { renderHook } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 
-import useLicenseLimitNotification from '..';
+import { useLicenseLimitNotification } from '../useLicenseLimitNotification';
-import { useLicenseLimits } from '../../useLicenseLimits';
+import { useLicenseLimits } from '../useLicenseLimits';
 
 const baseLicenseInfo = {
   enforcementUserCount: 5,

packages/core/admin/ee/admin/hooks/tests/useLicenseLimits.test.js

@@ -8,7 +8,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { Provider } from 'react-redux';
 import { createStore } from 'redux';
 
-import { useLicenseLimits } from '..';
+import { useLicenseLimits } from '../useLicenseLimits';
 
 const server = setupServer(
   ...[

packages/core/admin/ee/admin/hooks/useAuthProviders.js

@@ -0,0 +1,18 @@
+import { useFetchClient } from '@strapi/helper-plugin';
+import { useQuery } from 'react-query';
+
+export const useAuthProviders = (queryOptions = {}) => {
+  const { get } = useFetchClient();
+
+  const { data, isLoading } = useQuery(
+    ['ee', 'providers'],
+    async () => {
+      const { data } = await get('/admin/providers');
+
+      return data;
+    },
+    queryOptions
+  );
+
+  return { data, isLoading };
+};

packages/core/admin/ee/admin/hooks/useAuthProviders/index.js

@@ -1,50 +0,0 @@
-import { useEffect, useReducer } from 'react';
-
-import { useFetchClient, useNotification } from '@strapi/helper-plugin';
-
-import reducer, { initialState } from './reducer';
-
-const useAuthProviders = ({ ssoEnabled }) => {
-  const [state, dispatch] = useReducer(reducer, initialState);
-  const toggleNotification = useNotification();
-  const { get } = useFetchClient();
-
-  useEffect(() => {
-    const fetchAuthProviders = async () => {
-      try {
-        if (!ssoEnabled) {
-          dispatch({
-            type: 'GET_DATA_SUCCEEDED',
-            data: [],
-          });
-
-          return;
-        }
-
-        const { data } = await get('/admin/providers');
-
-        dispatch({
-          type: 'GET_DATA_SUCCEEDED',
-          data,
-        });
-      } catch (err) {
-        console.error(err);
-
-        dispatch({
-          type: 'GET_DATA_ERROR',
-        });
-
-        toggleNotification({
-          type: 'warning',
-          message: { id: 'notification.error' },
-        });
-      }
-    };
-
-    fetchAuthProviders();
-  }, [get, ssoEnabled, toggleNotification]);
-
-  return state;
-};
-
-export default useAuthProviders;

packages/core/admin/ee/admin/hooks/useAuthProviders/reducer.js

@@ -1,26 +0,0 @@
-/* eslint-disable consistent-return */
-import produce from 'immer';
-
-export const initialState = {
-  data: [],
-  isLoading: true,
-};
-
-const reducer = (state, action) =>
-  produce(state, (draftState) => {
-    switch (action.type) {
-      case 'GET_DATA_SUCCEEDED': {
-        draftState.data = action.data;
-        draftState.isLoading = false;
-        break;
-      }
-      case 'GET_DATA_ERROR': {
-        draftState.isLoading = false;
-        break;
-      }
-      default:
-        return draftState;
-    }
-  });
-
-export default reducer;

packages/core/admin/ee/admin/hooks/useAuthProviders/tests/reducer.test.js

@@ -1,72 +0,0 @@
-import reducer from '../reducer';
-
-describe('ADMIN | HOOKS | USEFETCHROLE | reducer', () => {
-  describe('DEFAULT_ACTION', () => {
-    it('should return the initialState', () => {
-      const state = {
-        test: true,
-      };
-
-      expect(reducer(state, {})).toEqual(state);
-    });
-  });
-
-  describe('GET_DATA_ERROR', () => {
-    it('should set isLoading to false is an error occured', () => {
-      const action = {
-        type: 'GET_DATA_ERROR',
-      };
-      const initialState = {
-        data: [],
-        isLoading: true,
-      };
-      const expected = {
-        data: [],
-        isLoading: false,
-      };
-
-      expect(reducer(initialState, action)).toEqual(expected);
-    });
-  });
-
-  describe('GET_DATA_SUCCEEDED', () => {
-    it('should return the state with the data', () => {
-      const action = {
-        type: 'GET_DATA_SUCCEEDED',
-        data: [
-          {
-            uid: 'provider1',
-            displayName: 'Provider 1',
-            icon: 'icon1',
-          },
-          {
-            uid: 'provider2',
-            displayName: 'Provider 2',
-            icon: 'icon2',
-          },
-        ],
-      };
-      const initialState = {
-        data: [],
-        isLoading: true,
-      };
-      const expected = {
-        data: [
-          {
-            uid: 'provider1',
-            displayName: 'Provider 1',
-            icon: 'icon1',
-          },
-          {
-            uid: 'provider2',
-            displayName: 'Provider 2',
-            icon: 'icon2',
-          },
-        ],
-        isLoading: false,
-      };
-
-      expect(reducer(initialState, action)).toEqual(expected);
-    });
-  });
-});

packages/core/admin/ee/admin/hooks/useLicenseLimitNotification.js

@@ -10,14 +10,14 @@ import isNil from 'lodash/isNil';
 import { useIntl } from 'react-intl';
 import { useLocation } from 'react-router-dom';
 
-import { useLicenseLimits } from '../useLicenseLimits';
+import { useLicenseLimits } from './useLicenseLimits';
 
 const STORAGE_KEY_PREFIX = 'strapi-notification-seat-limit';
 
 const BILLING_STRAPI_CLOUD_URL = 'https://cloud.strapi.io/profile/billing';
 const BILLING_SELF_HOSTED_URL = 'https://strapi.io/billing/request-seats';
 
-const useLicenseLimitNotification = () => {
+export const useLicenseLimitNotification = () => {
   const { formatMessage } = useIntl();
   let { license, isError, isLoading } = useLicenseLimits();
   const toggleNotification = useNotification();
@@ -97,5 +97,3 @@ const useLicenseLimitNotification = () => {
     isError,
   ]);
 };
-
-export default useLicenseLimitNotification;

packages/core/admin/ee/admin/hooks/useLicenseLimits.js

@@ -19,7 +19,10 @@ export function useLicenseLimits({ enabled } = { enabled: true }) {
     }
   );
 
-  const license = data ?? {};
+  // this needs memoization, because a default value of `{}`
+  // would lead to infinite rendering loops, when used as
+  // effect dependency
+  const license = React.useMemo(() => data ?? {}, [data]);
 
   const getFeature = React.useCallback(
     (name) => {

packages/core/admin/ee/admin/hooks/useLicenseLimits/index.js

@@ -1 +0,0 @@
-export { useLicenseLimits } from './useLicenseLimits';

packages/core/admin/ee/admin/pages/AuthPage/components/Login/index.js

@@ -7,7 +7,7 @@ import styled from 'styled-components';
 
 import UnauthenticatedLayout from '../../../../../../admin/src/layouts/UnauthenticatedLayout';
 import BaseLogin from '../../../../../../admin/src/pages/AuthPage/components/Login/BaseLogin';
-import { useAuthProviders } from '../../../../hooks';
+import { useAuthProviders } from '../../../../hooks/useAuthProviders';
 import SSOProviders from '../Providers/SSOProviders';
 
 const DividerFull = styled(Divider)`
@@ -15,11 +15,15 @@ const DividerFull = styled(Divider)`
 `;
 
 export const LoginEE = (loginProps) => {
-  const ssoEnabled = window.strapi.features.isEnabled(window.strapi.features.SSO);
-  const { isLoading, data: providers } = useAuthProviders({ ssoEnabled });
   const { formatMessage } = useIntl();
+  const { isLoading, data: providers } = useAuthProviders({
+    enabled: window.strapi.features.isEnabled(window.strapi.features.SSO),
+  });
 
-  if (!ssoEnabled || (!isLoading && providers.length === 0)) {
+  if (
+    !window.strapi.features.isEnabled(window.strapi.features.SSO) ||
+    (!isLoading && providers.length === 0)
+  ) {
     return (
       <UnauthenticatedLayout>
         <BaseLogin {...loginProps} />

packages/core/admin/ee/admin/pages/AuthPage/components/Providers/index.js

@@ -11,7 +11,7 @@ import UnauthenticatedLayout, {
   Column,
   LayoutContent,
 } from '../../../../../../admin/src/layouts/UnauthenticatedLayout';
-import { useAuthProviders } from '../../../../hooks';
+import { useAuthProviders } from '../../../../hooks/useAuthProviders';
 
 import SSOProviders from './SSOProviders';
 
@@ -20,17 +20,20 @@ const DividerFull = styled(Divider)`
 `;
 
 const Providers = () => {
-  const ssoEnabled = window.strapi.features.isEnabled(window.strapi.features.SSO);
-
   const { push } = useHistory();
   const { formatMessage } = useIntl();
-  const { isLoading, data: providers } = useAuthProviders({ ssoEnabled });
+  const { isLoading, data: providers } = useAuthProviders({
+    enabled: window.strapi.features.isEnabled(window.strapi.features.SSO),
+  });
 
   const handleClick = () => {
     push('/auth/login');
   };
 
-  if (!ssoEnabled || (!isLoading && providers.length === 0)) {
+  if (
+    !window.strapi.features.isEnabled(window.strapi.features.SSO) ||
+    (!isLoading && providers.length === 0)
+  ) {
     return <Redirect to="/auth/login" />;
   }
 

packages/core/admin/ee/admin/pages/HomePage/index.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 // eslint-disable-next-line import/no-cycle
 import { HomePageCE } from '../../../../admin/src/pages/HomePage';
-import { useLicenseLimitNotification } from '../../hooks';
+import { useLicenseLimitNotification } from '../../hooks/useLicenseLimitNotification';
 
 export function HomePageEE() {
   useLicenseLimitNotification();

packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/pages/CreateView/CreateView.js

@@ -17,7 +17,7 @@ import { useHistory } from 'react-router-dom';
 
 import { useContentTypes } from '../../../../../../../../admin/src/hooks/useContentTypes';
 import { useInjectReducer } from '../../../../../../../../admin/src/hooks/useInjectReducer';
-import { useLicenseLimits } from '../../../../../../hooks';
+import { useLicenseLimits } from '../../../../../../hooks/useLicenseLimits';
 import { addStage, resetWorkflow } from '../../actions';
 import * as Layout from '../../components/Layout';
 import * as LimitsModal from '../../components/LimitsModal';

packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/pages/EditView/EditView.js

@@ -19,7 +19,7 @@ import { useParams } from 'react-router-dom';
 import { useContentTypes } from '../../../../../../../../admin/src/hooks/useContentTypes';
 import { useInjectReducer } from '../../../../../../../../admin/src/hooks/useInjectReducer';
 import { selectAdminPermissions } from '../../../../../../../../admin/src/pages/App/selectors';
-import { useLicenseLimits } from '../../../../../../hooks';
+import { useLicenseLimits } from '../../../../../../hooks/useLicenseLimits';
 import { resetWorkflow, setWorkflow } from '../../actions';
 import * as Layout from '../../components/Layout';
 import * as LimitsModal from '../../components/LimitsModal';

packages/core/admin/ee/admin/pages/SettingsPage/pages/ReviewWorkflows/pages/ListView/ListView.js

@@ -35,7 +35,7 @@ import styled from 'styled-components';
 
 import { useContentTypes } from '../../../../../../../../admin/src/hooks/useContentTypes';
 import { selectAdminPermissions } from '../../../../../../../../admin/src/pages/App/selectors';
-import { useLicenseLimits } from '../../../../../../hooks';
+import { useLicenseLimits } from '../../../../../../hooks/useLicenseLimits';
 import * as Layout from '../../components/Layout';
 import * as LimitsModal from '../../components/LimitsModal';
 import { CHARGEBEE_WORKFLOW_ENTITLEMENT_NAME } from '../../constants';

packages/core/admin/ee/admin/pages/SettingsPage/pages/Users/ListPage/CreateAction/index.js

@@ -6,7 +6,7 @@ import isNil from 'lodash/isNil';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import { useLicenseLimits } from '../../../../../../hooks';
+import { useLicenseLimits } from '../../../../../../hooks/useLicenseLimits';
 
 export const CreateActionEE = ({ onClick }) => {
   const { formatMessage } = useIntl();

packages/core/admin/ee/admin/pages/SettingsPage/pages/Users/ListPage/index.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 // eslint-disable-next-line import/no-cycle
 import { UserListPageCE } from '../../../../../../../admin/src/pages/SettingsPage/pages/Users/ListPage';
-import { useLicenseLimitNotification } from '../../../../../hooks';
+import { useLicenseLimitNotification } from '../../../../../hooks/useLicenseLimitNotification';
 
 function UserListPageEE() {
   useLicenseLimitNotification();