Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | import React from 'react' import Icon from 'components/Common/Icon' import Crowi from 'client/util/Crowi' interface Props { crowi: Crowi pageId: string | null } interface State { bookmarked: boolean } export default class BookmarkButton extends React.Component<Props, State> { constructor(props: Props) { super(props) this.state = { bookmarked: false, } this.handleClick = this.handleClick.bind(this) } componentDidMount() { this.props.crowi.apiGet('/bookmarks.get', { page_id: this.props.pageId }).then(res => { if (res.bookmark) { this.markBookmarked() } }) } handleClick(event: React.MouseEvent<HTMLAnchorElement>) { event.preventDefault() const pageId = this.props.pageId if (!this.state.bookmarked) { this.props.crowi.apiPost('/bookmarks.add', { page_id: pageId }).then(res => { this.markBookmarked() }) } else { this.props.crowi.apiPost('/bookmarks.remove', { page_id: pageId }).then(res => { this.markUnBookmarked() }) } } markBookmarked() { this.setState({ bookmarked: true }) } markUnBookmarked() { this.setState({ bookmarked: false }) } render() { const bookmarked: 'star' | 'starOutline' = this.state.bookmarked ? 'star' : 'starOutline' return ( <a href="#" title="Bookmark" className="bookmark-link" onClick={this.handleClick}> <Icon name={bookmarked} /> </a> ) } } |