Update FileDrop to Hooks

snippets/FileDrop.md

@@ -3,12 +3,13 @@
 Renders a file drag and drop component for a single file.
 
 Create a ref called `dropRef` for this component.
-Initialize `state.drag` and `state.filename` to `false` and `''` respectively.
-The variables `dragCounter` and `state.drag` are used to determine if a file is being dragged, while `state.filename` is used to store the dropped file's name.
+Use the `React.useState()` hook to create the `drag` and `filename` variables, initialized to `false` and `''` respectively.
+The variables `dragCounter` and `drag` are used to determine if a file is being dragged, while `filename` is used to store the dropped file's name.
+
 Create the `handleDrag`, `handleDragIn`, `handleDragOut` and `handleDrop` methods to handle drag and drop functionality,  bind them to the component's context.
-Each of the methods will handle a specific event, the listeners for which are created and removed in `componentDidMount` and `componentWillUnmount` respectively.
-`handleDrag` prevents the browser from opening the dragged file, `handleDragIn` and `handleDragOut` handle the dragged file entering and exiting the component, while `handleDrop` handles the file being dropped and passes it to `this.props.handleDrop`.
-In the `render()` method, create an appropriately styled `<div>` and use `state.drag` and `state.filename` to determine its contents and style. 
+Each of the methods will handle a specific event, the listeners for which are created and removed in the `React.useEffect()` hook and its attached `cleanup()` method.
+`handleDrag` prevents the browser from opening the dragged file, `handleDragIn` and `handleDragOut` handle the dragged file entering and exiting the component, while `handleDrop` handles the file being dropped and passes it to `props.handleDrop`.
+Return an appropriately styled `<div>` and use `drag` and `filename` to determine its contents and style. 
 Finally, bind the `ref` of the created `<div>` to `dropRef`.
 
 
@@ -32,79 +33,67 @@ Finally, bind the `ref` of the created `<div>` to `dropRef`.
 ```
 
 ```jsx
-class FileDrop extends React.Component {
-  constructor(props) {
-    super(props);
-    this.dropRef = React.createRef();
-    this.state = {
-      drag: false,
-      filename: ''
-    }
-    this.handleDrag = this.handleDrag.bind(this);
-    this.handleDragIn = this.handleDragIn.bind(this);
-    this.handleDragOut = this.handleDragOut.bind(this);
-    this.handleDrop = this.handleDrop.bind(this);
-  }
+function FileDrop(props) {
+  const [drag, setDrag] = React.useState(false);
+  const [filename, setFilename] = React.useState('');
+  let dropRef = React.createRef();
+  let dragCounter = 0;
 
-  handleDrag(e) {
+  const handleDrag = e => {
     e.preventDefault();
     e.stopPropagation();
-  }
+  };
 
-  handleDragIn(e) {
+  const handleDragIn = e => {
     e.preventDefault();
     e.stopPropagation();
-    this.dragCounter++;
-    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) 
-      this.setState({ drag: true });
-  }
+    dragCounter++;
+    if (e.dataTransfer.items && e.dataTransfer.items.length > 0) setDrag(true);
+  };
 
-  handleDragOut(e) {
+  const handleDragOut = e => {
     e.preventDefault();
     e.stopPropagation();
-    this.dragCounter--;
-    if (this.dragCounter === 0) 
-      this.setState({ drag: false });
-  }
+    dragCounter--;
+    if (dragCounter === 0) setDrag(false);
+  };
 
-  handleDrop(e) {
+  const handleDrop = e => {
     e.preventDefault();
     e.stopPropagation();
-    this.setState({ drag: false });
+    setDrag(false);
     if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
-      this.props.handleDrop(e.dataTransfer.files[0]);
-      this.setState({ filename : e.dataTransfer.files[0].name});
+      props.handleDrop(e.dataTransfer.files[0]);
+      setFilename(e.dataTransfer.files[0].name);
       e.dataTransfer.clearData();
-      this.dragCounter = 0;
+      dragCounter = 0;
     }
-  }
+  };
 
-  componentDidMount() {
-    let div = this.dropRef.current;
-    div.addEventListener('dragenter', this.handleDragIn);
-    div.addEventListener('dragleave', this.handleDragOut);
-    div.addEventListener('dragover', this.handleDrag);
-    div.addEventListener('drop', this.handleDrop);
-  }
+  React.useEffect(() => {
+    let div = dropRef.current;
+    div.addEventListener("dragenter", handleDragIn);
+    div.addEventListener("dragleave", handleDragOut);
+    div.addEventListener("dragover", handleDrag);
+    div.addEventListener("drop", handleDrop);
+    return function cleanup() {
+      div.removeEventListener("dragenter", handleDragIn);
+      div.removeEventListener("dragleave", handleDragOut);
+      div.removeEventListener("dragover", handleDrag);
+      div.removeEventListener("drop", handleDrop);
+    };
+  });
 
-  componentWillUnmount() {
-    let div = this.dropRef.current;
-    div.removeEventListener('dragenter', this.handleDragIn);
-    div.removeEventListener('dragleave', this.handleDragOut);
-    div.removeEventListener('dragover', this.handleDrag);
-    div.removeEventListener('drop', this.handleDrop);
-  }
-
-  render() {
-    return (
-      <div ref={this.dropRef} className={this.state.drag ? 'filedrop drag' : this.state.filename ? 'filedrop ready' : 'filedrop'}>
-        {this.state.filename && !this.state.drag ? 
-          <div>{this.state.filename}</div>
-          : <div>Drop files here!</div>
-        }
-      </div>
-    )
-  }
+  return (
+    <div
+      ref={dropRef}
+      className={
+        drag ? "filedrop drag" : filename ? "filedrop ready" : "filedrop"
+      }
+    >
+      {filename && !drag ? <div>{filename}</div> : <div>Drop files here!</div>}
+    </div>
+  );
 }
 ```