refactor(Contexts): Use functional HOC

A tweet by Andrew Clark https://twitter.com/acdlite/status/971598256454098944 illustrated something pretty cool with context api and creating HoC's meant to wrap functions that add additional arguments instead of props. This is much cleaner, imo.
HomeServicesOfAmerica · Mar 14, 2018 · 7742f77 · 7742f77
1 parent 6e0d597
commit 7742f77
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -30,11 +30,12 @@
     "color": "^2.0.0",
     "create-react-context": "^0.2.1",
     "eslint-config-concierge-auctions-base": "^0.0.6",
-    "lodash.isequal": "^4.5.0",
     "lodash.debounce": "^4.0.8",
+    "lodash.isequal": "^4.5.0",
     "lodash.merge": "^4.6.0",
     "react": "^16.0.0",
     "react-tunnels": "^1.0.2",
+    "recompose": "^0.26.0",
     "respondable": "^1.0.1",
     "styled-components": "^2.2.3"
   },

diff --git a/src/components/FlexGrid/Column.js b/src/components/FlexGrid/Column.js
@@ -7,8 +7,9 @@
  */
 import React from 'react';
 import styled, { css } from 'styled-components';
-import { ScreenSizeConsumer } from '../../contexts/ScreenSizeContext';
-import { RowConsumer } from './Row';
+import { compose } from 'recompose';
+import { withScreenSize } from '../../contexts/ScreenSizeContext';
+import { withRowState } from './Row';
 
 /**
  * getResponsiveProp
@@ -202,24 +203,23 @@ const SizedColumn = styled.div`
  * added to the end of the generated classNames for that component. Because
  * order of classes matters in css this className takes precedent.
  */
-const ColumnComponent = ({ className, children, ...props }) => (
-  <ScreenSizeConsumer>
-    {({ screenSize, lowerScreenSize }) => (
-      <RowConsumer>
-        {row => (
-          <SizedColumn
-            {...props}
-            data-smc="Column"
-            screenSize={screenSize}
-            lowerScreenSize={lowerScreenSize}
-            row={row}
-            className={className}>
-            {children}
-          </SizedColumn>
-        )}
-      </RowConsumer>
-    )}
-  </ScreenSizeConsumer>
+const enhancer = compose(
+  withScreenSize,
+  withRowState,
+);
+
+const ColumnComponent = enhancer(
+  ({ className, children, ...props }, { screenSizeState, rowState }) => (
+    <SizedColumn
+      {...props}
+      data-smc="Column"
+      row={rowState}
+      screenSize={screenSizeState.screenSize}
+      lowerScreenSize={screenSizeState.lowerScreenSize}
+      className={className}>
+      {children}
+    </SizedColumn>
+  )
 );
 
 export const Column = styled(ColumnComponent)`

diff --git a/src/components/FlexGrid/Row.js b/src/components/FlexGrid/Row.js
@@ -151,3 +151,10 @@ export const Row = styled(RowComponent)`
   `}
   ${computeDirection}
 `;
+
+export const withRowState = fn => (props, context = {}) => (
+  <RowConsumer>
+    {rowState => fn(props, { ...context, rowState })}
+  </RowConsumer>
+);
+
diff --git a/src/contexts/ScreenSizeContext.js b/src/contexts/ScreenSizeContext.js
@@ -124,3 +124,9 @@ class ScreenSizeContextBase extends Component {
 
 // withTheme gives us access to the theme without it being a Styled Component
 export const ScreenSizeContext = withTheme(ScreenSizeContextBase);
+
+export const withScreenSize = fn => (props, context = {}) => (
+  <ScreenSizeConsumer>
+    {screenSizeState => fn(props, { ...context, screenSizeState })}
+  </ScreenSizeConsumer>
+);
diff --git a/yarn.lock b/yarn.lock
@@ -1333,6 +1333,10 @@ chalk@^2.0.1, chalk@^2.3.1:
     escape-string-regexp "^1.0.5"
     supports-color "^5.2.0"
 
+change-emitter@^0.1.2:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515"
+
 character-entities-html4@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-1.1.1.tgz#359a2a4a0f7e29d3dc2ac99bdbe21ee39438ea50"
@@ -2398,7 +2402,7 @@ fast-levenshtein@~2.0.4:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
 
-fbjs@^0.8.0, fbjs@^0.8.16, fbjs@^0.8.5, fbjs@^0.8.9:
+fbjs@^0.8.0, fbjs@^0.8.1, fbjs@^0.8.16, fbjs@^0.8.5, fbjs@^0.8.9:
   version "0.8.16"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
   dependencies:
@@ -2976,6 +2980,10 @@ hoist-non-react-statics@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
 
+hoist-non-react-statics@^2.3.1:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40"
+
 home-or-tmp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@@ -4937,6 +4945,15 @@ readdirp@^2.0.0:
     readable-stream "^2.0.2"
     set-immediate-shim "^1.0.1"
 
+recompose@^0.26.0:
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.26.0.tgz#9babff039cb72ba5bd17366d55d7232fbdfb2d30"
+  dependencies:
+    change-emitter "^0.1.2"
+    fbjs "^0.8.1"
+    hoist-non-react-statics "^2.3.1"
+    symbol-observable "^1.0.4"
+
 recursive-copy@2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/recursive-copy/-/recursive-copy-2.0.6.tgz#d590f9eb5f165b96a1b80bc8f9cbcb5c6f9c89e9"
@@ -5757,6 +5774,10 @@ svg-tags@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
 
+symbol-observable@^1.0.4:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
+
 table@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36"