[Updated]: How to replace React components using PureScript's React libraries

Chat
#42

Makes sense. Most of our state was page-level with no statefulness requirement, so I built specialised “manager” components for the few bits that were actually global. Nothing big or complex, and it makes the data architecture and logic really obvious.

And our requirements for getting, using and updating each piece of global state was very different, so separating them seemed best.

1 Like
#43

React Router was also pretty annoying, and we ended up leaving it in place for fear of breaking things.

@robertdp Did you figure out how to write withRouter in PureScript? Or how to wrap withRouter in PureScript? I want to leave react-router in place too, but then how do I history.push() in PureScript?

1 Like
#44

I mounted the legacy app inside the new PureScript app, so the new routing took precedence. The legacy app then just used react-router normally, but I also needed to update the hash to trigger the popstate event in the PS component.

history.push('/logout');
window.location.hash = "refresh";

It’s not a great solution, but it worked okay for the few months we used it.

Update: I’ve just been looking through old commits, and found this as well:

unsafeTriggerPopstate :: Effect Unit	
unsafeTriggerPopstate = do	
  Hash.setHash "refresh"	
  Hash.setHash ""

This was set to run every time the legacy app was routed to, to trigger the popstate event for react-router.

void $ Timer.setTimeout 100 Routing.unsafeTriggerPopstate -- to wake up the legacy router
3 Likes
#45

For anyone doing it the other way, with PureScript components routed by the legacy app, I made this:

1 Like
#46

Not sure if this is the right place to ask this, but my use case is a little different: I’m about to start a new web application from scratch and would like to use Purescript. I’m leaning towards using React, in order to benefit from the massive number of prebuilt components around. However, I didn’t find good resources on integrating such components into Purescript.

I know about the FFI, of course, but learning Purescript, plus learning React in Purescript, you get confused about how to properly add types to code that someone else has written. The given article explains some of the work involved, I’m not sure I feel confident I’m able to adapt this to my use case. For instance, say I’d want to use the Autocomplete component of the giant material-ui library from Purescript. How would I even approach that?

I’d also be open to writing the app in Halogen even, but I’d still like to be able to integrate React components.

Any pointers?

1 Like
#47

This is a example how I use the Link component from Next.js in a PureScript project.

This is tiny compared to something like AutoComplete, but the general approach is the same.

3 Likes