128 lines
No EOL
4.1 KiB
JavaScript
128 lines
No EOL
4.1 KiB
JavaScript
import { h, Component } from 'preact';
|
|
import PropTypes from 'prop-types';
|
|
import { getJSONContents } from './actions';
|
|
import marked from 'marked';
|
|
|
|
export default class GithubRepo extends Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
root: true,
|
|
directories: [],
|
|
files: [],
|
|
readme: null,
|
|
content: null,
|
|
token: props.githubToken,
|
|
path: null
|
|
}
|
|
}
|
|
|
|
componentDidMount(){
|
|
if (this.state.token) {
|
|
getJSONContents(`https://api.github.com/repos/${this.props.resource.args}/contents?access_token=`+this.state.token,
|
|
this.loadContent,
|
|
this.loadFailure)
|
|
getJSONContents(`https://api.github.com/repos/${this.props.resource.args}/readme?access_token=`+this.state.token,
|
|
this.loadContent,
|
|
this.loadFailure)
|
|
}
|
|
this.setState({path: this.props.resource.args})
|
|
}
|
|
|
|
handleItemClick = e => {
|
|
e.preventDefault();
|
|
getJSONContents(`${e.target.dataset.apiUrl}&access_token=`+this.state.token,
|
|
this.loadContent,
|
|
this.loadFailure)
|
|
this.setState({
|
|
root: false,
|
|
path: e.target.dataset.path
|
|
})
|
|
}
|
|
|
|
loadContent = response => {
|
|
let files = [];
|
|
let directories = [];
|
|
console.log(response)
|
|
if (response.message === 'Not Found') {
|
|
this.setState({path: 'Repo not found (misspelled or private?)'})
|
|
} else if (Array.isArray(response)) {
|
|
response.forEach( item => {
|
|
if (item.type === 'file') {
|
|
files.push(item)
|
|
} else {
|
|
directories.push(item)
|
|
}
|
|
})
|
|
this.setState({files: files,
|
|
directories: directories,
|
|
response: response})
|
|
} else if (response.path === "README.md") {
|
|
this.setState({
|
|
readme: window.atob(response.content)
|
|
})
|
|
} else if (response.content) {
|
|
this.setState({
|
|
content: window.atob(response.content),
|
|
response: response
|
|
})
|
|
}
|
|
}
|
|
|
|
loadFailure = response => {
|
|
this.setState({path: response.message})
|
|
}
|
|
|
|
render() {
|
|
if (!this.state.token || this.state.token.length === 0) {
|
|
return <div className='activecontent__githubrepo'>
|
|
<div className='activecontent__githubrepoheader'><em>Authentication required</em></div>
|
|
<p>
|
|
You must <a href='/users/auth/github' data-no-instant>authenticate with GitHub</a> to use this feature.
|
|
</p>
|
|
</div>
|
|
} else if (this.state.content) {
|
|
return <div className='activecontent__githubrepo'>
|
|
<div className='activecontent__githubrepoheader'>{this.state.path}</div>
|
|
<pre>
|
|
{this.state.content}
|
|
</pre>
|
|
</div>
|
|
} else {
|
|
const directories = this.state.directories.map( item => {
|
|
return <div className='activecontent__githubrepofilerow'>
|
|
<a href={item.html_url} data-api-url={item.url} data-path={item.path} onClick={this.handleItemClick}>📁 {item.name}</a>
|
|
</div>
|
|
});
|
|
const files = this.state.files.map( item => {
|
|
return <div className='activecontent__githubrepofilerow'>
|
|
<a href={item.html_url} data-api-url={item.url} data-path={item.path} onClick={this.handleItemClick}>{item.name}</a>
|
|
</div>
|
|
});
|
|
let readme = ''
|
|
if (this.state.readme) {
|
|
readme = <div dangerouslySetInnerHTML={{__html: marked(this.state.readme)}} ></div>
|
|
}
|
|
if (this.state.root) {
|
|
return <div className='activecontent__githubrepo'>
|
|
<div className='activecontent__githubrepoheader'><a href="/Users/benhalpern/dev/dev.to_core/app"></a>{this.state.path}</div>
|
|
<div className='activecontent__githubrepofiles'>
|
|
{directories}
|
|
{files}
|
|
</div>
|
|
{readme}
|
|
</div>
|
|
} else {
|
|
return <div className='activecontent__githubrepo'>
|
|
<div className='activecontent__githubrepoheader'>{this.state.path}</div>
|
|
<div className='activecontent__githubrepofiles'>
|
|
{directories}
|
|
{files}
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
}
|
|
|
|
} |