feedback refacto v2

packages/core/admin/admin/src/components/ConfigurationsProvider/index.js

@@ -1,4 +1,4 @@
-import React, { useReducer } from 'react';
+import React, { useReducer, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { ConfigurationsContext } from '../../contexts';
 import reducer, { initialState } from './reducer';
@@ -6,27 +6,29 @@ import reducer, { initialState } from './reducer';
 const ConfigurationsProvider = ({
   children,
   authLogo,
-  menuLogo: defaultMenuLogo,
+  menuLogo,
   showReleaseNotification,
   showTutorials,
 }) => {
-  const [{ customMenuLogo }, dispatch] = useReducer(reducer, initialState);
+  const [{ logos }, dispatch] = useReducer(reducer, initialState);
 
-  const setCustomMenuLogo = logo => {
+  const setCustomLogo = (logo, logoType) => {
     return dispatch({
       type: 'SET_CUSTOM_LOGO',
-      logoType: 'customMenuLogo',
+      logoType,
-      logo,
+      value: logo,
     });
   };
+  const setCustomLogoRef = useRef(setCustomLogo);
 
   return (
     <ConfigurationsContext.Provider
       value={{
-        authLogo,
+        logos: {
-        customMenuLogo,
+          menu: { custom: logos.menu, default: menuLogo },
-        defaultMenuLogo,
+          auth: { custom: null, default: authLogo },
-        setCustomMenuLogo,
+        },
+        setCustomLogo: setCustomLogoRef.current,
         showReleaseNotification,
         showTutorials,
       }}

packages/core/admin/admin/src/components/ConfigurationsProvider/reducer.js

@@ -8,16 +8,16 @@
 import produce from 'immer';
 
 const initialState = {
-  customMenuLogo: null,
+  logos: {
+    menu: null,
+  },
 };
 
 const reducer = (state = initialState, action) =>
   produce(state, draftState => {
     switch (action.type) {
       case 'SET_CUSTOM_LOGO': {
-        if (action.logo !== undefined && draftState[action.logoType] !== undefined) {
+        draftState.logos[action.logoType] = action.value;
-          draftState[action.logoType] = action.logo;
-        }
         break;
       }
       default: {

packages/core/admin/admin/src/components/ConfigurationsProvider/tests/index.test.js

@@ -25,14 +25,17 @@ describe('ConfigurationsProvider', () => {
 
   it('should update customMenuLogo with setCustomMenuLogo', () => {
     const Test = () => {
-      const { setCustomMenuLogo, customMenuLogo } = useConfigurations();
+      const {
+        setCustomLogo,
+        logos: { menu },
+      } = useConfigurations();
 
       return (
         <div>
-          <button type="button" onClick={() => setCustomMenuLogo('michka.jpg')}>
+          <button type="button" onClick={() => setCustomLogo('michka.jpg', 'menu')}>
             Change logo
           </button>
-          <div>{customMenuLogo}</div>
+          <div>{menu.custom}</div>
         </div>
       );
     };
@@ -54,13 +57,15 @@ describe('ConfigurationsProvider', () => {
     expect(queryByText('strapi-menu.jpg')).not.toBeInTheDocument();
   });
 
-  it('should give access to defaultMenuLogo', () => {
+  it.only('should give access to defaultMenuLogo', () => {
     const Test = () => {
-      const { defaultMenuLogo } = useConfigurations();
+      const {
+        logos: { menu },
+      } = useConfigurations();
 
       return (
         <div>
-          <div>{defaultMenuLogo}</div>
+          <div>{menu.default}</div>
         </div>
       );
     };

packages/core/admin/admin/src/components/ConfigurationsProvider/tests/reducer.test.js

@@ -13,15 +13,17 @@ describe('ConfigurationsProvider | reducer', () => {
     expect(reducer(state, action)).toEqual(initialState);
   });
 
-  it('should change logo if logoType exists', () => {
+  it.only('should change logo if logoType exists', () => {
     const action = {
       type: 'SET_CUSTOM_LOGO',
-      logoType: 'customMenuLogo',
+      logoType: 'menu',
-      logo: 'strapi.jpeg',
+      value: 'strapi.jpeg',
     };
 
     const expected = {
-      customMenuLogo: 'strapi.jpeg',
+      logos: {
+        menu: 'strapi.jpeg',
+      },
     };
 
     expect(reducer(state, action)).toEqual(expected);
@@ -31,8 +33,7 @@ describe('ConfigurationsProvider | reducer', () => {
     const action = {
       type: 'SET_CUSTOM_LOGO',
       logoType: 'totoLogo',
-      logo: 'strapi.jpeg',
+      value: 'strapi.jpeg',
-      isCustom: false,
     };
 
     expect(reducer(state, action)).toEqual(initialState);

packages/core/admin/admin/src/components/LeftMenu/index.js

@@ -53,7 +53,9 @@ const LinkUser = styled(Link)`
 const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
   const buttonRef = useRef();
   const [userLinksVisible, setUserLinksVisible] = useState(false);
-  const { customMenuLogo, defaultMenuLogo } = useConfigurations();
+  const {
+    logos: { menu },
+  } = useConfigurations();
   const [condensed, setCondensed] = usePersistentState('navbar-condensed', false);
   const { userDisplayName } = useAppInfos();
   const { formatMessage } = useIntl();
@@ -93,7 +95,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
           defaultMessage: 'Workplace',
         })}
         title={menuTitle}
-        icon={<img src={customMenuLogo || defaultMenuLogo} alt={menuTitle} />}
+        icon={<img src={menu.custom || menu.default} alt={menuTitle} />}
       />
 
       <Divider />

packages/core/admin/admin/src/components/UnauthenticatedLogo/index.js

@@ -7,9 +7,11 @@ const Img = styled.img`
 `;
 
 const Logo = () => {
-  const { authLogo } = useConfigurations();
+  const {
+    logos: { auth },
+  } = useConfigurations();
 
-  return <Img src={authLogo} aria-hidden alt="" />;
+  return <Img src={auth.default} aria-hidden alt="" />;
 };
 
 export default Logo;

packages/core/admin/admin/src/hooks/useConfigurations/index.js

@@ -1,11 +1,10 @@
-import { useContext, useRef } from 'react';
+import { useContext } from 'react';
 import { ConfigurationsContext } from '../../contexts';
 
 const useConfigurations = () => {
-  const { setCustomMenuLogo, ...rest } = useContext(ConfigurationsContext);
+  const context = useContext(ConfigurationsContext);
-  const setCustomMenuLogoRef = useRef(setCustomMenuLogo);
 
-  return { setCustomMenuLogo: setCustomMenuLogoRef.current, ...rest };
+  return context;
 };
 
 export default useConfigurations;

packages/core/admin/admin/src/pages/App/index.js

@@ -30,7 +30,7 @@ const AuthenticatedApp = lazy(() =>
 
 function App() {
   const toggleNotification = useNotification();
-  const { setCustomMenuLogo } = useConfigurations();
+  const { setCustomLogo } = useConfigurations();
   const { formatMessage } = useIntl();
   const [{ isLoading, hasAdmin, uuid }, setState] = useState({ isLoading: true, hasAdmin: false });
 
@@ -71,7 +71,7 @@ function App() {
           data: { hasAdmin, uuid, menuLogo },
         } = await request('/admin/init', { method: 'GET' });
 
-        setCustomMenuLogo(menuLogo);
+        setCustomLogo(menuLogo, 'menu');
 
         if (uuid) {
           try {
@@ -103,7 +103,7 @@ function App() {
     };
 
     getData();
-  }, [toggleNotification, setCustomMenuLogo]);
+  }, [toggleNotification, setCustomLogo]);
 
   const setHasAdmin = hasAdmin => setState(prev => ({ ...prev, hasAdmin }));
 

packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js

@@ -8,6 +8,12 @@ import * as yup from 'yup';
 import { createMemoryHistory } from 'history';
 import BaseLogin from '../BaseLogin';
 
+jest.mock('../../../../../hooks/useConfigurations', () => () => ({
+  logos: {
+    auth: { custom: 'customAuthLogo.png', default: 'defaultAuthLogo.png' },
+  },
+}));
+
 describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
   it('should render and match the snapshot', () => {
     const history = createMemoryHistory();
@@ -667,6 +673,7 @@ describe('ADMIN | PAGES | AUTH | BaseLogin', () => {
                 alt=""
                 aria-hidden="true"
                 class="c5"
+                src="defaultAuthLogo.png"
               />
               <div
                 class="c6"

packages/core/admin/admin/src/pages/AuthPage/components/Oops/tests/index.test.js

@@ -9,9 +9,14 @@ import Oops from '..';
 
 jest.mock('../../../../../components/LocalesProvider/useLocalesProvider', () => () => ({
   changeLocale: () => {},
-  localeNames: ['en'],
+  localeNames: { en: 'English' },
   messages: ['test'],
 }));
+jest.mock('../../../../../hooks/useConfigurations', () => () => ({
+  logos: {
+    auth: { custom: 'customAuthLogo.png', default: 'defaultAuthLogo.png' },
+  },
+}));
 
 describe('ADMIN | PAGES | AUTH | Oops', () => {
   it('should render and match the snapshot', () => {
@@ -369,11 +374,14 @@ describe('ADMIN | PAGES | AUTH | Oops', () => {
                 aria-expanded="false"
                 aria-haspopup="true"
                 class="c2 c3"
+                label="English"
                 type="button"
               >
                 <span
                   class="c4 c5"
-                />
+                >
+                  English
+                </span>
                 <div
                   aria-hidden="true"
                   class="c6 c7"
@@ -421,6 +429,7 @@ describe('ADMIN | PAGES | AUTH | Oops', () => {
                   alt=""
                   aria-hidden="true"
                   class="c15"
+                  src="defaultAuthLogo.png"
                 />
                 <div
                   class="c16"

packages/core/admin/admin/src/pages/AuthPage/components/Register/tests/index.test.js

@@ -10,9 +10,14 @@ import Register from '..';
 
 jest.mock('../../../../../components/LocalesProvider/useLocalesProvider', () => () => ({
   changeLocale: () => {},
-  localeNames: ['en'],
+  localeNames: { en: 'English' },
   messages: ['test'],
 }));
+jest.mock('../../../../../hooks/useConfigurations', () => () => ({
+  logos: {
+    auth: { custom: 'customAuthLogo.png', default: 'defaultAuthLogo.png' },
+  },
+}));
 jest.mock('@strapi/helper-plugin', () => ({
   ...jest.requireActual('@strapi/helper-plugin'),
   useNotification: () => jest.fn({}),
@@ -25,7 +30,13 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
       <IntlProvider locale="en" messages={{}} textComponent="span">
         <ThemeProvider theme={lightTheme}>
           <Router history={history}>
-            <Register fieldsToDisable={[]} noSignin onSubmit={() => {}} schema={yup.object()} />
+            <Register
+              authType="register-admin"
+              fieldsToDisable={[]}
+              noSignin
+              onSubmit={() => {}}
+              schema={yup.object()}
+            />
           </Router>
         </ThemeProvider>
       </IntlProvider>
@@ -813,11 +824,14 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
                 aria-expanded="false"
                 aria-haspopup="true"
                 class="c2 c3"
+                label="English"
                 type="button"
               >
                 <span
                   class="c4 c5"
-                />
+                >
+                  English
+                </span>
                 <div
                   aria-hidden="true"
                   class="c6 c7"
@@ -869,6 +883,7 @@ describe('ADMIN | PAGES | AUTH | Register', () => {
                     alt=""
                     aria-hidden="true"
                     class="c15"
+                    src="defaultAuthLogo.png"
                   />
                   <div
                     class="c16"

packages/core/admin/admin/src/pages/AuthPage/components/ResetPassword/tests/index.test.js

@@ -10,9 +10,14 @@ import ResetPassword from '..';
 
 jest.mock('../../../../../components/LocalesProvider/useLocalesProvider', () => () => ({
   changeLocale: () => {},
-  localeNames: ['en'],
+  localeNames: { en: 'English' },
   messages: ['test'],
 }));
+jest.mock('../../../../../hooks/useConfigurations', () => () => ({
+  logos: {
+    auth: { custom: 'customAuthLogo.png', default: 'defaultAuthLogo.png' },
+  },
+}));
 jest.mock('@strapi/helper-plugin', () => ({
   ...jest.requireActual('@strapi/helper-plugin'),
   useNotification: () => jest.fn({}),
@@ -690,11 +695,14 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
                 aria-expanded="false"
                 aria-haspopup="true"
                 class="c2 c3"
+                label="English"
                 type="button"
               >
                 <span
                   class="c4 c5"
-                />
+                >
+                  English
+                </span>
                 <div
                   aria-hidden="true"
                   class="c6 c7"
@@ -746,6 +754,7 @@ describe('ADMIN | PAGES | AUTH | ResetPassword', () => {
                     alt=""
                     aria-hidden="true"
                     class="c15"
+                    src="defaultAuthLogo.png"
                   />
                   <div
                     class="c16"

packages/core/admin/admin/src/pages/UseCasePage/tests/index.test.js

@@ -11,6 +11,11 @@ jest.mock('../../../components/LocalesProvider/useLocalesProvider', () => () =>
   localeNames: ['en'],
   messages: ['test'],
 }));
+jest.mock('../../../hooks/useConfigurations', () => () => ({
+  logos: {
+    auth: { custom: 'customAuthLogo.png', default: 'defaultAuthLogo.png' },
+  },
+}));
 
 jest.mock('@strapi/helper-plugin', () => ({
   ...jest.requireActual('@strapi/helper-plugin'),
@@ -776,6 +781,7 @@ describe('Admin | UseCasePage', () => {
                       alt=""
                       aria-hidden="true"
                       class="c15"
+                      src="defaultAuthLogo.png"
                     />
                     <div
                       class="c16"