React update all+move to functional components with hooks #277

cvolant · 2019-11-06T01:24:24Z

Perform 'meteor update' and 'meteor npm update --all-packages'
Transform every class component into functional component
Fix not working menu
Fix unrecognized locale on app first load
Fix unwanted NotFound appearances while loading todos
Improve PropTypes

Locale and menuOpen are handled by simple global states provided through custom hooks built on useState and useContext.
Tests are broken... :/ The problem seems to come from enzyme-mounting components that use hooks.

Some meteor packages still need to be updated, like aldeed:collection2, but can cause problems.

GlobalStateProvider, LocaleProvider, useLocale, MenuOpenProvider, useMenuOpen

Use the menuOpen global state to manage the menu opening through a transition transform from a state to a reactive var

Call useMenuOpen though it does not need menuOpen because its children still need it though props.

Remove unnecessary imports, remove transitional menuOpen

I18n is broken on this page and NotFound, since inherited BaseComponent was in charge of it

Move Authpage content to children, remove all unnecessary menuOpen, and a few more

…port

…native confirm dialog

…ListPage

CLAassistant · 2019-11-06T01:25:09Z

All committers have signed the CLA.

imports/ui/state/MenuOpenState.jsx

imports/ui/state/LocaleState.jsx

imports/ui/pages/AuthPageSignIn.jsx

imports/ui/pages/AuthPageJoin.jsx

imports/ui/layouts/AppContent.jsx

imports/ui/layouts/App.jsx

imports/ui/containers/ListPageContainer.jsx

@HorusGoul

Following @HorusGoul suggestions

@HorusGoul

And extract i18n call following @HorusGoul suggestions

Update react-router-dom and a few other packages that had been left unupdated using npm-check-update Remove all Redirect components Transfer redirection from App component to AppContent component

…nput values

@HorusGoul

Implement @HorusGoul solution using custom useUnmountedRef hook

cvolant · 2019-11-11T01:39:00Z

After these last commits, tests are still broken but it's getting better. 3 of clients tests still don't pass I don't know why.
I also got a warning from eslint about dependency cycle in the api:

todo.js import list.js, and incompleteCountDenormalizer.js;
list.js import todo.js;
incompleteCountDenormalizer.js import list.js and todo.js.
For now, I disabled the warning for these 3 files but it's not satisfactory. Any idea how to fix this?

HorusGoul · 2019-11-14T09:57:59Z

Just sent you a PR with some changes to solve these issues.

Regarding useTracker, we'll probably need to publish an update of this example once the hook gets released.

…nal-components-with-hooks Ignore import/no-cycle rule and remove enzyme tests

cvolant · 2019-11-14T16:55:22Z

Anything else needs some changes?

HorusGoul · 2019-11-18T08:18:35Z

Nope, I think we can already merge this, thank you for your collaboration 🎆

thanateros · 2019-11-18T17:37:58Z

I also started the todo react example using hooks from the beginning and ran into troubles when adding the withTracker code.

I came across this issue. Is what I'm reading here about making Metor work with hooks, or just the react todo example?

cvolant · 2019-11-19T03:03:42Z

@thanateros Meteor does work with hooks, and it doesn't conflict with withTracker: this PR is about updating the todo example and make it use hooks. You can have a look at the code to see how it achieves that.

withTracker has also been rewritten as a useTracker hook, but it hasn't been published yet: it is currently worked on.

thanateros · 2019-11-19T03:25:40Z

@cvolant Thanks for the explanation.

filipenevola · 2019-11-19T11:09:05Z

Great, thanks @cvolant and @HorusGoul 🎉

@cvolant what about you making a tweet about this update and then we can RT?

cvolant · 2019-11-20T15:20:02Z

Good idea. But I don’t have Twitter... 🙃 Nor Facebook.

cvolant added 30 commits October 29, 2019 10:48

Update all meteor version and packages and npm packages

b1efc41

Some meteor packages still need to be updated, like aldeed:collection2, but can cause problems.

Transform App component in functional component

16f9177

Create the global state providers

104adc2

GlobalStateProvider, LocaleProvider, useLocale, MenuOpenProvider, useMenuOpen

Transform NotFound in FC + split AppContent from App

2f9db6f

Use the menuOpen global state to manage the menu opening through a transition transform from a state to a reactive var

Transform ListPage in FC

88f273f

Call useMenuOpen though it does not need menuOpen because its children still need it though props.

Transform MobileMenu in FC

5c92892

Clean up NotFoundPage

9160088

Remove unnecessary imports, remove transitional menuOpen

Transform JoinPage in FC

3dcceb8

I18n is broken on this page and NotFound, since inherited BaseComponent was in charge of it

