From eaf4aff646eed56e65c8dd8e70143ab5634ad4b4 Mon Sep 17 00:00:00 2001 From: Dominik Guzei Date: Thu, 11 Apr 2019 16:44:16 +0200 Subject: WIP: announcement feature and workspace fixes --- src/features/announcements/actions.js | 4 +- src/features/announcements/api.js | 18 ++- .../announcements/components/AnnouncementScreen.js | 152 ++++++++++++++++++--- src/features/announcements/store.js | 151 +++++++++++--------- 4 files changed, 235 insertions(+), 90 deletions(-) (limited to 'src/features/announcements') diff --git a/src/features/announcements/actions.js b/src/features/announcements/actions.js index 68b262ded..bab496314 100644 --- a/src/features/announcements/actions.js +++ b/src/features/announcements/actions.js @@ -2,7 +2,9 @@ import PropTypes from 'prop-types'; import { createActionsFromDefinitions } from '../../actions/lib/actions'; export const announcementActions = createActionsFromDefinitions({ - show: {}, + show: { + targetVersion: PropTypes.string, + }, }, PropTypes.checkPropTypes); export default announcementActions; diff --git a/src/features/announcements/api.js b/src/features/announcements/api.js index 09fcb8235..a581bd8de 100644 --- a/src/features/announcements/api.js +++ b/src/features/announcements/api.js @@ -1,5 +1,6 @@ import { remote } from 'electron'; import Request from '../../stores/lib/Request'; +import { API, API_VERSION } from '../../environment'; const debug = require('debug')('Franz:feature:announcements:api'); @@ -9,15 +10,24 @@ export const announcementsApi = { return Promise.resolve(remote.app.getVersion()); }, - async getAnnouncementForVersion(version) { - debug('fetching release announcement from Github'); + async getChangelog(version) { + debug('fetching release changelog from Github'); const url = `https://api.github.com/repos/meetfranz/franz/releases/tags/v${version}`; const request = await window.fetch(url, { method: 'GET' }); - if (!request.ok) throw request; + if (!request.ok) return null; const data = await request.json(); return data.body; }, + + async getAnnouncement(version) { + debug('fetching release announcement from api'); + const url = `${API}/${API_VERSION}/announcements/${version}`; + const response = await window.fetch(url, { method: 'GET' }); + if (!response.ok) return null; + return response.json(); + }, }; export const getCurrentVersionRequest = new Request(announcementsApi, 'getCurrentVersion'); -export const getAnnouncementRequest = new Request(announcementsApi, 'getAnnouncementForVersion'); +export const getChangelogRequest = new Request(announcementsApi, 'getChangelog'); +export const getAnnouncementRequest = new Request(announcementsApi, 'getAnnouncement'); diff --git a/src/features/announcements/components/AnnouncementScreen.js b/src/features/announcements/components/AnnouncementScreen.js index 5b3e7aeaa..2d5efc396 100644 --- a/src/features/announcements/components/AnnouncementScreen.js +++ b/src/features/announcements/components/AnnouncementScreen.js @@ -4,27 +4,29 @@ import PropTypes from 'prop-types'; import { inject, observer } from 'mobx-react'; import { defineMessages, intlShape } from 'react-intl'; import injectSheet from 'react-jss'; -import { themeSidebarWidth } from '../../../../packages/theme/lib/themes/legacy'; +import { Button } from '@meetfranz/forms'; + import { announcementsStore } from '../index'; +import UIStore from '../../../stores/UIStore'; const messages = defineMessages({ headline: { - id: 'feature.announcements.headline', - defaultMessage: '!!!What\'s new in Franz {version}?', + id: 'feature.announcements.changelog.headline', + defaultMessage: '!!!Changes in Franz {version}', }, }); +const smallScreen = '1000px'; + const styles = theme => ({ container: { background: theme.colorBackground, position: 'absolute', top: 0, zIndex: 140, - width: `calc(100% - ${themeSidebarWidth})`, - display: 'flex', - 'flex-direction': 'column', - 'align-items': 'center', - 'justify-content': 'center', + width: '100%', + height: '100%', + overflowY: 'auto', }, headline: { color: theme.colorHeadline, @@ -33,7 +35,76 @@ const styles = theme => ({ 'text-align': 'center', 'line-height': '1.3em', }, - body: { + announcement: { + height: '100vh', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + }, + main: { + flexGrow: 1, + '& h1': { + marginTop: 40, + fontSize: 50, + color: theme.styleTypes.primary.accent, + textAlign: 'center', + [`@media(min-width: ${smallScreen})`]: { + marginTop: 75, + }, + }, + '& h2': { + fontSize: 24, + fontWeight: 300, + color: theme.colorText, + textAlign: 'center', + }, + }, + mainBody: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + width: 'calc(100% - 80px)', + height: 'auto', + margin: '0 auto', + [`@media(min-width: ${smallScreen})`]: { + flexDirection: 'row', + justifyContent: 'center', + }, + }, + mainImage: { + minWidth: 250, + maxWidth: 400, + margin: '0 auto', + marginBottom: 40, + '& img': { + width: '100%', + }, + [`@media(min-width: ${smallScreen})`]: { + margin: 0, + }, + }, + mainText: { + height: 'auto', + maxWidth: 600, + textAlign: 'center', + '& p': { + lineHeight: '1.5em', + }, + [`@media(min-width: ${smallScreen})`]: { + textAlign: 'left', + }, + }, + mainCtaButton: { + textAlign: 'center', + marginTop: 40, + [`@media(min-width: ${smallScreen})`]: { + textAlign: 'left', + }, + }, + spotlight: { + height: 'auto', + }, + changelog: { '& h3': { fontSize: '24px', margin: '1.5em 0 1em 0', @@ -45,10 +116,13 @@ const styles = theme => ({ }); -@inject('actions') @injectSheet(styles) @observer +@inject('stores', 'actions') @injectSheet(styles) @observer class AnnouncementScreen extends Component { static propTypes = { classes: PropTypes.object.isRequired, + stores: PropTypes.shape({ + ui: PropTypes.instanceOf(UIStore).isRequired, + }).isRequired, }; static contextTypes = { @@ -56,21 +130,55 @@ class AnnouncementScreen extends Component { }; render() { - const { classes } = this.props; + const { classes, stores } = this.props; const { intl } = this.context; + const { changelog, announcement } = announcementsStore; + const themeImage = stores.ui.isDarkThemeActive ? 'dark' : 'light'; return (
-

- {intl.formatMessage(messages.headline, { - version: announcementsStore.currentVersion, - })} -

-
+
+
+

{announcement.main.headline}

+

{announcement.main.subHeadline}

+
+
+ +
+
+

+

+
+
+
+
+ {announcement.spotlight && ( +
+

{announcement.spotlight.title}

+
+ )} +
+ {changelog && ( +
+

+ {intl.formatMessage(messages.headline, { + version: announcementsStore.currentVersion, + })} +

+
+
+ )}
); } diff --git a/src/features/announcements/store.js b/src/features/announcements/store.js index c59700926..d4fb0a52c 100644 --- a/src/features/announcements/store.js +++ b/src/features/announcements/store.js @@ -1,96 +1,93 @@ -import { action, observable, reaction } from 'mobx'; +import { + action, + computed, + observable, + reaction, +} from 'mobx'; import semver from 'semver'; +import localStorage from 'mobx-localstorage'; + import { FeatureStore } from '../utils/FeatureStore'; -import { getAnnouncementRequest, getCurrentVersionRequest } from './api'; +import { getAnnouncementRequest, getChangelogRequest, getCurrentVersionRequest } from './api'; +import { announcementActions } from './actions'; + +const LOCAL_STORAGE_KEY = 'announcements'; const debug = require('debug')('Franz:feature:announcements:store'); export class AnnouncementsStore extends FeatureStore { - - @observable announcement = null; - - @observable currentVersion = null; - - @observable lastUsedVersion = null; + @observable targetVersion = null; @observable isAnnouncementVisible = false; @observable isFeatureActive = false; - async start(stores, actions) { - debug('AnnouncementsStore::start'); - this.stores = stores; - this.actions = actions; - await this.fetchLastUsedVersion(); - await this.fetchCurrentVersion(); - await this.fetchReleaseAnnouncement(); - this.showAnnouncementIfNotSeenYet(); - - this.actions.announcements.show.listen(this._showAnnouncement.bind(this)); - this.isFeatureActive = true; + @computed get changelog() { + return getChangelogRequest.result; } - stop() { - debug('AnnouncementsStore::stop'); - this.isFeatureActive = false; - this.isAnnouncementVisible = false; + @computed get announcement() { + return getAnnouncementRequest.result; } - // ====== PUBLIC ====== - - async fetchLastUsedVersion() { - debug('getting last used version from local storage'); - const lastUsedVersion = window.localStorage.getItem('lastUsedVersion'); - this._setLastUsedVersion(lastUsedVersion == null ? '0.0.0' : lastUsedVersion); + @computed get settings() { + return localStorage.getItem(LOCAL_STORAGE_KEY) || {}; } - async fetchCurrentVersion() { - debug('getting current version from api'); - const version = await getCurrentVersionRequest.execute(); - this._setCurrentVersion(version); + @computed get lastSeenAnnouncementVersion() { + return this.settings.lastSeenAnnouncementVersion || null; } - async fetchReleaseAnnouncement() { - debug('getting release announcement from api'); - try { - const announcement = await getAnnouncementRequest.execute(this.currentVersion); - this._setAnnouncement(announcement); - } catch (error) { - this._setAnnouncement(null); - } + @computed get currentVersion() { + return getCurrentVersionRequest.result; } - showAnnouncementIfNotSeenYet() { - const { announcement, currentVersion, lastUsedVersion } = this; - if (announcement && semver.gt(currentVersion, lastUsedVersion)) { - debug(`${currentVersion} < ${lastUsedVersion}: announcement is shown`); - this._showAnnouncement(); - } else { - debug(`${currentVersion} >= ${lastUsedVersion}: announcement is hidden`); - this._hideAnnouncement(); - } + @computed get isNewUser() { + return this.stores.settings.stats.appStarts <= 1; } - // ====== PRIVATE ====== + async start(stores, actions) { + debug('AnnouncementsStore::start'); + this.stores = stores; + this.actions = actions; + getCurrentVersionRequest.execute(); - @action _setCurrentVersion(version) { - debug(`setting current version to ${version}`); - this.currentVersion = version; - } + this._registerActions([ + [announcementActions.show, this._showAnnouncement], + ]); - @action _setLastUsedVersion(version) { - debug(`setting last used version to ${version}`); - this.lastUsedVersion = version; + this._registerReactions([ + this._fetchAnnouncements, + this._showAnnouncementToUsersWhoUpdatedApp, + ]); + this.isFeatureActive = true; } - @action _setAnnouncement(announcement) { - debug(`setting announcement to ${announcement}`); - this.announcement = announcement; + stop() { + super.stop(); + debug('AnnouncementsStore::stop'); + this.isFeatureActive = false; + this.isAnnouncementVisible = false; } - @action _showAnnouncement() { + // ======= HELPERS ======= // + + _updateSettings = (changes) => { + localStorage.setItem(LOCAL_STORAGE_KEY, { + ...this.settings, + ...changes, + }); + }; + + // ======= ACTIONS ======= // + + @action _showAnnouncement = ({ targetVersion } = {}) => { + this.targetVersion = targetVersion || this.currentVersion; this.isAnnouncementVisible = true; this.actions.service.blurActive(); + this._updateSettings({ + lastSeenAnnouncementVersion: this.currentVersion, + }); const dispose = reaction( () => this.stores.services.active, () => { @@ -98,9 +95,37 @@ export class AnnouncementsStore extends FeatureStore { dispose(); }, ); - } + }; @action _hideAnnouncement() { this.isAnnouncementVisible = false; } + + // ======= REACTIONS ======== + + _showAnnouncementToUsersWhoUpdatedApp = () => { + const { announcement, isNewUser } = this; + console.log(announcement, isNewUser); + // Check if there is an announcement and on't show announcements to new users + if (!announcement || isNewUser) return; + + this._showAnnouncement(); + + // Check if the user has already used current version (= has seen the announcement) + // const { currentVersion, lastSeenAnnouncementVersion } = this; + // if (semver.gt(currentVersion, lastSeenAnnouncementVersion)) { + // debug(`${currentVersion} < ${lastSeenAnnouncementVersion}: announcement is shown`); + // this._showAnnouncement(); + // } else { + // debug(`${currentVersion} >= ${lastSeenAnnouncementVersion}: announcement is hidden`); + // this._hideAnnouncement(); + // } + }; + + _fetchAnnouncements = () => { + const targetVersion = this.targetVersion || this.currentVersion; + if (!targetVersion) return; + getChangelogRequest.execute('5.0.1'); + getAnnouncementRequest.execute('5.1.0'); + } } -- cgit v1.2.3-70-g09d2