import variables from 'config/variables';
import { PureComponent, createRef } from 'react';
import { MdOutlineWifiOff } from 'react-icons/md';
import Modal from 'react-modal';
import Lightbox from '../../marketplace/components/Elements/Lightbox/Lightbox';
class Changelog extends PureComponent {
constructor() {
super();
this.state = {
title: null,
showLightbox: false,
lightboxImg: null,
};
this.offlineMode = localStorage.getItem('offlineMode') === 'true';
this.controller = new AbortController();
this.changelog = createRef();
}
parseMarkdown = (text) => {
if (typeof text !== 'string') {
throw new Error('Input must be a string');
}
// Replace list items
text = text.replace(/^\* (.*$)/gm, '
$1');
// Wrap list items in
text = text.replace(/((.*<\/li>\s*)+)/g, '');
// Replace other markdown syntax
text = text
.replace(/\*\*(.*?)\*\*/g, '$1')
.replace(/^## (.*$)/gm, '$1')
.replace(
/((http|https):\/\/[^\s]+)/g,
'$1',
);
return text;
};
async getUpdate() {
const releases = await fetch(
`https://api.github.com/repos/${variables.constants.ORG_NAME}/${variables.constants.REPO_NAME}/releases`,
{
signal: this.controller.signal,
},
);
// get the release which tag_name is the same as the current version
const data = await releases.json();
const release = data.find((release) => release.tag_name === `7.0.0`);
if (this.controller.signal.aborted === true) {
return;
}
// request the changelog
const res = await fetch(release.url, { signal: this.controller.signal });
if (res.status === 404) {
this.setState({ error: true });
return;
}
if (this.controller.signal.aborted === true) {
return;
}
const changelog = await res.json();
this.setState({
title: changelog.name,
content: this.parseMarkdown(changelog.body),
date: new Date(changelog.published_at).toLocaleDateString(),
});
}
componentDidMount() {
if (navigator.onLine === false || this.offlineMode) {
return;
}
this.getUpdate();
}
componentWillUnmount() {
// stop making requests
this.controller.abort();
}
render() {
const errorMessage = (msg) => {
return (
);
};
if (navigator.onLine === false || this.offlineMode) {
return errorMessage(
<>
{variables.getMessage('modals.main.marketplace.offline.title')}
{variables.getMessage('modals.main.marketplace.offline.description')}
>,
);
}
if (this.state.error === true) {
return errorMessage(
<>
{variables.getMessage('modals.main.error_boundary.title')}
{variables.getMessage('modals.main.error_boundary.message')}
>,
);
}
if (!this.state.title) {
return errorMessage(
{variables.getMessage('modals.main.loading')}
,
);
}
return (
{this.state.title}
Released on {this.state.date}
{this.state.image && (
)}
this.setState({ showLightbox: false })}
isOpen={this.state.showLightbox}
className="Modal lightBoxModal"
overlayClassName="Overlay resetoverlay"
ariaHideApp={false}
>
this.setState({ showLightbox: false })}
img={this.state.lightboxImg}
/>
);
}
}
export { Changelog as default, Changelog };