* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import FavoriteBase from 'sonar-ui-common/components/controls/FavoriteBase';
+import FavoriteButton from 'sonar-ui-common/components/controls/FavoriteButton';
import { addFavorite, removeFavorite } from '../../api/favorites';
interface Props {
handleFavorite?: (component: string, isFavorite: boolean) => void;
}
-export default class Favorite extends React.PureComponent<Props> {
- callback = (isFavorite: boolean) =>
- this.props.handleFavorite && this.props.handleFavorite(this.props.component, isFavorite);
+interface State {
+ favorite: boolean;
+}
- add = () => {
- return addFavorite(this.props.component).then(() => this.callback(true));
- };
+export default class Favorite extends React.PureComponent<Props, State> {
+ mounted = false;
+
+ constructor(props: Props) {
+ super(props);
+
+ this.state = {
+ favorite: props.favorite
+ };
+ }
+
+ componentDidMount() {
+ this.mounted = true;
+ }
+
+ componentDidUpdate(_prevProps: Props, prevState: State) {
+ if (prevState.favorite !== this.props.favorite) {
+ this.setState({ favorite: this.props.favorite });
+ }
+ }
- remove = () => {
- return removeFavorite(this.props.component).then(() => this.callback(false));
+ componentWillUnmount() {
+ this.mounted = false;
+ }
+
+ toggleFavorite = () => {
+ const newFavorite = !this.state.favorite;
+ const apiMethod = newFavorite ? addFavorite : removeFavorite;
+
+ return apiMethod(this.props.component).then(() => {
+ if (this.mounted) {
+ this.setState({ favorite: newFavorite }, () => {
+ if (this.props.handleFavorite) {
+ this.props.handleFavorite(this.props.component, newFavorite);
+ }
+ });
+ }
+ });
};
render() {
- const { component, handleFavorite, ...other } = this.props;
- return <FavoriteBase {...other} addFavorite={this.add} removeFavorite={this.remove} />;
+ const { className, qualifier } = this.props;
+ const { favorite } = this.state;
+
+ return (
+ <FavoriteButton
+ className={className}
+ favorite={favorite}
+ qualifier={qualifier}
+ toggleFavorite={this.toggleFavorite}
+ />
+ );
}
}
+/* */
*/
import { shallow } from 'enzyme';
import * as React from 'react';
+import FavoriteButton from 'sonar-ui-common/components/controls/FavoriteButton';
import Favorite from '../Favorite';
jest.mock('../../../api/favorites', () => ({
it('calls handleFavorite when given', async () => {
const handleFavorite = jest.fn();
const wrapper = shallowRender(handleFavorite);
- const favoriteBase = wrapper.find('FavoriteBase');
- const addFavorite = favoriteBase.prop<Function>('addFavorite');
- const removeFavorite = favoriteBase.prop<Function>('removeFavorite');
+ const favoriteBase = wrapper.find(FavoriteButton);
+ const toggleFavorite = favoriteBase.prop<Function>('toggleFavorite');
- removeFavorite();
+ toggleFavorite();
await new Promise(setImmediate);
expect(handleFavorite).toHaveBeenCalledWith('foo', false);
- addFavorite();
+ toggleFavorite();
await new Promise(setImmediate);
expect(handleFavorite).toHaveBeenCalledWith('foo', true);
});