started hooks update

Started converting the functions and state to hooks, overcoming some hurdles as the hooks version will be very different.

Author: Rmnlly

src/carousel.jsx

@@ -1,7 +1,133 @@
-import React from "react";
+import React, { useState, useRef, useEffect, useReducer } from "react";
 import "./styles.css";
 
-export default class Carousel extends React.Component {
+//A hook for getting the previous state/a previous value, if needed
+const usePrevious = value => {
+  const ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};
+
+const useWidth = ref => {
+  console.log("called useWidth");
+  const [width, setWidth] = useState(0);
+  useEffect(() => {
+    setWidth(ref.current.getBoundingClientRect().width);
+  }, [ref]);
+};
+
+const telemetryReducer = (state, action) => {
+  switch (action.type) {
+    case "user_move":
+      return {
+        angle: action.angle,
+        change: action.change,
+        velocity: action.velocity
+      };
+    case "decay_move":
+      return {
+        ...state,
+        angle: action.angle,
+        velocity: action.velocity
+      };
+    case "reset_change":
+      return {
+        ...state,
+        change: 0
+      };
+    case "reset_velocity":
+      return { ...state, velocity: 0 };
+
+    default:
+      return state;
+  }
+};
+
+const Carousel2 = () => {
+  const [dragState, setDragState] = useState({
+    dragging: false,
+    dragStartX: 0,
+    dragStartTime: 0
+  });
+  const [carouselTelemetry, dispatch] = useReducer(telemetryReducer, {
+    angle: 0,
+    change: 0,
+    velocity: 0
+  });
+  const [decayInterval, setDecayInterval] = useState(null);
+  const draggableRef = useRef();
+  const width = useWidth(draggableRef);
+
+  useEffect(() => {
+    window.addEventListener("mouseup", onDragEndMouse);
+    window.addEventListener("touchend", onDragEndTouch);
+
+    return () => {
+      window.removeEventListener("mouseup", onDragEndMouse);
+      window.removeEventListener("touchend", onDragEndTouch);
+    };
+  }, []);
+
+  const onDragEndMouse = e => {
+    window.removeEventListener("mousemove", this.onMouseMove);
+    onDragEnd();
+  };
+
+  const onDragEndTouch = e => {
+    window.removeEventListener("touchmove", this.onTouchMove);
+    onDragEnd();
+  };
+
+  const onDragStartMouse = e => {
+    onDragStart(e.clientX);
+    window.addEventListener("mousemove", this.onMouseMove);
+  };
+
+  const onDragStartTouch = e => {
+    const touch = e.targetTouches[0];
+    onDragStart(touch.clientX);
+    window.addEventListener("touchmove", this.onTouchMove);
+  };
+
+  const onDragStart = clientX => {
+    if (decayInterval !== null) {
+      clearInterval(decayInterval);
+    }
+    setDragState({ dragStartX: clientX, dragging: true, velocity: 0 });
+    requestAnimationFrame(updatePosition);
+  };
+
+  const onDragEnd = () => {
+    setDragState(state => ({ ...state, change: 0, dragging: false }));
+    setDecayInterval(state =>
+      state === null ? setInterval(animateSliding, 66) : null
+    );
+  };
+
+  return (
+    <div>
+      <h1>Spin the text below!</h1>
+      <div
+        ref={this.draggableRef}
+        onMouseDown={onDragStartMouse}
+        onTouchStart={onDragStartTouch}
+        className="spinText"
+      >
+        touch move me wherever necessary
+      </div>
+      <br />
+      <br />
+      <br />
+      <span>
+        {`pos: ${carouselTelemetry.angle} velo:${carouselTelemetry.velocity}`}
+      </span>
+    </div>
+  );
+};
+
+class Carousel extends React.Component {
   constructor(props) {
     super(props);
 
@@ -13,8 +139,9 @@ export default class Carousel extends React.Component {
       dragStartTime: 0,
       carouselPosition: 0, //This can be a value between 0 - 360,
       change: 0,
+      velocity: 0,
       width: 0,
-      velocity: 0
+      intervalId: null
     };
 
     this.onDragStartMouse = this.onDragStartMouse.bind(this);
@@ -26,6 +153,7 @@ export default class Carousel extends React.Component {
     this.onDragStart = this.onDragStart.bind(this);
     this.onDragEndMouse = this.onDragEndMouse.bind(this);
     this.onDragEndTouch = this.onDragEndTouch.bind(this);
+    this.animateSliding = this.animateSliding.bind(this);
   }
 
   componentDidMount() {
@@ -42,14 +170,22 @@ export default class Carousel extends React.Component {
   }
 
   onDragStart(clientX) {
-    this.setState(() => ({ dragStartX: clientX, dragging: true }));
+    if (this.state.intervalId !== null) {
+      clearInterval(this.state.intervalId);
+    }
+    this.setState(() => ({ dragStartX: clientX, dragging: true, velocity: 0 }));
     requestAnimationFrame(this.updatePosition);
   }
 
   onDragEnd() {
-    if (this.state.dragging) {
-      this.setState(() => ({ dragging: false, change: 0 }));
-    }
+    this.setState(prevState => ({
+      dragging: false,
+      change: 0,
+      intervalId:
+        prevState.intervalId === null
+          ? setInterval(this.animateSliding, 66)
+          : null
+    }));
   }
 
   updatePosition() {
@@ -61,8 +197,10 @@ export default class Carousel extends React.Component {
     const now = Date.now();
     const elapsed = now - this.state.dragStartTime;
 
-    if (this.state.dragging && elapsed > 20) {
-      console.log("carouselPos: ", this.state.carouselPosition);
+    if (
+      (this.state.dragging && elapsed > 20) ||
+      this.state.intervalId !== null
+    ) {
       this.draggableRef.current.style.transform = `rotate3d(0,1,0,${
         this.state.carouselPosition
       }deg)`;
@@ -79,7 +217,10 @@ export default class Carousel extends React.Component {
         change - prevState.change,
         prevState.carouselPosition,
         prevState.width
-      )
+      ),
+      velocity:
+        ((change - prevState.change) / (Date.now() - prevState.dragStartTime)) *
+        20
     }));
   }
 
@@ -92,7 +233,10 @@ export default class Carousel extends React.Component {
         change - prevState.change,
         prevState.carouselPosition,
         prevState.width
-      )
+      ),
+      velocity:
+        ((change - prevState.change) / (Date.now() - prevState.dragStartTime)) *
+        20
     }));
   }
 
