From f1673dcc8529075d36568354bd43ebc2baf2ba45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Wed, 7 Apr 2021 22:48:18 +0200
Subject: [PATCH] Simplifying drag and drop for sorting with my own hook

---
 webapp/src/components/gallery/galleryCard.tsx | 24 ++-------------
 webapp/src/components/kanban/kanbanCard.tsx   | 25 ++--------------
 webapp/src/components/table/tableHeader.tsx   | 29 +++----------------
 webapp/src/components/table/tableRow.tsx      | 23 ++-------------
 webapp/src/hooks/sortable.tsx                 | 27 +++++++++++++++++
 5 files changed, 39 insertions(+), 89 deletions(-)
 create mode 100644 webapp/src/hooks/sortable.tsx

diff --git a/webapp/src/components/gallery/galleryCard.tsx b/webapp/src/components/gallery/galleryCard.tsx
index 4b01754cd..67fb4caf6 100644
--- a/webapp/src/components/gallery/galleryCard.tsx
+++ b/webapp/src/components/gallery/galleryCard.tsx
@@ -1,8 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React, {useRef} from 'react'
+import React from 'react'
 import {FormattedMessage, injectIntl, IntlShape} from 'react-intl'
-import {useDrag, useDrop} from 'react-dnd'
 
 import {IPropertyTemplate} from '../../blocks/board'
 import {Card} from '../../blocks/card'
@@ -16,6 +15,7 @@ import DuplicateIcon from '../../widgets/icons/duplicate'
 import OptionsIcon from '../../widgets/icons/options'
 import Menu from '../../widgets/menu'
 import MenuWrapper from '../../widgets/menuWrapper'
+import useSortable from '../../hooks/sortable'
 
 import ImageElement from '../content/imageElement'
 import ContentElement from '../content/contentElement'
