Group tree views refactored and improved.

src/components/Exercises/ExerciseGroups/ExerciseGroups.js

@@ -1,14 +1,13 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import ImmutablePropTypes from 'react-immutable-proptypes';
 import { FormattedMessage } from 'react-intl';
 import { Table, Modal } from 'react-bootstrap';
 
 import Box from '../../widgets/Box';
 import Icon, { GroupIcon, LoadingIcon } from '../../icons';
 import GroupsNameContainer from '../../../containers/GroupsNameContainer';
 import Button from '../../widgets/TheButton';
-import GroupTree from '../../Groups/GroupTree';
+import GroupsTreeContainer from '../../../containers/GroupsTreeContainer';
 import { arrayToObject, identity } from '../../../helpers/common';
 
 class ExerciseGroups extends Component {
@@ -52,12 +51,12 @@ class ExerciseGroups extends Component {
     );
   };
 
-  buttonsCreator = attachedGroupsIds => groupId => {
-    return <span>{attachedGroupsIds[groupId] ? this.detachButton(groupId) : this.attachButton(groupId)}</span>;
+  buttonsCreator = attachedGroupsIds => group => {
+    return <span>{attachedGroupsIds[group.id] ? this.detachButton(group.id) : this.attachButton(group.id)}</span>;
   };
 
   render() {
-    const { groupsIds = [], rootGroupId, groups, showButtons = false } = this.props;
+    const { groupsIds = [], showButtons = false } = this.props;
     return (
       <Box
         title={<FormattedMessage id="app.exercise.groups" defaultMessage="Groups of Residence" />}
@@ -100,9 +99,7 @@ class ExerciseGroups extends Component {
                 </Modal.Title>
               </Modal.Header>
               <Modal.Body>
-                <GroupTree
-                  id={rootGroupId}
-                  groups={groups}
+                <GroupsTreeContainer
                   onlyEditable
                   buttonsCreator={this.buttonsCreator(arrayToObject(groupsIds, identity, () => true))}
                 />
@@ -122,8 +119,6 @@ ExerciseGroups.propTypes = {
   detachingGroupId: PropTypes.string,
   attachExerciseToGroup: PropTypes.func.isRequired,
   detachExerciseFromGroup: PropTypes.func.isRequired,
-  rootGroupId: PropTypes.string.isRequired,
-  groups: ImmutablePropTypes.map,
 };
 
 export default ExerciseGroups;

src/components/Groups/GroupsTree/GroupsTree.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+
+import GroupsTreeNode from './GroupsTreeNode';
+import Button, { TheButtonGroup } from '../../widgets/TheButton';
+
+import { GroupIcon, AssignmentsIcon, EditIcon } from '../../icons';
+import withLinks from '../../../helpers/withLinks';
+import { hasPermissions } from '../../../helpers/common';
+
+import './styles.css';
+
+const defaultButtonsCreator = (
+  group,
+  selectedGroupId,
+  { GROUP_EDIT_URI_FACTORY, GROUP_INFO_URI_FACTORY, GROUP_DETAIL_URI_FACTORY }
+) =>
+  group.id !== selectedGroupId ? (
+    <TheButtonGroup>
+      {hasPermissions(group, 'update') && (
+        <OverlayTrigger
+          placement="bottom"
+          overlay={
+            <Tooltip id={`info-${group.id}`}>
+              <FormattedMessage id="app.editGroup.titleShort" defaultMessage="Edit Group" />
+            </Tooltip>
+          }>
+          <Link to={GROUP_EDIT_URI_FACTORY(group.id)}>
+            <Button variant="warning" size="xs">
+              <EditIcon smallGapLeft smallGapRight />
+            </Button>
+          </Link>
+        </OverlayTrigger>
+      )}
+
+      <OverlayTrigger
+        placement="bottom"
+        overlay={
+          <Tooltip id={`info-${group.id}`}>
+            <FormattedMessage id="app.group.info" defaultMessage="Group Info" />
+          </Tooltip>
+        }>
+        <Link to={GROUP_INFO_URI_FACTORY(group.id)}>
+          <Button variant="primary" size="xs">
+            <GroupIcon />
+          </Button>
+        </Link>
+      </OverlayTrigger>
+
+      {hasPermissions(group, 'viewDetail') && (
+        <OverlayTrigger
+          placement="bottom"
+          overlay={
+            <Tooltip id={`info-${group.id}`}>
+              <FormattedMessage id="app.group.assignments" defaultMessage="Assignments" />
+            </Tooltip>
+          }>
+          <Link to={GROUP_DETAIL_URI_FACTORY(group.id)}>
+            <Button variant="primary" size="xs">
+              <AssignmentsIcon smallGapLeft smallGapRight />
+            </Button>
+          </Link>
+        </OverlayTrigger>
+      )}
+    </TheButtonGroup>
+  ) : null;
+
+const GroupsTree = React.memo(
+  ({
+    groups,
+    selectedGroupId = null,
+    autoloadAuthors = false,
+    isExpanded = false,
+    buttonsCreator = defaultButtonsCreator,
+  }) => (
+    <ul className="groupTree nav flex-column">
+      {groups.map(group => (
+        <GroupsTreeNode
+          key={group.id}
+          group={group}
+          selectedGroupId={selectedGroupId}
+          autoloadAuthors={autoloadAuthors}
+          isExpanded={isExpanded}
+          buttonsCreator={buttonsCreator}
+        />
+      ))}
+    </ul>
+  )
+);
+
+GroupsTree.propTypes = {
+  groups: PropTypes.array.isRequired,
+  selectedGroupId: PropTypes.string,
+  autoloadAuthors: PropTypes.bool,
+  isExpanded: PropTypes.bool,
+  buttonsCreator: PropTypes.func,
+  links: PropTypes.object,
+  intl: PropTypes.shape({ locale: PropTypes.string.isRequired }).isRequired,
+};
+
+export default withLinks(injectIntl(GroupsTree));