Re-render `GroupListItem` when focused group changes

Fix an issue where `GroupListItem` components did not re-render when the
focused group changed. This component is due to be replaced shortly, so
this is really just a test case to show that `useStore` works as
expected.

src/sidebar/components/group-list-item.js

@@ -4,18 +4,26 @@ const classnames = require('classnames');
 const propTypes = require('prop-types');
 const { createElement } = require('preact');
 
+const useStore = require('../store/use-store');
 const { orgName } = require('../util/group-list-item-common');
 const { withServices } = require('../util/service-context');
 
-function GroupListItem({ analytics, group, store }) {
+function GroupListItem({ analytics, group }) {
+  const actions = useStore(store => ({
+    clearDirectLinkedGroupFetchFailed: store.clearDirectLinkedGroupFetchFailed,
+    clearDirectLinkedIds: store.clearDirectLinkedIds,
+    focusGroup: store.focusGroup,
+  }));
+
   const focusGroup = () => {
     analytics.track(analytics.events.GROUP_SWITCH);
-    store.clearDirectLinkedGroupFetchFailed();
-    store.clearDirectLinkedIds();
-    store.focusGroup(group.id);
+    actions.clearDirectLinkedGroupFetchFailed();
+    actions.clearDirectLinkedIds();
+    actions.focusGroup(group.id);
   };
 
-  const isSelected = group.id === store.focusedGroupId();
+  const focusedGroupId = useStore(store => store.focusedGroupId());
+  const isSelected = group.id === focusedGroupId;
   const groupOrgName = orgName(group);
 
   return (
@@ -59,9 +67,8 @@ GroupListItem.propTypes = {
   group: propTypes.object.isRequired,
 
   analytics: propTypes.object.isRequired,
-  store: propTypes.object.isRequired,
 };
 
-GroupListItem.injectedProps = ['analytics', 'store'];
+GroupListItem.injectedProps = ['analytics'];
 
 module.exports = withServices(GroupListItem);

src/sidebar/components/test/group-list-item-test.js

@@ -31,6 +31,7 @@ describe('GroupListItem', () => {
 
     GroupListItem.$imports.$mock({
       '../util/group-list-item-common': fakeGroupListItemCommon,
+      '../store/use-store': callback => callback(fakeStore),
     });
   });
 

src/styles/sidebar/components/group-list-item.scss

@@ -26,10 +26,7 @@
   }
 
   &.is-selected {
-    .name-link {
-      font-size: $body2-font-size;
-      font-weight: 600;
-    }
+    background: $gray-lightest;
   }
 }