@@ -118,30 +262,51 @@ export default class Carousel extends React.Component {
   }
 
   calculateCarouselPosition(currentMovement, previousCarouselState, width) {
-    //current movement is something like +40 or -20 or whatever, depending on left or right movement
-    // previouCarousel is something between 1 & 360, so we need to map changes to that, we may need to factor in the
-    // component width when mapping the currentMovement to the carousel change
+    //1) Here we take the distance spun since our last frame checked
+    //2) We don't want to let a user spin more than the width of our element so that
+    //a full spin is the start to the finish of the element in dragging distance,
+    //so we min/max it.
+    //3) We map the distance moved, relative to the elements with to 360 degrees to see
+    //how much of the "carousel" we've spun
+    //4) We don't ever want to be spinning more than 360 degrees or less than 0
     const cappedMovement =
       currentMovement > 0
         ? Math.min(currentMovement, width)
         : Math.max(currentMovement, -width);
-    const degreesMoved = (cappedMovement / width) * 360 + previousCarouselState; //may be -30 degrees or + 10 degrees? who knows
-    //which percentage of the current div have we moved? and how many degrees is that for our 360 carousel
-    //If mappedCarouselMovement + previousCarousel state is > 360, then we take the amount we go over by and instead add that to 0,
-    //so we always have a number between 0 and 360. Same for < 0, if its -30 after the calculation, then we take that different and
-    //subtract it from 360
+    const degreesMoved = (cappedMovement / width) * 360 + previousCarouselState;
     const currentCarouselDegrees =
       degreesMoved > 360
         ? degreesMoved - 360
         : degreesMoved < 0
         ? degreesMoved + 360
         : degreesMoved;
 
-    return currentCarouselDegrees;
+    return Math.round(currentCarouselDegrees);
+  }
+
+  animateSliding() {
+    const { velocity, dragging } = this.state;
+    if (!dragging && Math.abs(velocity) > 0) {
+      this.setState(prevState => ({
+        carouselPosition: this.calculateCarouselPosition(
+          velocity,
+          prevState.carouselPosition,
+          prevState.width
+        ),
+        velocity:
+          Math.abs(prevState.velocity / 1.5) < 0.3
+            ? 0
+            : prevState.velocity / 1.5
+      }));
+      requestAnimationFrame(this.updatePosition);
+    } else {
+      clearInterval(this.state.intervalId);
+      this.setState(() => ({ intervalId: null }));
+    }
   }
 
   render() {
-    const { change, carouselPosition } = this.state;
+    const { carouselPosition, velocity } = this.state;
 
     return (
       <div>
@@ -154,9 +319,13 @@ export default class Carousel extends React.Component {
         >
           touch move me wherever necessary
         </div>
-        {/* <Carousel360 imageNumber={carouselPosition} /> */}
-        {carouselPosition}
+        <br />
+        <br />
+        <br />
+        {`pos: ${carouselPosition} velo:${velocity}`}
       </div>
     );
   }
 }
+
+export default Carousel;