Feat/update check (#303)

* feat: show latest version in settings modal

---------

Co-authored-by: Fabian Posenau <fabian@fphome.de>

apps/client/src/common/api/apiConstants.ts

@@ -19,6 +19,9 @@ export const FEAT_PLAYBACKCONTROL = 'feat-playbackcontrol';
 export const FEAT_RUNDOWN = 'feat-rundown';
 export const TIMER = 'timer';
 
+// external stuff
+export const githubURL = 'https://api.github.com/repos/cpvalente/ontime/releases/latest';
+
 /**
  * @description finds server path given the current location, it
  * @return {*}

apps/client/src/common/api/ontimeApi.ts

@@ -3,7 +3,7 @@ import { Alias, OSCSettings, Settings, UserFields, ViewSettings } from 'ontime-t
 
 import { InfoType } from '../models/Info';
 
-import { ontimeURL } from './apiConstants';
+import { githubURL, ontimeURL } from './apiConstants';
 
 /**
  * @description HTTP request to retrieve application settings
@@ -151,3 +151,12 @@ export const uploadData = async (file: string, setProgress: (value: number) => v
     })
     .then((response) => response.data.id);
 };
+
+/**
+ * @description HTTP request to get the latest version and url from github
+ * @return {Promise}
+ */
+export async function getLatestVersion(): Promise<object> {
+  const res = await axios.get(`${githubURL}`);
+  return { url: res.data.html_url, version: res.data.tag_name };
+}

apps/client/src/features/modals/AppSettingsModal.jsx

@@ -1,6 +1,7 @@
 import { useContext, useEffect, useState } from 'react';
 import isEqual from 'react-fast-compare';
 import {
+  Button,
   Checkbox,
   FormControl,
   FormLabel,
@@ -16,7 +17,7 @@ import { FiX } from '@react-icons/all-files/fi/FiX';
 import { useAtom } from 'jotai';
 
 import { version } from '../../../package.json';
-import { postSettings } from '../../common/api/ontimeApi';
+import { getLatestVersion, postSettings } from '../../common/api/ontimeApi';
 import { eventSettingsAtom } from '../../common/atoms/LocalEventSettings';
 import TooltipActionBtn from '../../common/components/buttons/TooltipActionBtn';
 import { LoggingContext } from '../../common/context/LoggingContext';
@@ -39,6 +40,9 @@ export default function AppSettingsModal() {
   const [eventSettings, saveEventSettings] = useAtom(eventSettingsAtom);
   const [formSettings, setFormSettings] = useState(eventSettings);
 
+  const [updateMessage, setUpdateMessage] = useState(<a>Using ontime version: {version}</a>);
+  const [isFetching, setIsFetching] = useState(false);
+
   /**
    * Set formdata from server state
    */
@@ -49,6 +53,9 @@ export default function AppSettingsModal() {
       pinCode: data.pinCode,
       timeFormat: data.timeFormat,
     });
+    // getLatestVersion().then((data) => {
+    //   setVersionData(data);
+    // });
   }, [changed, data]);
 
   /**
@@ -59,7 +66,7 @@ export default function AppSettingsModal() {
     setSubmitting(true);
     const validation = { isValid: false, message: '' };
 
-    const hasChanged = !isEqual(formSettings,eventSettings);
+    const hasChanged = !isEqual(formSettings, eventSettings);
     if (hasChanged) {
       saveEventSettings(formSettings);
       validation.isValid = true;
@@ -93,7 +100,7 @@ export default function AppSettingsModal() {
       try {
         await postSettings(formData);
       } catch (error) {
-        emitError(`Error saving settings: ${error}`)
+        emitError(`Error saving settings: ${error}`);
       } finally {
         await refetch();
         resetChange = true;
@@ -128,6 +135,32 @@ export default function AppSettingsModal() {
     setChanged(true);
   };
 
+  /**
+   * Handles version comparison and returns component with message
+   */
+  const versionCheck = async () => {
+    let message = <a>Using latest version</a>;
+    setIsFetching(true);
+    getLatestVersion()
+      .then((data) => {
+        const remoteVersion = data;
+        if (!remoteVersion.version.includes(version)) {
+          message = (
+            <a href={remoteVersion.url} target='_blank' rel='noreferrer'>
+              Update to version {remoteVersion.version} available
+            </a>
+          );
+        }
+      })
+      .catch(function () {
+        message = <a>Error reaching server</a>;
+      })
+      .finally(function () {
+        setUpdateMessage(message);
+        setIsFetching(false);
+      });
+  };
+
   const disableModal = status !== 'success';
 
   return (
@@ -137,7 +170,6 @@ export default function AppSettingsModal() {
         <br />
         🔥 Changes take effect on save 🔥
       </p>
-      <p className={style.notes}>{`Running ontime version ${version}`}</p>
       <form onSubmit={submitHandler}>
         <div className={style.modalFields}>
           <div className={style.hSeparator}>General App Settings</div>
@@ -150,13 +182,7 @@ export default function AppSettingsModal() {
                   Ontime is available at port
                 </span>
               </FormLabel>
-              <Input
+              <Input {...inputProps} name='title' value={4001} disabled style={{ width: '6em', textAlign: 'center' }} />
-                {...inputProps}
-                name='title'
-                value={4001}
-                disabled
-                style={{ width: '6em', textAlign: 'center' }}
-              />
             </FormControl>
             <FormControl id='editorPin'>
               <FormLabel htmlFor='editorPin'>
@@ -255,13 +281,14 @@ export default function AppSettingsModal() {
               Event default public
             </Checkbox>
           </div>
+          <div className={style.notes}>
+            {updateMessage}
+            <Button onClick={versionCheck} isLoading={isFetching}>
+              Check for updates
+            </Button>
+          </div>
         </div>
-        <SubmitContainer
+        <SubmitContainer revert={revert} submitting={submitting} changed={changed} status={status} />
-          revert={revert}
-          submitting={submitting}
-          changed={changed}
-          status={status}
-        />
       </form>
     </ModalBody>
   );