Fetch and display last release changes from GitHub in modal upgrade & modal auto update downloaded

static/app-strings.json

@@ -214,7 +214,7 @@
   "Skip": "Skip",
   "An updated version of LBRY is now available.": "An updated version of LBRY is now available.",
   "Your version is out of date and may be unreliable or insecure.": "Your version is out of date and may be unreliable or insecure.",
-  "A new version of LBRY is ready for you.": "A new version of LBRY is ready for you.",
+  "A new version %release_tag% of LBRY is ready for you.": "A new version %release_tag% of LBRY is ready for you.",
   "Want to know what has changed? See the %release_notes%.": "Want to know what has changed? See the %release_notes%.",
   "release notes": "release notes",
   "Read the FAQ": "Read the FAQ",

ui/component/lastReleaseChanges/index.js

@@ -0,0 +1,3 @@
+import LastReleaseChanges from './view';
+
+export default LastReleaseChanges;

ui/component/lastReleaseChanges/view.jsx

@@ -0,0 +1,88 @@
+// @flow
+import React, { useState, useEffect } from 'react';
+import remark from 'remark';
+import reactRenderer from 'remark-react';
+import Button from 'component/button';
+import I18nMessage from 'component/i18nMessage';
+
+type Props = {
+  hideReleaseVersion?: boolean,
+};
+
+const LastReleaseChanges = (props: Props) => {
+  const { hideReleaseVersion } = props;
+  const [releaseTag, setReleaseTag] = useState('');
+  const [releaseChanges, setReleaseChanges] = useState('');
+  const [fetchingReleaseChanges, setFetchingReleaseChanges] = useState(false);
+  const [fetchReleaseFailed, setFetchReleaseFailed] = useState(false);
+
+  const releaseVersionTitle = (
+    <p>
+      {!hideReleaseVersion && __('A new version %release_tag% of LBRY is ready for you.', { release_tag: releaseTag })}
+    </p>
+  );
+  const seeReleaseNotes = (
+    <p className="help">
+      <I18nMessage
+        tokens={{
+          release_notes: (
+            <Button button="link" label={__('release notes')} href="https://github.com/lbryio/lbry-desktop/releases" />
+          ),
+        }}
+      >
+        Want to know what has changed? See the %release_notes%.
+      </I18nMessage>
+    </p>
+  );
+
+  useEffect(() => {
+    const lastReleaseUrl = 'https://api.github.com/repos/lbryio/lbry-desktop/releases/latest';
+    const options = {
+      method: 'GET',
+      headers: { Accept: 'application/vnd.github.v3+json' },
+    };
+
+    setFetchingReleaseChanges(true);
+    fetch(lastReleaseUrl, options)
+      .then(response => response.json())
+      .then(response => {
+        setReleaseTag(response.tag_name);
+        setReleaseChanges(response.body);
+        setFetchingReleaseChanges(false);
+        setFetchReleaseFailed(false);
+      })
+      .catch(() => {
+        setFetchingReleaseChanges(false);
+        setFetchReleaseFailed(true);
+      });
+  }, []);
+
+  if (fetchingReleaseChanges) {
+    return <p>{__('Loading...')}</p>;
+  }
+
+  if (fetchReleaseFailed) {
+    return (
+      <div>
+        {releaseVersionTitle}
+        {seeReleaseNotes}
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {releaseVersionTitle}
+      <p>
+        {
+          remark()
+            .use(reactRenderer)
+            .processSync(releaseChanges).contents
+        }
+      </p>
+      {seeReleaseNotes}
+    </div>
+  );
+};
+
+export default LastReleaseChanges;

ui/modal/modalAutoUpdateDownloaded/view.jsx

@@ -1,70 +1,45 @@
 // @flow
-import React from 'react';
+import React, { useState } from 'react';
 // @if TARGET='app'
 import { ipcRenderer } from 'electron';
 // @endif
 import { Modal } from 'modal/modal';
-import Button from 'component/button';
-import I18nMessage from 'component/i18nMessage';
+import LastReleaseChanges from 'component/lastReleaseChanges';
 
 type Props = {
   closeModal: any => any,
   declineAutoUpdate: () => any,
 };
 
-type State = {
-  disabled: boolean,
+const ModalAutoUpdateDownloaded = (props: Props) => {
+  const { closeModal, declineAutoUpdate } = props;
+  const [disabled, setDisabled] = useState(false);
+
+  const handleConfirm = () => {
+    setDisabled(true);
+    ipcRenderer.send('autoUpdateAccepted');
+  };
+
+  const handleAbort = () => {
+    declineAutoUpdate();
+    closeModal();
+  };
+
+  return (
+    <Modal
+      isOpen
+      type="confirm"
+      contentLabel={__('Upgrade Downloaded')}
+      title={__('LBRY leveled up')}
+      confirmButtonLabel={__('Upgrade Now')}
+      abortButtonLabel={__('Not Now')}
+      confirmButtonDisabled={disabled}
+      onConfirmed={handleConfirm}
+      onAborted={handleAbort}
+    >
+      <LastReleaseChanges />
+    </Modal>
+  );
 };
 
-class ModalAutoUpdateDownloaded extends React.PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      disabled: false,
-    };
-  }
-
-  render() {
-    const { closeModal, declineAutoUpdate } = this.props;
-
-    return (
-      <Modal
-        isOpen
-        type="confirm"
-        contentLabel={__('Upgrade Downloaded')}
-        title={__('LBRY leveled up')}
-        confirmButtonLabel={__('Upgrade Now')}
-        abortButtonLabel={__('Not Now')}
-        confirmButtonDisabled={this.state.disabled}
-        onConfirmed={() => {
-          this.setState({ disabled: true });
-          ipcRenderer.send('autoUpdateAccepted');
-        }}
-        onAborted={() => {
-          declineAutoUpdate();
-          closeModal();
-        }}
-      >
-        <p>{__('A new version of LBRY is ready for you.')}</p>
-        <p className="help">
-          <I18nMessage
-            tokens={{
-              release_notes: (
-                <Button
-                  button="link"
-                  label={__('release notes')}
-                  href="https://github.com/lbryio/lbry-desktop/releases"
-                />
-              ),
-            }}
-          >
-            Want to know what has changed? See the %release_notes%.
-          </I18nMessage>
-        </p>
-      </Modal>
-    );
-  }
-}
-
 export default ModalAutoUpdateDownloaded;

ui/modal/modalUpgrade/view.jsx

@@ -1,8 +1,7 @@
 // @flow
 import React from 'react';
 import { Modal } from 'modal/modal';
-import Button from 'component/button';
-import I18nMessage from 'component/i18nMessage';
+import LastReleaseChanges from 'component/lastReleaseChanges';
 
 type Props = {
   downloadUpgrade: () => void,
@@ -28,21 +27,7 @@ class ModalUpgrade extends React.PureComponent<Props> {
           {__('An updated version of LBRY is now available.')}{' '}
           {__('Your version is out of date and may be unreliable or insecure.')}
         </p>
-        <p className="help">
-          <I18nMessage
-            tokens={{
-              release_notes: (
-                <Button
-                  button="link"
-                  label={__('release notes')}
-                  href="https://github.com/lbryio/lbry-desktop/releases"
-                />
-              ),
-            }}
-          >
-            Want to know what has changed? See the %release_notes%.
-          </I18nMessage>
-        </p>
+        <LastReleaseChanges hideReleaseVersion />
       </Modal>
     );
   }