Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Replace redux-responsive with a custom simpler alternative #3878

Merged
merged 1 commit into from
Dec 8, 2017
Merged

Replace redux-responsive with a custom simpler alternative #3878

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 7 additions & 19 deletions editor/reducer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
*/
import optimist from 'redux-optimist';
import { combineReducers } from 'redux';
import { createResponsiveStateReducer } from 'redux-responsive';
import {
flow,
partialRight,
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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 ) {
Expand Down Expand Up @@ -807,6 +795,6 @@ export default optimist( combineReducers( {
saving,
notices,
metaBoxes,
responsive,
browser,
reusableBlocks,
} ) );
3 changes: 2 additions & 1 deletion editor/selectors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;
}

/**
Expand Down
25 changes: 25 additions & 0 deletions editor/store-browser-enhancer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 );
Copy link
Member

@gziolo gziolo Dec 8, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I’m wondering what will happen with those event listeners when Redux store gets recreated after an error that crashes editor. It would be great to double check they don’t get cloned every time it happens.

window.addEventListener( 'orientationchange', updateSize );
updateSize();
}

export default enhanceWithBrowserSize;
4 changes: 2 additions & 2 deletions editor/store.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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,
Expand All @@ -44,6 +43,7 @@ function createReduxStore( preloadedState ) {
}

const store = createStore( reducer, preloadedState, flowRight( enhancers ) );
enhanceWithBrowserSize( store );

return store;
}
Expand Down
40 changes: 16 additions & 24 deletions editor/test/selectors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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,
},
};

Expand All @@ -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,
},
};

Expand Down
13 changes: 0 additions & 13 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down