fix preventSwipe not being updatable without re-rendering

implemented by @benkaiser
3DJakob#31

Author: blesson3

index.js

@@ -202,26 +202,14 @@ const TinderCard = React.forwardRef(({ flickOnSwipe = true, children, onSwipe, o
     swipeAlreadyReleased.current = false
   }, [swipeAlreadyReleased])
 
+  const [offset, setOffset] = React.useState({ x: null, y: null })
+  const [speed, setSpeed] = React.useState({ x: 0, y: 0 })
+  const [lastLocation, setLastLocation] = React.useState({ x: 0, y: 0, time: new Date().getTime() })
+  const [mouseIsClicked, setMouseIsClicked] = React.useState(false)
+
   React.useLayoutEffect(() => {
-    let offset = { x: null, y: null }
-    let speed = { x: 0, y: 0 }
-    let lastLocation = { x: 0, y: 0, time: new Date().getTime() }
-    let mouseIsClicked = false
     let swipeThresholdFulfilledDirection = 'none'
 
-    element.current.addEventListener(('touchstart'), (ev) => {
-      ev.preventDefault()
-      handleSwipeStart()
-      offset = { x: -touchCoordinatesFromEvent(ev).x, y: -touchCoordinatesFromEvent(ev).y }
-    })
-
-    element.current.addEventListener(('mousedown'), (ev) => {
-      ev.preventDefault()
-      mouseIsClicked = true
-      handleSwipeStart()
-      offset = { x: -mouseCoordinatesFromEvent(ev).x, y: -mouseCoordinatesFromEvent(ev).y }
-    })
-
     const handleMove = (coordinates) => {
       // Check fulfillment
       if (onSwipeRequirementFulfilled || onSwipeRequirementUnfulfilled) {
@@ -243,39 +231,69 @@ const TinderCard = React.forwardRef(({ flickOnSwipe = true, children, onSwipe, o
       onCardLocationChange(lastLocation.x, lastLocation.y)
     }
 
-    element.current.addEventListener(('touchmove'), (ev) => {
+    const touchStart = (ev) => {
+      ev.preventDefault()
+      handleSwipeStart()
+      setOffset({ x: -touchCoordinatesFromEvent(ev).x, y: -touchCoordinatesFromEvent(ev).y })
+    }
+    element.current.addEventListener(('touchstart'), touchStart)
+
+    const mouseDown = (ev) => {
+      ev.preventDefault()
+      setMouseIsClicked(true)
+      handleSwipeStart()
+      setOffset({ x: -mouseCoordinatesFromEvent(ev).x, y: -mouseCoordinatesFromEvent(ev).y })
+    }
+    element.current.addEventListener(('mousedown'), mouseDown)
+
+    const touchMove = (ev) => {
       ev.preventDefault()
       handleMove(touchCoordinatesFromEvent(ev))
-    })
+    }
+    element.current.addEventListener(('touchmove'), touchMove)
 
-    element.current.addEventListener(('mousemove'), (ev) => {
+    const mouseMove = (ev) => {
       ev.preventDefault()
       if (mouseIsClicked) {
         handleMove(mouseCoordinatesFromEvent(ev))
       }
-    })
+    }
+    element.current.addEventListener(('mousemove'), mouseMove)
 
-    element.current.addEventListener(('touchend'), (ev) => {
+    const touchEnd = (ev) => {
       ev.preventDefault()
       handleSwipeReleased(element.current, speed)
-    })
+    }
+    element.current.addEventListener(('touchend'), touchEnd)
 
-    element.current.addEventListener(('mouseup'), (ev) => {
+    const mouseUp = (ev) => {
       if (mouseIsClicked) {
         ev.preventDefault()
-        mouseIsClicked = false
+        setMouseIsClicked(false)
         handleSwipeReleased(element.current, speed)
       }
-    })
+    }
+    element.current.addEventListener(('mouseup'), mouseUp)
 
-    element.current.addEventListener(('mouseleave'), (ev) => {
+    const mouseLeave = (ev) => {
       if (mouseIsClicked) {
         ev.preventDefault()
-        mouseIsClicked = false
+        setMouseIsClicked(false)
         handleSwipeReleased(element.current, speed)
       }
-    })
-  }, []) // TODO fix so swipeRequirementType can be changed on the fly. Pass as dependency cleanup eventlisteners and update new eventlisteners.
+    }
+    element.current.addEventListener(('mouseleave'), mouseLeave)
+
+    return () => {
+      element.current.removeEventListener(('touchstart'), touchStart)
+      element.current.removeEventListener(('mousedown'), mouseDown)
+      element.current.removeEventListener(('touchmove'), touchMove)
+      element.current.removeEventListener(('mousemove'), mouseMove)
+      element.current.removeEventListener(('touchend'), touchEnd)
+      element.current.removeEventListener(('mouseup'), mouseUp)
+      element.current.removeEventListener(('mouseleave'), mouseLeave)
+    }
+  }, [preventSwipe, offset, speed, lastLocation, mouseIsClicked])
 
   return (
     React.createElement('div', { ref: element, className }, children)