2019-10-20 18:02:52 +02:00
|
|
|
import React from "react";
|
2019-10-23 15:47:08 +02:00
|
|
|
import { WithTranslation, withTranslation } from "react-i18next";
|
2020-01-08 15:57:13 +01:00
|
|
|
import { apiClient, ErrorNotification, Loading, SyntaxHighlighter } from "@scm-manager/ui-components";
|
2019-10-20 18:02:52 +02:00
|
|
|
import { File } from "@scm-manager/ui-types";
|
2018-10-15 16:45:54 +02:00
|
|
|
|
2019-10-23 15:47:08 +02:00
|
|
|
type Props = WithTranslation & {
|
2019-10-19 16:38:07 +02:00
|
|
|
file: File;
|
|
|
|
|
language: string;
|
2018-10-15 16:45:54 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
type State = {
|
2019-10-19 16:38:07 +02:00
|
|
|
content: string;
|
|
|
|
|
error?: Error;
|
|
|
|
|
loaded: boolean;
|
2020-01-15 08:01:12 +01:00
|
|
|
currentFileRevision: string;
|
2018-10-15 16:45:54 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
class SourcecodeViewer extends React.Component<Props, State> {
|
|
|
|
|
constructor(props: Props) {
|
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
|
|
this.state = {
|
2019-10-20 18:02:52 +02:00
|
|
|
content: "",
|
2020-01-15 08:01:12 +01:00
|
|
|
loaded: false,
|
|
|
|
|
currentFileRevision: ""
|
2018-10-15 16:45:54 +02:00
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
2018-10-29 11:50:55 +01:00
|
|
|
componentDidMount() {
|
2020-01-15 08:01:12 +01:00
|
|
|
const { file } = this.props;
|
|
|
|
|
const { currentFileRevision } = this.state;
|
|
|
|
|
if (file.revision !== currentFileRevision) {
|
|
|
|
|
this.fetchContent();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidUpdate() {
|
|
|
|
|
const { file } = this.props;
|
|
|
|
|
const { currentFileRevision } = this.state;
|
|
|
|
|
if (file.revision !== currentFileRevision) {
|
|
|
|
|
this.fetchContent();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
fetchContent = () => {
|
2018-10-29 11:50:55 +01:00
|
|
|
const { file } = this.props;
|
|
|
|
|
getContent(file._links.self.href)
|
2020-01-15 08:01:12 +01:00
|
|
|
.then(content => {
|
|
|
|
|
this.setState({
|
|
|
|
|
content,
|
|
|
|
|
loaded: true,
|
|
|
|
|
currentFileRevision: file.revision
|
|
|
|
|
});
|
2018-10-29 11:50:55 +01:00
|
|
|
})
|
2020-01-15 08:01:12 +01:00
|
|
|
.catch(error => {
|
|
|
|
|
this.setState({
|
|
|
|
|
error,
|
|
|
|
|
loaded: true
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
};
|
2018-10-15 16:45:54 +02:00
|
|
|
|
|
|
|
|
render() {
|
2018-11-01 10:59:04 +01:00
|
|
|
const { content, error, loaded } = this.state;
|
2018-10-29 15:57:31 +01:00
|
|
|
const language = this.props.language;
|
2018-10-29 11:50:55 +01:00
|
|
|
|
2018-11-01 10:59:04 +01:00
|
|
|
if (error) {
|
2018-10-29 11:50:55 +01:00
|
|
|
return <ErrorNotification error={error} />;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!loaded) {
|
|
|
|
|
return <Loading />;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!content) {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
|
2019-10-21 10:57:56 +02:00
|
|
|
return <SyntaxHighlighter language={getLanguage(language)} value={content} />;
|
2018-10-15 16:45:54 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2018-10-29 14:53:24 +01:00
|
|
|
export function getLanguage(language: string) {
|
|
|
|
|
return language.toLowerCase();
|
|
|
|
|
}
|
2018-10-29 13:19:16 +01:00
|
|
|
|
2018-10-15 16:45:54 +02:00
|
|
|
export function getContent(url: string) {
|
2020-01-15 08:01:12 +01:00
|
|
|
return apiClient.get(url).then(response => response.text());
|
2018-10-15 16:45:54 +02:00
|
|
|
}
|
|
|
|
|
|
2019-10-23 15:47:08 +02:00
|
|
|
export default withTranslation("repos")(SourcecodeViewer);
|