decentraland / decentraland-dapps

🛠 Common modules for dApps
http://npmjs.com/package/decentraland-dapps
Apache License 2.0
108 stars 54 forks source link

[Experiment] feat: add translation-v2 & TranslationProvider-v2 #629

Open nicoecheza opened 3 months ago

nicoecheza commented 3 months ago

Update translation module & provider to stop depending on sagas and start using redux-toolkit instead. I'm not an expert on react but this seems to be working + has feature parity with the sagas version (tell me if I missed something).

Why?

Because I'm working on the editor standalone app and since the ui is based on the actual builder, I'm importing components from there, which depends on decentraland-dapps. And since a vast number of the components on builder use the translation module (and it's something we also want to have on the editor), I ported the module to "react 2024".

Extra info (just to leave this note somewhere)

Installing decentraland-dapps/@dcl/ui in a project with newer versions of react, webpack, etc has some compatibility problems that need to be addressed. We might need to check that out if we plan to eventually update everything to "state of the art" status.

Minimal API changes

Since there are no sagas, we lost the "observable" thing that it provides, and that we were using for auto-providing the fetchTranslation method for the TranslationProvider. So now we have a thunk creator method called createTranslationFetcher which receives the translations and returns a thunk. That thunk is then used on the reducer to provide state updates based on the promise resolution and also in the TranslationProvider to fetch translations whenever the locale changes (same behaviour as before)

Create translation reducer: Screenshot 2024-06-24 at 3 10 56 PM

fetchTranslation as prop for TranslationProvider: Screenshot 2024-06-24 at 3 11 35 PM

This results in smaller code/less files, since there is not need to manually create some of the actions + we don't need a TranslationProvider.container.ts file anymore, and I'm probably missing something else.