Show/hide upgrade sidebar item

web/pages/components/main-layout.tsx

@@ -1,9 +1,10 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Link from 'next/link';
 import { differenceInSeconds } from "date-fns";
 import { useRouter } from 'next/router';
 import { Layout, Menu } from 'antd';
+
 import {
   SettingOutlined,
   HomeOutlined,
@@ -13,6 +14,7 @@ import {
   MinusSquareFilled,
 } from '@ant-design/icons';
 import classNames from 'classnames';
+import { upgradeVersionAvailable } from "../../utils/apis";
 import { parseSecondsToDurationString } from '../../utils/format'
 
 import OwncastLogo from './logo';
@@ -41,10 +43,28 @@ export default function MainLayout(props) {
       ? `Online ${  streamDurationString}`
       : "Offline";
 
+  const [upgradeVersion, setUpgradeVersion] = useState(null);
+  const checkForUpgrade = async () => {
+    try {
+      const result = await upgradeVersionAvailable();
+      setUpgradeVersion(result);
+    } catch (error) {
+      console.log("==== error", error);
+    }
+  };
+
+  useEffect(() => {
+    checkForUpgrade();
+  }, []);
+
   const appClass = classNames({
     'owncast-layout': true,
     [adminStyles.online]: broadcastActive,
   })
+
+  const upgradeMenuItemStyle = upgradeVersion ? 'block' : 'none';
+  const upgradeVersionString = upgradeVersion || '';
+
   return (
     <Layout className={appClass}>
       <Sider
@@ -112,8 +132,10 @@ export default function MainLayout(props) {
             <Menu.Item key="logs">
               <Link href="/logs">Logs</Link>
             </Menu.Item>
-            <Menu.Item key="upgrade">
-              <Link href="/upgrade">Upgrade</Link>
+            <Menu.Item key="upgrade" style={{ display: upgradeMenuItemStyle }}>
+              <Link href="/upgrade">
+                <a>Upgrade to v{upgradeVersionString}</a>
+              </Link>
             </Menu.Item>
           </SubMenu>
         </Menu>

web/pages/upgrade.tsx

@@ -1,8 +1,7 @@
 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";
+import { getGithubRelease } from "../utils/apis";
 
 export default function Logs() {
   const [release, setRelease] = useState({
@@ -16,7 +15,7 @@ export default function Logs() {
 
   const getRelease = async () => {
     try {
-      const result = await fetchData(API_URL);
+      const result = await getGithubRelease();
       setRelease(result);
     } catch (error) {
       console.log("==== error", error);
@@ -72,17 +71,3 @@ function AssetTable(assets) {
   return <Table dataSource={data} columns={columns} rowKey="id" size="large" />;
 }
 
-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 {};
-}