All files / client/components BookmarkButton.tsx

0% Statements 0/17
0% Branches 0/6
0% Functions 0/9
0% Lines 0/17

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>
    )
  }
}