All files / client/components Backlink.tsx

0% Statements 0/35
0% Branches 0/8
0% Functions 0/12
0% Lines 0/34

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 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134                                                                                                                                                                                                                                                                           
import React from 'react'
import UserPicture from './User/UserPicture'
import Crowi from 'client/util/Crowi'
import { Backlink as BacklinkType, User } from 'client/types/crowi'
 
interface Props {
  crowi: Crowi
  pageId: string | null
  limit: number
  offset: number
}
 
interface State {
  currentOffset: number
  hasNext: boolean
  backLinks: BacklinkType[]
}
 
class Backlink extends React.Component<Props, State> {
  static defaultProps = {
    pageId: null,
    limit: 5,
    offset: 0,
  }
 
  constructor(props: Props) {
    super(props)
 
    this.state = {
      currentOffset: 0,
      hasNext: false,
      backLinks: [],
    }
  }
 
  componentDidMount() {
    this.fetchBacklinks()
  }
 
  fetchBacklinks() {
    this.props.crowi
      .apiGet('/backlink.list', {
        page_id: this.props.pageId,
        limit: this.props.limit + 1,
        offset: this.state.currentOffset,
      })
      .then(response => {
        if (response.ok !== true) {
          console.log('Sorry, something went wrong.')
        } else {
          let hasNext = false
          if (response.data.length > this.props.limit) {
            hasNext = true
          }
          const appendBacklinks: BacklinkType[] = response.data.slice(0, this.props.limit)
 
          const backLinks = this.state.backLinks
          let i = 0
          appendBacklinks.forEach(backLink => {
            const index = this.state.currentOffset + i
            backLinks[index] = backLink
            i++
          })
 
          const currentOffset = this.state.currentOffset + this.props.limit
 
          this.setState({
            currentOffset: currentOffset,
            hasNext: hasNext,
            backLinks: backLinks,
          })
        }
      })
      .catch(err => {
        console.log('Failed to fetch data of Backlinks')
        // console.log(err);
      })
  }
 
  handleReadMore(e: React.MouseEvent<HTMLAnchorElement>) {
    e.preventDefault()
    this.fetchBacklinks()
  }
 
  createList(backlink: BacklinkType) {
    const path = backlink.fromPage.path
    const user = backlink.fromRevision.author
 
    return (
      <li className="backlink-item" key={'crowi:page:backlink:' + backlink._id}>
        <a className="backlink-link" href={path}>
          <span className="backlink-picture">
            <UserPicture user={user} />
          </span>
          <span className="backlink-path">{path}</span>
        </a>
      </li>
    )
  }
 
  createReadMore() {
    if (this.state.hasNext === true) {
      return (
        <p className="backlink-readmore">
          <a href="#" onClick={e => this.handleReadMore(e)}>
            Read More Backlinks
          </a>
        </p>
      )
    }
    return <p />
  }
 
  render() {
    const lists = this.state.backLinks.map(backLink => this.createList(backLink))
 
    if (lists.length === 0) {
      return null
    }
 
    const readMore = this.createReadMore()
 
    return (
      <div className="page-meta-contents">
        <p className="page-meta-title">Backlinks</p>
        <ul className="backlink-list">{lists}</ul>
        {readMore}
      </div>
    )
  }
}
 
export default Backlink