yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-11 07:39:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

feedback refacto

Browse Source
This commit is contained in:
ronronscelestes 2022-03-28 11:34:45 +02:00
parent 68a0de36e4
commit 0e98689c6d
7 changed files with 32 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/core/admin/admin/src/components/ConfigurationsProvider/index.js
View File

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

11
packages/core/admin/admin/src/components/ConfigurationsProvider/reducer.js
View File

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

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

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

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

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

4
packages/core/admin/admin/src/components/LeftMenu/index.js
View File

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

6
packages/core/admin/admin/src/hooks/useConfigurations/index.js
View File

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

6
packages/core/admin/admin/src/pages/App/index.js
View File

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