fahad19 / fahad19/proppy

Usage with global providers and preact-router

Open
#37 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
929
Forks
27
PR merge metrics
No merged PRs in 30d

Description

Hi, I am really excited about replacing react+recompose+react-router with much lighter alternatives, but I am having some issues fitting it all together. I am coming from react/recompose, so I'm sure I am doing something just a bit wrong, but I can't seem to figure it out. Any ideas would be much appreciated.

I have a [demo](https://github.com/konsumer/demo-preact-router-proppy) that illustrates what I am trying to accomplish. I want global provider for modal & user state. [Here](https://codesandbox.io/s/github/konsumer/demo-preact-router-proppy) is a code sandbox.

Basically, I can't seem to work out subscribing to a global state and updating the app.

To reproduce, click "login" and login with any email/password. This should trigger 3 provider state changes:

* show modal with login form
* update user
* hide modal with login form

which in turn should change these component-state things:

* change menu items in `Header`
* show/hide modal in `Header`
* change routes for `/` from `PageHome` to `PageDashboard` (for logged in users)

I did this, which seems like a terrible hack:

```js
// when global state changes, render app
if (typeof window !== 'undefined') {
providers.subscribe(props => {
console.log('PROVIDERS', props)
render(, document.body)
})
}
```

It works a little better at refreshing when it should show the modal, but only about half the time (show modal works, but not hide.)

Initial user-state seem to work ok (derive user from JWT works fine) so you can login, then refresh page and it looks how it should. You can click LOGOUT, and refresh, and it kills the token and user-state, and goes back to anonymous view.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.