feat(subscriptions): change texts (#372)

* fix(ScreenTitles): change values

* fix(NotificationSubscriptionScreen): changed text

* feat(contributors): send, receive and show nb of contributors in content

src/app/actions/browser.ts

@@ -1,5 +1,5 @@
 import { TabAction } from '.';
-import Tab from 'app/lmem/Tab';
+import Tab from 'app/lmem/tab';
 
 export interface BrowserActionClickedAction extends TabAction {
   type: 'BROWSER/BROWSER_ACTION_CLICKED';

src/app/actions/bullesUpdate.actions.ts

@@ -1,5 +1,5 @@
 import { TabAction } from './';
-import Tab from 'app/lmem/Tab';
+import Tab from 'app/lmem/tab';
 
 export const SHOW_BULLES_UPDATE_SERVICE_MESSAGE =
   'SHOW_BULLES_UPDATE_SERVICE_MESSAGE';

src/app/actions/index.ts

@@ -1,6 +1,6 @@
 import { Action } from 'redux';
 import { LocationChangeAction } from 'connected-react-router';
-import Tab from 'app/lmem/Tab';
+import Tab from 'app/lmem/tab';
 import { BrowserActionClickedAction } from './browser';
 import {
   TabCreatedAction,

src/app/actions/notices.ts

@@ -1,5 +1,5 @@
 import { StatefulNotice } from 'app/lmem/notice';
-import Tab from 'app/lmem/Tab';
+import Tab from 'app/lmem/tab';
 import { BaseAction, ErrorAction, TabAction, TabMeta } from '.';
 
 export interface NoticesFoundAction extends TabAction {

src/app/actions/options.ts

@@ -1,4 +1,4 @@
-import Tab from 'app/lmem/Tab';
+import Tab from 'app/lmem/tab';
 import { BaseAction, ErrorAction } from './';
 
 export interface OptionsRequestedAction extends BaseAction {

src/app/actions/tabs.ts

@@ -7,7 +7,7 @@ import {
 import { InstallationDetails } from 'app/lmem/installation';
 import { MatchingContext } from 'app/lmem/matchingContext';
 import { BaseAction, TabAction, TabErrorAction } from '.';
-import Tab from 'app/lmem/Tab';
+import Tab from 'app/lmem/tab';
 
 export interface InitAction extends TabAction {
   type: 'INIT';

src/app/actions/tabsLifecycle.ts

@@ -1,5 +1,5 @@
 import { TabAction } from '.';
-import Tab from 'app/lmem/Tab';
+import Tab from 'app/lmem/tab';
 
 export interface TabCreatedAction extends TabAction {
   type: 'BROWSER/TAB_CREATED';

src/app/actions/ui.ts

@@ -1,5 +1,5 @@
 import { CloseCause } from 'app/lmem/ui';
-import Tab from 'app/lmem/Tab';
+import Tab from 'app/lmem/tab';
 import { BaseAction, ErrorAction, TabAction } from '.';
 
 export interface OpenAction extends BaseAction {

src/app/actions/webext.ts

@@ -1,4 +1,4 @@
-import { ActionMeta, BaseAction, ErrorAction } from './index';
+import { ActionMeta, AppAction, BaseAction, ErrorAction } from './index';
 import { From } from 'webext/From';
 
 export interface ListeningActionsReadyAction extends BaseAction {
@@ -16,6 +16,9 @@ export const listeningActionsReady = (
   meta: { ...meta, from }
 });
 
+export const isTabReadyAction = (action: AppAction): boolean =>
+  action.type === 'LISTENING_ACTIONS_READY' && !!action.meta.tab;
+
 export interface ListenActionFailedAction extends ErrorAction {
   type: 'LISTEN_ACTION_FAILED';
 }

src/app/background/reducers/tabs.reducer.ts

@@ -4,9 +4,8 @@ import {
   TAB_REMOVED,
   TAB_UPDATED
 } from 'app/constants/browser/tabs';
-import Tab from 'app/lmem/Tab';
-import { AppAction } from 'app/actions';
-import { isOptionsTabReadyAction } from '../sagas/sendContributorsToOptions.saga';
+import Tab from 'app/lmem/tab';
+import { AppAction, isTabReadyAction } from 'app/actions';
 
 export interface TabsState {
   [tabId: string]: Tab;
@@ -38,7 +37,7 @@ export default function(state = initialState, action: AppAction) {
       return action.meta.tab
         ? R.pipe(
             markTabReady(action.meta.tab),
-            isOptionsTabReadyAction(action)
+            isTabReadyAction(action)
               ? markTabAsOptions(action.meta.tab)
               : R.identity
           )(state)

src/app/background/sagas/index.ts

@@ -11,7 +11,7 @@ import refreshContributors from './refreshContributors';
 import watchBrowserAction from './watchBrowserAction.saga';
 import handleBrowserAction from './handleBrowserAction.saga';
 import openOptions from './openOptions.saga';
-import sendContributorsToOptions from './sendContributorsToOptions.saga';
+import sendContributorsToOptions from './transmitContributors.saga';
 import sendInstallationDetailsToOptions from './sendInstallationDetailsToOptions.saga';
 import setup from './setup.saga';
 import tos from './tos.saga';

src/app/background/sagas/openOptions.saga.ts

@@ -1,5 +1,5 @@
 import { takeLatest, call, put } from 'redux-saga/effects';
-import Tab from 'app/lmem/Tab';
+import Tab from 'app/lmem/tab';
 import openOptions from 'webext/openOptionsTab';
 import {
   OptionsRequestedAction,

src/app/background/sagas/sendInstallationDetailsToOptions.saga.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { takeEvery, select } from 'redux-saga/effects';
-import Tab from 'app/lmem/Tab';
+import Tab from 'app/lmem/tab';
 import {
   AppAction,
   ListeningActionsReadyAction,

src/app/background/sagas/tab.ts

@@ -1,5 +1,6 @@
 import { put, takeLatest, select, call, all, take } from 'redux-saga/effects';
 import * as R from 'ramda';
+import { isToday } from 'date-fns';
 import { TAB_CREATED, TAB_UPDATED } from 'app/constants/browser/tabs';
 import {
   CONTEXT_TRIGGERED,
@@ -30,6 +31,7 @@ import {
 } from 'app/actions';
 import fetchContentScript from '../services/fetchContentScript';
 import { MatchingContext } from 'app/lmem/matchingContext';
+import Tab from 'app/lmem/tab';
 import { StatefulNotice, Notice, warnIfNoticeInvalid } from 'app/lmem/notice';
 import { fetchNotices } from 'api/fetchNotice';
 import sendToTab from 'webext/sendActionToTab';
@@ -44,9 +46,7 @@ import {
 import { findTriggeredContexts } from '../selectors';
 import { getInstallationDetails } from '../selectors/installationDetails';
 import { getTabs } from '../selectors/tabs';
-import Tab from '../../lmem/Tab';
 import { getUpdateMessageLastShowDate } from '../selectors/bullesUpdate.selectors';
-import { isToday } from 'date-fns';
 
 export const tabSaga = (executeContentScript: ExecuteContentScript) =>
   function*({ payload: { tab } }: TabCreatedAction | TabUpdatedAction) {

src/app/background/sagas/tos.saga.ts

@@ -1,11 +1,10 @@
 import { SagaIterator } from 'redux-saga';
 import { takeLatest, select, put } from 'redux-saga/effects';
 import { tosAccepted } from '../../actions';
-import { getOptionsTab } from '../selectors/tabs';
+import { getOptionsTabs } from '../selectors/tabs';
 
 export function* acceptTosSaga(): SagaIterator {
-  const optionsTab = yield select(getOptionsTab);
-  if (optionsTab) {
+  for (const optionsTab of yield select(getOptionsTabs)) {
     yield put(tosAccepted({ sendToTab: true, tab: optionsTab }));
   }
 }

src/app/background/sagas/sendContributorsToOptions.saga.ts → src/app/background/sagas/transmitContributors.saga.ts

@@ -1,21 +1,16 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { takeEvery, select } from 'redux-saga/effects';
-import Tab from 'app/lmem/Tab';
-import sendToTab from 'webext/sendActionToTab';
-import assocTabIfNotGiven from 'webext/assocTabIfNotGiven';
+import Tab from 'app/lmem/tab';
 import {
-  AppAction,
   contributorsTransmitted,
+  isTabReadyAction,
   ListeningActionsReadyAction
-} from '../../actions';
+} from 'app/actions';
+import sendToTab from 'webext/sendActionToTab';
+import assocTabIfNotGiven from 'webext/assocTabIfNotGiven';
 import { getContributorsWithSubscriptionState } from '../selectors/subscriptions.selectors';
 import { SUBSCRIBE, UNSUBSCRIBE } from '../../constants/ActionTypes';
-import { getOptionsTab } from '../selectors/tabs';
-
-export const isOptionsTabReadyAction = (action: AppAction): boolean =>
-  action.type === 'LISTENING_ACTIONS_READY' &&
-  action.meta.from === 'options' &&
-  !!action.meta.tab;
+import { getTabsList } from '../selectors/tabs';
 
 function* sendContributorsToTab(tab: chrome.tabs.Tab & Tab) {
   const contributors = yield select(getContributorsWithSubscriptionState);
@@ -31,13 +26,12 @@ function* sendContributorsBackToTab(action: ListeningActionsReadyAction) {
 }
 
 function* subscribeSaga() {
-  const optionsTab = yield select(getOptionsTab);
-  if (optionsTab) {
-    yield sendContributorsToTab(optionsTab);
+  for (const tab of yield select(getTabsList)) {
+    yield sendContributorsToTab(tab);
   }
 }
 
-export default function* sendContributorsToOptionsSaga() {
-  yield takeEvery(isOptionsTabReadyAction, sendContributorsBackToTab);
+export default function* transmitContributorsSaga() {
+  yield takeEvery(isTabReadyAction, sendContributorsBackToTab);
   yield takeEvery([SUBSCRIBE, UNSUBSCRIBE], subscribeSaga);
 }

src/app/background/selectors/tabs.selectors.spec.ts

@@ -0,0 +1,42 @@
+import { expect } from 'chai';
+import { getOptionsTabs, getReadyTabs, getTabsList } from './tabs';
+import { TabsState } from '../reducers/tabs.reducer';
+
+interface StateWithTabs {
+  tabs: TabsState;
+}
+
+describe('background > selectors > tabs', () => {
+  const state: StateWithTabs = {
+    tabs: {
+      '1': { id: 1, url: 'someUrl', ready: true },
+      '2': { id: 2, url: 'someOtherUrl' },
+      '3': { id: 3, url: 'optionsUrl', options: true, ready: true }
+    }
+  };
+
+  describe('getTabsList', () => {
+    it('returns all known tabs an an array', () => {
+      expect(getTabsList(state)).to.eql([
+        { id: 1, url: 'someUrl', ready: true },
+        { id: 2, url: 'someOtherUrl' },
+        { id: 3, url: 'optionsUrl', options: true, ready: true }
+      ]);
+    });
+  });
+  describe('getReadyTabs', () => {
+    it('returns all tabs that are marked ready', () => {
+      expect(getReadyTabs(state)).to.eql([
+        { id: 1, url: 'someUrl', ready: true },
+        { id: 3, url: 'optionsUrl', options: true, ready: true }
+      ]);
+    });
+  });
+  describe('getOptionsTabs', () => {
+    it('returns all options tabs', () => {
+      expect(getOptionsTabs(state)).to.eql([
+        { id: 3, url: 'optionsUrl', options: true, ready: true }
+      ]);
+    });
+  });
+});

src/app/background/selectors/tabs.ts

@@ -1,16 +1,21 @@
-import { BackgroundState } from '../reducers';
-import { TabsState } from '../reducers/tabs.reducer';
 import { createSelector } from 'reselect';
-import Tab from '../../lmem/Tab';
-
-export const getTabs = (state: BackgroundState): TabsState => state.tabs;
+import * as R from 'ramda';
+import { isOptionsTab, isTabReady } from 'app/lmem/tab';
+import { TabsState } from '../reducers/tabs.reducer';
 
-export const isOptionsTab = (tab: Tab) => tab.options === true;
+export const getTabs = (state: { tabs: TabsState }): TabsState => state.tabs;
 
-export const getOptionsTab = createSelector(
+export const getTabsList = createSelector(
   [getTabs],
-  tabs =>
-    Object.keys(tabs)
-      .map(tabId => tabs[tabId])
-      .find(isOptionsTab)
+  Object.values
+);
+
+export const getReadyTabs = createSelector(
+  [getTabsList],
+  R.filter(isTabReady)
+);
+
+export const getOptionsTabs = createSelector(
+  [getTabsList],
+  R.filter(isOptionsTab)
 );

src/app/content/App/Account/Menu/index.tsx

@@ -27,4 +27,4 @@ export const Menu = ({ match }: MenuProps) => (
   </Account>
 );
 
-export default withTitle<MenuProps>('Account')(Menu);
+export default withTitle<MenuProps>('Options')(Menu);

src/app/content/App/Help/index.tsx

@@ -44,4 +44,4 @@ export const Help = () => (
   </Container>
 );
 
-export default withTitle<{}>('Bulles Pour cette page')(Help);
+export default withTitle<{}>('Aide')(Help);

src/app/content/App/Subscriptions/Container.ts

@@ -1,13 +1,15 @@
 import styled from 'styled-components';
 
-export default styled.article`
+const Container = styled.article`
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 22px 37px 40px;
+  padding: 22px 20px 40px;
   text-align: center;
 
   & svg {
     margin-bottom: 35px;
   }
 `;
+
+export default Container;

src/app/content/App/Subscriptions/index.tsx

@@ -1,46 +1,44 @@
 import React from 'react';
+import styled from 'styled-components';
 import BorderButton from 'components/atoms/Button/BorderButton/BorderButton';
 import withTitle from 'app/hocs/withTitle';
 import Illustration from './Illustration';
 import Container from './Container';
-import SubscriptionsData from './SubscriptionsData';
 import withConnect from './withConnect';
 import { compose } from 'redux';
 
 interface SubscriptionsScreenProps {
   optionsRequested: () => void;
+  nbTotalContributors?: number;
+  nbSubscribedContributors?: number;
 }
 
+const SubscriptionInfo = styled.div`
+  margin-bottom: 35px;
+  font-size: 18px;
+`;
+
+const pluralize = (nb: number | undefined) => (nb && nb > 1 ? 's' : '');
+
 export const Subscriptions = ({
-  optionsRequested
+  optionsRequested,
+  nbSubscribedContributors,
+  nbTotalContributors
 }: SubscriptionsScreenProps) => (
   <Container>
     <Illustration />
 
-    <SubscriptionsData>
-      <div>
-        <span>5</span>
-        <span>Abonnements</span>
-      </div>
-      <div>
-        <span>3</span>
-        <span>
-          Notices
-          <br />
-          publiées
-        </span>
-      </div>
-      <div>
-        <span>155</span>
-        <span>Vues</span>
-      </div>
-    </SubscriptionsData>
+    <SubscriptionInfo>
+      Votre extension est abonnée à <strong>{nbSubscribedContributors}</strong>{' '}
+      contributeur{pluralize(nbSubscribedContributors)} sur{' '}
+      <strong>{nbTotalContributors}</strong> possibles.
+    </SubscriptionInfo>
 
     <BorderButton onClick={optionsRequested}>Gérer</BorderButton>
   </Container>
 );
 
 export default compose(
   withConnect,
-  withTitle<SubscriptionsScreenProps>('Abonnement')
+  withTitle<SubscriptionsScreenProps>('Abonnements')
 )(Subscriptions);

src/app/content/App/Subscriptions/withConnect.ts

@@ -1,11 +1,21 @@
 import { connect } from 'react-redux';
 import { optionsRequested } from 'app/actions/options';
+import { ContentState } from '../../store';
+import {
+  getNbSubscribedContributors,
+  getNbTotalContributors
+} from '../../selectors/contributors.selectors';
+
+const mapStateToProps = (state: ContentState) => ({
+  nbTotalContributors: getNbTotalContributors(state),
+  nbSubscribedContributors: getNbSubscribedContributors(state)
+});
 
 const mapDispatchToProps = {
   optionsRequested: optionsRequested
 };
 
 export default connect(
-  null,
+  mapStateToProps,
   mapDispatchToProps
 );