Feature: Add Release Notes (#491)

Co-authored-by: Vijay A <vraravam@users.noreply.github.com>
Co-authored-by: Ricardo Cino <ricardo@cino.io>

2 files changed, 178 insertions, 0 deletions

diff --git a/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx b/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx
new file mode 100644
index 000000000..d0be82312
--- /dev/null
+++ b/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx
@@ -0,0 +1,99 @@
+import { Component } from 'react';
+import { observer } from 'mobx-react';
+import { defineMessages, injectIntl } from 'react-intl';
+import Markdown from 'markdown-to-jsx';
+import { openExternalUrl } from '../../../helpers/url-helpers';
+import { ferdiumVersion } from '../../../environment-remote';
+import {
+  getFerdiumVersion,
+  getUpdateInfoFromGH,
+} from '../../../helpers/update-helpers';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.releasenotes.headline',
+    defaultMessage: 'Release Notes',
+  },
+  connectionError: {
+    id: 'settings.releasenotes.connectionError',
+    defaultMessage:
+      'An error occured when connecting to Github, please try again later.',
+  },
+  connectionErrorPageMissing: {
+    id: 'settings.releasenotes.connectionErrorPageMissing',
+    defaultMessage:
+      'An error occured when connecting to Github, the page you are looking for is missing.',
+  },
+});
+
+interface IProps {
+  intl: any;
+}
+
+class ReleaseNotesDashboard extends Component<IProps> {
+  state = {
+    data: '',
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.state = { data: '' };
+  }
+
+  async componentDidMount() {
+    const { intl } = this.props;
+
+    const data = await getUpdateInfoFromGH(
+      window.location.href,
+      ferdiumVersion,
+      intl,
+    );
+
+    this.setState({
+      data,
+    });
+
+    for (const link of document.querySelectorAll('.releasenotes__body a')) {
+      link.addEventListener('click', this.handleClick.bind(this), false);
+    }
+  }
+
+  handleClick(e) {
+    e.preventDefault();
+    openExternalUrl(e.target.href);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener(
+      'click',
+      // eslint-disable-next-line unicorn/no-invalid-remove-event-listener
+      this.handleClick.bind(this),
+      false,
+    );
+  }
+
+  render() {
+    const { intl } = this.props;
+
+    const { data } = this.state;
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <span className="settings__header-item">
+            Ferdium {getFerdiumVersion(window.location.href, ferdiumVersion)}{' '}
+            {' | '}
+          </span>
+          <span className="settings__header-item__secondary">
+            {intl.formatMessage(messages.headline)}
+          </span>
+        </div>
+        <div className="settings__body releasenotes__body">
+          <Markdown options={{ wrapper: 'article' }}>{data}</Markdown>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default injectIntl(observer(ReleaseNotesDashboard));
diff --git a/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx
new file mode 100644
index 000000000..ee0ba75a8
--- /dev/null
+++ b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx
@@ -0,0 +1,79 @@
+import { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, injectIntl } from 'react-intl';
+
+import { mdiClose } from '@mdi/js';
+import { Outlet } from 'react-router-dom';
+import { StoresProps } from '../../../@types/ferdium-components.types';
+import ErrorBoundary from '../../util/ErrorBoundary';
+import Appear from '../../ui/effects/Appear';
+import Icon from '../../ui/icon';
+import { isEscKeyPress } from '../../../jsUtils';
+
+const messages = defineMessages({
+  closeSettings: {
+    id: 'settings.app.closeSettings',
+    defaultMessage: 'Close settings',
+  },
+});
+
+interface IProps extends StoresProps {
+  intl: any;
+}
+
+class ReleaseNotesLayout extends Component<IProps> {
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown.bind(this), false);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener(
+      'keydown',
+      // eslint-disable-next-line unicorn/no-invalid-remove-event-listener
+      this.handleKeyDown.bind(this),
+      false,
+    );
+  }
+
+  handleKeyDown(e) {
+    if (isEscKeyPress(e.keyCode)) {
+      this.props.actions.ui.closeSettings();
+    }
+  }
+
+  render() {
+    const { closeSettings } = this.props.actions.ui;
+
+    const { intl } = this.props;
+
+    return (
+      <Appear transitionName="fadeIn-fast">
+        <div className="settings-wrapper">
+          <ErrorBoundary>
+            <button
+              type="button"
+              className="settings-wrapper__action"
+              onClick={closeSettings}
+              aria-label={intl.formatMessage(messages.closeSettings)}
+            />
+            <div className="settings franz-form">
+              <Outlet />
+              <button
+                type="button"
+                className="settings__close"
+                onClick={closeSettings}
+                aria-label={intl.formatMessage(messages.closeSettings)}
+              >
+                <Icon icon={mdiClose} size={1.35} />
+              </button>
+            </div>
+          </ErrorBoundary>
+        </div>
+      </Appear>
+    );
+  }
+}
+
+export default injectIntl<'intl', IProps>(
+  inject('stores', 'actions')(observer(ReleaseNotesLayout)),
+);