refactor: show new app version

apps/client/src/features/app-settings/panel/about-panel/AboutPanel.tsx

@@ -1,9 +1,8 @@
-import { version } from '../../../../../package.json';
 import ExternalLink from '../../../../common/components/external-link/ExternalLink';
 import { documentationUrl, githubUrl, websiteUrl } from '../../../../externals';
 import * as Panel from '../PanelUtils';
 
-import CheckUpdatesButton from './CheckUpdatesButton';
+import AppVersion from './AppVersion';
 
 export default function AboutPanel() {
   return (
@@ -23,8 +22,7 @@ export default function AboutPanel() {
       </Panel.Section>
       <Panel.Section>
         <Panel.SubHeader>Current version</Panel.SubHeader>
-        <Panel.Paragraph>{`You are currently using Ontime ${version}`}</Panel.Paragraph>
-        <CheckUpdatesButton version={version} />
+        <AppVersion />
       </Panel.Section>
     </>
   );

apps/client/src/features/app-settings/panel/about-panel/AppVersion.tsx

@@ -0,0 +1,31 @@
+import { version } from '../../../../../package.json';
+import ExternalLink from '../../../../common/components/external-link/ExternalLink';
+import useAppVersion from '../../../../common/hooks-query/useAppVersion';
+import * as Panel from '../PanelUtils';
+
+export default function AppVersion() {
+  const { data, isError } = useAppVersion();
+
+  if (isError) {
+    return (
+      <Panel.Paragraph>
+        {`You are currently using Ontime version ${version}`}
+        <Panel.Error>{`Could not fetch version information: ${isError}`}</Panel.Error>
+      </Panel.Paragraph>
+    );
+  }
+
+  if (data.hasUpdates) {
+    return (
+      <>
+        <Panel.Paragraph>{`You are currently using Ontime version ${version}.`}</Panel.Paragraph>
+        <Panel.Paragraph>
+          {`A new version ${data.version} is available.`}
+          <ExternalLink href={data.url}> Please visit the release page to download</ExternalLink>
+        </Panel.Paragraph>
+      </>
+    );
+  }
+
+  return <Panel.Paragraph>{`You are currently using the latest version of Ontime: ${version}`}</Panel.Paragraph>;
+}

apps/client/src/features/app-settings/panel/about-panel/CheckUpdatesButton.tsx

@@ -1,80 +0,0 @@
-import { useState } from 'react';
-import { Button } from '@chakra-ui/react';
-
-import { getLatestVersion, HasUpdate } from '../../../../common/api/external';
-import ExternalLink from '../../../../common/components/external-link/ExternalLink';
-
-import style from '../Panel.module.scss';
-
-type CheckFail = {
-  error: string;
-};
-
-type CheckIsLatest = {
-  latest: true;
-};
-
-type CheckRemote = CheckFail | CheckIsLatest | HasUpdate;
-
-interface CheckUpdatesButtonProps {
-  version: string;
-}
-
-export default function CheckUpdatesButton(props: CheckUpdatesButtonProps) {
-  const { version } = props;
-
-  const [updateMessage, setUpdateMessage] = useState<CheckRemote | null>(null);
-  const [isFetching, setIsFetching] = useState(false);
-
-  /**
-   * Handles version comparison and returns component with message
-   */
-  const versionCheck = async () => {
-    setIsFetching(true);
-
-    try {
-      const latest = await getLatestVersion();
-
-      if (!latest.version.includes(version)) {
-        // new version, pass data to component
-        setUpdateMessage(latest);
-      } else {
-        setUpdateMessage({ latest: true });
-      }
-    } catch {
-      setUpdateMessage({ error: 'Error reaching server' });
-    } finally {
-      setIsFetching(false);
-    }
-  };
-
-  const disableButton = Boolean(updateMessage && 'version' in updateMessage);
-
-  return (
-    <>
-      <Button
-        onClick={versionCheck}
-        variant='ontime-filled'
-        isLoading={isFetching}
-        isDisabled={disableButton}
-        size='sm'
-        maxWidth='max-content'
-      >
-        Check for updates
-      </Button>
-      <ResolveUpdateMessage updateMessage={updateMessage} />
-    </>
-  );
-}
-
-function ResolveUpdateMessage(props: { updateMessage: CheckRemote | null }) {
-  const { updateMessage } = props;
-
-  if (updateMessage && 'error' in updateMessage) {
-    return <span className={style.error}>{updateMessage.error}</span>;
-  }
-  if (updateMessage && 'url' in updateMessage) {
-    return <ExternalLink href={updateMessage?.url}>{`New version available: ${updateMessage.version}`}</ExternalLink>;
-  }
-  return null;
-}