Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove class component usage #18933

Merged
merged 3 commits into from
Jun 16, 2022
Merged

Remove class component usage #18933

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
157ae4b
Convert MenuItem to function component
emilpaw Jun 16, 2022
9ad4bbd
Convert ErrorLoading to function component
emilpaw Jun 16, 2022
99424f5
Convert PageNotFound to function component
emilpaw Jun 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 7 additions & 9 deletions generators/client/templates/react/src/main/webapp/app/shared/error/error-loading.tsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,12 @@ import React from 'react';
import { Translate } from 'react-jhipster';
import { Alert } from 'reactstrap';

class ErrorLoading extends React.Component {
render() {
return (
<div>
<Alert color="danger">Error loading component</Alert>
</div>
);
}
}
const ErrorLoading = () => {
return (
<div>
<Alert color="danger">Error loading component</Alert>
</div>
);
};

export default ErrorLoading as React.ComponentType<any>;
22 changes: 9 additions & 13 deletions generators/client/templates/react/src/main/webapp/app/shared/error/page-not-found.tsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,14 @@ import React from 'react';
import { Translate } from 'react-jhipster';
import { Alert } from 'reactstrap';

class PageNotFound extends React.Component {
render() {
return (
<div>
<Alert color="danger">
<Translate contentKey="error.http.404">
The page does not exist.
</Translate>
</Alert>
</div>
);
}
}
const PageNotFound = () => {
return (
<div>
<Alert color="danger">
<Translate contentKey="error.http.404">The page does not exist.</Translate>
</Alert>
</div>
);
};

export default PageNotFound;
24 changes: 12 additions & 12 deletions generators/client/templates/react/src/main/webapp/app/shared/layout/menus/menu-item.tsx.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,22 +23,22 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IconProp } from '@fortawesome/fontawesome-svg-core';

export interface IMenuItem {
children: React.ReactNode;
icon: IconProp;
to: string;
id?: string;
"data-cy"?: string;
children?: React.ReactNode
'data-cy'?: string;
}

export default class MenuItem extends React.Component<IMenuItem> {
const MenuItem = (props: IMenuItem) => {
const { to, icon, id, children } = props;

render() {
const { to, icon, id, children } = this.props;
return (
<DropdownItem tag={Link} to={to} id={id} data-cy={props['data-cy']}>
<FontAwesomeIcon icon={icon} fixedWidth /> {children}
</DropdownItem>
);
};

export default MenuItem;

return (
<DropdownItem tag={Link} to={to} id={id} data-cy={this.props["data-cy"]} >
<FontAwesomeIcon icon={icon} fixedWidth /> {children}
</DropdownItem>
);
}
}