59 lines
1.6 KiB
JavaScript
59 lines
1.6 KiB
JavaScript
import { h } from 'preact';
|
|
import { useState } from 'preact/hooks';
|
|
import PropTypes from 'prop-types';
|
|
import { articlePropTypes } from '../../common-prop-types';
|
|
import { ButtonNew as Button } from '@crayons';
|
|
import BookmarkSVG from '@images/small-save.svg';
|
|
import BookmarkFilledSVG from '@images/small-save-filled.svg';
|
|
|
|
export const SaveButton = ({
|
|
article,
|
|
isBookmarked: isBookmarkedProps,
|
|
onClick,
|
|
saveable = true,
|
|
}) => {
|
|
const [isBookmarked, setIsBookmarked] = useState(isBookmarkedProps);
|
|
|
|
const handleClick = (_e) => {
|
|
onClick(_e);
|
|
setIsBookmarked((prevState) => !prevState);
|
|
};
|
|
|
|
if (article.class_name === 'Article' && saveable) {
|
|
return (
|
|
<Button
|
|
id={`article-save-button-${article.id}`}
|
|
variant="default"
|
|
title={`Save post ${article.title} to reading list`}
|
|
aria-label={`Save post ${article.title} to reading list`}
|
|
aria-pressed={isBookmarked}
|
|
icon={isBookmarked ? BookmarkFilledSVG : BookmarkSVG}
|
|
data-initial-feed
|
|
data-reactable-id={article.id}
|
|
onClick={handleClick}
|
|
/>
|
|
);
|
|
}
|
|
if (article.class_name === 'User') {
|
|
return (
|
|
<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';
|