From 3948ee8ca14d5f00f2a0163a692569f303be9811 Mon Sep 17 00:00:00 2001
From: Luke Barnard <luke@matrix.org>
Date: Wed, 14 Feb 2018 17:53:54 +0000
Subject: [PATCH] Give each GroupTile avatar its own droppable

so that they can be dragged and dropped
without interacting with each other, as
they would do if GroupView contained
one droppable to contain them all.
---
 src/components/structures/MyGroups.js    | 13 ++----
 src/components/views/groups/GroupTile.js | 56 +++++++++++++-----------
 2 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/src/components/structures/MyGroups.js b/src/components/structures/MyGroups.js
index 4c9229a2ea..116607fb08 100644
--- a/src/components/structures/MyGroups.js
+++ b/src/components/structures/MyGroups.js
@@ -17,7 +17,6 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import GeminiScrollbar from 'react-gemini-scrollbar';
-import { Droppable } from 'react-beautiful-dnd';
 import sdk from '../../index';
 import { _t } from '../../languageHandler';
 import dis from '../../dispatcher';
@@ -74,14 +73,10 @@ export default withMatrixClient(React.createClass({
             });
             contentHeader = groupNodes.length > 0 ? <h3>{ _t('Your Communities') }</h3> : <div />;
             content = groupNodes.length > 0 ?
-                <GeminiScrollbar className="mx_MyGroups_joinedGroups">
-                    <Droppable droppableId="my-groups-droppable" type="draggable-TagTile">
-                        { (provided, snapshot) => (
-                            <div ref={provided.innerRef}>
-                                { groupNodes }
-                            </div>
-                        ) }
-                    </Droppable>
+                <GeminiScrollbar>
+                    <div className="mx_MyGroups_joinedGroups">
+                        { groupNodes }
+                    </div>
                 </GeminiScrollbar> :
                 <div className="mx_MyGroups_placeholder">
                     { _t(
diff --git a/src/components/views/groups/GroupTile.js b/src/components/views/groups/GroupTile.js
index 70947afa65..f1dbb75988 100644
--- a/src/components/views/groups/GroupTile.js
+++ b/src/components/views/groups/GroupTile.js
@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import {MatrixClient} from 'matrix-js-sdk';
-import { Draggable } from 'react-beautiful-dnd';
+import { Draggable, Droppable } from 'react-beautiful-dnd';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import FlairStore from '../../../stores/FlairStore';
@@ -80,33 +80,39 @@ const GroupTile = React.createClass({
             profile.avatarUrl, avatarHeight, avatarHeight, "crop",
         ) : null;
         return <AccessibleButton className="mx_GroupTile" onClick={this.onClick}>
-            <Draggable
-                key={"GroupTile " + this.props.groupId}
-                draggableId={"GroupTile " + this.props.groupId}
-                index={this.props.groupId}
-                type="draggable-TagTile"
-            >
-                { (provided, snapshot) => (
-                    <div>
-                        <div
-                            ref={provided.innerRef}
-                            {...provided.draggableProps}
-                            {...provided.dragHandleProps}
+            <Droppable droppableId="my-groups-droppable" type="draggable-TagTile">
+                { (droppableProvided, droppableSnapshot) => (
+                    <div ref={droppableProvided.innerRef}>
+                        <Draggable
+                            key={"GroupTile " + this.props.groupId}
+                            draggableId={"GroupTile " + this.props.groupId}
+                            index={this.props.groupId}
+                            type="draggable-TagTile"
                         >
-                            <div className="mx_GroupTile_avatar">
-                                <BaseAvatar name={name} url={httpUrl} width={avatarHeight} height={avatarHeight} />
-                            </div>
-                        </div>
-                        { /* Instead of a blank placeholder, use a copy of the avatar itself. */ }
-                        { provided.placeholder ?
-                            <div className="mx_GroupTile_avatar">
-                                <BaseAvatar name={name} url={httpUrl} width={avatarHeight} height={avatarHeight} />
-                            </div> :
-                            <div />
-                        }
+                            { (provided, snapshot) => (
+                                <div>
+                                    <div
+                                        ref={provided.innerRef}
+                                        {...provided.draggableProps}
+                                        {...provided.dragHandleProps}
+                                    >
+                                        <div className="mx_GroupTile_avatar">
+                                            <BaseAvatar name={name} url={httpUrl} width={avatarHeight} height={avatarHeight} />
+                                        </div>
+                                    </div>
+                                    { /* Instead of a blank placeholder, use a copy of the avatar itself. */ }
+                                    { provided.placeholder ?
+                                        <div className="mx_GroupTile_avatar">
+                                            <BaseAvatar name={name} url={httpUrl} width={avatarHeight} height={avatarHeight} />
+                                        </div> :
+                                        <div />
+                                    }
+                                </div>
+                            ) }
+                        </Draggable>
                     </div>
                 ) }
-            </Draggable>
+            </Droppable>
             <div className="mx_GroupTile_profile">
                 <div className="mx_GroupTile_name">{ name }</div>
                 { descElement }