74 lines
1.8 KiB
JavaScript
74 lines
1.8 KiB
JavaScript
import { h } from 'preact';
|
|
import { useState } from 'preact/hooks';
|
|
import PropTypes from 'prop-types';
|
|
import { articlePropTypes } from '../../common-prop-types';
|
|
|
|
export const SaveButton = ({
|
|
article,
|
|
isBookmarked: isBookmarkedProps,
|
|
onClick,
|
|
saveable = true,
|
|
}) => {
|
|
const [buttonText, setButtonText] = useState(
|
|
isBookmarkedProps ? 'Saved' : 'Save',
|
|
);
|
|
const [isBookmarked, setIsBookmarked] = useState(isBookmarkedProps);
|
|
|
|
const mouseMove = (_e) => {
|
|
setButtonText(isBookmarked ? 'Unsave' : 'Save');
|
|
};
|
|
|
|
const mouseOut = (_e) => {
|
|
setButtonText(isBookmarked ? 'Saved' : 'Save');
|
|
};
|
|
|
|
const handleClick = (_e) => {
|
|
onClick(_e);
|
|
setButtonText(isBookmarked ? 'Save' : 'Saved');
|
|
setIsBookmarked((prevState) => !prevState);
|
|
};
|
|
|
|
if (article.class_name === 'Article' && saveable) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
id={`article-save-button-${article.id}`}
|
|
className={`crayons-btn crayons-btn--s ${
|
|
isBookmarked ? 'crayons-btn--ghost' : 'crayons-btn--secondary'
|
|
}`}
|
|
data-initial-feed
|
|
data-reactable-id={article.id}
|
|
onClick={handleClick}
|
|
onMouseMove={mouseMove}
|
|
onFocus={mouseMove}
|
|
onMouseout={mouseOut}
|
|
onBlur={mouseOut}
|
|
>
|
|
{buttonText}
|
|
</button>
|
|
);
|
|
}
|
|
if (article.class_name === 'User') {
|
|
return (
|
|
<button
|
|
type="button"
|
|
className="crayons-btn crayons-btn--secondary fs-s"
|
|
data-info={`{"id":${article.id},"className":"User"}`}
|
|
data-follow-action-button
|
|
>
|
|
|
|
</button>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
SaveButton.propTypes = {
|
|
article: articlePropTypes.isRequired,
|
|
isBookmarked: PropTypes.bool.isRequired,
|
|
onClick: PropTypes.func.isRequired,
|
|
saveable: PropTypes.bool.isRequired,
|
|
};
|
|
|
|
SaveButton.displayName = 'SaveButton';
|