Make GroupTile avatar draggable

src/components/views/groups/GroupTile.js

@@ -17,10 +17,12 @@ 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 sdk from '../../../index';
 import dis from '../../../dispatcher';
 import FlairStore from '../../../stores/FlairStore';
 
+
 const GroupTile = React.createClass({
     displayName: 'GroupTile',
 
@@ -78,9 +80,33 @@ const GroupTile = React.createClass({
             profile.avatarUrl, avatarHeight, avatarHeight, "crop",
         ) : null;
         return <AccessibleButton className="mx_GroupTile" onClick={this.onClick}>
-            <div className="mx_GroupTile_avatar">
-                <BaseAvatar name={name} url={httpUrl} width={avatarHeight} height={avatarHeight} />
-            </div>
+            <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}
+                        >
+                            <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 className="mx_GroupTile_profile">
                 <div className="mx_GroupTile_name">{ name }</div>
                 { descElement }