89 lines
1.8 KiB
TypeScript
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 {};
|
||
|
|
}
|
