Move simperium connection state from flux to redux (#1870)

When Simperium connects and disconnects we display different text and a different icon in the sync status popover. This PR moves that state from flux to the redux state.

lib/app.tsx

@@ -30,6 +30,7 @@ import {
   pick,
   values,
 } from 'lodash';
+import { toggleSimperiumConnectionStatus } from './state/ui/actions';
 
 import * as settingsActions from './state/settings/actions';
 
@@ -82,6 +83,8 @@ function mapDispatchToProps(dispatch, { noteBucket }) {
     setAuthorized: () => dispatch(reduxActions.auth.setAuthorized()),
     setSearchFocus: () =>
       dispatch(actionCreators.setSearchFocus({ searchFocus: true })),
+    setSimperiumConnectionStatus: connected =>
+      dispatch(toggleSimperiumConnectionStatus(connected)),
   };
 }
 
@@ -166,18 +169,14 @@ export const App = connect(
         .on('update', debounce(this.props.loadTags, 200))
         .on('remove', this.props.loadTags);
 
-      const {
-        actions: { setConnectionStatus },
-      } = this.props;
-
       this.props.client
         .on('authorized', this.onAuthChanged)
         .on('unauthorized', this.onAuthChanged)
         .on('message', setLastSyncedTime)
         .on('message', this.syncActivityHooks)
         .on('send', this.syncActivityHooks)
-        .on('connect', () => setConnectionStatus({ isOffline: false }))
-        .on('disconnect', () => setConnectionStatus({ isOffline: true }));
+        .on('connect', () => this.props.setSimperiumConnectionStatus(true))
+        .on('disconnect', () => this.props.setSimperiumConnectionStatus(false));
 
       this.onLoadPreferences(() =>
         // Make sure that tracking starts only after preferences are loaded

lib/components/sync-status/index.tsx

@@ -1,16 +1,20 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 
 import AlertIcon from '../../icons/alert';
 import SyncIcon from '../../icons/sync';
 import SyncStatusPopover from './popover';
 
-class SyncStatus extends Component {
-  static propTypes = {
-    isOffline: PropTypes.bool.isRequired,
-    unsyncedNoteIds: PropTypes.array.isRequired,
-  };
+import * as S from '../../state';
+import * as T from '../../types';
+
+type StateProps = {
+  simperiumConnected: boolean;
+  unsyncedNoteIds: T.EntityId[];
+};
 
+class SyncStatus extends Component<StateProps> {
   state = {
     anchorEl: null,
   };
@@ -24,7 +28,7 @@ class SyncStatus extends Component {
   };
 
   render() {
-    const { isOffline, unsyncedNoteIds } = this.props;
+    const { simperiumConnected, unsyncedNoteIds } = this.props;
     const { anchorEl } = this.state;
 
     const popoverId = 'sync-status__popover';
@@ -33,9 +37,9 @@ class SyncStatus extends Component {
     const unit = unsyncedChangeCount === 1 ? 'change' : 'changes';
     const text = unsyncedChangeCount
       ? `${unsyncedChangeCount} unsynced ${unit}`
-      : isOffline
-      ? 'No connection'
-      : 'All changes synced';
+      : simperiumConnected
+      ? 'All changes synced'
+      : 'No connection';
 
     return (
       <div>
@@ -49,7 +53,7 @@ class SyncStatus extends Component {
           tabIndex="0"
         >
           <span className="sync-status__icon">
-            {isOffline ? <AlertIcon /> : <SyncIcon />}
+            {simperiumConnected ? <SyncIcon /> : <AlertIcon />}
           </span>
           {text}
         </div>
@@ -65,4 +69,12 @@ class SyncStatus extends Component {
   }
 }
 
-export default SyncStatus;
+const mapStateToProps: S.MapState<StateProps> = ({
+  appState: state,
+  ui: { simperiumConnected },
+}) => ({
+  simperiumConnected,
+  unsyncedNoteIds: state.unsyncedNoteIds,
+});
+
+export default connect(mapStateToProps)(SyncStatus);

lib/flux/app-state.ts

@@ -52,7 +52,6 @@ const initialState: AppState = {
   shouldPrint: false,
   searchFocus: false,
   unsyncedNoteIds: [], // note bucket only
-  isOffline: true, // disconnected from Simperium server
 };
 
 export const actionMap = new ActionMap({
@@ -718,15 +717,6 @@ export const actionMap = new ActionMap({
         unsyncedNoteIds: { $set: noteIds },
       });
     },
-
-    setConnectionStatus(
-      state: AppState,
-      { isOffline }: { isOffline: boolean }
-    ) {
-      return update(state, {
-        isOffline: { $set: isOffline },
-      });
-    },
   },
 });
 

lib/navigation-bar/index.tsx

@@ -21,7 +21,6 @@ export class NavigationBar extends Component {
     autoHideMenuBar: PropTypes.bool,
     dialogs: PropTypes.array.isRequired,
     isElectron: PropTypes.bool.isRequired,
-    isOffline: PropTypes.bool.isRequired,
     onAbout: PropTypes.func.isRequired,
     onOutsideClick: PropTypes.func.isRequired,
     onSettings: PropTypes.func.isRequired,
@@ -30,7 +29,6 @@ export class NavigationBar extends Component {
     selectedTag: PropTypes.object,
     showNavigation: PropTypes.bool.isRequired,
     showTrash: PropTypes.bool.isRequired,
-    unsyncedNoteIds: PropTypes.array.isRequired,
   };
 
   static defaultProps = {
@@ -69,13 +67,10 @@ export class NavigationBar extends Component {
     const {
       autoHideMenuBar,
       isElectron,
-      isOffline,
       onAbout,
       onSettings,
       onShowAllNotes,
-      unsyncedNoteIds,
     } = this.props;
-
     return (
       <div className="navigation-bar theme-color-bg theme-color-fg theme-color-border">
         <div className="navigation-bar__folders">
@@ -125,7 +120,7 @@ export class NavigationBar extends Component {
         )}
 
         <div className="navigation-bar__sync-status theme-color-fg-dim theme-color-border">
-          <SyncStatus isOffline={isOffline} unsyncedNoteIds={unsyncedNoteIds} />
+          <SyncStatus />
         </div>
       </div>
     );
@@ -135,11 +130,9 @@ export class NavigationBar extends Component {
 const mapStateToProps = ({ appState: state, settings }) => ({
   autoHideMenuBar: settings.autoHideMenuBar,
   dialogs: state.dialogs,
-  isOffline: state.isOffline,
   selectedTag: state.tag,
   showNavigation: state.showNavigation,
   showTrash: state.showTrash,
-  unsyncedNoteIds: state.unsyncedNoteIds,
 });
 
 const {

lib/state/action-types.ts

@@ -53,6 +53,10 @@ export type SetWPToken = Action<'setWPToken', { token: string }>;
  */
 export type FilterNotes = Action<'FILTER_NOTES', { notes: T.NoteEntity[] }>;
 export type SetAuth = Action<'AUTH_SET', { status: AuthState }>;
+export type ToggleSimperiumConnectionStatus = Action<
+  'SIMPERIUM_CONNECTION_STATUS_TOGGLE',
+  { simperiumConnected: boolean }
+>;
 export type ToggleTagDrawer = Action<'TAG_DRAWER_TOGGLE', { show: boolean }>;
 
 export type ActionType =
@@ -71,6 +75,7 @@ export type ActionType =
   | SetSpellCheck
   | SetTheme
   | SetWPToken
+  | ToggleSimperiumConnectionStatus
   | ToggleTagDrawer;
 
 export type ActionCreator<A extends ActionType> = (...args: any[]) => A;

lib/state/index.ts

@@ -31,7 +31,6 @@ export type AppState = {
   editorMode: T.EditorMode;
   editingTags: boolean;
   filter: string;
-  isOffline: boolean;
   isViewingRevisions: boolean;
   listTitle: T.TranslatableString;
   nextDialogKey: number;

lib/state/ui/actions.ts

@@ -8,6 +8,13 @@ export const filterNotes: A.ActionCreator<A.FilterNotes> = (
   notes,
 });
 
+export const toggleSimperiumConnectionStatus: A.ActionCreator<A.ToggleSimperiumConnectionStatus> = (
+  simperiumConnected: boolean
+) => ({
+  type: 'SIMPERIUM_CONNECTION_STATUS_TOGGLE',
+  simperiumConnected,
+});
+
 export const toggleTagDrawer: A.ActionCreator<A.ToggleTagDrawer> = (
   show: boolean
 ) => ({

lib/state/ui/reducer.ts

@@ -12,6 +12,11 @@ const filteredNotes: A.Reducer<T.NoteEntity[]> = (
   action
 ) => ('FILTER_NOTES' === action.type ? action.notes : state);
 
+const simperiumConnected: A.Reducer<boolean> = (state = false, action) =>
+  'SIMPERIUM_CONNECTION_STATUS_TOGGLE' === action.type
+    ? action.simperiumConnected
+    : state;
+
 const visiblePanes: A.Reducer<string[]> = (
   state = defaultVisiblePanes,
   action
@@ -25,4 +30,8 @@ const visiblePanes: A.Reducer<string[]> = (
   return state;
 };
 
-export default combineReducers({ filteredNotes, visiblePanes });
+export default combineReducers({
+  filteredNotes,
+  simperiumConnected,
+  visiblePanes,
+});