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:
vjrj 2026-07-21 13:54:02 +02:00
parent 5661e129fb
commit 4ddaa0d8ec
9 changed files with 17 additions and 51 deletions

View file

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

View file

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

View file

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

View file

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

View file

@ -25,9 +25,6 @@ Reconnect.propTypes = {
authenticated: PropTypes.bool.isRequired authenticated: PropTypes.bool.isRequired
}; };
Reconnect.defaultProps = {
};
export default withTranslation()(Reconnect); export default withTranslation()(Reconnect);
/* /*

View file

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

View file

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

View file

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

View file

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