Repository: hasura/graphql-engine
File: console/src/components/Services/Data/TableBrowseRows/FilterQuery.js (JavaScript)

Code before:

    let urlSorts = [];
    if (typeof this.props.urlQuery.sort === 'string') {
      urlSorts = [this.props.urlQuery.sort];
    } else if (Array.isArray(this.props.urlQuery.sort)) {
      urlSorts = this.props.urlQuery.sort;
    }
    this.props.curQuery.order_by = urlSorts.map(sort => {
      const parts = sort.split(';');
      const column = parts[0];
      const type = parts[1];
      const nulls = 'last';
      return { column, type, nulls };
    });

    dispatch(setDefaultQuery(this.props.curQuery));
  }

  setParams(query = { filters: [], sorts: [] }) {
    const searchParams = new URLSearchParams();
    query.filters.forEach(filter => searchParams.append('filter', filter));
    query.sorts.forEach(sort => searchParams.append('sort', sort));
    return searchParams.toString();
  }

  setUrlParams(whereAnd, orderBy) {
    const sorts = orderBy.filter(order => order.column).map(order => `${order.column};${order.type}`);
    const filters = whereAnd.filter(where => Object.keys(where).length === 1 && Object.keys(where)[0] !== '')
      .map(where => {
        const col = Object.keys(where)[0];
        const op = Object.keys(where[col])[0];
        const value = where[col][op];
        return `${col};${op};${value}`;
      });
    const url = this.setParams({ filters, sorts });
    history.push({ pathname: history.getCurrentLocation().pathname, search: `?${url}` });
  }

  render() {
    const { dispatch, whereAnd, tableSchema, orderBy } = this.props; // eslint-disable-line no-unused-vars
    const styles = require('../../../Common/FilterQuery/FilterQuery.scss');

    return (
      <div className={styles.add_mar_top}>
        <form
          onSubmit={e => {
            e.preventDefault();
            dispatch(setOffset(0));
            this.setUrlParams(whereAnd, orderBy);
            dispatch(runQuery(tableSchema));
          }}

Review comment (suggestion):
Here, you are mutating the props, which is an anti-pattern in react. A component should not manage its props. `props` are literally  **the state that is managed by the component owner.** That's why they should be treated as immutable data. 

My proposition here would be to use local variables:
```js
    const where = {
      $and: urlFilters.map(filter => {
        const parts = filter.split(';');
        const col = parts[0];
        const op = parts[1];
        const value = parts[2];
        return { [col]: { [op]: value } };
      }),
    };

    const order_by = urlSorts.map(sort => {
      const parts = sort.split(';');
      const column = parts[0];
      const type = parts[1];
      const nulls = 'last';
      return { column, type, nulls };
    });
```

And then use them in `setDefaultQuery` function:
```js
dispatch(setDefaultQuery({ where, order_by }));
```

Code after:
      urlFilters = this.props.urlQuery.filter;
    }
    const where = {
      $and: urlFilters.map(filter => {
        const parts = filter.split(';');
        const col = parts[0];
        const op = parts[1];
        const value = parts[2];
        return { [col]: { [op]: value } };
      }),
    };

    let urlSorts = [];
    if (typeof this.props.urlQuery.sort === 'string') {
      urlSorts = [this.props.urlQuery.sort];
    } else if (Array.isArray(this.props.urlQuery.sort)) {
      urlSorts = this.props.urlQuery.sort;
    }

    const order_by = urlSorts.map(sort => {
      const parts = sort.split(';');
      const column = parts[0];
      const type = parts[1];
      const nulls = 'last';
      return { column, type, nulls };
    });

    dispatch(setDefaultQuery({ where, order_by }));
    dispatch(runQuery(this.props.tableSchema));
  }

  setParams(query = { filters: [], sorts: [] }) {
    const searchParams = new URLSearchParams();
    query.filters.forEach(filter => searchParams.append('filter', filter));
    query.sorts.forEach(sort => searchParams.append('sort', sort));
    return searchParams.toString();
  }

  setUrlParams(whereAnd, orderBy) {
    const sorts = orderBy
      .filter(order => order.column)
      .map(order => `${order.column};${order.type}`);
    const filters = whereAnd
      .filter(
        where => Object.keys(where).length === 1 && Object.keys(where)[0] !== ''
      )
      .map(where => {
        const col = Object.keys(where)[0];
        const op = Object.keys(where[col])[0];
        const value = where[col][op];
        return `${col};${op};${value}`;