Change default value of 'values' prop

[xanido]

If a consumer doesn't pass values the component should match queries using window.matchMedia on initialisation, if available. However, because the default value of values prop is {}, which is truthy, the component tries to match against an empty object instead.

Conditional check is here: https://github.com/xanido/react-media-query-hoc/blob/b86628/src/media-query-provider.js#L21

[xanido]

Should add - this is only necessary because the media state is copied in to a member field in the constructor. This member field is then used and updated in mediaQueryListener, but not in componentDidMount. Not sure if that is deliberate?

[jooj123]

had a chat offline - will wait for the other fix for this :)

[gwn]

Hello, just curious, can you share what the "other fix" is, if not a secret? :)

[jooj123]

@gwn i believe @xanido was going to clean up the code so we dont rely on currentMediaState - I have pinged him, hopefully he can reply

[gwn]

Thanks for the reply. Though it seems that it's been a while since this conversation has started. I think this package is very nice and I would like to see this bug fixed asap so I will try to make a pull request soon with an attempt to clean the code myself; hoping that you'll like it.

[xanido]

I think the simplest solution for now is to update currentMediaState inside of componentDidMount, which is what I've updated this PR to do.

[xanido]

And I now realise that this is exactly what you proposed @gwn, so I think we're all on the same page now!

[jooj123]

@xanido a unit test and we should be good to go :)

[albertstill]

For those outside of Domain, this caused an issue on the first mediaQueryListener fire because it used an out of sync currentMediaState that represented the servers estimated device width using values and not the actual devices width. We had mobile devices suddenly thinking they were desktop for example.

Regarding the duplication of currentMediaState and this.state.media. I'd argue the existence of them both and the use of 20s debounce is unnecessary. The mathMedia events only fire when the media query matches changes, for example (min-width: 300px) only changes when the browser window moves between this point, so it's not rapid firing anyway. I'd be in favour of removing debounce and currentMediaState using this.setState(oldState => ({ media: { ...oldstate.media, [queryName]: matches }). This makes the code simpler and less prone to hard to work out bugs like what's happened. Or am I missing something? Was there another reason debounce was added?

[gwn]

Happy to see this merged. Thanks :)