Some syntax updates

Author: mjackson

subjects/07-Higher-Order-Components/exercise.js

@@ -2,11 +2,8 @@
 // Exercise:
 //
 // - Make the mouse-tracking logic reusable by filling in the `withMouse`
-//   higher-order component and returning a new component that renders a
-//   `ComposedComponent` element with the current mouse position as props
-// - Use the `withMouse` function you just wrote to create an `AppWithMouse`
-//   component
-// - Render <AppWithMouse> instead of <App>
+//   higher-order component and returning a new component that renders the
+//   given component with a `mouse` prop
 //
 // Got extra time?
 //
@@ -18,8 +15,10 @@ import React from "react";
 import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 
-function withMouse(ComposedComponent) {
-  // TODO
+function withMouse(Component) {
+  // TODO: Return a *new* component class that renders
+  // the given Component with a `mouse` prop
+  return Component;
 }
 
 class App extends React.Component {
@@ -42,4 +41,6 @@ class App extends React.Component {
   }
 }
 
-ReactDOM.render(<App />, document.getElementById("app"));
+const AppWithMouse = withMouse(App);
+
+ReactDOM.render(<AppWithMouse />, document.getElementById("app"));

subjects/07-Higher-Order-Components/lecture.js

@@ -10,9 +10,7 @@ const media = createMediaListener({
 });
 
 class App extends React.Component {
-  state = {
-    media: media.getState()
-  };
+  state = { media: media.getState() };
 
   componentDidMount() {
     media.listen(media => this.setState({ media }));
@@ -42,13 +40,11 @@ ReactDOM.render(<App />, document.getElementById("app"));
 // component (HOC) is a function that takes a `Component` as an argument, and
 // returns a new component renders that `Component` with some extra props.
 
-// const mediaComponent = (Component, queries) => {
+// function withMedia(Component, queries) {
 //   const media = createMediaListener(queries);
 
 //   return class extends React.Component {
-//     state = {
-//       media: media.getState()
-//     };
+//     state = { media: media.getState() };
 
 //     componentDidMount() {
 //       media.listen(media => this.setState({ media }));
@@ -62,7 +58,7 @@ ReactDOM.render(<App />, document.getElementById("app"));
 //       return <Component {...this.props} media={this.state.media} />;
 //     }
 //   };
-// };
+// }
 
 // class App extends React.Component {
 //   static propTypes = {
@@ -85,7 +81,7 @@ ReactDOM.render(<App />, document.getElementById("app"));
 //   }
 // }
 
-// const AppWithMedia = mediaComponent(App, {
+// const AppWithMedia = withMedia(App, {
 //   big: "(min-width : 1000px)",
 //   tiny: "(max-width: 400px)"
 // });

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

@@ -1,12 +1,13 @@
 ////////////////////////////////////////////////////////////////////////////////
 // Exercise:
 //
-// Make `withMouse` a "higher-order component" that sends the mouse position
-// to the component as props (hint: use `event.clientX` and `event.clientY`).
+// - 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!
+// - Make a `withCat` HOC that shows a cat chasing the mouse around the screen!
 ////////////////////////////////////////////////////////////////////////////////
 import "./styles.css";
 
@@ -19,10 +20,7 @@ function withMouse(Component) {
     state = { x: 0, y: 0 };
 
     handleMouseMove = event => {
-      this.setState({
-        x: event.clientX,
-        y: event.clientY
-      });
+      this.setState({ x: event.clientX, y: event.clientY });
     };
 
     render() {

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

@@ -2,11 +2,8 @@
 // Exercise:
 //
 // - Make the mouse-tracking logic reusable by filling in the `withMouse`
-//   higher-order component and returning a new component that renders a
-//   `ComposedComponent` element with the current mouse position as props
-// - Use the `withMouse` function you just wrote to create an `AppWithMouse`
-//   component
-// - Render <AppWithMouse> instead of <App>
+//   higher-order component and returning a new component that renders the
+//   given component with a `mouse` prop
 //
 // Got extra time?
 //
@@ -23,10 +20,7 @@ function withMouse(Component) {
     state = { x: 0, y: 0 };
 
     handleMouseMove = event => {
-      this.setState({
-        x: event.clientX,
-        y: event.clientY
-      });
+      this.setState({ x: event.clientX, y: event.clientY });
     };
 
     render() {

subjects/07-Higher-Order-Components/utils/createMediaListener.js

@@ -9,17 +9,17 @@ listener.getState()
 listenter.dispose()
 */
 
-export default media => {
+function createMediaListener(queries) {
   let transientListener = null;
 
-  const mediaKeys = Object.keys(media);
+  const keys = Object.keys(queries);
 
-  const queryLists = mediaKeys.reduce((queryLists, key) => {
-    queryLists[key] = window.matchMedia(media[key]);
+  const queryLists = keys.reduce((queryLists, key) => {
+    queryLists[key] = window.matchMedia(queries[key]);
     return queryLists;
   }, {});
 
-  const mediaState = mediaKeys.reduce((state, key) => {
+  const mediaState = keys.reduce((state, key) => {
     state[key] = queryLists[key].matches;
     return state;
   }, {});
@@ -28,7 +28,7 @@ export default media => {
     if (transientListener != null) transientListener(mediaState);
   };
 
-  const listeners = mediaKeys.reduce((listeners, key) => {
+  const listeners = keys.reduce((listeners, key) => {
     listeners[key] = event => {
       mediaState[key] = event.matches;
       notify();
@@ -39,19 +39,21 @@ export default media => {
 
   const listen = listener => {
     transientListener = listener;
-    mediaKeys.forEach(key => {
+    keys.forEach(key => {
       queryLists[key].addListener(listeners[key]);
     });
   };
 
   const dispose = () => {
     transientListener = null;
-    mediaKeys.forEach(key => {
+    keys.forEach(key => {
       queryLists[key].removeListener(listeners[key]);
     });
   };
 
   const getState = () => mediaState;
 
   return { listen, dispose, getState };
-};
+}
+
+export default createMediaListener;