Change `Focused` to `Active` in user-focus items in `selection`

- Use `Active` instead of `Focused` as it's easier to understand
- Use `toggleFocusMode` instead of `setFocusModeFocused`

src/sidebar/components/focused-mode-header.js

@@ -8,11 +8,9 @@ import useStore from '../store/use-store';
  * and abstracted if needed. Allow user to toggle in and out of the focus "mode."
  */
 export default function FocusedModeHeader() {
-  const actions = useStore(store => ({
-    setFocusModeFocused: store.setFocusModeFocused,
-  }));
+  const toggleFocusMode = useStore(store => store.toggleFocusMode);
   const selectors = useStore(store => ({
-    focusModeFocused: store.focusModeFocused(),
+    focusModeActive: store.focusModeActive(),
     focusModeHasUser: store.focusModeHasUser(),
     focusModeUserPrettyName: store.focusModeUserPrettyName(),
   }));
@@ -22,13 +20,9 @@ export default function FocusedModeHeader() {
     return null;
   }
 
-  const toggleFocusedMode = () => {
-    actions.setFocusModeFocused(!selectors.focusModeFocused);
-  };
-
   const filterStatus = (
     <div className="focused-mode-header__filter-status">
-      {selectors.focusModeFocused ? (
+      {selectors.focusModeActive ? (
         <span>
           Showing <strong>{selectors.focusModeUserPrettyName}</strong> only
         </span>
@@ -41,7 +35,7 @@ export default function FocusedModeHeader() {
   );
 
   const buttonText = (() => {
-    if (selectors.focusModeFocused) {
+    if (selectors.focusModeActive) {
       return 'Show all';
     } else {
       return `Show only ${selectors.focusModeUserPrettyName}`;
@@ -51,7 +45,10 @@ export default function FocusedModeHeader() {
   return (
     <div className="focused-mode-header">
       {filterStatus}
-      <button onClick={toggleFocusedMode} className="focused-mode-header__btn">
+      <button
+        onClick={() => toggleFocusMode()}
+        className="focused-mode-header__btn"
+      >
         {buttonText}
       </button>
     </div>

src/sidebar/components/search-status-bar.js

@@ -39,13 +39,13 @@ function SearchStatusBar({ rootThread }) {
 
   const {
     filterQuery,
-    focusModeFocused,
+    focusModeActive,
     focusModeUserPrettyName,
     hasSelectedAnnotations,
     selectedTab,
   } = useStore(store => ({
     filterQuery: store.getState().selection.filterQuery,
-    focusModeFocused: store.focusModeFocused(),
+    focusModeActive: store.focusModeActive(),
     focusModeUserPrettyName: store.focusModeUserPrettyName(),
     hasSelectedAnnotations: store.hasSelectedAnnotations(),
     selectedTab: store.getState().selection.selectedTab,
@@ -64,7 +64,7 @@ function SearchStatusBar({ rootThread }) {
      * The client has a currently-applied focus on a single user. Superseded by
      * `filtered` mode.
      */
-    focused: focusModeFocused && !filterQuery,
+    focused: focusModeActive && !filterQuery,
     /**
      * @type {Boolean}
      * 0 - n annotations are currently "selected", by, e.g. clicking on highlighted

src/sidebar/components/test/focused-mode-header-test.js

@@ -21,10 +21,10 @@ describe('FocusedModeHeader', function () {
           focused: true,
         },
       },
-      focusModeFocused: sinon.stub().returns(true),
+      focusModeActive: sinon.stub().returns(true),
       focusModeUserPrettyName: sinon.stub().returns('Fake User'),
       focusModeHasUser: sinon.stub().returns(true),
-      setFocusModeFocused: sinon.stub(),
+      toggleFocusMode: sinon.stub(),
     };
 
     $imports.$mock(mockImportedComponents());
@@ -66,7 +66,7 @@ describe('FocusedModeHeader', function () {
 
     context('focus is not applied (unfocused/off)', () => {
       beforeEach(() => {
-        fakeStore.focusModeFocused = sinon.stub().returns(false);
+        fakeStore.focusModeActive = sinon.stub().returns(false);
       });
 
       it("should render status text indicating that all user's annotations are visible", () => {
@@ -86,21 +86,12 @@ describe('FocusedModeHeader', function () {
 
     describe('toggle button', () => {
       it('should toggle focus mode to false if clicked when focused', () => {
-        fakeStore.focusModeFocused = sinon.stub().returns(true);
+        fakeStore.focusModeActive = sinon.stub().returns(true);
         const wrapper = createComponent();
 
         wrapper.find('button').simulate('click');
 
-        assert.calledWith(fakeStore.setFocusModeFocused, false);
-      });
-
-      it('should toggle focus mode to true if clicked when not focused', () => {
-        fakeStore.focusModeFocused = sinon.stub().returns(false);
-        const wrapper = createComponent();
-
-        wrapper.find('button').simulate('click');
-
-        assert.calledWith(fakeStore.setFocusModeFocused, true);
+        assert.calledOnce(fakeStore.toggleFocusMode);
       });
     });
   });

src/sidebar/components/test/search-status-bar-test.js

@@ -24,7 +24,7 @@ describe('SearchStatusBar', () => {
         selection: {},
       }),
       annotationCount: sinon.stub().returns(1),
-      focusModeFocused: sinon.stub().returns(false),
+      focusModeActive: sinon.stub().returns(false),
       focusModeUserPrettyName: sinon.stub().returns('Fake User'),
       hasSelectedAnnotations: sinon.stub(),
       noteCount: sinon.stub().returns(0),
@@ -122,7 +122,7 @@ describe('SearchStatusBar', () => {
 
   context('user-focused mode applied', () => {
     beforeEach(() => {
-      fakeStore.focusModeFocused = sinon.stub().returns(true);
+      fakeStore.focusModeActive = sinon.stub().returns(true);
     });
 
     it('should not display a clear/show-all-annotations button when user-focused', () => {
@@ -262,7 +262,7 @@ describe('SearchStatusBar', () => {
         { tab: 'note', buttonText: 'Show all notes by Fake User' },
       ].forEach(test => {
         it(`displays correct text for tab '${test.tab}', without count`, () => {
-          fakeStore.focusModeFocused = sinon.stub().returns(true);
+          fakeStore.focusModeActive = sinon.stub().returns(true);
           fakeStore.getState.returns({
             selection: {
               filterQuery: null,
@@ -286,7 +286,7 @@ describe('SearchStatusBar', () => {
     context('combined with applied query filter', () => {
       // Applied-query mode wins out here; no selection UI rendered
       it('does not show selected-mode elements', () => {
-        fakeStore.focusModeFocused = sinon.stub().returns(true);
+        fakeStore.focusModeActive = sinon.stub().returns(true);
         fakeStore.getState.returns({
           selection: {
             filterQuery: 'tag:foo',

src/sidebar/services/root-thread.js

@@ -46,7 +46,7 @@ export default function RootThread(
     const sortFn = sortFns[state.selection.sortKey];
     const shouldFilterThread = () => {
       // Is there a search query, or are we in an active (focused) focus mode?
-      return state.selection.filterQuery || store.focusModeFocused();
+      return state.selection.filterQuery || store.focusModeActive();
     };
 
     const options = {
@@ -62,7 +62,7 @@ export default function RootThread(
         state.selection.filterQuery,
         {
           // if a focus mode is applied (focused) and we're focusing on a user
-          user: store.focusModeFocused() && store.focusModeUserId(),
+          user: store.focusModeActive() && store.focusModeUserId(),
         }
       );
 

src/sidebar/services/test/root-thread-test.js

@@ -64,7 +64,7 @@ describe('rootThread', function () {
       getDraftIfNotEmpty: sinon.stub().returns(null),
       removeDraft: sinon.stub(),
       createAnnotation: sinon.stub(),
-      focusModeFocused: sinon.stub().returns(false),
+      focusModeActive: sinon.stub().returns(false),
       focusModeUserId: sinon.stub().returns({}),
     };
 
@@ -323,7 +323,7 @@ describe('rootThread', function () {
       const filters = [{ user: { terms: ['acct:bill@localhost'] } }];
       const annotation = annotationFixtures.defaultAnnotation();
       fakeSearchFilter.generateFacetedFilter.returns(filters);
-      fakeStore.focusModeFocused = sinon.stub().returns(true);
+      fakeStore.focusModeActive = sinon.stub().returns(true);
       rootThread.thread(fakeStore.state);
       const filterFn = fakeBuildThread.args[0][1].filterFn;
 

src/sidebar/store/modules/selection.js

@@ -60,23 +60,6 @@ function initialSelection(settings) {
   return selection;
 }
 
-// function initialFocus(settings) {
-//   const focusConfig = {
-//     configured: false,
-//     active: false,
-//     user: undefined,
-//   };
-//
-//   if (settings.hasOwnProperty('user')) {
-//     const focusedUser = {...settings.user};
-//     if (focusedUser.username && focusedUser.authority) {
-//       focusConfig.configured = true;
-//       focusConfig.user = focusedUser;
-//     }
-//   }
-//   return focusConfig;
-// }
-
 function init(settings) {
   return {
     /**
@@ -114,7 +97,7 @@ function init(settings) {
     filterQuery: settings.query || null,
     focusMode: {
       configured: settings.hasOwnProperty('focus'),
-      focused: true,
+      active: true,
       // Copy over the focus confg from settings object
       config: { ...(settings.focus ? settings.focus : {}) },
     },
@@ -166,11 +149,15 @@ const update = {
     return { focused: toTrueMap(action.focusedTags) };
   },
 
-  SET_FOCUS_MODE_FOCUSED: function (state, action) {
+  SET_FOCUS_MODE: function (state, action) {
+    const active =
+      typeof action.active !== 'undefined'
+        ? action.active
+        : !state.focusMode.active;
     return {
       focusMode: {
         ...state.focusMode,
-        focused: action.focused,
+        active,
       },
     };
   },
@@ -181,7 +168,7 @@ const update = {
         focusMode: {
           ...state.focusMode,
           configured: false,
-          focused: false,
+          active: false,
         },
       };
     } else {
@@ -189,7 +176,7 @@ const update = {
         focusMode: {
           ...state.focusMode,
           configured: true,
-          focused: true,
+          active: true,
           config: {
             user: { ...action.user },
           },
@@ -380,12 +367,15 @@ function setFilterQuery(query) {
 }
 
 /**
- * Set the focused to only show annotations matching the current focus mode.
+ * Toggle whether or not a (user-)focus mode is applied, either inverting the
+ * current active state or setting it to a target `active` state, if provided.
+ *
+ * @param {boolean} [active] - Optional `active` state for focus mode
  */
-function setFocusModeFocused(focused) {
+function toggleFocusMode(active) {
   return {
-    type: actions.SET_FOCUS_MODE_FOCUSED,
-    focused,
+    type: actions.SET_FOCUS_MODE,
+    active,
   };
 }
 
@@ -494,8 +484,8 @@ function focusModeConfigured(state) {
  *
  * @return {boolean}
  */
-function focusModeFocused(state) {
-  return focusModeConfigured(state) && state.selection.focusMode.focused;
+function focusModeActive(state) {
+  return focusModeConfigured(state) && state.selection.focusMode.active;
 }
 
 /**
@@ -559,10 +549,10 @@ function focusModeUserPrettyName(state) {
  */
 const hasAppliedFilter = createSelector(
   filterQuery,
-  focusModeFocused,
+  focusModeActive,
   hasSelectedAnnotations,
-  (filterQuery, focusModeFocused, hasSelectedAnnotations) =>
-    !!filterQuery || focusModeFocused || hasSelectedAnnotations
+  (filterQuery, focusModeActive, hasSelectedAnnotations) =>
+    !!filterQuery || focusModeActive || hasSelectedAnnotations
 );
 
 const selectedAnnotations = createSelector(
@@ -598,17 +588,17 @@ export default {
     selectTab,
     setExpanded,
     setFilterQuery,
-    setFocusModeFocused,
     changeFocusModeUser,
     setForcedVisible,
     setSortKey,
+    toggleFocusMode,
     toggleSelectedAnnotations,
   },
 
   selectors: {
     expandedMap,
     filterQuery,
-    focusModeFocused,
+    focusModeActive,
     focusModeConfigured,
     focusModeHasUser,
     focusModeUserId,

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

@@ -83,9 +83,9 @@ describe('sidebar/store/modules/selection', () => {
       assert.isTrue(store.hasAppliedFilter());
     });
 
-    it('returns true if in user-focused mode', () => {
+    it('returns true if user-focused mode applied', () => {
       store = createStore([selection], [{ focus: { user: {} } }]);
-      store.setFocusModeFocused(true);
+      store.toggleFocusMode(true);
 
       assert.isTrue(store.hasAppliedFilter());
     });
@@ -218,14 +218,14 @@ describe('sidebar/store/modules/selection', () => {
 
   describe('changeFocusModeUser()', function () {
     it('sets the focused user and enables focus mode', function () {
-      store.setFocusModeFocused(false);
+      store.toggleFocusMode(false);
       store.changeFocusModeUser({
         username: 'testuser',
         displayName: 'Test User',
       });
       assert.equal(store.focusModeUserId(), 'testuser');
       assert.equal(store.focusModeUserPrettyName(), 'Test User');
-      assert.equal(store.focusModeFocused(), true);
+      assert.equal(store.focusModeActive(), true);
       assert.equal(store.focusModeConfigured(), true);
     });
 
@@ -237,17 +237,17 @@ describe('sidebar/store/modules/selection', () => {
     //
     // This is the LMS app's way of asking the client to disable focus mode.
     it('disables focus mode if username is undefined', function () {
-      store.setFocusModeFocused(true);
+      store.toggleFocusMode(true);
       store.changeFocusModeUser({
         username: undefined,
         displayName: undefined,
       });
-      assert.equal(store.focusModeFocused(), false);
+      assert.equal(store.focusModeActive(), false);
       assert.equal(store.focusModeConfigured(), false);
     });
 
     it('clears other applied selections', () => {
-      store.setFocusModeFocused(true);
+      store.toggleFocusMode(true);
       store.setForcedVisible('someAnnotationId');
       store.setFilterQuery('somequery');
       store.changeFocusModeUser({
@@ -260,16 +260,17 @@ describe('sidebar/store/modules/selection', () => {
     });
   });
 
-  describe('setFocusModeFocused()', function () {
-    it('sets the focus mode to focused', function () {
-      store.setFocusModeFocused(true);
-      assert.equal(getSelectionState().focusMode.focused, true);
+  describe('toggleFocusMode', function () {
+    it('toggles the current active state if called without arguments', function () {
+      store.toggleFocusMode(false);
+      store.toggleFocusMode();
+      assert.equal(getSelectionState().focusMode.active, true);
     });
 
-    it('sets the focus mode to not focused', function () {
-      store = createStore([selection], [{ focus: { user: {} } }]);
-      store.setFocusModeFocused(false);
-      assert.equal(getSelectionState().focusMode.focused, false);
+    it('toggles the current active state to designated state', function () {
+      store.toggleFocusMode(true);
+      store.toggleFocusMode(false);
+      assert.equal(getSelectionState().focusMode.active, false);
     });
   });
 
@@ -283,17 +284,17 @@ describe('sidebar/store/modules/selection', () => {
     });
   });
 
-  describe('focusModeFocused', function () {
-    it('should return true by default when focus mode is focused', function () {
+  describe('focusModeActive', function () {
+    it('should return true by default when focus mode is active', function () {
       store = createStore([selection], [{ focus: { user: {} } }]);
       assert.equal(getSelectionState().focusMode.configured, true);
-      assert.equal(getSelectionState().focusMode.focused, true);
-      assert.equal(store.focusModeFocused(), true);
+      assert.equal(getSelectionState().focusMode.active, true);
+      assert.equal(store.focusModeActive(), true);
     });
-    it('should return false by default when focus mode is not focused', function () {
+    it('should return false by default when focus mode is not active', function () {
       assert.equal(getSelectionState().focusMode.configured, false);
-      assert.equal(getSelectionState().focusMode.focused, true);
-      assert.equal(store.focusModeFocused(), false);
+      assert.equal(getSelectionState().focusMode.active, true);
+      assert.equal(store.focusModeActive(), false);
     });
   });