@@ -35,23 +35,7 @@ type Props = {
 
 const GalleryCard = React.memo((props: Props) => {
     const {cardTree} = props
-    const cardRef = useRef<HTMLDivElement>(null)
-    const [{isDragging}, drag] = useDrag(() => ({
-        type: 'card',
-        item: cardTree.card,
-        collect: (monitor) => ({
-            isDragging: monitor.isDragging(),
-        }),
-    }), [cardTree, props.onDrop])
-    const [{isOver}, drop] = useDrop(() => ({
-        accept: 'card',
-        collect: (monitor) => ({
-            isOver: monitor.isOver(),
-        }),
-        drop: (item: Card) => {
-            props.onDrop(item, cardTree.card)
-        },
-    }), [cardTree, props.onDrop])
+    const [isDragging, isOver, cardRef] = useSortable('card', cardTree.card, props.onDrop)
 
     const visiblePropertyTemplates = props.visiblePropertyTemplates || []
 
@@ -62,8 +46,6 @@ const GalleryCard = React.memo((props: Props) => {
         className += ' dragover'
     }
 
-    drop(drag(cardRef))
-
     return (
         <div
             className={className}
diff --git a/webapp/src/components/kanban/kanbanCard.tsx b/webapp/src/components/kanban/kanbanCard.tsx
index 856cd3908..6a8d106a7 100644
--- a/webapp/src/components/kanban/kanbanCard.tsx
+++ b/webapp/src/components/kanban/kanbanCard.tsx
@@ -1,8 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React, {useRef} from 'react'
+import React from 'react'
 import {injectIntl, IntlShape} from 'react-intl'
-import {useDrag, useDrop} from 'react-dnd'
 
 import {IPropertyTemplate} from '../../blocks/board'
 import {Card} from '../../blocks/card'
@@ -13,6 +12,7 @@ import DuplicateIcon from '../../widgets/icons/duplicate'
 import OptionsIcon from '../../widgets/icons/options'
 import Menu from '../../widgets/menu'
 import MenuWrapper from '../../widgets/menuWrapper'
+import useSortable from '../../hooks/sortable'
 
 import './kanbanCard.scss'
 import PropertyValueElement from '../propertyValueElement'
@@ -28,33 +28,14 @@ type Props = {
 }
 
 const KanbanCard = React.memo((props: Props) => {
-    const cardRef = useRef<HTMLDivElement>(null)
     const {card, intl} = props
-    const [{isDragging}, drag] = useDrag(() => ({
-        type: 'card',
-        item: card,
-        collect: (monitor) => ({
-            isDragging: monitor.isDragging(),
-        }),
-    }), [card])
-    const [{isOver}, drop] = useDrop(() => ({
-        accept: 'card',
-        collect: (monitor) => ({
-            isOver: monitor.isOver(),
-        }),
-        drop: (item: Card) => {
-            props.onDrop(item, card)
-        },
-    }), [card, props.onDrop])
-
+    const [isDragging, isOver, cardRef] = useSortable('card', card, props.onDrop)
     const visiblePropertyTemplates = props.visiblePropertyTemplates || []
     let className = props.isSelected ? 'KanbanCard selected' : 'KanbanCard'
     if (isOver) {
         className += ' dragover'
     }
 
-    drop(drag(cardRef))
-
     return (
         <div
             ref={props.readonly ? () => null : cardRef}
diff --git a/webapp/src/components/table/tableHeader.tsx b/webapp/src/components/table/tableHeader.tsx
index cce902d21..fef51cebc 100644
--- a/webapp/src/components/table/tableHeader.tsx
+++ b/webapp/src/components/table/tableHeader.tsx
@@ -10,6 +10,7 @@ import SortDownIcon from '../../widgets/icons/sortDown'
 import SortUpIcon from '../../widgets/icons/sortUp'
 import MenuWrapper from '../../widgets/menuWrapper'
 import Label from '../../widgets/label'
+import useSortable from '../../hooks/sortable'
 
 import HorizontalGrip from './horizontalGrip'
 
@@ -23,38 +24,16 @@ type Props = {
     boardTree: BoardTree
     template: IPropertyTemplate
     offset: number
-    onDrop?: (template: IPropertyTemplate, container: IPropertyTemplate) => void
+    onDrop: (template: IPropertyTemplate, container: IPropertyTemplate) => void
 }
 
 const TableHeader = React.memo((props: Props): JSX.Element => {
-    const columnRef = useRef<HTMLDivElement>(null)
-    const [{isDragging}, drag] = useDrag(() => ({
-        type: 'column',
-        item: props.template,
-        collect: (monitor) => ({
-            isDragging: monitor.isDragging(),
-        }),
-    }))
-    const [{isOver}, drop] = useDrop(() => ({
-        accept: 'column',
-        collect: (monitor) => ({
-            isOver: monitor.isOver(),
-        }),
-        drop: (item: IPropertyTemplate) => {
-            props.onDrop && props.onDrop(item, props.template)
-        },
-    }))
+    const [isDragging, isOver, columnRef] = useSortable('column', props.template, props.onDrop)
 
     const columnWidth = (templateId: string): number => {
         return Math.max(Constants.minColumnWidth, (props.boardTree.activeView.columnWidths[templateId] || 0) + props.offset)
     }
 
-    if (props.template.id === Constants.titleColumnId) {
-        drop(columnRef)
-    } else {
-        drop(drag(columnRef))
-    }
-
     let className = 'octo-table-cell header-cell'
     if (isOver) {
         className += ' dragover'
@@ -64,7 +43,7 @@ const TableHeader = React.memo((props: Props): JSX.Element => {
         <div
             className={className}
             style={{overflow: 'unset', width: columnWidth(props.template.id), opacity: isDragging ? 0.5 : 1}}
-            ref={props.onDrop ? columnRef : () => null}
+            ref={props.template.id === Constants.titleColumnId ? () => null : columnRef}
         >
             <MenuWrapper disabled={props.readonly}>
                 <Label>
diff --git a/webapp/src/components/table/tableRow.tsx b/webapp/src/components/table/tableRow.tsx
index 45aa18a22..e7f98ae7d 100644
--- a/webapp/src/components/table/tableRow.tsx
+++ b/webapp/src/components/table/tableRow.tsx
@@ -2,7 +2,6 @@
 // See LICENSE.txt for license information.
 import React, {useState, useRef, useEffect} from 'react'
 import {FormattedMessage} from 'react-intl'
-import {useDrop, useDrag} from 'react-dnd'
 
 import {Card} from '../../blocks/card'
 import {Constants} from '../../constants'
@@ -10,6 +9,7 @@ import mutator from '../../mutator'
 import {BoardTree} from '../../viewModel/boardTree'
 import Button from '../../widgets/buttons/button'
 import Editable from '../../widgets/editable'
+import useSortable from '../../hooks/sortable'
 
 import PropertyValueElement from '../propertyValueElement'
 import './tableRow.scss'
@@ -29,25 +29,8 @@ type Props = {
 const TableRow = React.memo((props: Props) => {
     const titleRef = useRef<Editable>(null)
     const [title, setTitle] = useState(props.card.title)
-    const cardRef = useRef<HTMLDivElement>(null)
     const {card} = props
-    const [{isDragging}, drag] = useDrag(() => ({
-        type: 'card',
-        item: card,
-        collect: (monitor) => ({
-            isDragging: monitor.isDragging(),
-        }),
-    }), [card])
-
-    const [{isOver}, drop] = useDrop(() => ({
-        accept: 'card',
-        collect: (monitor) => ({
-            isOver: monitor.isOver(),
-        }),
-        drop: (item: Card) => {
-            props.onDrop(item, card)
-        },
-    }), [card, props.onDrop])
+    const [isDragging, isOver, cardRef] = useSortable('card', card, props.onDrop)
 
     useEffect(() => {
         if (props.focusOnMount) {
@@ -67,8 +50,6 @@ const TableRow = React.memo((props: Props) => {
         className += ' dragover'
     }
 
-    drop(drag(cardRef))
-
     return (
         <div
             className={className}
diff --git a/webapp/src/hooks/sortable.tsx b/webapp/src/hooks/sortable.tsx
new file mode 100644
index 000000000..95edb8767
--- /dev/null
+++ b/webapp/src/hooks/sortable.tsx
@@ -0,0 +1,27 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React, {useRef} from 'react'
+import {useDrag, useDrop} from 'react-dnd'
+
+export default function useSortable(itemType: string, item: any, handler: (src: any, st: any) => void): [boolean, boolean, React.RefObject<HTMLDivElement>] {
+    const ref = useRef<HTMLDivElement>(null)
+    const [{isDragging}, drag] = useDrag(() => ({
+        type: itemType,
+        item,
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+        }),
+    }), [itemType, item])
+    const [{isOver}, drop] = useDrop(() => ({
+        accept: itemType,
+        collect: (monitor) => ({
+            isOver: monitor.isOver(),
+        }),
+        drop: (dragItem: any) => {
+            handler(dragItem, item)
+        },
+    }), [item, handler])
+
+    drop(drag(ref))
+    return [isDragging, isOver, ref]
+}