Added UI display of the changelog

app/Helpers/UpdateHelper.php

@@ -17,7 +17,15 @@ class UpdateHelper {
             return false;
         }
 
-        return ((bool)(version_compare($current, $gitVersion['version']))) ? $gitVersion['version'] : false;
+        if((bool)(version_compare($current, $gitVersion['version']))) {
+            $changelog = UpdateHelper::getChangelog();
+            return [
+                'version' => $gitVersion['version'],
+                'changelog' => $changelog[$gitVersion['version']],
+            ];
+        } else {
+            return false;
+        }
     }
 
     public static function checkLatestVersion()
@@ -26,12 +34,13 @@ class UpdateHelper {
         $repo = config('speedtest.repo');
         $branch = config('speedtest.branch');
 
-        $url = 'https://raw.githubusercontent.com/'.$user
-                                                   .'/'
-                                                   .$repo
-                                                   .'/'
-                                                   .$branch
-                                                   .'/config/speedtest.php';
+        $url = 'https://raw.githubusercontent.com/'
+               .$user
+               .'/'
+               .$repo
+               .'/'
+               .$branch
+               .'/config/speedtest.php';
 
         try {
             $gitFile = file_get_contents($url);
@@ -50,4 +59,27 @@ class UpdateHelper {
             'version' => $version,
         ];
     }
+
+    public static function getChangelog()
+    {
+        $user = config('speedtest.user');
+        $repo = config('speedtest.repo');
+        $branch = config('speedtest.branch');
+
+        $url = 'https://raw.githubusercontent.com/'
+               .$user
+               .'/'
+               .$repo
+               .'/'
+               .$branch
+               .'/changelog.json';
+
+        try {
+            $changelog = json_decode(file_get_contents($url), true);
+        } catch(Exception $e) {
+            $changelog = [];
+        }
+
+        return $changelog;
+    }
 }

changelog.json

@@ -5,7 +5,7 @@
             "link": ""
         },
         {
-            "description": "Added an backup/restore function",
+            "description": "Added a backup/restore function",
             "link": ""
         }
     ]

resources/js/components/Home/Footer.js

@@ -2,24 +2,15 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import { Container, Row } from 'react-bootstrap';
 import { Col } from 'react-bootstrap';
+import Version from './Version';
 
 export default class Footer extends Component {
-    constructor(props) {
-        super(props)
-
-        this.state = {
-            version: document.querySelector('meta[name="version"]').content
-        };
-    }
-
     render() {
-        var version = this.state.version;
-
         return (
             <Container>
                 <Row>
                     <Col sm={{ span: 12 }} className="text-center">
-                        <p className="text-muted mb-0">Speedtest Tracker Version: {version}</p>
+                        <Version />
                         <p className="text-muted">See the code on <a href="https://github.com/henrywhitaker3/Speedtest-Tracker" target="_blank" rel="noopener noreferrer">GitHub</a></p>
                     </Col>
                 </Row>

resources/js/components/Home/Version.js

@@ -0,0 +1,97 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import Axios from 'axios';
+import { toast } from 'react-toastify';
+import { Modal } from 'react-bootstrap';
+
+export default class Version extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            version: document.querySelector('meta[name="version"]').content,
+            update: false,
+            modalShow: false,
+            changelog: [],
+        };
+    }
+
+    componentDidMount() {
+        this.checkForUpdates();
+    }
+
+    checkForUpdates = () => {
+        var url = '/api/update/check';
+
+        Axios.get(url)
+        .then((resp) => {
+            var update = resp.data.update;
+            if(update !== false) {
+                toast.info('A new version of Speedtest Tracker is available (v' + update.version + '). Go to the bottom of the page to update.');
+                this.setState({
+                    update: update.version,
+                    changelog: update.changelog,
+                });
+            }
+        })
+        .catch((err) => {
+            console.log(err);
+        });
+    }
+
+    showModal = () => {
+        this.setState({
+            modalShow: true
+        });
+    }
+
+    hideModal = () => {
+        this.setState({
+            modalShow: false
+        });
+    }
+
+    render() {
+        var version = this.state.version;
+        var update = this.state.update;
+        var modalShow = this.state.modalShow;
+        var changelog = this.state.changelog;
+
+        if(update === false) {
+            return (
+                <p className="text-muted mb-0">Speedtest Tracker Version: {version}</p>
+            );
+        } else {
+            return (
+                <div>
+                    <p className="text-muted mb-0 d-inline">Speedtest Tracker Version: {version} - </p>
+                    <a href="#!" className="mb-0 d-inline" onClick={this.showModal}>New version available - v{update}</a>
+
+                    <Modal show={modalShow} onHide={this.hideModal} animation={true}>
+                        <Modal.Header closeButton>
+                            <Modal.Title>Update to v{update}</Modal.Title>
+                        </Modal.Header>
+                        <Modal.Body>
+                            <h5>Changelog:</h5>
+                            <ul>
+                                {changelog.map((e, i) => {
+                                    if(e.link == '') {
+                                        return (
+                                            <li key={i}>{e.description}</li>
+                                        );
+                                    } else {
+                                        <li key={i}><a href={e.link} target="_blank" rel="noopener noreferer">{e.description}</a></li>
+                                    }
+                                })}
+                            </ul>
+                        </Modal.Body>
+                    </Modal>
+                </div>
+            );
+        }
+    }
+}
+
+if (document.getElementById('Version')) {
+    ReactDOM.render(<Version />, document.getElementById('Version'));
+}