2020-06-20 02:11:02 +00:00
|
|
|
// @flow
|
2020-06-20 20:59:15 +00:00
|
|
|
import * as React from "react";
|
|
|
|
import styled from "styled-components";
|
|
|
|
import Badge from "components/Badge";
|
|
|
|
import { version } from "../../../../package.json";
|
2020-08-09 05:53:59 +00:00
|
|
|
import SidebarLink from "./SidebarLink";
|
2020-06-20 02:11:02 +00:00
|
|
|
|
|
|
|
export default function Version() {
|
|
|
|
const [releasesBehind, setReleasesBehind] = React.useState(0);
|
|
|
|
|
|
|
|
React.useEffect(() => {
|
|
|
|
async function loadReleases() {
|
|
|
|
let out = 0;
|
|
|
|
const res = await fetch(
|
2020-06-20 20:59:15 +00:00
|
|
|
"https://api.github.com/repos/outline/outline/releases"
|
2020-06-20 02:11:02 +00:00
|
|
|
);
|
|
|
|
const releases = await res.json();
|
|
|
|
for (const release of releases) {
|
|
|
|
if (release.tag_name === `v${version}`) {
|
|
|
|
return setReleasesBehind(out);
|
|
|
|
} else {
|
|
|
|
out++;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
loadReleases();
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<SidebarLink
|
|
|
|
href="https://github.com/outline/outline/releases"
|
|
|
|
label={
|
2020-08-09 16:48:04 +00:00
|
|
|
<>
|
2020-06-20 02:11:02 +00:00
|
|
|
v{version}
|
|
|
|
<br />
|
|
|
|
<LilBadge>
|
|
|
|
{releasesBehind === 0
|
2020-06-20 20:59:15 +00:00
|
|
|
? "Up to date"
|
2020-06-20 02:11:02 +00:00
|
|
|
: `${releasesBehind} version${
|
2020-06-20 20:59:15 +00:00
|
|
|
releasesBehind === 1 ? "" : "s"
|
2020-06-20 02:11:02 +00:00
|
|
|
} behind`}
|
|
|
|
</LilBadge>
|
2020-08-09 16:48:04 +00:00
|
|
|
</>
|
2020-06-20 02:11:02 +00:00
|
|
|
}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
const LilBadge = styled(Badge)`
|
|
|
|
margin-left: 0;
|
|
|
|
`;
|