Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- return (
- <Query
- query={GET_FILTER_QUERY}
- pollInterval={160000}
- variables={{ input: {} }}
- >
- {({ loading, error, data, refetch }) => {
- if (loading) return null
- if (data) {
- return (
- <Fragment>
- <Filter refetch={refetch} filterData={data} />
- <ProductList products={data} />
- </Fragment>
- )
- }
- }}
- </Query>
- )
- }
- const { brands, types, suppliers, tags } = props.filterData
- const { refetch } = props
- const mutators = {
- setSelector: (args, state, utils) => {
- utils.changeValue(state, args[0].key, () => args[0].value)
- }
- }
- return (
- <ApolloConsumer>
- {client => (
- <div className="row mt-5 mb-5">
- <FinalForm
- onSubmit={async formValue => {
- // refetch({ input: formValue })
- const { data } = await client.query({
- query: GET_FILTER_QUERY,
- variables: { input: formValue }
- })
- // const stores = client.readQuery({ query: GET_PRODUCTS_QUERY })
- return client.writeQuery({
- query: GET_FILTER_QUERY,
- data: {
- getfilterProducts: data.getfilterProducts
- }
- })
- // console.log(stores)
- }}
- mutators={mutators}
- render={({ handleSubmit, form, values }) => (
- <form onSubmit={handleSubmit} noValidate>
- <div className="filter-controll">
- <div className="filter-control-options">
- <ul className="sellect-group">
- <li>
- <SearchBox
- onChange={e => {
- form.mutators.setSelector({
- key: 'text',
- value: e.target.value
- })
- }}
- />
- </li>
- </ul>
- <ul className="sellect-group">
- <li>
- <Select
- name="type"
- classNamePrefix="fiter-select"
- className="filter-select"
- options={types}
- placeholder="Product type"
- isClearable
- onChange={type => {
- form.mutators.setSelector({
- key: 'type',
- value: type.value
- })
- }}
- />
- </li>
- </ul>
- <ul className="sellect-group">
- <li>
- <Select
- classNamePrefix="fiter-select"
- className="filter-select"
- options={brands}
- placeholder="All brands"
- onChange={brand => {
- form.mutators.setSelector({
- key: 'brand',
- value: brand.value
- })
- }}
- />
- </li>
- </ul>
- <ul className="sellect-group">
- <li>
- <Select
- classNamePrefix="fiter-select"
- className="filter-select"
- options={suppliers}
- placeholder="All suppliers"
- onChange={supplier => {
- form.mutators.setSelector({
- key: 'supplier',
- value: supplier.value
- })
- }}
- />
- </li>
- </ul>
- <ul className="sellect-group">
- <li>
- <Select
- classNamePrefix="fiter-select"
- className="filter-select"
- options={tags}
- placeholder="All tags"
- isMulti
- onChange={type => {
- form.mutators.setSelector({
- key: 'tags',
- value: type.map(type => type.value)
- })
- }}
- />
- </li>
- </ul>
- <ul className="sellect-group ml-5x">
- <li>
- <Button type="submit">Apply filter</Button>
- </li>
- </ul>
- </div>
- </div>
- </form>
- )}
- />
- </div>
- )}
- </ApolloConsumer>
- )
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement