feedback refacto

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

@@ -10,14 +10,13 @@ const ConfigurationsProvider = ({
   showReleaseNotification,
   showTutorials,
 }) => {
-  const [{ menuLogo }, dispatch] = useReducer(reducer, initialState);
+  const [{ customMenuLogo }, dispatch] = useReducer(reducer, initialState);
 
-  const setMenuLogo = logo => {
+  const setCustomMenuLogo = logo => {
     return dispatch({
-      type: 'CHANGE_LOGO',
-      logoType: 'menuLogo',
-      logo: logo || defaultMenuLogo,
-      isCustom: !!logo,
+      type: 'SET_CUSTOM_LOGO',
+      logoType: 'customMenuLogo',
+      logo,
     });
   };
 
@@ -25,8 +24,9 @@ const ConfigurationsProvider = ({
     <ConfigurationsContext.Provider
       value={{
         authLogo,
-        menuLogo,
-        setMenuLogo,
+        customMenuLogo,
+        defaultMenuLogo,
+        setCustomMenuLogo,
         showReleaseNotification,
         showTutorials,
       }}

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

@@ -8,18 +8,15 @@
 import produce from 'immer';
 
 const initialState = {
-  menuLogo: {
-    logo: undefined,
-    isCustom: false,
-  },
+  customMenuLogo: null,
 };
 
 const reducer = (state = initialState, action) =>
   produce(state, draftState => {
     switch (action.type) {
-      case 'CHANGE_LOGO': {
-        if (draftState[action.logoType]) {
-          draftState[action.logoType] = { logo: action.logo, isCustom: action.isCustom };
+      case 'SET_CUSTOM_LOGO': {
+        if (action.logo !== undefined && draftState[action.logoType] !== undefined) {
+          draftState[action.logoType] = action.logo;
         }
         break;
       }

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

@@ -3,7 +3,7 @@ import { render, fireEvent, screen } from '@testing-library/react';
 import ConfigurationsProvider from '../index';
 import { useConfigurations } from '../../../hooks';
 
-describe('LanguageProvider', () => {
+describe('ConfigurationsProvider', () => {
   it('should not crash', () => {
     const { container } = render(
       <ConfigurationsProvider
@@ -23,16 +23,16 @@ describe('LanguageProvider', () => {
     `);
   });
 
-  it('should update menuLogo with new logo when calling setMenuLogo with logo', () => {
+  it('should update customMenuLogo with setCustomMenuLogo', () => {
     const Test = () => {
-      const { setMenuLogo, menuLogo } = useConfigurations();
+      const { setCustomMenuLogo, customMenuLogo } = useConfigurations();
 
       return (
         <div>
-          <button type="button" onClick={() => setMenuLogo('michka.jpg')}>
+          <button type="button" onClick={() => setCustomMenuLogo('michka.jpg')}>
             Change logo
           </button>
-          <div>{menuLogo.logo}</div>
+          <div>{customMenuLogo}</div>
         </div>
       );
     };
@@ -54,16 +54,13 @@ describe('LanguageProvider', () => {
     expect(queryByText('strapi-menu.jpg')).not.toBeInTheDocument();
   });
 
-  it('should update menuLogo with defaultLogo when calling setMenuLogo without logo', () => {
+  it('should give access to defaultMenuLogo', () => {
     const Test = () => {
-      const { setMenuLogo, menuLogo } = useConfigurations();
+      const { defaultMenuLogo } = useConfigurations();
 
       return (
         <div>
-          <button type="button" onClick={() => setMenuLogo()}>
-            Change logo
-          </button>
-          <div>{menuLogo.logo}</div>
+          <div>{defaultMenuLogo}</div>
         </div>
       );
     };
@@ -79,8 +76,6 @@ describe('LanguageProvider', () => {
       </ConfigurationsProvider>
     );
 
-    fireEvent.click(screen.getByText('Change logo'));
-
     expect(queryByText('strapi-menu.jpg')).toBeInTheDocument();
   });
 });

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

@@ -15,17 +15,13 @@ describe('ConfigurationsProvider | reducer', () => {
 
   it('should change logo if logoType exists', () => {
     const action = {
-      type: 'CHANGE_LOGO',
-      logoType: 'menuLogo',
+      type: 'SET_CUSTOM_LOGO',
+      logoType: 'customMenuLogo',
       logo: 'strapi.jpeg',
-      isCustom: false,
     };
 
     const expected = {
-      menuLogo: {
-        logo: 'strapi.jpeg',
-        isCustom: false,
-      },
+      customMenuLogo: 'strapi.jpeg',
     };
 
     expect(reducer(state, action)).toEqual(expected);
@@ -33,7 +29,7 @@ describe('ConfigurationsProvider | reducer', () => {
 
   it('should return state if logoType does not exist', () => {
     const action = {
-      type: 'CHANGE_LOGO',
+      type: 'SET_CUSTOM_LOGO',
       logoType: 'totoLogo',
       logo: 'strapi.jpeg',
       isCustom: false,

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

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

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

@@ -2,10 +2,10 @@ import { useContext, useRef } from 'react';
 import { ConfigurationsContext } from '../../contexts';
 
 const useConfigurations = () => {
-  const { setMenuLogo, ...rest } = useContext(ConfigurationsContext);
-  const setMenuLogoRef = useRef(setMenuLogo);
+  const { setCustomMenuLogo, ...rest } = useContext(ConfigurationsContext);
+  const setCustomMenuLogoRef = useRef(setCustomMenuLogo);
 
-  return { setMenuLogo: setMenuLogoRef.current, ...rest };
+  return { setCustomMenuLogo: setCustomMenuLogoRef.current, ...rest };
 };
 
 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 { setMenuLogo } = useConfigurations();
+  const { setCustomMenuLogo } = 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' });
 
-        setMenuLogo(menuLogo);
+        setCustomMenuLogo(menuLogo);
 
         if (uuid) {
           try {
@@ -103,7 +103,7 @@ function App() {
     };
 
     getData();
-  }, [toggleNotification, setMenuLogo]);
+  }, [toggleNotification, setCustomMenuLogo]);
 
   const setHasAdmin = hasAdmin => setState(prev => ({ ...prev, hasAdmin }));