feat: check for updates

gitify-app · Jul 21, 2024 · 50b0e69 · 50b0e69
1 parent 846cd97
commit 50b0e69
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 11 deletions.
diff --git a/src/components/settings/SettingsFooter.tsx b/src/components/settings/SettingsFooter.tsx
@@ -1,13 +1,20 @@
-import { PersonIcon, XCircleIcon } from '@primer/octicons-react';
+import {
+  AlertFillIcon,
+  CheckCircleFillIcon,
+  PersonIcon,
+  XCircleIcon,
+} from '@primer/octicons-react';
+import { ipcRenderer } from 'electron';
 import { type FC, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { BUTTON_CLASS_NAME } from '../../styles/gitify';
-import { Size } from '../../types';
+import { IconColor, Size, VersionCheck } from '../../types';
 import { getAppVersion, quitApp } from '../../utils/comms';
 import { openGitifyReleaseNotes } from '../../utils/links';
 
 export const SettingsFooter: FC = () => {
   const [appVersion, setAppVersion] = useState<string | null>(null);
+  const [newVersionAvailable, setNewVersionAvailable] = useState(false);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -21,6 +28,15 @@ export const SettingsFooter: FC = () => {
     })();
   }, []);
 
+  useEffect(() => {
+    ipcRenderer.on(
+      'gitify:version-check',
+      (_, version: VersionCheck, _info: string) => {
+        setNewVersionAvailable(version === VersionCheck.UPDATE_AVAILABLE);
+      },
+    );
+  }, []);
+
   return (
     <div className="flex items-center justify-between bg-gray-200 px-8 py-1 text-sm dark:bg-gray-darker">
       <button
@@ -29,7 +45,21 @@ export const SettingsFooter: FC = () => {
         title="View release notes"
         onClick={() => openGitifyReleaseNotes(appVersion)}
       >
-        <span title="app-version">Gitify {appVersion}</span>
+        <span className="flex items-center gap-1">
+          Gitify {appVersion}
+          {newVersionAvailable ? (
+            <span title="New version available">
+              <AlertFillIcon size={Size.XSMALL} className={IconColor.YELLOW} />
+            </span>
+          ) : (
+            <span title="You are using the latest version">
+              <CheckCircleFillIcon
+                size={Size.XSMALL}
+                className={IconColor.GREEN}
+              />
+            </span>
+          )}
+        </span>
       </button>
       <div>
         <button

diff --git a/src/electron/main.js b/src/electron/main.js
@@ -109,17 +109,20 @@ app.whenReady().then(async () => {
     }
   });
 
-  autoUpdater.on('checking-for-update', () => {
-    console.log('Checking for update...');
-    // TODO - display the update status in the UI
-  });
   autoUpdater.on('update-available', (info) => {
-    console.log('Update available.');
-    // TODO - display the update status in the UI
+    mb.window.webContents.send(
+      'gitify:version-check',
+      'UPDATE_AVAILABLE',
+      info,
+    );
   });
+
   autoUpdater.on('update-not-available', (info) => {
-    console.log('Update not available.');
-    // TODO - display the update status in the UI
+    mb.window.webContents.send(
+      'gitify:version-check',
+      'UPDATE_NOT_AVAILABLE',
+      info,
+    );
   });
 
   /**

diff --git a/src/types.ts b/src/types.ts
@@ -105,6 +105,11 @@ export enum Theme {
   DARK = 'DARK',
 }
 
+export enum VersionCheck {
+  UPDATE_AVAILABLE = 'UPDATE_AVAILABLE',
+  UPDATE_NOT_AVAILABLE = 'UPDATE_NOT_AVAILABLE',
+}
+
 export enum OpenPreference {
   FOREGROUND = 'FOREGROUND',
   BACKGROUND = 'FOREGROUND',