owncast/web/pages/upgrade.tsx
2020-11-02 19:22:10 -08:00

89 lines
1.8 KiB
TypeScript

import React, { useState, useEffect } from "react";
import ReactMarkdown from "react-markdown";
import { Table, Tag } from "antd";
const API_URL = "https://api.github.com/repos/owncast/owncast/releases/latest";
export default function Logs() {
const [release, setRelease] = useState({
html_url: "",
name: "",
created_at: null,
body: "",
assets: [],
});
const getRelease = async () => {
try {
const result = await fetchData(API_URL);
setRelease(result);
} catch (error) {
console.log("==== error", error);
}
};
useEffect(() => {
getRelease();
}, []);
if (!release) {
return null;
}
return (
<div>
<h2>
<a href={release.html_url}>{release.name}</a>
</h2>
<h1>{release.created_at}</h1>
<ReactMarkdown>{release.body}</ReactMarkdown>;
<h3>Downloads</h3>
<AssetTable {...release.assets} />
</div>
);
}
function AssetTable(assets) {
const data = [];
for (const key in assets) {
data.push(assets[key]);
}
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
render: (text, entry) =>
`<a href="${entry.browser_download_url}">${text}</a>`,
},
{
title: "Size",
dataIndex: "size",
key: "size",
render: (text, entry) =>
`${(text/1024/1024).toFixed(2)} MB`
},
];
return <Table dataSource={data} columns={columns} rowKey="id" />;
}
async function fetchData(url) {
try {
const response = await fetch(url);
if (!response.ok) {
const message = `An error has occured: ${response.status}`;
throw new Error(message);
}
const json = await response.json();
return json;
} catch (error) {
console.log(error);
}
return {};
}