Move unsyncednoteids state from flux to redux (#1871)

Move unsyncednoteids state from flux to redux
Automattic · Feb 3, 2020 · 4b915b1 · 4b915b1
1 parent 3867114
commit 4b915b1
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 50 deletions.
diff --git a/lib/app.tsx b/lib/app.tsx
@@ -30,7 +30,10 @@ import {
   pick,
   values,
 } from 'lodash';
-import { toggleSimperiumConnectionStatus } from './state/ui/actions';
+import {
+  setUnsyncedNoteIds,
+  toggleSimperiumConnectionStatus,
+} from './state/ui/actions';
 
 import * as settingsActions from './state/settings/actions';
 
@@ -103,6 +106,7 @@ const mapDispatchToProps: S.MapDispatch<
     setSimperiumConnectionStatus: connected =>
       dispatch(toggleSimperiumConnectionStatus(connected)),
     selectNote: note => dispatch(actions.ui.selectNote(note)),
+    setUnsyncedNoteIds: noteIds => dispatch(setUnsyncedNoteIds(noteIds)),
   };
 };
 
@@ -303,11 +307,11 @@ export const App = connect(
     };
 
     onNotesIndex = () => {
-      const { noteBucket } = this.props;
-      const { loadNotes, setUnsyncedNoteIds } = this.props.actions;
+      const { noteBucket, setUnsyncedNoteIds } = this.props;
+      const { loadNotes } = this.props.actions;
 
       loadNotes({ noteBucket });
-      setUnsyncedNoteIds({ noteIds: getUnsyncedNoteIds(noteBucket) });
+      setUnsyncedNoteIds(getUnsyncedNoteIds(noteBucket));
     };
 
     onNoteRemoved = () => this.onNotesIndex();
@@ -388,16 +392,14 @@ export const App = connect(
       activityHooks(data, {
         onIdle: () => {
           const {
-            actions: { setUnsyncedNoteIds },
             appState: { notes },
             client,
             noteBucket,
+            setUnsyncedNoteIds,
           } = this.props;
 
           nudgeUnsynced({ client, noteBucket, notes });
-          setUnsyncedNoteIds({
-            noteIds: getUnsyncedNoteIds(noteBucket),
-          });
+          setUnsyncedNoteIds(getUnsyncedNoteIds(noteBucket));
         },
       });
     };

diff --git a/lib/components/sync-status/index.tsx b/lib/components/sync-status/index.tsx
@@ -62,19 +62,17 @@ class SyncStatus extends Component<StateProps> {
           anchorEl={anchorEl}
           id={popoverId}
           onClose={this.handlePopoverClose}
-          unsyncedNoteIds={unsyncedNoteIds}
         />
       </div>
     );
   }
 }
 
 const mapStateToProps: S.MapState<StateProps> = ({
-  appState: state,
-  ui: { simperiumConnected },
+  ui: { simperiumConnected, unsyncedNoteIds },
 }) => ({
   simperiumConnected,
-  unsyncedNoteIds: state.unsyncedNoteIds,
+  unsyncedNoteIds,
 });
 
 export default connect(mapStateToProps)(SyncStatus);
diff --git a/lib/components/sync-status/popover.tsx b/lib/components/sync-status/popover.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
 import formatDistanceToNow from 'date-fns/formatDistanceToNow';
@@ -8,17 +7,26 @@ import { Popover } from '@material-ui/core';
 import { getLastSyncedTime } from '../../utils/sync/last-synced-time';
 import getNoteTitles from './get-note-titles';
 