Fix i18n from AppContent

d5361c3

Fix Redirect import in JoinPage

8438440

Get menuOpen through useMenuOpen in AuthPage

6a52fda

Clean up JoinPage, SignInPage and AuthPage

5740aa5

Move Authpage content to children, remove all unnecessary menuOpen, and a few more

Remove the named export everytimes it is the same than the default ex…

3a4b156

…port

Clean up App and AppContent

8dee1b2

Clean up JoinPage and SignInPage

9bd1fc0

Remove commented lines in App

97ca906

Transform LanguageToggle in FC

deec95f

Truncate locale in LocaleState to get the short syntax

ae207fa

Add missing .js/.jsx extension to 3 imports

0a25690

Remove menuOpen from containers

138cca9

Fix ListPage and ListHeader PropTypes

7167b83

Remove unnecessary ReactiveVar import in AppContainer

e686ce7

Transform ListHeader in FC + rename confirm in JoinPage to re-enable …

14e9c26

…native confirm dialog

Transform ListList in FC

207edef

Reset redirectTo with useEffect in JoinPage, SignInPage and ListHeader

2606fc4

Fix PropTypes in AppContent, ListPage and ListHeader

ebbf369

Transform Loading in FC

78d1a60

Display Loading instead of NotFound when loading in ListPage

ae8e763

Transform TodoItem in FC

aed46c1

Transform UserMenu in FC

490eae4

cvolant added 2 commits October 31, 2019 13:10

Delete now unused BaseComponent

66d39a0

Remove all unnecessary menuOpen mentions and props in ListHeader and …

6102b6f

…ListPage

cvolant mentioned this pull request Nov 6, 2019

React branch update with hooks - New react/typescript branch? #276

Open

HorusGoul suggested changes Nov 7, 2019

View reviewed changes

cvolant added 8 commits November 8, 2019 17:33

Remove transitionMenuOpen, commonChildProps and Route render fonctions

7ac6fcb

Following @HorusGoul suggestions

Remove useMemo from global state managers

777c5d4

And extract i18n call following @HorusGoul suggestions

Manage redirections using useHistory

1cff802

Update react-router-dom and a few other packages that had been left unupdated using npm-check-update Remove all Redirect components Transfer redirection from App component to AppContent component

Fix some linting complaints

9e60a75

Fix broken state providers and use useRef instead of this to manage i…

490362f

…nput values

Prevent asynchronous setState calls while component in unmounted

be9e50a

Implement @HorusGoul solution using custom useUnmountedRef hook

Fix typo

e57ff58

Adapt ListHeader.tests

d117895

HorusGoul added 2 commits November 14, 2019 10:37

Adds import/no-cycle rule to eslintConfig

3d4e524

Removes enzyme tests

e66624b

HorusGoul and others added 2 commits November 14, 2019 11:02

Removes chimp-watch npm script and tests folder

8ca7b1f

Merge pull request #1 from HorusGoul/react-update-all+move-to-functio…

a9f02d1

…nal-components-with-hooks Ignore import/no-cycle rule and remove enzyme tests

HorusGoul approved these changes Nov 14, 2019

View reviewed changes

filipenevola approved these changes Nov 19, 2019

View reviewed changes

filipenevola merged commit feef863 into meteor:react Nov 19, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React update all+move to functional components with hooks #277

React update all+move to functional components with hooks #277

cvolant commented Nov 6, 2019

CLAassistant commented Nov 6, 2019 •

edited

Loading

cvolant commented Nov 11, 2019 •

edited

Loading

HorusGoul commented Nov 14, 2019

cvolant commented Nov 14, 2019

HorusGoul commented Nov 18, 2019

thanateros commented Nov 18, 2019

cvolant commented Nov 19, 2019

thanateros commented Nov 19, 2019

filipenevola commented Nov 19, 2019 •

edited

Loading

cvolant commented Nov 20, 2019

React update all+move to functional components with hooks #277

React update all+move to functional components with hooks #277

Conversation

cvolant commented Nov 6, 2019

CLAassistant commented Nov 6, 2019 • edited Loading

cvolant commented Nov 11, 2019 • edited Loading

HorusGoul commented Nov 14, 2019

cvolant commented Nov 14, 2019

HorusGoul commented Nov 18, 2019

thanateros commented Nov 18, 2019

cvolant commented Nov 19, 2019

thanateros commented Nov 19, 2019

filipenevola commented Nov 19, 2019 • edited Loading

cvolant commented Nov 20, 2019

CLAassistant commented Nov 6, 2019 •

edited

Loading

cvolant commented Nov 11, 2019 •

edited

Loading

filipenevola commented Nov 19, 2019 •

edited

Loading