Negligent Parachute Maintainers

    with-query-router

    3.3.1 • Public • Published

    with-query-router

    A small wrapper of react-router parsing the query params from the location.search

    CircleCI npm version

    Basic usage with parse

     
    // Let's say you are at location '/foo?counter=1'
     
    import withQueryRouter from 'with-query-router'
     
    class FooPage extends Component {
     
      onIncrementCounter = () => {
        const { query } = this.props
        const { counter } = query.parse()
        // navigate to /foo?counter=2
        query.change({ counter: counter + 1 })
      }
     
      render () {
        const { query } = this.props
        const { counter } = query.parse()
        return (
          <div>
            My counter is equal to {counter}
            <button onClick={this.onIncrementCounter}>
              Increment
            </button>
          </div>
        )
      }
    }
     
    export default withQueryRouter()(FooPage)

    Usage for creation and edition with context

     
    import { Field, Form } from 'react-final-form'
    import { requestData } from 'redux-saga-data'
    import withQueryRouter from 'with-query-router'
     
    class FooPage extends Component {
     
      handleActivateForm = () => {
        const { foo, query } = this.props
        const { id } = foo
        // creation with pathname context
        history.push('new')
        // edition with pathname context
        query.change({ edit: null })
        // creation|edition with search context
        query.change({ foo: id
          ? `edit${id}`
          : 'new'
        })
      }
     
      handleDeactivateForm = formResolver => () => {
        const { history } = this.props
        const { originLocationString } = query.context()
        formResolver()
        history.push(originLocationString)
      }
     
      onFormSubmit = formValues => {
        const { dispatch, foo, history, query } = this.props
        const { id } = (foo || {})
        const { originLocationString } = query.context()
        const formSubmitPromise = new Promise(resolve => {
          dispatch(requestData({
            apiPath: `/foos/${id || ''}`,
            body: { ...formValues },
            handleSuccess: this.handleDeactivateForm(resolve),
            method
          }))
        })
        return formSubmitPromise
      }
     
      render () {
        const { query } = this.props
        const { isReadOnly } = query.context()
        return (
          <Form
            initialValues={initialValues}
            onSubmit={this.onFormSubmit}
            render={() => (
              <form onSubmit={handleSubmit}>
                <Field
                  name={name}
                  render={({ input, meta }) => (
                    <input
                      {...input}
                      readOnly={readOnly}
                      type="text"
                    />
                  )}
                />
                {
                  readOnly
                  ? (
                    <button onClick={this.handleActivateForm} type="button">
                      Create or Edit
                    </button>
                  )
                  : (
                    <button type="submit">
                      Save
                    </button>
                  )
                }
              </form>
            )}
          />
        )
      }
    }
     
    export default withQueryRouter()(FooPage)

    Usage for url in foreign language with translate

     
    // Let's say you are at location '/foo/compteur=1'
     
    import withQueryRouter from 'with-query-router'
     
    class FooPage extends Component {
     
      onIncrementCounter = () => {
        const { query } = this.props
        const { counter } = query.translate()
        // navigate to /foo?compteur=2
        query.change({ counter: counter + 1 })
      }
     
      render () {
        const { query } = this.props
        const { counter } = query.translate()
        return (
          <div>
            My counter is equal to {counter}
            <button onClick={this.onIncrementCounter}>
              Increment
            </button>
          </div>
        )
      }
    }
     
    export default withQueryRouter({
      mapper: { compteur: "counter" }
    })(FooPage)

    Install

    npm i with-query-router

    DownloadsWeekly Downloads

    2

    Version

    3.3.1

    License

    MPL-2.0

    Unpacked Size

    80.4 kB

    Total Files

    10

    Last publish

    Collaborators

    • ledoux