PMM-11231 Use correct naming & switch to hooks

ui/src/api/version.ts → ui/src/api/updates.ts

@@ -5,10 +5,10 @@ import {
   GetUpdatesBody,
   GetUpdatesResponse,
   StartUpdateResponse,
-} from 'types/version.types';
+} from 'types/updates.types';
 import { api } from './api';
 
-export const getCurrentVersion = async (
+export const checkForUpdates = async (
   body: GetUpdatesBody = { force: false }
 ) => {
   const res = await api.post<GetUpdatesBody, AxiosResponse<GetUpdatesResponse>>(

ui/src/hooks/api/useUpdates.tsx

@@ -0,0 +1,17 @@
+import { checkForUpdates } from 'api/updates';
+import { useQuery } from '@tanstack/react-query';
+
+export const useCheckUpdates = () =>
+  useQuery({
+    queryKey: ['checkUpdates'],
+    queryFn: async () => {
+      try {
+        return await checkForUpdates();
+      } catch (error) {
+        return await checkForUpdates({
+          force: false,
+          onlyInstalledVersion: true,
+        });
+      }
+    },
+  });

ui/src/pages/updates/update-card/UpdateCard.tsx

@@ -9,22 +9,20 @@ import {
   Skeleton,
   Alert,
 } from '@mui/material';
-import { FC } from 'react';
-import { useQuery } from '@tanstack/react-query';
+import { FC, useMemo } from 'react';
 import { formatTimestamp } from 'utils/formatTimestamp';
 import { PMM_HOME_URL } from 'constants';
 import { Messages } from './UpdateCard.messages';
-import { getVersion } from './UpdateCard.utils';
 import { FetchingIcon } from 'components/fetching-icon';
+import { useCheckUpdates } from 'hooks/api/useUpdates';
+import { formatVersion } from './UpdateCard.utils';
 
 export const UpdateCard: FC = () => {
-  const { isLoading, data, error, isRefetching, refetch } = useQuery({
-    queryKey: ['currentVersion'],
-    queryFn: () => getVersion(),
-  });
-  const isUpToDate =
-    (data?.installed.fullVersion || data?.installed.version) ===
-    (data?.latest?.fullVersion || data?.latest?.version);
+  const { isLoading, data, error, isRefetching, refetch } = useCheckUpdates();
+  const isUpToDate = useMemo(
+    () => data?.installed.version === data?.latest?.version,
+    [data]
+  );
 
   if (isLoading)
     return (
@@ -65,10 +63,8 @@ export const UpdateCard: FC = () => {
           <Typography variant="body1">
             <Typography fontWeight="bold" component="strong">
               {Messages.runningVersion}
-            </Typography>{' '}
-            {data?.installed?.version}
-            {data?.installed.timestamp &&
-              ', ' + formatTimestamp(data.installed.timestamp)}
+            </Typography>
+            {data?.installed && formatVersion(data.installed)}
           </Typography>
           {data.lastCheck && (
             <Typography variant="body1">

ui/src/pages/updates/update-card/UpdateCard.utils.ts

@@ -1,14 +1,13 @@
-import { getCurrentVersion } from 'api/version';
+import { VersionInfo } from 'types/updates.types';
+import { formatTimestamp } from 'utils/formatTimestamp';
 
-export const getVersion = async () => {
-  try {
-    const res = await getCurrentVersion();
-    return res;
-  } catch (error) {
-    const res = await getCurrentVersion({
-      force: false,
-      onlyInstalledVersion: true,
-    });
-    return res;
+export const formatVersion = ({ version, timestamp, tag }: VersionInfo) => {
+  const text =
+    ` ${version}` + (timestamp ? `, ${formatTimestamp(timestamp)}` : '');
+
+  if (version === '0.0.0') {
+    return `${text}, ${tag}`;
   }
+
+  return text;
 };

ui/src/types/version.types.ts → ui/src/types/updates.types.ts

@@ -3,18 +3,16 @@ export interface GetUpdatesBody {
   onlyInstalledVersion?: boolean;
 }
 
+export interface VersionInfo {
+  timestamp?: string;
+  version?: string;
+  tag?: string;
+}
+
 export interface GetUpdatesResponse {
   lastCheck: string;
-  latest?: {
-    fullVersion: string;
-    timestamp: string;
-    version: string;
-  };
-  installed: {
-    fullVersion: string;
-    timestamp: string;
-    version: string;
-  };
+  latest?: VersionInfo;
+  installed: VersionInfo;
   latestNewsUrl?: string;
   updateAvailable?: boolean;
 }