Add `sortKey` and `selectedTab` selectors

src/sidebar/components/sort-menu.js

@@ -14,7 +14,7 @@ export default function SortMenu() {
     setSortKey: store.setSortKey,
   }));
   // The currently-applied sort order
-  const sortKey = useStore(store => store.getState().selection.sortKey);
+  const sortKey = useStore(store => store.sortKey());
   // All available sorting options. These change depending on current
   // "tab" or context.
   const sortKeysAvailable = useStore(store => store.sortKeys());

src/sidebar/components/test/sort-menu-test.js

@@ -7,7 +7,6 @@ import { $imports } from '../sort-menu';
 import mockImportedComponents from '../../../test-util/mock-imported-components';
 
 describe('SortMenu', () => {
-  let fakeState;
   let fakeStore;
 
   const createSortMenu = () => {
@@ -15,14 +14,9 @@ describe('SortMenu', () => {
   };
 
   beforeEach(() => {
-    fakeState = {
-      selection: {
-        sortKey: 'Location',
-      },
-    };
     fakeStore = {
       setSortKey: sinon.stub(),
-      getState: sinon.stub().returns(fakeState),
+      sortKey: sinon.stub().returns('Location'),
       sortKeys: sinon.stub().returns(['Newest', 'Oldest', 'Location']),
     };
 
@@ -55,9 +49,7 @@ describe('SortMenu', () => {
 
     const currentSortKeyMenuItem = wrapper
       .find('MenuItem')
-      .filterWhere(
-        menuItem => menuItem.prop('label') === fakeState.selection.sortKey
-      );
+      .filterWhere(menuItem => menuItem.prop('label') === fakeStore.sortKey());
     assert.isTrue(currentSortKeyMenuItem.prop('isSelected'));
   });
 

src/sidebar/store/modules/selection.js

@@ -529,6 +529,24 @@ const hasAppliedFilter = createSelector(
     !!filterQuery || focusModeActive || hasSelectedAnnotations
 );
 
+/**
+ * Return the currently-selected tab
+ *
+ * @return {'annotation'|'note'|'orphan'}
+ */
+function selectedTab(state) {
+  return state.selectedTab;
+}
+
+/**
+ * Retrieve the current sort option key
+ *
+ * @return {string}
+ */
+function sortKey(state) {
+  return state.sortKey;
+}
+
 /**
  * Retrieve applicable sort options for the currently-selected tab.
  *
@@ -585,8 +603,8 @@ const threadState = createSelector(
       filters,
       forcedVisible: forcedVisibleAnnotations(selection),
       selected: selectedAnnotations(selection),
-      sortKey: selection.sortKey, // TODO: This should have a selector
-      selectedTab: selection.selectedTab, // TODO: This should have a selector
+      sortKey: sortKey(selection),
+      selectedTab: selectedTab(selection),
     };
     return { annotations, route: routeName, selection: selectionState };
   }
@@ -619,6 +637,8 @@ const threadState = createSelector(
  * @prop {() => boolean} hasAppliedFilter
  * @prop {() => boolean} hasSelectedAnnotations
  * @prop {() => string[]} selectedAnnotations
+ * @prop {() => string} selectedTab
+ * @prop {() => string} sortKey
  * @prop {() => string[]} sortKeys
  *
  * // Root Selectors
@@ -657,6 +677,8 @@ export default {
     hasAppliedFilter,
     hasSelectedAnnotations,
     selectedAnnotations,
+    selectedTab,
+    sortKey,
     sortKeys,
   },
 

src/sidebar/store/modules/test/selection-test.js

@@ -517,6 +517,21 @@ describe('sidebar/store/modules/selection', () => {
     });
   });
 
+  describe('selectedTab', () => {
+    it('should return the currently-selected tab', () => {
+      store.selectTab(uiConstants.TAB_NOTES);
+      assert.equal(store.selectedTab(), uiConstants.TAB_NOTES);
+    });
+  });
+
+  describe('sortKey', () => {
+    it('should return the currently-active sort key', () => {
+      store.setSortKey('Newest');
+
+      assert.equal(store.sortKey(), 'Newest');
+    });
+  });
+
   describe('ADD_ANNOTATIONS', () => {
     it('should select the page notes tab if all top-level annotations are page notes', () => {
       store.dispatch({