Skip to content

Instantly share code, notes, and snippets.

@bigslycat

bigslycat/findify_challenge.md

Forked from Bitaru/findify_challenge.md
Last active January 24, 2018 13:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bigslycat/673bf3fb7165421ede81da134f3818a9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bigslycat/673bf3fb7165421ede81da134f3818a9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. bigslycat revised this gist Jan 24, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion findify_challenge.md
    View file
    Original file line number Diff line number Diff line change
    @@ -13,9 +13,9 @@ import {
    } from 'recompose'

    const Modal = mapProps(({ close, title, ...props }) => ({
    ...props,
    children: `Hide ${title} modal`,
    onClick: close,
    ...props,
    }))('button')

    const ModalButton = withProps({
  2. bigslycat revised this gist Jan 22, 2018. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions findify_challenge.md
    View file
    Original file line number Diff line number Diff line change
    @@ -32,9 +32,9 @@ const withModal =
    })(({ isOpen, open, close, buttonProps, ...modalProps }) => (
    <Fragment>
    {isOpen && createPortal(
    <ModalComponent {...modalProps} title={modalName} close={close} />,
    modalNode,
    )}
    <ModalComponent {...modalProps} title={modalName} close={close} />,
    modalNode,
    )}
    <ButtonComponent {...buttonProps} onClick={open} />
    </Fragment>
    ))
  3. bigslycat revised this gist Jan 22, 2018. 1 changed file with 38 additions and 14 deletions.
    52 changes: 38 additions & 14 deletions findify_challenge.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,22 +3,46 @@
    ```javascript

    const PricingModal = ({ title, onHide }) => <button onClick={onHide}>Hide {title} modal</button>;
    import React, { Fragment } from 'react'
    import { createPortal } from 'react-dom'

    class PricingButton extends React.Component {
    showPricing: () => {
    const { openModal, hideModal } = this.props;
    openModal('pricing', {
    title: 'Pricing',
    onHide: (data) => hideModal('pricing')
    })
    }
    import {
    withStateHandlers,
    withProps,
    mapProps,
    } from 'recompose'

    render() {
    return <button onClick={this.showPricing}>Open modal</button>
    }
    }
    const Modal = mapProps(({ close, title, ...props }) => ({
    children: `Hide ${title} modal`,
    onClick: close,
    ...props,
    }))('button')

    const ModalButton = withProps({
    children: 'Open modal',
    })('button')

    const withModal =
    (modalNode, modalName, ModalComponent) =>
    ButtonComponent => withStateHandlers({
    isOpen: false,
    }, {
    open: () => () => ({ isOpen: true }),
    close: () => () => ({ isOpen: false }),
    })(({ isOpen, open, close, buttonProps, ...modalProps }) => (
    <Fragment>
    {isOpen && createPortal(
    <ModalComponent {...modalProps} title={modalName} close={close} />,
    modalNode,
    )}
    <ButtonComponent {...buttonProps} onClick={open} />
    </Fragment>
    ))

    export const PricingModal = withModal(
    document.getElementById('modals'),
    'pricing',
    Modal,
    )(ModalButton)

    export default withModal('pricing', PricingModal)(PricingButton)
    ```
  4. @Bitaru Bitaru revised this gist Jan 15, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion findify_challenge.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    ### TASK:
    > Implement a "withModal" high order component (HOC) that will accept two arguments [modalName: String] and [modalComponent: React.Component]. It should render a "modalComponent" into the portal. In addition, this HOC should inject 'showModal' and 'hideModal' into a new collection of props that are passed to the base component. For instance:
    > Implement a "withModal" high order component (HOC) that will accept two arguments [modalName: String] and [modalComponent: React.Component]. It should render a "modalComponent" into the portal. In addition, this HOC should inject 'showModal' and 'hideModal' handlers into a new collection of props that are passed to the base component. For instance:
    ```javascript

  5. @Bitaru Bitaru revised this gist Jan 15, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion findify_challenge.md
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,7 @@
    const PricingModal = ({ title, onHide }) => <button onClick={onHide}>Hide {title} modal</button>;

    class PricingButton extends React.Component {
    showProcing: () => {
    showPricing: () => {
    const { openModal, hideModal } = this.props;
    openModal('pricing', {
    title: 'Pricing',
  6. @Bitaru Bitaru revised this gist Jan 15, 2018. 1 changed file with 15 additions and 16 deletions.
    31 changes: 15 additions & 16 deletions findify_challenge.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,24 +2,23 @@
    > Implement a "withModal" high order component (HOC) that will accept two arguments [modalName: String] and [modalComponent: React.Component]. It should render a "modalComponent" into the portal. In addition, this HOC should inject 'showModal' and 'hideModal' into a new collection of props that are passed to the base component. For instance:
    ```javascript
    import { compose, withHandlers } from 'recompose';

    const PricingModal = ({ title, onHide }) => <button onClick={onHide}>Hide {title} modal</button>;

    const enhance = compose(
    withModal('pricing', PricingModal),
    withHandlers({
    showPricing: ({ openModal, hideModal }) => () =>
    openModal('pricing', {
    title: 'Pricing',
    onHide: (data) => hideModal('pricing')
    })
    })
    )
    class PricingButton extends React.Component {
    showProcing: () => {
    const { openModal, hideModal } = this.props;
    openModal('pricing', {
    title: 'Pricing',
    onHide: (data) => hideModal('pricing')
    })
    }

    export default enhance(({
    openModal
    }) => (
    <button onClick={openModal}>Open modal</button>
    ))
    render() {
    return <button onClick={this.showPricing}>Open modal</button>
    }
    }


    export default withModal('pricing', PricingModal)(PricingButton)
    ```
  7. @Bitaru Bitaru revised this gist Dec 1, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion findify_challenge.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    ### TASK:
    > Write a "withModal" high order component (HOC), which will accept two arguments [modalName: String] and [modalComponent: React.Component] and render modalComponent into the portal. In addition, this HOC should inject 'showModal' and 'hideModal' to a new collection of props that are passed to the base component. For instance:
    > Implement a "withModal" high order component (HOC) that will accept two arguments [modalName: String] and [modalComponent: React.Component]. It should render a "modalComponent" into the portal. In addition, this HOC should inject 'showModal' and 'hideModal' into a new collection of props that are passed to the base component. For instance:
    ```javascript
    import { compose, withHandlers } from 'recompose';
  8. @Bitaru Bitaru revised this gist Nov 30, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion findify_challenge.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    ### TASK:
    > Write down a "withModal" high order component (HOC), which will accept two arguments [modalName: String] and [modalComponent: React.Component] and render modalComponent into the portal. In addition, this HOC should inject 'showModal' and 'hideModal' to a new collection of props that are passed to the base component. For instance:
    > Write a "withModal" high order component (HOC), which will accept two arguments [modalName: String] and [modalComponent: React.Component] and render modalComponent into the portal. In addition, this HOC should inject 'showModal' and 'hideModal' to a new collection of props that are passed to the base component. For instance:
    ```javascript
    import { compose, withHandlers } from 'recompose';
  9. @Bitaru Bitaru revised this gist Nov 30, 2017. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions findify_challenge.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,5 @@
    ### TASK:
    > Write down a "withModal" high order component, which will accept two arguments [modalName: String] and [modalComponent: React.Component] and render modalComponent into portal.
    Also, this HOC should inject 'showModal' and 'hideModal' to a new collection of props that are passed to the base component. eq:
    > Write down a "withModal" high order component (HOC), which will accept two arguments [modalName: String] and [modalComponent: React.Component] and render modalComponent into the portal. In addition, this HOC should inject 'showModal' and 'hideModal' to a new collection of props that are passed to the base component. For instance:
    ```javascript
    import { compose, withHandlers } from 'recompose';
  10. @Bitaru Bitaru revised this gist Nov 30, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions findify_challenge.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    ### TASK:
    > Write down a "withModal" hight order component, which will accept two arguments [modalName: String] and [modalComponent: React.Component] and render modalComponent into portal.
    Also, this HOF should inject 'showModal' and 'hideModal' to a new collection of props that are passed to the base component. eq:
    > Write down a "withModal" high order component, which will accept two arguments [modalName: String] and [modalComponent: React.Component] and render modalComponent into portal.
    Also, this HOC should inject 'showModal' and 'hideModal' to a new collection of props that are passed to the base component. eq:

    ```javascript
    import { compose, withHandlers } from 'recompose';
  11. @Bitaru Bitaru revised this gist Nov 30, 2017. 1 changed file with 7 additions and 1 deletion.
    8 changes: 7 additions & 1 deletion findify_challenge.md
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@ Also, this HOF should inject 'showModal' and 'hideModal' to a new collection of
    ```javascript
    import { compose, withHandlers } from 'recompose';

    const PricingModal = ({ title, onHide }) => <button onClick={onHide}>Hide {title} modal</button>
    const PricingModal = ({ title, onHide }) => <button onClick={onHide}>Hide {title} modal</button>;

    const enhance = compose(
    withModal('pricing', PricingModal),
    @@ -17,4 +17,10 @@ const enhance = compose(
    })
    })
    )

    export default enhance(({
    openModal
    }) => (
    <button onClick={openModal}>Open modal</button>
    ))
    ```
  12. @Bitaru Bitaru created this gist Nov 30, 2017.
    20 changes: 20 additions & 0 deletions findify_challenge.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    ### TASK:
    > Write down a "withModal" hight order component, which will accept two arguments [modalName: String] and [modalComponent: React.Component] and render modalComponent into portal.
    Also, this HOF should inject 'showModal' and 'hideModal' to a new collection of props that are passed to the base component. eq:

    ```javascript
    import { compose, withHandlers } from 'recompose';

    const PricingModal = ({ title, onHide }) => <button onClick={onHide}>Hide {title} modal</button>

    const enhance = compose(
    withModal('pricing', PricingModal),
    withHandlers({
    showPricing: ({ openModal, hideModal }) => () =>
    openModal('pricing', {
    title: 'Pricing',
    onHide: (data) => hideModal('pricing')
    })
    })
    )
    ```