openreplay/frontend/app/components/hocs/withLocationHandlers.js
2021-05-01 15:12:01 +05:30

83 lines
2.4 KiB
JavaScript

import { withRouter } from 'react-router-dom';
import {
removeQueryParams,
addQueryParams,
setQueryParams,
parseQuery,
} from 'App/routes';
/* eslint-disable react/sort-comp */
const withLocationHandlers = propNames => BaseComponent =>
@withRouter
class extends React.Component {
getQuery = names => parseQuery(this.props.location, names)
getParam = name => parseQuery(this.props.location)[ name ]
addQuery = (params) => {
const { location, history } = this.props;
history.push(addQueryParams(location, params));
}
removeQuery = (names = [], replace=false) => {
const { location, history } = this.props;
const namesArray = Array.isArray(names) ? names : [ names ];
/* to avoid update stack overflow */
const actualNames = Object.keys(this.getQuery(namesArray));
if (actualNames.length > 0) {
history[ replace ? 'replace' : 'push' ](removeQueryParams(location, actualNames));
}
}
setQuery = (params, replace=false) => {
const { location, history } = this.props;
history[ replace ? 'replace' : 'push' ](setQueryParams(location, params));
}
query = {
all: this.getQuery,
get: this.getParam,
add: this.addQuery,
remove: this.removeQuery,
set: this.setQuery, // TODO: use namespaces
}
getHash = () => this.props.location.hash.substring(1)
setHash = (hash) => {
const { location, history } = this.props;
history.push({ ...location, hash: `#${ hash }` });
}
removeHash = () => {
const { location, history } = this.props;
history.push({ ...location, hash: '' });
}
hash = {
get: this.getHash,
set: this.setHash,
remove: this.removeHash,
}
getQueryProps() {
if (Array.isArray(propNames)) return this.getQuery(propNames);
if (propNames !== null && typeof propNames === 'object') {
const values = Object.values(propNames);
const query = this.getQuery(values);
const queryProps = {};
Object.keys(propNames).map((key) => { queryProps[ key ] = query[ propNames[ key ] ]; });
return queryProps;
}
return {};
}
render() {
const queryProps = this.getQueryProps();
return (
<BaseComponent
query={ this.query }
hash={ this.hash }
{ ...queryProps }
{ ...this.props }
/>
);
}
};
export default withLocationHandlers;