yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-02 19:04:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

feedback refacto v2

Browse Source
This commit is contained in:
ronronscelestes 2022-03-30 10:58:02 +02:00
parent 0e98689c6d
commit 6f591874dd
13 changed files with 101 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 (
<ConfigurationsContext.Provider
value={{
authLogo,
customMenuLogo,
defaultMenuLogo,
setCustomMenuLogo,
logos: {
menu: { custom: logos.menu, default: menuLogo },
auth: { custom: null, default: authLogo },
},
setCustomLogo: setCustomLogoRef.current,
showReleaseNotification,
showTutorials,
}}

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

@ -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[action.logoType] = action.logo;
}
draftState.logos[action.logoType] = action.value;
break;
}
default: {

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

@ -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>
);
};

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

@ -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);

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

@ -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 />

6
packages/core/admin/admin/src/components/UnauthenticatedLogo/index.js
View File

@ -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;

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

@ -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;

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

@ -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 }));

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

@ -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"

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

@ -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"

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

@ -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"

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

@ -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"

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

@ -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"