import React from "react";
import { merge, compose } from "lodash/fp";

export const castRouterParams = (keys, caster) => WrappedComponent => ({
  match,
  ...props
}) => {
  const params = Object.fromEntries(
    keys.map(key => {
      const value = match.params[key];
      return [key, value ? caster(value) : undefined];
    })
  );
  return (
    <WrappedComponent
      {...props}
      {...{ match: { params: merge({}, match.params, params) } }}
    />
  );
};

export const flattenRouterParams = WrappedComponent => ({
  match,
  ...props
}) => {
  return <WrappedComponent {...props} {...match.params} />;
};

// usage:
const FooComponent = props => {
  console.log(typeof props.match.params.someId) // "number"
}

export default compose(
  withRouter,
  castRouterParams(["someIdProp", "otherIdProp"], Number)
)(FooComponent);