Add HOC hooks solution

Author: mjackson

subjects/07-Higher-Order-Components/solution-hooks.js

@@ -0,0 +1,68 @@
+////////////////////////////////////////////////////////////////////////////////
+// Exercise:
+//
+// - Make the mouse-tracking logic reusable by filling in the `withMouse`
+//   higher-order component and returning a new component that renders the
+//   given component with a `mouse` prop
+//
+// Got extra time?
+//
+// - Make a `withCat` HOC that shows a cat chasing the mouse around the screen!
+////////////////////////////////////////////////////////////////////////////////
+import "./styles.css";
+
+import React from "react";
+import ReactDOM from "react-dom";
+import PropTypes from "prop-types";
+
+import { useState, useEffect, useRef } from "react";
+
+function useMouse() {
+  const [position, updatePosition] = useState({ x: 0, y: 0 });
+
+  function handleMouseMove(event) {
+    updatePosition({ x: event.clientX, y: event.clientY });
+  }
+
+  return { mouse: position, onMouseMove: handleMouseMove };
+}
+
+function useCat(mouse) {
+  const [dimensions, updateDimensions] = useState({
+    height: 0,
+    width: 0
+  });
+  const catRef = useRef();
+
+  useEffect(() => {
+    updateDimensions({
+      height: catRef.current.offsetHeight,
+      width: catRef.current.offsetWidth
+    });
+  }, []);
+
+  const { height, width } = dimensions;
+  const { x, y } = mouse;
+  const style = {
+    left: x - width / 2,
+    top: y - height / 2
+  };
+
+  return <div className="cat" style={style} ref={catRef} />;
+}
+
+function App() {
+  const { mouse, onMouseMove } = useMouse();
+  const cat = useCat(mouse);
+
+  return (
+    <div className="container" onMouseMove={onMouseMove}>
+      {cat}
+      <h1>
+        The mouse position is ({mouse.x}, {mouse.y})
+      </h1>
+    </div>
+  );
+}
+
+ReactDOM.render(<App />, document.getElementById("app"));

subjects/08-Render-Props/solution-hooks.js

@@ -28,107 +28,70 @@ import getAddressFromCoords from "./utils/getAddressFromCoords";
 import { useState, useEffect } from "react";
 
 function useGeoPosition() {
-  const [/* current state */ geo, /* setState */ updateGeo] = useState(
-    /* initial state */ {
-      coords: {
-        latitude: null,
-        longitude: null
-      },
-      error: null
-    }
-  );
-
+  const [coords, updateCoords] = useState({
+    latitude: null,
+    longitude: null
+  });
+  const [
+    /* this.state */ error,
+    /*this.setState*/ updateError
+  ] = useState(/*state = ...*/ null);
+
+  // useEffect(sideEffect, dependencies)
+  // componentDidMount
   useEffect(() => {
-    const geoId = navigator.geolocation.watchPosition(
-      position => {
-        updateGeo({
-          coords: {
-            latitude: position.coords.latitude,
-            longitude: position.coords.longitude
-          }
-        });
-      },
-      error => {
-        updateGeo({ error });
-      }
-    );
+    const geoId = navigator.geolocation.watchPosition(position => {
+      updateCoords({
+        latitude: position.coords.latitude,
+        longitude: position.coords.longitude
+      });
+    }, updateError);
 
+    // componentWillUnmount
     return () => {
       navigator.geolocation.clearWatch(geoId);
     };
   }, []);
 
-  return geo;
+  return { coords, error };
 }
 
-function useAddress(coords) {
+function useAddress(latitude, longitude) {
   const [address, updateAddress] = useState(null);
 
-  function refreshAddress() {
-    updateAddress(null);
-
-    const { latitude, longitude } = coords;
-
-    if (latitude && longitude) {
-      getAddressFromCoords(latitude, longitude).then(updateAddress);
-    }
-  }
-
-  useEffect(refreshAddress, [coords.latitude, coords.longitude]);
+  useEffect(
+    () => {
+      if (latitude && longitude) {
+        getAddressFromCoords(latitude, longitude).then(updateAddress);
+      }
+    },
+    [latitude, longitude]
+  );
 
   return address;
 }
 
-/*
-const [
-  // current state
-  geo,
-  // setState
-  updateGeo
-] = useState(
-  // initial state
-  {
-    coords: {
-      latitude: null,
-      longitude: null
-    },
-    error: null
-  }
-);
-
-useEffect(() => {
-  // componentDidMount and/or componentDidUpdate
-  return () => {
-    // componentWillUnmount
-  }
-},
-  // prop diff in componentDidUpdate
-  [when, this, stuff, changes, run, it, again]
-)
-*/
-
-function App() {
+function App(props) {
   const { coords, error } = useGeoPosition();
-  const address = useAddress(coords);
+  const address = useAddress(coords.latitude, coords.longitude);
 
   return (
     <div>
       <h1>Geolocation</h1>
-
       {error ? (
         <div>Error: {error.message}</div>
       ) : (
-        <dl>
-          <dt>Latitude</dt>
-          <dd>{coords.latitude || <LoadingDots />}</dd>
-          <dt>Longitude</dt>
-          <dd>{coords.longitude || <LoadingDots />}</dd>
-        </dl>
+        <div>
+          <dl>
+            <dt>Latitude</dt>
+            <dd>{coords.latitude || <LoadingDots />}</dd>
+            <dt>Longitude</dt>
+            <dd>{coords.longitude || <LoadingDots />}</dd>
+          </dl>
+
+          <marquee>{address || <LoadingDots />}</marquee>
+        </div>
       )}
-
-      <marquee>
-        <p>The address is {address || <LoadingDots />}</p>
-      </marquee>
     </div>
   );
 }