From 8f4a4ebaa951fdbbe9f697e2cb4dc34838ed5df7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Uhl=C3=AD=C5=99?= Date: Tue, 21 Jun 2022 15:47:26 +0200 Subject: [PATCH] feat: version check and info (#425) --- src/App.tsx | 2 +- src/components/Feedback.tsx | 2 +- src/hooks/apiHooks.tsx | 45 ++++++++++++++++++++++++++++++++++--- src/layout/Dashboard.tsx | 38 ++++++++++++++++++++++++++++++- src/pages/info/index.tsx | 23 +++++++++++++++++++ src/utils/desktop.ts | 8 +++++++ 6 files changed, 112 insertions(+), 6 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 19b0db2..22f6e99 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -41,7 +41,7 @@ const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElem - + <> diff --git a/src/components/Feedback.tsx b/src/components/Feedback.tsx index 9e4c5c4..1b03d2e 100644 --- a/src/components/Feedback.tsx +++ b/src/components/Feedback.tsx @@ -2,7 +2,7 @@ import { ReactElement, useEffect, useState } from 'react' import * as Sentry from '@sentry/react' import { Link } from '@material-ui/core' import { createStyles, makeStyles, Theme } from '@material-ui/core/styles' -import MessageSquare from 'remixicon-react/Chat4LineIcon' +import MessageSquare from 'remixicon-react/Message2LineIcon' import config from '../config' import SideBarItem from './SideBarItem' diff --git a/src/hooks/apiHooks.tsx b/src/hooks/apiHooks.tsx index c7e5253..34696c4 100644 --- a/src/hooks/apiHooks.tsx +++ b/src/hooks/apiHooks.tsx @@ -2,6 +2,7 @@ import axios from 'axios' import { useEffect, useState } from 'react' import { config } from '../config' import { getJson } from '../utils/net' +import { getLatestBeeDesktopVersion } from '../utils/desktop' export interface LatestBeeReleaseHook { latestBeeRelease: LatestBeeRelease | null @@ -12,6 +13,11 @@ export interface LatestBeeReleaseHook { export interface IsBeeDesktopHook { isBeeDesktop: boolean isLoading: boolean + beeDesktopVersion: string +} + +export interface NewDesktopVersionHook { + newBeeDesktopVersion: string } interface Config { @@ -25,14 +31,17 @@ interface Config { */ export const useIsBeeDesktop = (conf: Config = config): IsBeeDesktopHook => { const [isBeeDesktop, setIsBeeDesktop] = useState(false) + const [beeDesktopVersion, setBeeDesktopVersion] = useState('') const [isLoading, setLoading] = useState(true) useEffect(() => { axios .get(`${conf.BEE_DESKTOP_URL}/info`) .then(res => { - if (res.data?.name === 'bee-desktop') setIsBeeDesktop(true) - else setIsBeeDesktop(false) + if (res.data?.name === 'bee-desktop') { + setIsBeeDesktop(true) + setBeeDesktopVersion(res.data?.version) + } else setIsBeeDesktop(false) }) .catch(() => { setIsBeeDesktop(false) @@ -42,7 +51,37 @@ export const useIsBeeDesktop = (conf: Config = config): IsBeeDesktopHook => { }) }, [conf]) - return { isBeeDesktop, isLoading } + return { isBeeDesktop, isLoading, beeDesktopVersion } +} + +async function checkNewVersion(conf: Config): Promise { + const resJson = await (await fetch(`${conf.BEE_DESKTOP_URL}/info`)).json() + const currentVersion = resJson.version + const latestVersion = await getLatestBeeDesktopVersion() + + if (currentVersion !== latestVersion) { + return latestVersion + } + + return '' +} + +export function useNewBeeDesktopVersion(isBeeDesktop: boolean, conf: Config = config): NewDesktopVersionHook { + const [newBeeDesktopVersion, setNewNewBeeDesktopVersion] = useState('') + + useEffect(() => { + if (!isBeeDesktop) { + return + } + + checkNewVersion(conf).then(version => { + if (version !== '') { + setNewNewBeeDesktopVersion(version) + } + }) + }, [isBeeDesktop, conf]) + + return { newBeeDesktopVersion } } export interface BeeConfig { diff --git a/src/layout/Dashboard.tsx b/src/layout/Dashboard.tsx index b833e98..73cfd4b 100644 --- a/src/layout/Dashboard.tsx +++ b/src/layout/Dashboard.tsx @@ -1,12 +1,16 @@ -import { CircularProgress, Container } from '@material-ui/core' +import { Button, CircularProgress, Container, IconButton } from '@material-ui/core' import { createStyles, makeStyles, Theme } from '@material-ui/core/styles' import React, { ReactElement, useContext } from 'react' +import { useSnackbar } from 'notistack' +import CloseIcon from 'remixicon-react/CloseCircleLineIcon' import ErrorBoundary from '../components/ErrorBoundary' import SideBar from '../components/SideBar' import { Context } from '../providers/Bee' import config from '../config' import * as Sentry from '@sentry/react' import ItsBroken from './ItsBroken' +import { useIsBeeDesktop, useNewBeeDesktopVersion } from '../hooks/apiHooks' +import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../utils/desktop' const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -25,6 +29,38 @@ const Dashboard = (props: Props): ReactElement => { const classes = useStyles() const { isLoading } = useContext(Context) + const { isBeeDesktop } = useIsBeeDesktop() + const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isBeeDesktop) + const { enqueueSnackbar, closeSnackbar } = useSnackbar() + + if (newBeeDesktopVersion !== '') { + enqueueSnackbar(`There is new Swarm Dashboard version ${newBeeDesktopVersion}!`, { + variant: 'warning', + preventDuplicate: true, + key: 'desktopNewVersion', + persist: true, + action: key => ( + + + { + closeSnackbar(key) + }} + > + + + + ), + }) + } + const content = ( <> {isLoading ? ( diff --git a/src/pages/info/index.tsx b/src/pages/info/index.tsx index a3be50f..9dc94a8 100644 --- a/src/pages/info/index.tsx +++ b/src/pages/info/index.tsx @@ -13,6 +13,8 @@ import Map from '../../components/Map' import ExpandableListItem from '../../components/ExpandableListItem' import { useNavigate } from 'react-router' import { ROUTES } from '../../routes' +import { useIsBeeDesktop, useNewBeeDesktopVersion } from '../../hooks/apiHooks' +import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../../utils/desktop' export default function Status(): ReactElement { const { @@ -25,6 +27,8 @@ export default function Status(): ReactElement { balance, chequebookBalance, } = useContext(BeeContext) + const { isBeeDesktop, beeDesktopVersion } = useIsBeeDesktop() + const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isBeeDesktop) const navigate = useNavigate() return ( @@ -115,6 +119,25 @@ export default function Status(): ReactElement {
+ {isBeeDesktop && ( + + {`${beeDesktopVersion} `} + +
+ } + /> + )} } +export const BEE_DESKTOP_LATEST_RELEASE_PAGE = 'https://github.com/ethersphere/bee-desktop/releases/latest' + export async function getDesktopStatus(): Promise { const response = await getJson(`${getDesktopHost()}/status`) @@ -60,6 +62,12 @@ export async function getBeeLogs(): Promise { return response as unknown as string } +export async function getLatestBeeDesktopVersion(): Promise { + const response = await (await fetch('https://api.github.com/repos/ethersphere/bee-desktop/releases/latest')).json() + + return response.tag_name.replace('v', '') // We get for example "v0.12.1" +} + function getDesktopHost(): string { if (process.env.REACT_APP_BEE_DESKTOP_URL) { return process.env.REACT_APP_BEE_DESKTOP_URL