How to wrap a component in HOC using compose?

Question

typescript

I have a HOC (ThemeProvider from @material-ui/core) in which I wrap the component. I want to do this via compose (redux). But I can't understand how? Namely: how to pass userPalette to compose.

import {hot} from 'react-hot-loader/root';

    interface IRoutesProps {
    isTokenVerifying: boolean;
    userPalette: IPalette;
}

const Routes = ({isTokenVerifying, userPalette}: IRoutesProps) => {
    return (
        <ThemeProvider theme={defaultMaterialTheme(userPalette)}>
            <Switch>
                 ....
            </Switch>
        </ThemeProvider>
    );
};

const mapStateToProps = (state: RootState) => ({
    isTokenVerifying: getPendingTokenVerify(state),
    userPalette: getUserPalette(state),
});

export default hot(connect(mapStateToProps)(Routes));

There is this idea:

const ThemeProviderContainer = ({ children, userPalette }: any) =>
    <ThemeProvider theme={defaultMaterialTheme(userPalette)}>
        {children}
    </ThemeProvider>;

export default hot(
    compose(connect(mapStateToProps), ThemeProviderContainer),
)(Routes);

But there's something wrong here

Answer 1

The HOC should return a component, not an element to render.
In your case it will be something like this:

const withTheme = Component => ({ userPalette, ...props }) => (
  <ThemeProvider theme={defaultMaterialTheme(userPalette)}>
    <Component {...props} />
  </ThemeProvider>
);

export default compose(
  hot,
  connect(mapStateToProps),
  withTheme,
)(Routes);