From e8db7efc15b02639b4fccb3433988bdbfbcf7c1e Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 8 Dec 2017 17:34:36 +0100 Subject: [PATCH] Replace redux-responsive with a custom simpler alternative --- editor/reducer.js | 26 ++++++--------------- editor/selectors.js | 3 ++- editor/store-browser-enhancer.js | 25 ++++++++++++++++++++ editor/store.js | 4 ++-- editor/test/selectors.js | 40 +++++++++++++------------------- package-lock.json | 13 ----------- package.json | 1 - 7 files changed, 52 insertions(+), 60 deletions(-) create mode 100644 editor/store-browser-enhancer.js diff --git a/editor/reducer.js b/editor/reducer.js index 8f62d685fe5b7b..f7b02ff028e65a 100644 --- a/editor/reducer.js +++ b/editor/reducer.js @@ -3,7 +3,6 @@ */ import optimist from 'redux-optimist'; import { combineReducers } from 'redux'; -import { createResponsiveStateReducer } from 'redux-responsive'; import { flow, partialRight, @@ -33,14 +32,6 @@ import { getBlockTypes, getBlockType } from '@wordpress/blocks'; import withHistory from './utils/with-history'; import withChangeDetection from './utils/with-change-detection'; import { PREFERENCES_DEFAULTS } from './store-defaults'; -import { - BREAK_HUGE, - BREAK_WIDE, - BREAK_LARGE, - BREAK_MEDIUM, - BREAK_SMALL, - BREAK_MOBILE, -} from './constants'; /*** * Module constants @@ -718,15 +709,12 @@ export function metaBoxes( state = defaultMetaBoxState, action ) { } } -// Create responsive reducer with the breakpoints imported from the scss variables file. -const responsive = createResponsiveStateReducer( { - mobile: BREAK_MOBILE, - small: BREAK_SMALL, - medium: BREAK_MEDIUM, - large: BREAK_LARGE, - wide: BREAK_WIDE, - huge: BREAK_HUGE, -} ); +export function browser( state = {}, action ) { + if ( action.type === 'BROWSER_RESIZE' ) { + return { width: action.width, height: action.height }; + } + return state; +} export const reusableBlocks = combineReducers( { data( state = {}, action ) { @@ -807,6 +795,6 @@ export default optimist( combineReducers( { saving, notices, metaBoxes, - responsive, + browser, reusableBlocks, } ) ); diff --git a/editor/selectors.js b/editor/selectors.js index 1680becf51fdbb..565452ba2c1840 100644 --- a/editor/selectors.js +++ b/editor/selectors.js @@ -26,6 +26,7 @@ import { addQueryArgs } from '@wordpress/url'; * Internal dependencies */ import { POST_UPDATE_TRANSACTION_ID } from './effects'; +import { BREAK_MEDIUM } from './constants'; /*** * Module constants @@ -209,7 +210,7 @@ export function isCleanNewPost( state ) { * @return {Boolean} Whether current window size corresponds to mobile resolutions */ export function isMobile( state ) { - return ! state.responsive.greaterThan.medium; + return state.browser.width < BREAK_MEDIUM; } /** diff --git a/editor/store-browser-enhancer.js b/editor/store-browser-enhancer.js new file mode 100644 index 00000000000000..91d9a2515e7262 --- /dev/null +++ b/editor/store-browser-enhancer.js @@ -0,0 +1,25 @@ +/** + * External dependencies + */ +import { throttle } from 'lodash'; + +/** + * Enhance a redux store with the browser size + * + * @param {Object} store Redux Store + */ +function enhanceWithBrowserSize( store ) { + const updateSize = throttle( () => { + store.dispatch( { + type: 'BROWSER_RESIZE', + width: window.innerWidth, + height: window.innerHeight, + } ); + }, 100 ); + + window.addEventListener( 'resize', updateSize ); + window.addEventListener( 'orientationchange', updateSize ); + updateSize(); +} + +export default enhanceWithBrowserSize; diff --git a/editor/store.js b/editor/store.js index 2b7ed59612678e..7a0edcc4a1ccdb 100644 --- a/editor/store.js +++ b/editor/store.js @@ -5,7 +5,6 @@ import { applyMiddleware, createStore } from 'redux'; import refx from 'refx'; import multi from 'redux-multi'; import { flowRight } from 'lodash'; -import { responsiveStoreEnhancer } from 'redux-responsive'; /** * Internal dependencies @@ -15,6 +14,7 @@ import { mobileMiddleware } from './utils/mobile'; import reducer from './reducer'; import storePersist from './store-persist'; import { PREFERENCES_DEFAULTS } from './store-defaults'; +import enhanceWithBrowserSize from './store-browser-enhancer'; /** * Module constants @@ -30,7 +30,6 @@ const GUTENBERG_PREFERENCES_KEY = `GUTENBERG_PREFERENCES_${ window.userSettings. function createReduxStore( preloadedState ) { const enhancers = [ applyMiddleware( multi, refx( effects ) ), - responsiveStoreEnhancer, storePersist( { reducerKey: 'preferences', storageKey: GUTENBERG_PREFERENCES_KEY, @@ -44,6 +43,7 @@ function createReduxStore( preloadedState ) { } const store = createStore( reducer, preloadedState, flowRight( enhancers ) ); + enhanceWithBrowserSize( store ); return store; } diff --git a/editor/test/selectors.js b/editor/test/selectors.js index 162588c35c7a5a..f444c5d7552a78 100644 --- a/editor/test/selectors.js +++ b/editor/test/selectors.js @@ -84,6 +84,10 @@ import { } from '../selectors'; import { POST_UPDATE_TRANSACTION_ID } from '../effects'; +jest.mock( '../constants', () => ( { + BREAK_MEDIUM: 500, +} ) ); + describe( 'selectors', () => { beforeAll( () => { registerBlockType( 'core/test-block', { @@ -324,10 +328,8 @@ describe( 'selectors', () => { describe( 'isEditorSidebarOpened', () => { it( 'should return true when is not mobile and the normal sidebar is opened', () => { const state = { - responsive: { - greaterThan: { - medium: true, - }, + browser: { + width: 1000, }, preferences: { isSidebarOpened: true, @@ -340,10 +342,8 @@ describe( 'selectors', () => { it( 'should return false when is not mobile and the normal sidebar is closed', () => { const state = { - responsive: { - greaterThan: { - medium: true, - }, + browser: { + width: 1000, }, preferences: { isSidebarOpened: false, @@ -355,10 +355,8 @@ describe( 'selectors', () => { it( 'should return true when is mobile and the mobile sidebar is opened', () => { const state = { - responsive: { - greaterThan: { - medium: false, - }, + browser: { + width: 100, }, preferences: { isSidebarOpened: false, @@ -371,10 +369,8 @@ describe( 'selectors', () => { it( 'should return false when is mobile and the mobile sidebar is closed', () => { const state = { - responsive: { - greaterThan: { - medium: false, - }, + browser: { + width: 100, }, preferences: { isSidebarOpened: true, @@ -605,10 +601,8 @@ describe( 'selectors', () => { describe( 'isMobile', () => { it( 'should return true if resolution is equal or less than medium breakpoint', () => { const state = { - responsive: { - greaterThan: { - medium: false, - }, + browser: { + width: 100, }, }; @@ -617,10 +611,8 @@ describe( 'selectors', () => { it( 'should return true if resolution is greater than medium breakpoint', () => { const state = { - responsive: { - greaterThan: { - medium: true, - }, + browser: { + width: 1000, }, }; diff --git a/package-lock.json b/package-lock.json index 8ba87c3552025b..0438e1861dd82d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7405,11 +7405,6 @@ "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=", "dev": true }, - "mediaquery": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/mediaquery/-/mediaquery-0.0.3.tgz", - "integrity": "sha1-OH1hwQqpX/TWkH9qq90i16iY4D4=" - }, "mem": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/mem/-/mem-1.1.0.tgz", @@ -9252,14 +9247,6 @@ "resolved": "https://registry.npmjs.org/redux-optimist/-/redux-optimist-0.0.2.tgz", "integrity": "sha1-cNoX6GPFOoYE1YHKIKJpCL2haX4=" }, - "redux-responsive": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/redux-responsive/-/redux-responsive-4.3.4.tgz", - "integrity": "sha1-/PbcMCUKyIKrXoYCK6XGp8hJkYs=", - "requires": { - "mediaquery": "0.0.3" - } - }, "refx": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/refx/-/refx-2.1.0.tgz", diff --git a/package.json b/package.json index 7b5392c94d2394..dacd2368124c0b 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,6 @@ "redux": "3.7.2", "redux-multi": "0.1.12", "redux-optimist": "0.0.2", - "redux-responsive": "4.3.4", "refx": "2.1.0", "rememo": "2.3.3", "showdown": "1.7.4",