Skip to content
Permalink
Browse files

fix(Announcements): Fixes issue with rendering announcments in worksp…

…aces
  • Loading branch information...
DominikGuzei committed May 8, 2019
1 parent 6cdcafe commit 1e38ec5e524c71ae89cd7d4956736494b8c13886
@@ -113,7 +113,7 @@ export const workspaces = merge({}, defaultStyles.workspaces, {
});

// Announcements
export const announcements = merge({}, defaultStyles.workspaces, {
export const announcements = merge({}, defaultStyles.announcements, {
spotlight: {
background: legacyStyles.darkThemeGrayDark,
},
@@ -4,6 +4,7 @@ import ServiceModel from '../models/Service';
export default {
setActive: {
serviceId: PropTypes.string.isRequired,
keepActiveRoute: PropTypes.bool,
},
blurActive: {},
setActiveNext: {},
@@ -43,6 +43,8 @@ import SubscriptionPopupScreen from './containers/subscription/SubscriptionPopup
import WorkspacesScreen from './features/workspaces/containers/WorkspacesScreen';
import EditWorkspaceScreen from './features/workspaces/containers/EditWorkspaceScreen';
import { WORKSPACES_ROUTES } from './features/workspaces';
import AnnouncementScreen from './features/announcements/components/AnnouncementScreen';
import { ANNOUNCEMENTS_ROUTES } from './features/announcements';

// Add Polyfills
smoothScroll.polyfill();
@@ -73,6 +75,7 @@ window.addEventListener('load', () => {
<I18N>
<Router history={history}>
<Route path="/" component={AppLayoutContainer}>
<Route path={ANNOUNCEMENTS_ROUTES.TARGET} component={AnnouncementScreen} />
<Route path="/settings" component={SettingsWindow}>
<IndexRedirect to="/settings/recipes" />
<Route path="/settings/recipes" component={RecipesScreen} />
@@ -83,7 +83,6 @@ class AppLayout extends Component {
areRequiredRequestsLoading: PropTypes.bool.isRequired,
darkMode: PropTypes.bool.isRequired,
isDelayAppScreenVisible: PropTypes.bool.isRequired,
isAnnouncementVisible: PropTypes.bool.isRequired,
};

static defaultProps = {
@@ -117,7 +116,6 @@ class AppLayout extends Component {
areRequiredRequestsLoading,
darkMode,
isDelayAppScreenVisible,
isAnnouncementVisible,
} = this.props;

const { intl } = this.context;
@@ -197,12 +195,11 @@ class AppLayout extends Component {
{isDelayAppScreenVisible && (<DelayApp />)}
<BasicAuth />
<ShareFranz />
{isAnnouncementVisible && (<AnnouncementScreen />)}
{services}
{children}
</div>
</div>
</div>
{children}
</div>
</ErrorBoundary>
);
@@ -151,7 +151,6 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
areRequiredRequestsLoading={requests.areRequiredRequestsLoading}
darkMode={settings.all.app.darkMode}
isDelayAppScreenVisible={delayAppState.isDelayAppScreenVisible}
isAnnouncementVisible={announcementsStore.isAnnouncementVisible}
>
{React.Children.count(children) > 0 ? children : null}
</AppLayout>
@@ -268,7 +268,7 @@ class AnnouncementScreen extends Component {
<div className={classes.changelog}>
<h1 className={classes.headline}>
{intl.formatMessage(messages.headline, {
version: announcementsStore.currentVersion,
version: announcementsStore.targetVersion,
})}
</h1>
<div
@@ -7,6 +7,10 @@ export const GA_CATEGORY_ANNOUNCEMENTS = 'Announcements';

export const announcementsStore = new AnnouncementsStore();

export const ANNOUNCEMENTS_ROUTES = {
TARGET: '/announcements/:id',
};

export default function initAnnouncements(stores, actions) {
// const { features } = stores;

@@ -8,12 +8,13 @@ import semver from 'semver';
import localStorage from 'mobx-localstorage';

import { FeatureStore } from '../utils/FeatureStore';
import { GA_CATEGORY_ANNOUNCEMENTS } from '.';
import { ANNOUNCEMENTS_ROUTES, GA_CATEGORY_ANNOUNCEMENTS } from '.';
import { getAnnouncementRequest, getChangelogRequest, getCurrentVersionRequest } from './api';
import { announcementActions } from './actions';
import { createActionBindings } from '../utils/ActionBinding';
import { createReactions } from '../../stores/lib/Reaction';
import { gaEvent } from '../../lib/analytics';
import { matchRoute } from '../../helpers/routing-helpers';

const LOCAL_STORAGE_KEY = 'announcements';

@@ -22,8 +23,6 @@ const debug = require('debug')('Franz:feature:announcements:store');
export class AnnouncementsStore extends FeatureStore {
@observable targetVersion = null;

@observable isAnnouncementVisible = false;

@observable isFeatureActive = false;

@computed get changelog() {
@@ -37,6 +36,7 @@ export class AnnouncementsStore extends FeatureStore {
@computed get areNewsAvailable() {
const isChangelogAvailable = getChangelogRequest.wasExecuted && !!this.changelog;
const isAnnouncementAvailable = getAnnouncementRequest.wasExecuted && !!this.announcement;
console.log(isChangelogAvailable, isAnnouncementAvailable);
return isChangelogAvailable || isAnnouncementAvailable;
}

@@ -67,8 +67,9 @@ export class AnnouncementsStore extends FeatureStore {
]));

this._reactions = createReactions([
this._fetchAnnouncements,
this._showAnnouncementOnRouteMatch,
this._showAnnouncementToUsersWhoUpdatedApp,
this._fetchAnnouncements,
]);
this._registerReactions(this._reactions);
this.isFeatureActive = true;
@@ -78,7 +79,6 @@ export class AnnouncementsStore extends FeatureStore {
super.stop();
debug('AnnouncementsStore::stop');
this.isFeatureActive = false;
this.isAnnouncementVisible = false;
}

// ======= HELPERS ======= //
@@ -93,33 +93,23 @@ export class AnnouncementsStore extends FeatureStore {
// ======= ACTIONS ======= //

@action _showAnnouncement = ({ targetVersion } = {}) => {
if (!this.areNewsAvailable) return;
const { router } = this.stores;
this.targetVersion = targetVersion || this.currentVersion;
this.isAnnouncementVisible = true;
this.actions.service.blurActive();
this._updateSettings({
lastSeenAnnouncementVersion: this.currentVersion,
});
const dispose = reaction(
() => this.stores.services.active,
() => {
this._hideAnnouncement();
dispose();
},
);

const targetRoute = `/announcements/${this.targetVersion}`;
if (router.location.pathname !== targetRoute) {
this.stores.router.push(targetRoute);
}
gaEvent(GA_CATEGORY_ANNOUNCEMENTS, 'show');
};

@action _hideAnnouncement() {
this.isAnnouncementVisible = false;
}

// ======= REACTIONS ========

_showAnnouncementToUsersWhoUpdatedApp = () => {
const { announcement, isNewUser } = this;
// Check if there is an announcement and on't show announcements to new users
// Check if there is an announcement and don't show announcements to new users
if (!announcement || isNewUser) return;

// Check if the user has already used current version (= has seen the announcement)
@@ -140,5 +130,14 @@ export class AnnouncementsStore extends FeatureStore {
} else {
getAnnouncementRequest.reset();
}
};

_showAnnouncementOnRouteMatch = () => {
const { router } = this.stores;
const match = matchRoute(ANNOUNCEMENTS_ROUTES.TARGET, router.location.pathname);
if (match) {
const targetVersion = match.id;
this._showAnnouncement({ targetVersion });
}
}
}
@@ -255,13 +255,15 @@ export default class WorkspacesStore extends FeatureStore {
_setActiveServiceOnWorkspaceSwitchReaction = () => {
if (!this.isFeatureActive) return;
if (this.activeWorkspace) {
const services = this.stores.services.allDisplayed;
const activeService = services.find(s => s.isActive);
const activeService = this.stores.services.active;
const workspaceServices = this.getWorkspaceServices(this.activeWorkspace);
if (workspaceServices.length <= 0) return;
const isActiveServiceInWorkspace = workspaceServices.includes(activeService);
if (!isActiveServiceInWorkspace) {
this.actions.service.setActive({ serviceId: workspaceServices[0].id });
this.actions.service.setActive({
serviceId: workspaceServices[0].id,
keepActiveRoute: true,
});
}
}
};
@@ -291,7 +291,8 @@ export default class ServicesStore extends Store {
gaEvent('Service', 'clear cache');
}

@action _setActive({ serviceId }) {
@action _setActive({ serviceId, keepActiveRoute }) {
if (!keepActiveRoute) this.stores.router.push('/');
const service = this.one(serviceId);

this.all.forEach((s, index) => {

0 comments on commit 1e38ec5

Please sign in to comment.
You can’t perform that action at this time.