#120: Refactor popup

src/components/ui/popup/PopupStack.jsx

@@ -30,18 +30,13 @@ export class PopupStack extends Component {
                 transitionLeaveTimeout={500}
             >
                 {popups.map((popup, index) => {
-                    const Popup = popup.type;
+                    const {Popup} = popup;
-
-                    const defaultProps = {
-                        onClose: this.onClose(popup)
-                    };
-                    const props = typeof popup.props === 'function'
-                        ? popup.props(defaultProps)
-                        : {...defaultProps, ...popup.props};
 
                     return (
-                        <div className={styles.overlay} key={index} onClick={this.onOverlayClick(popup, props)}>
+                        <div className={styles.overlay} key={index}
-                            <Popup {...props} />
+                            onClick={this.onOverlayClick(popup)}
+                        >
+                            <Popup onClose={this.onClose(popup)} />
                         </div>
                     );
                 })}
@@ -53,9 +48,9 @@ export class PopupStack extends Component {
         return this.props.destroy.bind(null, popup);
     }
 
-    onOverlayClick(popup, popupProps) {
+    onOverlayClick(popup) {
         return (event) => {
-            if (event.target !== event.currentTarget || popupProps.disableOverlayClose) {
+            if (event.target !== event.currentTarget || popup.disableOverlayClose) {
                 return;
             }
 

src/components/ui/popup/actions.js

@@ -1,11 +1,22 @@
 export const POPUP_CREATE = 'POPUP_CREATE';
-export function create(type, props = {}) {
+
+/**
+ * @param {object|ReactComponent} payload - react component or options
+ * @param {ReactComponent} payload.Popup
+ * @param {bool} [payload.disableOverlayClose=false] - do not allow hiding popup
+ *
+ * @return {object}
+ */
+export function create(payload) {
+    if (typeof payload === 'function') {
+        payload = {
+            Popup: payload
+        };
+    }
+
     return {
         type: POPUP_CREATE,
-        payload: {
+        payload
-            type,
-            props
-        }
     };
 }
 

src/components/ui/popup/reducer.js

@@ -6,20 +6,16 @@ export default combineReducers({
     popups
 });
 
-function popups(popups = [], {type, payload}) {
+function popups(popups = [], {type, payload = {}}) {
     switch (type) {
         case POPUP_CREATE:
-            if (!payload.type) {
+            if (!payload.Popup) {
-                throw new Error('Popup type is required');
+                throw new Error('Popup is required');
             }
 
             return popups.concat(payload);
 
         case POPUP_DESTROY:
-            if (!payload.type) {
-                throw new Error('Popup type is required');
-            }
-
             return popups.filter((popup) => popup !== payload);
 
         default:

src/pages/profile/ProfilePage.jsx

@@ -74,24 +74,27 @@ export default connect(null, {
 
         function requestPassword(form) {
             return new Promise((resolve) => {
-                dispatch(createPopup(PasswordRequestForm, (props) => ({
+                dispatch(createPopup({
-                    form,
+                    Popup(props) {
-                    disableOverlayClose: true,
+                        const onSubmit = () => {
-                    onSubmit: () => {
+                            form.beginLoading();
-                        form.beginLoading();
+                            sendData()
-                        sendData()
+                                .catch((resp) => {
-                            .catch((resp) => {
+                                    if (resp.errors) {
-                                if (resp.errors) {
+                                        form.setErrors(resp.errors);
-                                    form.setErrors(resp.errors);
+                                    }
-                                }
 
-                                return Promise.reject(resp);
+                                    return Promise.reject(resp);
-                            })
+                                })
-                            .then(resolve)
+                                .then(resolve)
-                            .then(props.onClose)
+                                .then(props.onClose)
-                            .finally(() => form.endLoading());
+                                .finally(() => form.endLoading());
-                    }
+                        };
-                })));
+
+                        return <PasswordRequestForm form={form} onSubmit={onSubmit} />;
+                    },
+                    disableOverlayClose: true
+                }));
             });
         }
     }

tests/components/ui/popup/PopupStack.test.jsx

@@ -1,10 +1,11 @@
 import React from 'react';
 
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import { PopupStack } from 'components/ui/popup/PopupStack';
+import styles from 'components/ui/popup/popup.scss';
 
-function DummyPopup() {}
+function DummyPopup() {return null;}
 
 describe('<PopupStack />', () => {
     it('renders all popup components', () => {
@@ -12,10 +13,10 @@ describe('<PopupStack />', () => {
             destroy: () => {},
             popups: [
                 {
-                    type: DummyPopup
+                    Popup: DummyPopup
                 },
                 {
-                    type: DummyPopup
+                    Popup: DummyPopup
                 }
             ]
         };
@@ -24,7 +25,7 @@ describe('<PopupStack />', () => {
         expect(component.find(DummyPopup)).to.have.length(2);
     });
 
-    it('should pass provided props', () => {
+    it('should pass onClose as props', () => {
         const expectedProps = {
             foo: 'bar'
         };
@@ -33,47 +34,29 @@ describe('<PopupStack />', () => {
             destroy: () => {},
             popups: [
                 {
-                    type: DummyPopup,
+                    Popup: (props = {}) => {
-                    props: expectedProps
+                        expect(props.onClose).to.be.a('function');
-                }
-            ]
-        };
-        const component = shallow(<PopupStack {...props} />);
 
-        expect(component.find(DummyPopup).prop('foo')).to.be.equal(expectedProps.foo);
+                        return <DummyPopup {...expectedProps} />;
-    });
-
-    it('should use props as proxy if it is function', () => {
-        const expectedProps = {
-            foo: 'bar'
-        };
-
-        const props = {
-            destroy: () => {},
-            popups: [
-                {
-                    type: DummyPopup,
-                    props: (props) => {
-                        expect(props).to.have.property('onClose');
-
-                        return expectedProps;
                     }
                 }
             ]
         };
-        const component = shallow(<PopupStack {...props} />);
+        const component = mount(<PopupStack {...props} />);
 
-        expect(component.find(DummyPopup).props()).to.be.deep.equal(expectedProps);
+        const popup = component.find(DummyPopup);
+        expect(popup).to.have.length(1);
+        expect(popup.props()).to.deep.equal(expectedProps);
     });
 
     it('should hide popup, when onClose called', () => {
         const props = {
             popups: [
                 {
-                    type: DummyPopup
+                    Popup: DummyPopup
                 },
                 {
-                    type: DummyPopup
+                    Popup: DummyPopup
                 }
             ],
             destroy: sinon.stub()
@@ -85,4 +68,41 @@ describe('<PopupStack />', () => {
         sinon.assert.calledOnce(props.destroy);
         sinon.assert.calledWith(props.destroy, sinon.match.same(props.popups[1]));
     });
+
+    it('should hide popup, when overlay clicked', () => {
+        const preventDefault = sinon.stub();
+        const props = {
+            destroy: sinon.stub(),
+            popups: [
+                {
+                    Popup: DummyPopup
+                }
+            ]
+        };
+        const component = shallow(<PopupStack {...props} />);
+
+        const overlay = component.find(`.${styles.overlay}`);
+        overlay.simulate('click', {target: 1, currentTarget: 1, preventDefault});
+
+        sinon.assert.calledOnce(props.destroy);
+        sinon.assert.calledOnce(preventDefault);
+    });
+
+    it('should hide popup on overlay click if disableOverlayClose', () => {
+        const props = {
+            destroy: sinon.stub(),
+            popups: [
+                {
+                    Popup: DummyPopup,
+                    disableOverlayClose: true
+                }
+            ]
+        };
+        const component = shallow(<PopupStack {...props} />);
+
+        const overlay = component.find(`.${styles.overlay}`);
+        overlay.simulate('click', {target: 1, currentTarget: 1, preventDefault() {}});
+
+        sinon.assert.notCalled(props.destroy);
+    });
 });

tests/components/ui/popup/reducer.test.js

@@ -11,36 +11,38 @@ describe('popup/reducer', () => {
 
     describe('#create', () => {
         it('should create popup', () => {
+            const actual = reducer(undefined, create({
+                Popup: FakeComponent
+            }));
+
+            expect(actual.popups[0]).to.be.deep.equal({
+                Popup: FakeComponent
+            });
+        });
+
+        it('should support shortcut popup creation', () => {
             const actual = reducer(undefined, create(FakeComponent));
 
             expect(actual.popups[0]).to.be.deep.equal({
-                type: FakeComponent,
+                Popup: FakeComponent
-                props: {}
             });
         });
 
-        it('should store props', () => {
+        it('should create multiple popups', () => {
-            const expectedProps = {foo: 'bar'};
+            let actual = reducer(undefined, create({
-            const actual = reducer(undefined, create(FakeComponent, expectedProps));
+                Popup: FakeComponent
-
+            }));
-            expect(actual.popups[0]).to.be.deep.equal({
+            actual = reducer(actual, create({
-                type: FakeComponent,
+                Popup: FakeComponent
-                props: expectedProps
+            }));
-            });
-        });
-
-        it('should not remove existed popups', () => {
-            let actual = reducer(undefined, create(FakeComponent));
-            actual = reducer(actual, create(FakeComponent));
 
             expect(actual.popups[1]).to.be.deep.equal({
-                type: FakeComponent,
+                Popup: FakeComponent
-                props: {}
             });
         });
 
         it('throws when no type provided', () => {
-            expect(() => reducer(undefined, create())).to.throw('Popup type is required');
+            expect(() => reducer(undefined, create())).to.throw('Popup is required');
         });
     });
 
@@ -62,17 +64,15 @@ describe('popup/reducer', () => {
         });
 
         it('should not remove something, that it should not', () => {
-            state = reducer(state, create('foo'));
+            state = reducer(state, create({
+                Popup: FakeComponent
+            }));
 
             state = reducer(state, destroy(popup));
 
             expect(state.popups).to.have.length(1);
             expect(state.popups[0]).to.not.equal(popup);
         });
-
-        it('throws when no type provided', () => {
-            expect(() => reducer(undefined, destroy({}))).to.throw('Popup type is required');
-        });
     });
 });