-class SyncStatusPopover extends React.Component {
+import * as S from '../../state';
+import * as T from '../../types';
+
+type StateProps = {
+  notes: T.NoteEntity[] | null;
+  theme: T.Theme;
+  unsyncedNoteIds: T.EntityId[];
+};
+
+type OwnProps = {
+  anchorEl: HTMLElement;
+  id: T.EntityId;
+  onClose: () => void;
+};
+
+type Props = StateProps & OwnProps;
+
+class SyncStatusPopover extends React.Component<Props> {
   render() {
-    const {
-      anchorEl,
-      classes = {},
-      id,
-      notes,
-      onClose,
-      theme,
-      unsyncedNoteIds,
-    } = this.props;
+    const { anchorEl, id, notes, onClose, theme, unsyncedNoteIds } = this.props;
     const themeClass = `theme-${theme}`;
     const open = Boolean(anchorEl);
     const hasUnsyncedChanges = unsyncedNoteIds.length > 0;
@@ -34,19 +42,14 @@ class SyncStatusPopover extends React.Component {
     return (
       <Popover
         id={id}
-        className={classnames(
-          'sync-status-popover',
-          classes.popover,
-          themeClass
-        )}
+        className={classnames('sync-status-popover', themeClass)}
         classes={{
           paper: classnames(
             'sync-status-popover__paper',
             'theme-color-bg',
             'theme-color-border',
             'theme-color-fg-dim',
-            { 'has-unsynced-changes': hasUnsyncedChanges },
-            classes.paper
+            { 'has-unsynced-changes': hasUnsyncedChanges }
           ),
         }}
         open={open}
@@ -98,19 +101,14 @@ class SyncStatusPopover extends React.Component {
   }
 }
 
-SyncStatusPopover.propTypes = {
-  anchorEl: PropTypes.object,
-  classes: PropTypes.object,
-  id: PropTypes.string,
-  notes: PropTypes.array,
-  onClose: PropTypes.func.isRequired,
-  theme: PropTypes.string.isRequired,
-  unsyncedNoteIds: PropTypes.array.isRequired,
-};
-
-const mapStateToProps = ({ appState, settings }) => ({
+const mapStateToProps: S.MapState<StateProps> = ({
+  appState,
+  settings,
+  ui: { unsyncedNoteIds },
+}) => ({
   notes: appState.notes,
   theme: settings.theme,
+  unsyncedNoteIds,
 });
 
 export default connect(mapStateToProps)(SyncStatusPopover);
diff --git a/lib/flux/app-state.ts b/lib/flux/app-state.ts
@@ -656,15 +656,6 @@ export const actionMap = new ActionMap({
         };
       },
     },
-
-    setUnsyncedNoteIds(
-      state: AppState,
-      { noteIds }: { noteIds: T.EntityId[] }
-    ) {
-      return update(state, {
-        unsyncedNoteIds: { $set: noteIds },
-      });
-    },
   },
 });
 

diff --git a/lib/state/action-types.ts b/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 SetUnsyncedNoteIds = Action<
+  'SET_UNSYNCED_NOTE_IDS',
+  { noteIds: T.EntityId[] }
+>;
 export type ToggleSimperiumConnectionStatus = Action<
   'SIMPERIUM_CONNECTION_STATUS_TOGGLE',
   { simperiumConnected: boolean }
@@ -77,6 +81,7 @@ export type ActionType =
   | SetSortType
   | SetSpellCheck
   | SetTheme
+  | SetUnsyncedNoteIds
   | SetWPToken
   | ToggleSimperiumConnectionStatus
   | ToggleTagDrawer;

diff --git a/lib/state/ui/actions.ts b/lib/state/ui/actions.ts
@@ -8,6 +8,13 @@ export const filterNotes: A.ActionCreator<A.FilterNotes> = (
   notes,
 });
 
+export const setUnsyncedNoteIds: A.ActionCreator<A.SetUnsyncedNoteIds> = (
+  noteIds: T.EntityId[]
+) => ({
+  type: 'SET_UNSYNCED_NOTE_IDS',
+  noteIds,
+});
+
 export const toggleSimperiumConnectionStatus: A.ActionCreator<A.ToggleSimperiumConnectionStatus> = (
   simperiumConnected: boolean
 ) => ({

diff --git a/lib/state/ui/reducer.ts b/lib/state/ui/reducer.ts
@@ -11,6 +11,11 @@ const filteredNotes: A.Reducer<T.NoteEntity[]> = (
   action
 ) => ('FILTER_NOTES' === action.type ? action.notes : state);
 
+const unsyncedNoteIds: A.Reducer<T.EntityId[]> = (
+  state = emptyList as T.EntityId[],
+  action
+) => ('SET_UNSYNCED_NOTE_IDS' === action.type ? action.noteIds : state);
+
 const simperiumConnected: A.Reducer<boolean> = (state = false, action) =>
   'SIMPERIUM_CONNECTION_STATUS_TOGGLE' === action.type
     ? action.simperiumConnected
@@ -54,5 +59,6 @@ export default combineReducers({
   filteredNotes,
   note,
   simperiumConnected,
+  unsyncedNoteIds,
   visiblePanes,
 });