From 6f591874dd5f05d584b1ec83e23e96c5858e9486 Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Wed, 30 Mar 2022 10:58:02 +0200 Subject: [PATCH] feedback refacto v2 --- .../ConfigurationsProvider/index.js | 22 ++++++++++--------- .../ConfigurationsProvider/reducer.js | 8 +++---- .../tests/index.test.js | 17 +++++++++----- .../tests/reducer.test.js | 13 ++++++----- .../admin/src/components/LeftMenu/index.js | 6 +++-- .../components/UnauthenticatedLogo/index.js | 6 +++-- .../src/hooks/useConfigurations/index.js | 7 +++--- .../core/admin/admin/src/pages/App/index.js | 6 ++--- .../components/Login/tests/BaseLogin.test.js | 7 ++++++ .../components/Oops/tests/index.test.js | 13 +++++++++-- .../components/Register/tests/index.test.js | 21 +++++++++++++++--- .../ResetPassword/tests/index.test.js | 13 +++++++++-- .../src/pages/UseCasePage/tests/index.test.js | 6 +++++ 13 files changed, 101 insertions(+), 44 deletions(-) diff --git a/packages/core/admin/admin/src/components/ConfigurationsProvider/index.js b/packages/core/admin/admin/src/components/ConfigurationsProvider/index.js index d6aef41916..39c7c30b63 100644 --- a/packages/core/admin/admin/src/components/ConfigurationsProvider/index.js +++ b/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', - logo, + logoType, + value: logo, }); }; + const setCustomLogoRef = useRef(setCustomLogo); return ( produce(state, draftState => { switch (action.type) { case 'SET_CUSTOM_LOGO': { - if (action.logo !== undefined && draftState[action.logoType] !== undefined) { - draftState[action.logoType] = action.logo; - } + draftState.logos[action.logoType] = action.value; break; } default: { diff --git a/packages/core/admin/admin/src/components/ConfigurationsProvider/tests/index.test.js b/packages/core/admin/admin/src/components/ConfigurationsProvider/tests/index.test.js index c4575da31a..e86a0886a8 100644 --- a/packages/core/admin/admin/src/components/ConfigurationsProvider/tests/index.test.js +++ b/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 (
- -
{customMenuLogo}
+
{menu.custom}
); }; @@ -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 (
-
{defaultMenuLogo}
+
{menu.default}
); }; diff --git a/packages/core/admin/admin/src/components/ConfigurationsProvider/tests/reducer.test.js b/packages/core/admin/admin/src/components/ConfigurationsProvider/tests/reducer.test.js index dec9408b40..a3d6139582 100644 --- a/packages/core/admin/admin/src/components/ConfigurationsProvider/tests/reducer.test.js +++ b/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', - logo: 'strapi.jpeg', + logoType: 'menu', + 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', - isCustom: false, + value: 'strapi.jpeg', }; expect(reducer(state, action)).toEqual(initialState); diff --git a/packages/core/admin/admin/src/components/LeftMenu/index.js b/packages/core/admin/admin/src/components/LeftMenu/index.js index ccab996c5c..ed657a63d8 100644 --- a/packages/core/admin/admin/src/components/LeftMenu/index.js +++ b/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={{menuTitle}} + icon={{menuTitle}} /> diff --git a/packages/core/admin/admin/src/components/UnauthenticatedLogo/index.js b/packages/core/admin/admin/src/components/UnauthenticatedLogo/index.js index 19ec56b658..de990d312b 100644 --- a/packages/core/admin/admin/src/components/UnauthenticatedLogo/index.js +++ b/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 ; + return ; }; export default Logo; diff --git a/packages/core/admin/admin/src/hooks/useConfigurations/index.js b/packages/core/admin/admin/src/hooks/useConfigurations/index.js index ecd76f0a25..2c276eed65 100644 --- a/packages/core/admin/admin/src/hooks/useConfigurations/index.js +++ b/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 setCustomMenuLogoRef = useRef(setCustomMenuLogo); + const context = useContext(ConfigurationsContext); - return { setCustomMenuLogo: setCustomMenuLogoRef.current, ...rest }; + return context; }; export default useConfigurations; diff --git a/packages/core/admin/admin/src/pages/App/index.js b/packages/core/admin/admin/src/pages/App/index.js index 8047fb4a64..1c9769cf4b 100644 --- a/packages/core/admin/admin/src/pages/App/index.js +++ b/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 })); diff --git a/packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js b/packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js index f76d25e4f8..693eee2a85 100644 --- a/packages/core/admin/admin/src/pages/AuthPage/components/Login/tests/BaseLogin.test.js +++ b/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" />
() => ({ 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" > + > + English +