cleanup: defaultProps -> JS default params on our function components
React 19 drops defaultProps on function components. Converted the 9 of
ours that used it (App, Navigation, ReSendEmail, Reconnect, OAuthLoginButton,
PageHeader, Page, EditDocument, EditSubscription) to destructured default
params; App defaults userId/emailAddress in its withTracker instead (it
spreads {...props} widely). Class components keep defaultProps (still
supported). The only defaultProps warnings left are from the react-share
npm package (CreatedButton/Icon), not our code. REST smoke byte-identical.
This commit is contained in:
parent
5661e129fb
commit
4ddaa0d8ec
9 changed files with 17 additions and 51 deletions
|
|
@ -15,7 +15,7 @@ import './Navigation.scss';
|
||||||
|
|
||||||
// removed class: fixed-top
|
// removed class: fixed-top
|
||||||
// md instead of lg: no menu in medium
|
// md instead of lg: no menu in medium
|
||||||
const Navigation = props => (
|
const Navigation = ({ name = '', ...props }) => (
|
||||||
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
|
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||||
<div style={{ overflow: 'hidden' } /* for ribbon */} className="container">
|
<div style={{ overflow: 'hidden' } /* for ribbon */} className="container">
|
||||||
{/* <BetaRibbon /> */}
|
{/* <BetaRibbon /> */}
|
||||||
|
|
@ -47,17 +47,13 @@ const Navigation = props => (
|
||||||
</LinkContainer>
|
</LinkContainer>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
{!props.authenticated ? <PublicNavigation /> : <AuthenticatedNavigation {...props} />}
|
{!props.authenticated ? <PublicNavigation /> : <AuthenticatedNavigation name={name} {...props} />}
|
||||||
{/* </Navbar.Collapse> */}
|
{/* </Navbar.Collapse> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
|
|
||||||
Navigation.defaultProps = {
|
|
||||||
name: ''
|
|
||||||
};
|
|
||||||
|
|
||||||
Navigation.propTypes = {
|
Navigation.propTypes = {
|
||||||
t: PropTypes.func.isRequired,
|
t: PropTypes.func.isRequired,
|
||||||
authenticated: PropTypes.bool.isRequired
|
authenticated: PropTypes.bool.isRequired
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,12 @@ const serviceLabel = {
|
||||||
google: <span><Icon icon="google" /> <Trans parent="span">Iniciar sesión con Google</Trans></span>,
|
google: <span><Icon icon="google" /> <Trans parent="span">Iniciar sesión con Google</Trans></span>,
|
||||||
};
|
};
|
||||||
|
|
||||||
const OAuthLoginButton = ({ service, callback }) => (
|
const defaultCallback = (error) => {
|
||||||
|
if (error) Bert.alert(T9n.get(`error.accounts.${error.message}`), 'danger');
|
||||||
|
// Bert.alert(error.message, 'danger');
|
||||||
|
};
|
||||||
|
|
||||||
|
const OAuthLoginButton = ({ service, callback = defaultCallback }) => (
|
||||||
<button
|
<button
|
||||||
className={`btn btn-block btn-raised btn-danger OAuthLoginButton OAuthLoginButton-${service}`}
|
className={`btn btn-block btn-raised btn-danger OAuthLoginButton OAuthLoginButton-${service}`}
|
||||||
type="button"
|
type="button"
|
||||||
|
|
@ -48,13 +53,6 @@ const OAuthLoginButton = ({ service, callback }) => (
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
|
|
||||||
OAuthLoginButton.defaultProps = {
|
|
||||||
callback: (error) => {
|
|
||||||
if (error) Bert.alert(T9n.get(`error.accounts.${error.message}`), 'danger');
|
|
||||||
// Bert.alert(error.message, 'danger');
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
OAuthLoginButton.propTypes = {
|
OAuthLoginButton.propTypes = {
|
||||||
service: PropTypes.string.isRequired,
|
service: PropTypes.string.isRequired,
|
||||||
callback: PropTypes.func,
|
callback: PropTypes.func,
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
|
||||||
|
|
||||||
import './PageHeader.scss';
|
import './PageHeader.scss';
|
||||||
|
|
||||||
const PageHeader = ({ title, subtitle }) => (
|
const PageHeader = ({ title, subtitle = '' }) => (
|
||||||
<div className="PageHeader">
|
<div className="PageHeader">
|
||||||
<div className="PageHeader-container">
|
<div className="PageHeader-container">
|
||||||
<h1>{title}</h1>
|
<h1>{title}</h1>
|
||||||
|
|
@ -12,10 +12,6 @@ const PageHeader = ({ title, subtitle }) => (
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
PageHeader.defaultProps = {
|
|
||||||
subtitle: '',
|
|
||||||
};
|
|
||||||
|
|
||||||
PageHeader.propTypes = {
|
PageHeader.propTypes = {
|
||||||
title: PropTypes.string.isRequired,
|
title: PropTypes.string.isRequired,
|
||||||
subtitle: PropTypes.string,
|
subtitle: PropTypes.string,
|
||||||
|
|
|
||||||
|
|
@ -14,17 +14,12 @@ const handleResendVerificationEmail = (emailAddress, t) => {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const ReSendEmail = props => (
|
const ReSendEmail = ({ userId = '', emailAddress = '', emailVerified, t }) => (
|
||||||
<div>
|
<div>
|
||||||
{props.userId && !props.emailVerified ? <Alert className="verify-email text-center"><p><Trans i18nKey="verifyEmail" values={{ email: props.emailAddress }} /> <Button variant="link" onClick={() => handleResendVerificationEmail(props.emailAddress, props.t)} href="#"><Trans parent="span">Reenviar email de verificación</Trans></Button></p></Alert> : ''}
|
{userId && !emailVerified ? <Alert className="verify-email text-center"><p><Trans i18nKey="verifyEmail" values={{ email: emailAddress }} /> <Button variant="link" onClick={() => handleResendVerificationEmail(emailAddress, t)} href="#"><Trans parent="span">Reenviar email de verificación</Trans></Button></p></Alert> : ''}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
ReSendEmail.defaultProps = {
|
|
||||||
userId: '',
|
|
||||||
emailAddress: '',
|
|
||||||
};
|
|
||||||
|
|
||||||
ReSendEmail.propTypes = {
|
ReSendEmail.propTypes = {
|
||||||
loading: PropTypes.bool.isRequired,
|
loading: PropTypes.bool.isRequired,
|
||||||
userId: PropTypes.string,
|
userId: PropTypes.string,
|
||||||
|
|
|
||||||
|
|
@ -25,9 +25,6 @@ Reconnect.propTypes = {
|
||||||
authenticated: PropTypes.bool.isRequired
|
authenticated: PropTypes.bool.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
Reconnect.defaultProps = {
|
|
||||||
};
|
|
||||||
|
|
||||||
export default withTranslation()(Reconnect);
|
export default withTranslation()(Reconnect);
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
|
||||||
|
|
@ -165,11 +165,6 @@ const App = props => (
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
App.defaultProps = {
|
|
||||||
userId: '',
|
|
||||||
emailAddress: ''
|
|
||||||
};
|
|
||||||
|
|
||||||
App.propTypes = {
|
App.propTypes = {
|
||||||
loading: PropTypes.bool.isRequired,
|
loading: PropTypes.bool.isRequired,
|
||||||
i18nReady: PropTypes.object.isRequired,
|
i18nReady: PropTypes.object.isRequired,
|
||||||
|
|
@ -197,8 +192,9 @@ export default withTracker(() => {
|
||||||
authenticated: !loggingIn && !!userId,
|
authenticated: !loggingIn && !!userId,
|
||||||
name: name || emailAddress,
|
name: name || emailAddress,
|
||||||
roles: (user && user.roles) || [],
|
roles: (user && user.roles) || [],
|
||||||
userId,
|
// default to '' here (was App.defaultProps, unsupported on fn components in React 19)
|
||||||
emailAddress,
|
userId: userId || '',
|
||||||
|
emailAddress: emailAddress || '',
|
||||||
emailVerified: user && user.emails ? user && user.emails && user.emails[0].verified : true
|
emailVerified: user && user.emails ? user && user.emails && user.emails[0].verified : true
|
||||||
};
|
};
|
||||||
})(App);
|
})(App);
|
||||||
|
|
|
||||||
|
|
@ -6,17 +6,13 @@ import Documents from '../../../api/Documents/Documents';
|
||||||
import DocumentEditor from '../../components/DocumentEditor/DocumentEditor';
|
import DocumentEditor from '../../components/DocumentEditor/DocumentEditor';
|
||||||
import NotFound from '../NotFound/NotFound';
|
import NotFound from '../NotFound/NotFound';
|
||||||
|
|
||||||
const EditDocument = ({ doc, history }) => (doc ? (
|
const EditDocument = ({ doc = null, history }) => (doc ? (
|
||||||
<div className="EditDocument">
|
<div className="EditDocument">
|
||||||
<h4 className="page-header">{`Editing "${doc.title}"`}</h4>
|
<h4 className="page-header">{`Editing "${doc.title}"`}</h4>
|
||||||
<DocumentEditor doc={doc} history={history} />
|
<DocumentEditor doc={doc} history={history} />
|
||||||
</div>
|
</div>
|
||||||
) : <NotFound />);
|
) : <NotFound />);
|
||||||
|
|
||||||
EditDocument.defaultProps = {
|
|
||||||
doc: null
|
|
||||||
};
|
|
||||||
|
|
||||||
EditDocument.propTypes = {
|
EditDocument.propTypes = {
|
||||||
doc: PropTypes.object,
|
doc: PropTypes.object,
|
||||||
history: PropTypes.object.isRequired
|
history: PropTypes.object.isRequired
|
||||||
|
|
|
||||||
|
|
@ -6,17 +6,13 @@ import Subscriptions from '../../../api/Subscriptions/Subscriptions';
|
||||||
import SubscriptionEditor from '../../components/SubscriptionEditor/SubscriptionEditor';
|
import SubscriptionEditor from '../../components/SubscriptionEditor/SubscriptionEditor';
|
||||||
import NotFound from '../NotFound/NotFound';
|
import NotFound from '../NotFound/NotFound';
|
||||||
|
|
||||||
const EditSubscription = ({ doc, history }) => (doc ? (
|
const EditSubscription = ({ doc = null, history }) => (doc ? (
|
||||||
<div className="EditSubscription">
|
<div className="EditSubscription">
|
||||||
<h4 className="page-header">{`Editing "${doc.title}"`}</h4>
|
<h4 className="page-header">{`Editing "${doc.title}"`}</h4>
|
||||||
<SubscriptionEditor doc={doc} history={history} />
|
<SubscriptionEditor doc={doc} history={history} />
|
||||||
</div>
|
</div>
|
||||||
) : <NotFound />);
|
) : <NotFound />);
|
||||||
|
|
||||||
EditSubscription.defaultProps = {
|
|
||||||
doc: null
|
|
||||||
};
|
|
||||||
|
|
||||||
EditSubscription.propTypes = {
|
EditSubscription.propTypes = {
|
||||||
doc: PropTypes.object,
|
doc: PropTypes.object,
|
||||||
history: PropTypes.object.isRequired
|
history: PropTypes.object.isRequired
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ import { Helmet } from 'react-helmet-async';
|
||||||
|
|
||||||
import './Page.scss';
|
import './Page.scss';
|
||||||
|
|
||||||
const Page = ({ title, subtitle, content }) => (
|
const Page = ({ title, subtitle = '', content }) => (
|
||||||
<div className="Page">
|
<div className="Page">
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<meta charSet="utf-8" />
|
<meta charSet="utf-8" />
|
||||||
|
|
@ -21,10 +21,6 @@ const Page = ({ title, subtitle, content }) => (
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
Page.defaultProps = {
|
|
||||||
subtitle: ''
|
|
||||||
};
|
|
||||||
|
|
||||||
Page.propTypes = {
|
Page.propTypes = {
|
||||||
title: PropTypes.string.isRequired,
|
title: PropTypes.string.isRequired,
|
||||||
subtitle: PropTypes.string,
|
subtitle: PropTypes.string,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue