mirror of
https://github.com/strapi/strapi.git
synced 2025-11-03 11:25:17 +00:00
Remove old components
Signed-off-by: soupette <cyril@strapi.io>
This commit is contained in:
soupette
parent
42534d3007
commit
e0aa76e435
@ -1,33 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'styled-components';
|
||||
|
||||
// You can see in the index.js file that I used the design system to do the UI integration but
|
||||
// sometimes, we need to create some "temporary" custom style to fix the baseline alignment.
|
||||
// -----
|
||||
// TODO : remove this component. I think that this kind components should not exist in Strapi.
|
||||
// I create it to temporary fix the baseline alignment until we have the design system.
|
||||
|
||||
const BaselineAlignment = styled.div`
|
||||
padding-top: ${({ size, top }) => top && size};
|
||||
padding-right: ${({ size, right }) => right && size};
|
||||
padding-bottom: ${({ size, bottom }) => bottom && size};
|
||||
padding-left: ${({ size, left }) => left && size};
|
||||
`;
|
||||
|
||||
BaselineAlignment.defaultProps = {
|
||||
bottom: false,
|
||||
left: false,
|
||||
right: false,
|
||||
size: '0',
|
||||
top: false,
|
||||
};
|
||||
|
||||
BaselineAlignment.propTypes = {
|
||||
bottom: PropTypes.bool,
|
||||
left: PropTypes.bool,
|
||||
right: PropTypes.bool,
|
||||
size: PropTypes.string,
|
||||
top: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default BaselineAlignment;
|
||||
@ -1,9 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Bloc = styled.div`
|
||||
background: ${({ theme }) => theme.main.colors.white};
|
||||
border-radius: ${({ theme }) => theme.main.sizes.borderRadius};
|
||||
box-shadow: 0 2px 4px #e3e9f3;
|
||||
`;
|
||||
|
||||
export default Bloc;
|
||||
@ -1,13 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
import { Container } from 'reactstrap';
|
||||
|
||||
const ContainerFluid = styled(Container)`
|
||||
padding: ${({ padding }) => padding};
|
||||
`;
|
||||
|
||||
ContainerFluid.defaultProps = {
|
||||
fluid: true,
|
||||
padding: '18px 30px 60px 30px !important',
|
||||
};
|
||||
|
||||
export default ContainerFluid;
|
||||
@ -1,60 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Flex, Padded, Text } from '@buffetjs/core';
|
||||
import { BaselineAlignment, LoadingIndicator, Row } from '@strapi/helper-plugin';
|
||||
import PropTypes from 'prop-types';
|
||||
import Bloc from '../Bloc';
|
||||
|
||||
const FormBloc = ({ children, actions, isLoading, title, subtitle }) => (
|
||||
<Bloc>
|
||||
<BaselineAlignment top size={title ? '18px' : '22px'} />
|
||||
<Padded left right size="sm">
|
||||
{isLoading ? (
|
||||
<>
|
||||
<LoadingIndicator />
|
||||
<BaselineAlignment bottom size="22px" />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{title && (
|
||||
<>
|
||||
<Padded left right size="xs">
|
||||
<Flex justifyContent="space-between">
|
||||
<Padded left right size="sm">
|
||||
<Text fontSize="lg" fontWeight="bold">
|
||||
{title}
|
||||
</Text>
|
||||
{subtitle && (
|
||||
<Text color="grey" lineHeight="1.8rem">
|
||||
{subtitle}
|
||||
</Text>
|
||||
)}
|
||||
</Padded>
|
||||
{actions}
|
||||
</Flex>
|
||||
</Padded>
|
||||
<BaselineAlignment top size="18px" />
|
||||
</>
|
||||
)}
|
||||
<Row>{children}</Row>
|
||||
</>
|
||||
)}
|
||||
</Padded>
|
||||
</Bloc>
|
||||
);
|
||||
|
||||
FormBloc.defaultProps = {
|
||||
actions: null,
|
||||
isLoading: false,
|
||||
subtitle: null,
|
||||
title: null,
|
||||
};
|
||||
|
||||
FormBloc.propTypes = {
|
||||
actions: PropTypes.any,
|
||||
children: PropTypes.node.isRequired,
|
||||
isLoading: PropTypes.bool,
|
||||
subtitle: PropTypes.string,
|
||||
title: PropTypes.string,
|
||||
};
|
||||
|
||||
export default FormBloc;
|
||||
@ -1,15 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
import { Button as Base } from '@buffetjs/core';
|
||||
|
||||
const Button = styled(Base)`
|
||||
width: 100%;
|
||||
text-transform: ${({ textTransform }) => textTransform};
|
||||
`;
|
||||
|
||||
Button.defaultProps = {
|
||||
color: 'primary',
|
||||
type: 'button',
|
||||
textTransform: 'none',
|
||||
};
|
||||
|
||||
export default Button;
|
||||
@ -1,40 +0,0 @@
|
||||
/**
|
||||
*
|
||||
* Header
|
||||
*
|
||||
*/
|
||||
|
||||
import styled from 'styled-components';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const Header = styled.div`
|
||||
width: 100%;
|
||||
height: ${props => props.theme.main.sizes.header.height};
|
||||
|
||||
position: fixed;
|
||||
z-index: 1040;
|
||||
left: ${props => props.theme.main.sizes.leftMenu.width};
|
||||
|
||||
box-shadow: 0 1px 2px 0 rgba(40, 42, 49, 0.16);
|
||||
background-color: ${props => props.theme.main.colors.white};
|
||||
|
||||
line-height: ${props => props.theme.main.sizes.header.height};
|
||||
`;
|
||||
|
||||
Header.defaultProps = {
|
||||
theme: {
|
||||
main: {
|
||||
colors: {},
|
||||
sizes: {
|
||||
header: {},
|
||||
leftMenu: {},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
Header.propTypes = {
|
||||
theme: PropTypes.object,
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@ -1,8 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
import { HeaderSearch as Base } from '@strapi/helper-plugin';
|
||||
|
||||
const HeaderSearch = styled(Base)`
|
||||
left: 32rem;
|
||||
`;
|
||||
|
||||
export default HeaderSearch;
|
||||
@ -1,99 +0,0 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import upperFirst from 'lodash/upperFirst';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { useIntl } from 'react-intl';
|
||||
import { useQuery } from '@strapi/helper-plugin';
|
||||
import StyledHeaderSearch from './HeaderSearch';
|
||||
|
||||
const HeaderSearch = ({ label, queryParameter }) => {
|
||||
const { formatMessage } = useIntl();
|
||||
const query = useQuery();
|
||||
const searchValue = query.get(queryParameter) || '';
|
||||
const [value, setValue] = useState(searchValue);
|
||||
const { push } = useHistory();
|
||||
const displayedLabel =
|
||||
typeof label === 'object'
|
||||
? formatMessage({ ...label, defaultMessage: label.defaultMessage || label.id })
|
||||
: label;
|
||||
const capitalizedLabel = upperFirst(displayedLabel);
|
||||
|
||||
useEffect(() => {
|
||||
if (searchValue === '') {
|
||||
// Synchronise the search
|
||||
handleClear();
|
||||
}
|
||||
}, [searchValue]);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = setTimeout(() => {
|
||||
let currentSearch = query;
|
||||
|
||||
if (value) {
|
||||
// Create a new search in order to remove the filters
|
||||
currentSearch = new URLSearchParams('');
|
||||
|
||||
// Keep the previous params sort, pageSize, page
|
||||
const pageSize = query.get('pageSize');
|
||||
const page = query.get('page');
|
||||
const sort = query.get('sort');
|
||||
|
||||
if (page) {
|
||||
currentSearch.set('page', page);
|
||||
}
|
||||
|
||||
if (pageSize) {
|
||||
currentSearch.set('pageSize', pageSize);
|
||||
}
|
||||
|
||||
if (sort) {
|
||||
currentSearch.set('sort', sort);
|
||||
}
|
||||
|
||||
currentSearch.set(queryParameter, encodeURIComponent(value));
|
||||
} else {
|
||||
currentSearch.delete(queryParameter);
|
||||
}
|
||||
|
||||
push({ search: currentSearch.toString() });
|
||||
}, 300);
|
||||
|
||||
return () => clearTimeout(handler);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [value]);
|
||||
|
||||
const handleChange = ({ target: { value } }) => {
|
||||
setValue(value);
|
||||
};
|
||||
|
||||
const handleClear = () => {
|
||||
setValue('');
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledHeaderSearch
|
||||
label={capitalizedLabel}
|
||||
name={queryParameter}
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
onClear={handleClear}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
HeaderSearch.defaultProps = {
|
||||
queryParameter: '_q',
|
||||
};
|
||||
|
||||
HeaderSearch.propTypes = {
|
||||
label: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.shape({
|
||||
id: PropTypes.string.isRequired,
|
||||
defaultMessage: PropTypes.string,
|
||||
}),
|
||||
]).isRequired,
|
||||
queryParameter: PropTypes.string,
|
||||
};
|
||||
|
||||
export default HeaderSearch;
|
||||
@ -1,38 +0,0 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { translatedErrors } from '@strapi/helper-plugin';
|
||||
import { useIntl } from 'react-intl';
|
||||
import { Inputs } from '@buffetjs/custom';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const IntlInput = ({ label: labelId, defaultMessage, error, ...rest }) => {
|
||||
const { formatMessage } = useIntl();
|
||||
const label = formatMessage({ id: labelId, defaultMessage: defaultMessage || labelId });
|
||||
const translatedError = error ? formatMessage(error) : null;
|
||||
const formattedErrors = useMemo(() => {
|
||||
return Object.keys(translatedErrors).reduce((acc, current) => {
|
||||
acc[current] = formatMessage({ id: translatedErrors[current] });
|
||||
|
||||
return acc;
|
||||
}, {});
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Inputs {...rest} label={label} error={translatedError} translatedErrors={formattedErrors} />
|
||||
);
|
||||
};
|
||||
|
||||
IntlInput.defaultProps = {
|
||||
defaultMessage: null,
|
||||
error: null,
|
||||
};
|
||||
|
||||
IntlInput.propTypes = {
|
||||
defaultMessage: PropTypes.string,
|
||||
error: PropTypes.shape({
|
||||
id: PropTypes.string,
|
||||
}),
|
||||
label: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default IntlInput;
|
||||
@ -1,147 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
> div {
|
||||
height: 6rem;
|
||||
line-height: 5.8rem;
|
||||
z-index: 999;
|
||||
> button {
|
||||
width: 100%;
|
||||
padding: 0 30px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
color: #333740;
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease-out;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: #333740;
|
||||
background-color: #fafafb !important;
|
||||
}
|
||||
|
||||
> i,
|
||||
> svg {
|
||||
margin-left: 10px;
|
||||
transition: transform 0.3s ease-out;
|
||||
|
||||
&[alt='true'] {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.localeDropdownContent {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
span {
|
||||
color: #333740;
|
||||
font-size: 13px;
|
||||
font-family: Lato;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
.localeDropdownMenu {
|
||||
min-width: 90px !important;
|
||||
max-height: 162px !important;
|
||||
overflow: auto !important;
|
||||
margin: 0 !important;
|
||||
padding: 0;
|
||||
line-height: 1.8rem;
|
||||
border: none !important;
|
||||
border-top-left-radius: 0 !important;
|
||||
border-top-right-radius: 0 !important;
|
||||
box-shadow: 0 1px 4px 0px rgba(40, 42, 49, 0.05);
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -1px;
|
||||
width: calc(100% + 1px);
|
||||
height: 3px;
|
||||
box-shadow: 0 1px 2px 0 rgba(40, 42, 49, 0.16);
|
||||
}
|
||||
|
||||
> button {
|
||||
height: 40px;
|
||||
padding: 0px 15px;
|
||||
line-height: 40px;
|
||||
color: #f75b1d;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background-color: #fafafb !important;
|
||||
border-radius: 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
> button:first-child {
|
||||
line-height: 50px;
|
||||
margin-bottom: 4px;
|
||||
&:hover,
|
||||
&:active {
|
||||
color: #333740;
|
||||
}
|
||||
}
|
||||
|
||||
> button:not(:first-child) {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
> i,
|
||||
> svg {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.localeDropdownMenuNotLogged {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
border: 1px solid #e3e9f3 !important;
|
||||
border-top: 0px !important;
|
||||
|
||||
button {
|
||||
padding-left: 17px;
|
||||
&:hover {
|
||||
background-color: #f7f8f8 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.localeToggleItem {
|
||||
img {
|
||||
max-height: 13.37px;
|
||||
margin-left: 9px;
|
||||
}
|
||||
&:active {
|
||||
color: black;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #fafafb !important;
|
||||
}
|
||||
}
|
||||
|
||||
.localeToggleItemActive {
|
||||
color: #333740 !important;
|
||||
}
|
||||
`;
|
||||
|
||||
export default Wrapper;
|
||||
@ -1,11 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const NavTopRightWrapper = styled.div`
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
z-index: 1050;
|
||||
`;
|
||||
|
||||
export default NavTopRightWrapper;
|
||||
@ -1,71 +0,0 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { Header as PluginHeader } from '@buffetjs/custom';
|
||||
import { isEqual } from 'lodash';
|
||||
import { useIntl } from 'react-intl';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const Header = ({
|
||||
content,
|
||||
initialData,
|
||||
isLoading,
|
||||
label,
|
||||
modifiedData,
|
||||
onCancel,
|
||||
showHeaderButtonLoader,
|
||||
}) => {
|
||||
const { formatMessage } = useIntl();
|
||||
const areButtonsDisabled = useMemo(() => {
|
||||
return isEqual(modifiedData, initialData);
|
||||
}, [initialData, modifiedData]);
|
||||
|
||||
/* eslint-disable indent */
|
||||
const headerProps = {
|
||||
actions: isLoading
|
||||
? []
|
||||
: [
|
||||
{
|
||||
onClick: onCancel,
|
||||
disabled: areButtonsDisabled,
|
||||
color: 'cancel',
|
||||
label: formatMessage({
|
||||
id: 'app.components.Button.reset',
|
||||
}),
|
||||
type: 'button',
|
||||
},
|
||||
{
|
||||
disabled: areButtonsDisabled,
|
||||
color: 'success',
|
||||
label: formatMessage({
|
||||
id: 'app.components.Button.save',
|
||||
}),
|
||||
type: 'submit',
|
||||
isLoading: showHeaderButtonLoader,
|
||||
},
|
||||
],
|
||||
title: {
|
||||
label,
|
||||
},
|
||||
content,
|
||||
};
|
||||
/* eslint-enable indent */
|
||||
|
||||
return <PluginHeader {...headerProps} isLoading={isLoading} />;
|
||||
};
|
||||
|
||||
Header.defaultProps = {
|
||||
content: null,
|
||||
label: '',
|
||||
showHeaderButtonLoader: false,
|
||||
};
|
||||
|
||||
Header.propTypes = {
|
||||
content: PropTypes.string,
|
||||
initialData: PropTypes.object.isRequired,
|
||||
isLoading: PropTypes.bool.isRequired,
|
||||
label: PropTypes.string,
|
||||
modifiedData: PropTypes.object.isRequired,
|
||||
onCancel: PropTypes.func.isRequired,
|
||||
showHeaderButtonLoader: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@ -1,2 +0,0 @@
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
export { default as Header } from './Header';
|
||||
@ -1,17 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import SettingsHeaderSearchContext from '../../contexts/SettingsHeaderSearchContext';
|
||||
|
||||
const SettingsHeaderSearchContextProvider = ({ children, ...rest }) => {
|
||||
return (
|
||||
<SettingsHeaderSearchContext.Provider value={rest.value}>
|
||||
{children}
|
||||
</SettingsHeaderSearchContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
SettingsHeaderSearchContextProvider.propTypes = {
|
||||
children: PropTypes.node.isRequired,
|
||||
};
|
||||
|
||||
export default SettingsHeaderSearchContextProvider;
|
||||
@ -1,25 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Col } from 'reactstrap';
|
||||
import PropTypes from 'prop-types';
|
||||
import IntlInput from '../IntlInput';
|
||||
|
||||
// TODO: remove this component
|
||||
const SizedInput = ({ size, ...rest }) => {
|
||||
return (
|
||||
<Col {...size}>
|
||||
<IntlInput {...rest} />
|
||||
</Col>
|
||||
);
|
||||
};
|
||||
|
||||
SizedInput.defaultProps = {
|
||||
size: {
|
||||
xs: '6',
|
||||
},
|
||||
};
|
||||
|
||||
SizedInput.propTypes = {
|
||||
size: PropTypes.object,
|
||||
};
|
||||
|
||||
export default SizedInput;
|
||||
@ -1,5 +0,0 @@
|
||||
import { createContext } from 'react';
|
||||
|
||||
const SettingsHeaderSearchContext = createContext({});
|
||||
|
||||
export default SettingsHeaderSearchContext;
|
||||
@ -5,7 +5,6 @@ export { default as useFetchPluginsFromMarketPlace } from './useFetchPluginsFrom
|
||||
export { default as useFetchRole } from './useFetchRole';
|
||||
export { default as useMenu } from './useMenu';
|
||||
export { default as useRolesList } from './useRolesList';
|
||||
export { default as useSettingsHeaderSearchContext } from './useSettingsHeaderSearchContext';
|
||||
export { default as useSettingsMenu } from './useSettingsMenu';
|
||||
export { default as useSettingsForm } from './useSettingsForm';
|
||||
export { default as usePermissionsDataManager } from './usePermissionsDataManager';
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
import { useContext } from 'react';
|
||||
import SettingsHeaderSearchContext from '../../contexts/SettingsHeaderSearchContext';
|
||||
|
||||
const useSettingsHeaderSearchContext = () => useContext(SettingsHeaderSearchContext);
|
||||
|
||||
export default useSettingsHeaderSearchContext;
|
||||
@ -28,9 +28,9 @@ const MarketplacePage = lazy(() =>
|
||||
);
|
||||
const NotFoundPage = lazy(() => import('../NotFoundPage'));
|
||||
|
||||
// const ProfilePage = lazy(() =>
|
||||
// import(/* webpackChunkName: "Admin_profilePage" */ '../ProfilePage')
|
||||
// );
|
||||
const ProfilePage = lazy(() =>
|
||||
import(/* webpackChunkName: "Admin_profilePage" */ '../ProfilePage')
|
||||
);
|
||||
const SettingsPage = lazy(() =>
|
||||
import(/* webpackChunkName: "Admin_settingsPage" */ '../SettingsPage')
|
||||
);
|
||||
@ -84,8 +84,9 @@ const Admin = () => {
|
||||
<Suspense fallback={<LoadingIndicatorPage />}>
|
||||
<Switch>
|
||||
<Route path="/" component={HomePage} exact />
|
||||
<Route path="/me" component={ProfilePage} exact />
|
||||
{/* TODO */}
|
||||
{/* <Route path="/me" component={ProfilePage} exact />
|
||||
{/* <
|
||||
<Route path="/content-manager" component={CM} />
|
||||
|
||||
<Route path="/plugins/content-type-builder" component={CTB} />
|
||||
|
||||
@ -1,10 +1,5 @@
|
||||
import styled from 'styled-components';
|
||||
import ContainerFluid from '../../components/ContainerFluid';
|
||||
|
||||
const Wrapper = styled(ContainerFluid)`
|
||||
> div:first-child {
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
`;
|
||||
const Wrapper = styled.div``;
|
||||
|
||||
export default Wrapper;
|
||||
|
||||
@ -1,159 +1,160 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { BaselineAlignment, auth, Select, Option } from '@strapi/helper-plugin';
|
||||
import { Padded, Text } from '@buffetjs/core';
|
||||
import { Col } from 'reactstrap';
|
||||
import { get } from 'lodash';
|
||||
import { useIntl } from 'react-intl';
|
||||
import ContainerFluid from '../../components/ContainerFluid';
|
||||
import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvider';
|
||||
import PageTitle from '../../components/PageTitle';
|
||||
import SizedInput from '../../components/SizedInput';
|
||||
import { Header } from '../../components/Settings';
|
||||
import FormBloc from '../../components/FormBloc';
|
||||
import { useSettingsForm } from '../../hooks';
|
||||
import ProfilePageLabel from './components';
|
||||
import { form, schema } from './utils';
|
||||
// import React, { useMemo } from 'react';
|
||||
// import { BaselineAlignment, auth, Select, Option } from '@strapi/helper-plugin';
|
||||
// import { Padded, Text } from '@buffetjs/core';
|
||||
// import { Col } from 'reactstrap';
|
||||
// import { get } from 'lodash';
|
||||
// import { useIntl } from 'react-intl';
|
||||
// import ContainerFluid from '../../components/ContainerFluid';
|
||||
// import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvider';
|
||||
// import PageTitle from '../../components/PageTitle';
|
||||
// import SizedInput from '../../components/SizedInput';
|
||||
// import FormBloc from '../../components/FormBloc';
|
||||
// import { useSettingsForm } from '../../hooks';
|
||||
// import ProfilePageLabel from './components';
|
||||
// import { form, schema } from './utils';
|
||||
|
||||
const ProfilePage = () => {
|
||||
const { changeLocale, localeNames } = useLocalesProvider();
|
||||
const { formatMessage } = useIntl();
|
||||
// const ProfilePage = () => {
|
||||
// const { changeLocale, localeNames } = useLocalesProvider();
|
||||
// const { formatMessage } = useIntl();
|
||||
|
||||
const onSubmitSuccessCb = data => {
|
||||
changeLocale(data.preferedLanguage);
|
||||
auth.setUserInfo(data);
|
||||
};
|
||||
// const onSubmitSuccessCb = data => {
|
||||
// changeLocale(data.preferedLanguage);
|
||||
// auth.setUserInfo(data);
|
||||
// };
|
||||
|
||||
const [
|
||||
{ formErrors, initialData, isLoading, modifiedData, showHeaderLoader, showHeaderButtonLoader },
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
_,
|
||||
{ handleCancel, handleChange, handleSubmit, setField },
|
||||
] = useSettingsForm('/admin/users/me', schema, onSubmitSuccessCb, [
|
||||
'email',
|
||||
'firstname',
|
||||
'lastname',
|
||||
'username',
|
||||
'preferedLanguage',
|
||||
]);
|
||||
// const [
|
||||
// { formErrors, initialData, isLoading, modifiedData, showHeaderLoader, showHeaderButtonLoader },
|
||||
// // eslint-disable-next-line no-unused-vars
|
||||
// _,
|
||||
// { handleCancel, handleChange, handleSubmit, setField },
|
||||
// ] = useSettingsForm('/admin/users/me', schema, onSubmitSuccessCb, [
|
||||
// 'email',
|
||||
// 'firstname',
|
||||
// 'lastname',
|
||||
// 'username',
|
||||
// 'preferedLanguage',
|
||||
// ]);
|
||||
|
||||
const headerLabel = useMemo(() => {
|
||||
const userInfos = auth.getUserInfo();
|
||||
// const headerLabel = useMemo(() => {
|
||||
// const userInfos = auth.getUserInfo();
|
||||
|
||||
if (modifiedData) {
|
||||
return modifiedData.username || `${modifiedData.firstname} ${modifiedData.lastname}`;
|
||||
}
|
||||
// if (modifiedData) {
|
||||
// return modifiedData.username || `${modifiedData.firstname} ${modifiedData.lastname}`;
|
||||
// }
|
||||
|
||||
return userInfos.username || `${userInfos.firstname} ${userInfos.lastname}`;
|
||||
}, [modifiedData]);
|
||||
// return userInfos.username || `${userInfos.firstname} ${userInfos.lastname}`;
|
||||
// }, [modifiedData]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageTitle title="User profile" />
|
||||
<form onSubmit={handleSubmit}>
|
||||
<ContainerFluid padding="18px 30px 0 30px">
|
||||
<Header
|
||||
isLoading={showHeaderLoader}
|
||||
initialData={initialData}
|
||||
label={headerLabel}
|
||||
modifiedData={modifiedData}
|
||||
onCancel={handleCancel}
|
||||
showHeaderButtonLoader={showHeaderButtonLoader}
|
||||
/>
|
||||
<BaselineAlignment top size="3px" />
|
||||
{/* Experience block */}
|
||||
<FormBloc
|
||||
isLoading={isLoading}
|
||||
title={formatMessage({ id: 'Settings.profile.form.section.profile.title' })}
|
||||
>
|
||||
{Object.keys(form).map(key => (
|
||||
<SizedInput
|
||||
{...form[key]}
|
||||
key={key}
|
||||
error={formErrors[key]}
|
||||
name={key}
|
||||
onChange={handleChange}
|
||||
value={get(modifiedData, key, '')}
|
||||
/>
|
||||
))}
|
||||
</FormBloc>
|
||||
<BaselineAlignment top size="2px" />
|
||||
// return (
|
||||
// <>
|
||||
// <PageTitle title="User profile" />
|
||||
// <form onSubmit={handleSubmit}>
|
||||
// <ContainerFluid padding="18px 30px 0 30px">
|
||||
// <Header
|
||||
// isLoading={showHeaderLoader}
|
||||
// initialData={initialData}
|
||||
// label={headerLabel}
|
||||
// modifiedData={modifiedData}
|
||||
// onCancel={handleCancel}
|
||||
// showHeaderButtonLoader={showHeaderButtonLoader}
|
||||
// />
|
||||
// <BaselineAlignment top size="3px" />
|
||||
// {/* Experience block */}
|
||||
// <FormBloc
|
||||
// isLoading={isLoading}
|
||||
// title={formatMessage({ id: 'Settings.profile.form.section.profile.title' })}
|
||||
// >
|
||||
// {Object.keys(form).map(key => (
|
||||
// <SizedInput
|
||||
// {...form[key]}
|
||||
// key={key}
|
||||
// error={formErrors[key]}
|
||||
// name={key}
|
||||
// onChange={handleChange}
|
||||
// value={get(modifiedData, key, '')}
|
||||
// />
|
||||
// ))}
|
||||
// </FormBloc>
|
||||
// <BaselineAlignment top size="2px" />
|
||||
|
||||
{/* Password block */}
|
||||
{!isLoading && (
|
||||
<>
|
||||
<Padded top size="md">
|
||||
<FormBloc
|
||||
title={formatMessage({ id: 'Settings.profile.form.section.password.title' })}
|
||||
>
|
||||
<SizedInput
|
||||
label="Auth.form.password.label"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
validations={{}}
|
||||
error={formErrors.password}
|
||||
name="password"
|
||||
onChange={handleChange}
|
||||
value={get(modifiedData, 'password', '')}
|
||||
/>
|
||||
// {/* Password block */}
|
||||
// {!isLoading && (
|
||||
// <>
|
||||
// <Padded top size="md">
|
||||
// <FormBloc
|
||||
// title={formatMessage({ id: 'Settings.profile.form.section.password.title' })}
|
||||
// >
|
||||
// <SizedInput
|
||||
// label="Auth.form.password.label"
|
||||
// type="password"
|
||||
// autoComplete="new-password"
|
||||
// validations={{}}
|
||||
// error={formErrors.password}
|
||||
// name="password"
|
||||
// onChange={handleChange}
|
||||
// value={get(modifiedData, 'password', '')}
|
||||
// />
|
||||
|
||||
<SizedInput
|
||||
label="Auth.form.confirmPassword.label"
|
||||
type="password"
|
||||
validations={{}}
|
||||
error={formErrors.confirmPassword}
|
||||
name="confirmPassword"
|
||||
onChange={handleChange}
|
||||
value={get(modifiedData, 'confirmPassword', '')}
|
||||
/>
|
||||
</FormBloc>
|
||||
</Padded>
|
||||
// <SizedInput
|
||||
// label="Auth.form.confirmPassword.label"
|
||||
// type="password"
|
||||
// validations={{}}
|
||||
// error={formErrors.confirmPassword}
|
||||
// name="confirmPassword"
|
||||
// onChange={handleChange}
|
||||
// value={get(modifiedData, 'confirmPassword', '')}
|
||||
// />
|
||||
// </FormBloc>
|
||||
// </Padded>
|
||||
|
||||
<BaselineAlignment top size="13px" />
|
||||
// <BaselineAlignment top size="13px" />
|
||||
|
||||
{/* Interface block */}
|
||||
<Padded top size="smd">
|
||||
<FormBloc
|
||||
title={formatMessage({ id: 'Settings.profile.form.section.experience.title' })}
|
||||
>
|
||||
<ProfilePageLabel htmlFor="">
|
||||
{formatMessage({
|
||||
id: 'Settings.profile.form.section.experience.interfaceLanguage',
|
||||
})}
|
||||
</ProfilePageLabel>
|
||||
<Col xs="6">
|
||||
<Select
|
||||
aria-labelledby="interface-language"
|
||||
selectedValue={get(modifiedData, 'preferedLanguage')}
|
||||
onChange={nextLocaleCode => setField('preferedLanguage', nextLocaleCode)}
|
||||
>
|
||||
{Object.keys(localeNames).map(language => {
|
||||
const langName = localeNames[language];
|
||||
// {/* Interface block */}
|
||||
// <Padded top size="smd">
|
||||
// <FormBloc
|
||||
// title={formatMessage({ id: 'Settings.profile.form.section.experience.title' })}
|
||||
// >
|
||||
// <ProfilePageLabel htmlFor="">
|
||||
// {formatMessage({
|
||||
// id: 'Settings.profile.form.section.experience.interfaceLanguage',
|
||||
// })}
|
||||
// </ProfilePageLabel>
|
||||
// <Col xs="6">
|
||||
// <Select
|
||||
// aria-labelledby="interface-language"
|
||||
// selectedValue={get(modifiedData, 'preferedLanguage')}
|
||||
// onChange={nextLocaleCode => setField('preferedLanguage', nextLocaleCode)}
|
||||
// >
|
||||
// {Object.keys(localeNames).map(language => {
|
||||
// const langName = localeNames[language];
|
||||
|
||||
return (
|
||||
<Option value={language} key={language}>
|
||||
{langName}
|
||||
</Option>
|
||||
);
|
||||
})}
|
||||
</Select>
|
||||
// return (
|
||||
// <Option value={language} key={language}>
|
||||
// {langName}
|
||||
// </Option>
|
||||
// );
|
||||
// })}
|
||||
// </Select>
|
||||
|
||||
<Padded size="sm" top bottom>
|
||||
<Text color="grey">
|
||||
{formatMessage({
|
||||
id: 'Settings.profile.form.section.experience.interfaceLanguage.hint',
|
||||
})}
|
||||
</Text>
|
||||
</Padded>
|
||||
</Col>
|
||||
</FormBloc>
|
||||
</Padded>
|
||||
</>
|
||||
)}
|
||||
</ContainerFluid>
|
||||
</form>
|
||||
<BaselineAlignment bottom size="80px" />
|
||||
</>
|
||||
);
|
||||
};
|
||||
// <Padded size="sm" top bottom>
|
||||
// <Text color="grey">
|
||||
// {formatMessage({
|
||||
// id: 'Settings.profile.form.section.experience.interfaceLanguage.hint',
|
||||
// })}
|
||||
// </Text>
|
||||
// </Padded>
|
||||
// </Col>
|
||||
// </FormBloc>
|
||||
// </Padded>
|
||||
// </>
|
||||
// )}
|
||||
// </ContainerFluid>
|
||||
// </form>
|
||||
// <BaselineAlignment bottom size="80px" />
|
||||
// </>
|
||||
// );
|
||||
// };
|
||||
|
||||
export default ProfilePage;
|
||||
// export default ProfilePage;
|
||||
|
||||
export default () => 'TODO profile page';
|
||||
|
||||
@ -9,14 +9,12 @@
|
||||
// Here's the file: strapi/docs/3.0.0-beta.x/plugin-development/frontend-settings-api.md
|
||||
// IF THE DOC IS NOT UPDATED THE PULL REQUEST WILL NOT BE MERGED
|
||||
|
||||
import React, { memo, useMemo, useState } from 'react';
|
||||
import React, { memo, useMemo } from 'react';
|
||||
import { LoadingIndicatorPage, useStrapiApp } from '@strapi/helper-plugin';
|
||||
import { Switch, Redirect, Route, useParams } from 'react-router-dom';
|
||||
import { Layout } from '@strapi/parts/Layout';
|
||||
import { useIntl } from 'react-intl';
|
||||
import HeaderSearch from '../../components/HeaderSearch';
|
||||
import PageTitle from '../../components/PageTitle';
|
||||
import SettingsSearchHeaderProvider from '../../components/SettingsHeaderSearchContextProvider';
|
||||
import { useSettingsMenu } from '../../hooks';
|
||||
import { createRoute, makeUniqueRoutes } from '../../utils';
|
||||
import ApplicationInfosPage from '../ApplicationInfosPage';
|
||||
@ -27,9 +25,6 @@ function SettingsPage() {
|
||||
const { settingId } = useParams();
|
||||
const { settings } = useStrapiApp();
|
||||
const { formatMessage } = useIntl();
|
||||
// TODO
|
||||
const [headerSearchState, setShowHeaderSearchState] = useState({ show: false, label: '' });
|
||||
|
||||
const { isLoading, menu } = useSettingsMenu();
|
||||
|
||||
// Creates the admin routes
|
||||
@ -41,18 +36,6 @@ function SettingsPage() {
|
||||
|
||||
const pluginsRoutes = createSectionsRoutes(settings);
|
||||
|
||||
const toggleHeaderSearch = label =>
|
||||
setShowHeaderSearchState(prev => {
|
||||
if (prev.show) {
|
||||
return {
|
||||
show: false,
|
||||
label: '',
|
||||
};
|
||||
}
|
||||
|
||||
return { label, show: true };
|
||||
});
|
||||
|
||||
// Since the useSettingsMenu hook can make API calls in order to check the links permissions
|
||||
// We need to add a loading state to prevent redirecting the user while permissions are being checked
|
||||
if (isLoading) {
|
||||
@ -69,19 +52,15 @@ function SettingsPage() {
|
||||
});
|
||||
|
||||
return (
|
||||
<SettingsSearchHeaderProvider value={{ toggleHeaderSearch }}>
|
||||
<Layout sideNav={<SettingsNav menu={menu} />}>
|
||||
<PageTitle title={settingTitle} />
|
||||
<Layout sideNav={<SettingsNav menu={menu} />}>
|
||||
<PageTitle title={settingTitle} />
|
||||
|
||||
<Switch>
|
||||
<Route path="/settings/application-infos" component={ApplicationInfosPage} exact />
|
||||
{adminRoutes}
|
||||
{pluginsRoutes}
|
||||
</Switch>
|
||||
|
||||
{headerSearchState.show && <HeaderSearch label={headerSearchState.label} />}
|
||||
</Layout>
|
||||
</SettingsSearchHeaderProvider>
|
||||
<Switch>
|
||||
<Route path="/settings/application-infos" component={ApplicationInfosPage} exact />
|
||||
{adminRoutes}
|
||||
{pluginsRoutes}
|
||||
</Switch>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user