From 7742f77d17ec72f940c1c3069cda8e6aa77f17fb Mon Sep 17 00:00:00 2001 From: Brad Decker Date: Thu, 8 Mar 2018 10:47:15 -0600 Subject: [PATCH] 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. --- package.json | 3 ++- src/components/FlexGrid/Column.js | 40 +++++++++++++++---------------- src/components/FlexGrid/Row.js | 7 ++++++ src/contexts/ScreenSizeContext.js | 6 +++++ yarn.lock | 23 +++++++++++++++++- 5 files changed, 57 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index 9c5df1a2..2e33d0b4 100644 --- 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 index a078f479..5cb5016a 100644 --- 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 }) => ( - - {({ screenSize, lowerScreenSize }) => ( - - {row => ( - - {children} - - )} - - )} - +const enhancer = compose( + withScreenSize, + withRowState, +); + +const ColumnComponent = enhancer( + ({ className, children, ...props }, { screenSizeState, rowState }) => ( + + {children} + + ) ); export const Column = styled(ColumnComponent)` diff --git a/src/components/FlexGrid/Row.js b/src/components/FlexGrid/Row.js index 5e24849d..4a7ecc9d 100644 --- 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 = {}) => ( + + {rowState => fn(props, { ...context, rowState })} + +); + diff --git a/src/contexts/ScreenSizeContext.js b/src/contexts/ScreenSizeContext.js index 7c83e09b..22486daa 100644 --- 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 = {}) => ( + + {screenSizeState => fn(props, { ...context, screenSizeState })} + +); diff --git a/yarn.lock b/yarn.lock index db897348..32e05a0f 100644 --- 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"