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
|