Updated react-router v6 to v7, and replaces flux with react-query #16
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Updates the underlying TeamMemberList on the "page", when the button is pressed in a drawer to add/create/delete staff. ------------- Pre Jan 8, 2025 comments ----------- First steps toward replacing flux with react-query. react-query looks like it will be much simpler to use and maintain. This PR is not a full replacement for all the flux stores. This PR compiles, but many existing features do not fully work -- The existing flux based configuration Stores and Actions are not functional components so they have to still use AppObservableStore which is not logically connected to the new replacement ConnectAppContext.jsx Store -- Most of the functional components have been switched to the new useContext() ~ ConnectAppContext.jsx. The Teams and FAQ pages display, and Login works. You can delete a team member. The Team and Person Store/Actions have been replaced enough for the Teams page to display. All the code in Stores meant to manage cache is no longer needed -- react-cache does that automatically. I also found that apiCalming() is no longer needed, react-cache 'calms' api queries automatically too. You make the api request as often as you want on a page, and the request get served with cached data. There is a way to force a cache update if needed. All the breaking changes from react-router 6 and 7 are resolved, this eliminates the need for the 'react-router-dom-v5 compat' library. This router upgrade also nicely simplifies App.jsx. Some class functions need to be upgraded to functional components to work with useContext(), and more still need upgrading. As a first step in switching over to useContext -- I replaced AppObservableStore with ConnectAppContext..jsx, which eliminates all the subscriptions that were needed to be created and destroyed for each component. So, many onAppObservableStoreChange() instances were replaced with useEffect(). ConnectAppContext.jsx is just a "modern" global key value store without specific setters/getters. For all files that I touched, I cleared most of the lint errors. To simplify this migration, lots of "not yet needed" code is commented out, since I rely heavily on lint errors. Not yet used "useState()" pairs were commented out, partially implemented useState() had the resulting errors "suppressed" with eslint no-unused-vars disables. Unused styled components were commented out. Removed Storybook (until we actually need it), it had lots of unresolved version dependencies. Minor note: Boolean props to StyledComponents now need a $ in front of the variable like $largeFont, due to the React upgrade.
Updates the underlying TeamMemberList on the "page", when the button is pressed in a drawer to add/create/delete staff. ------------- Pre Jan 8, 2025 comments ----------- First steps toward replacing flux with react-query. react-query looks like it will be much simpler to use and maintain. This PR is not a full replacement for all the flux stores. This PR compiles, but many existing features do not fully work -- The existing flux based configuration Stores and Actions are not functional components so they have to still use AppObservableStore which is not logically connected to the new replacement ConnectAppContext.jsx Store -- Most of the functional components have been switched to the new useContext() ~ ConnectAppContext.jsx. The Teams and FAQ pages display, and Login works. You can delete a team member. The Team and Person Store/Actions have been replaced enough for the Teams page to display. All the code in Stores meant to manage cache is no longer needed -- react-cache does that automatically. I also found that apiCalming() is no longer needed, react-cache 'calms' api queries automatically too. You make the api request as often as you want on a page, and the request get served with cached data. There is a way to force a cache update if needed. All the breaking changes from react-router 6 and 7 are resolved, this eliminates the need for the 'react-router-dom-v5 compat' library. This router upgrade also nicely simplifies App.jsx. Some class functions need to be upgraded to functional components to work with useContext(), and more still need upgrading. As a first step in switching over to useContext -- I replaced AppObservableStore with ConnectAppContext..jsx, which eliminates all the subscriptions that were needed to be created and destroyed for each component. So, many onAppObservableStoreChange() instances were replaced with useEffect(). ConnectAppContext.jsx is just a "modern" global key value store without specific setters/getters. For all files that I touched, I cleared most of the lint errors. To simplify this migration, lots of "not yet needed" code is commented out, since I rely heavily on lint errors. Not yet used "useState()" pairs were commented out, partially implemented useState() had the resulting errors "suppressed" with eslint no-unused-vars disables. Unused styled components were commented out. Removed Storybook (until we actually need it), it had lots of unresolved version dependencies. Minor note: Boolean props to StyledComponents now need a $ in front of the variable like $largeFont, due to the React upgrade.
Updates the underlying TeamMemberList on the "page", when the button is pressed in a drawer to add/create/delete staff. ------------- Pre Jan 8, 2025 comments ----------- First steps toward replacing flux with react-query. react-query looks like it will be much simpler to use and maintain. This PR is not a full replacement for all the flux stores. This PR compiles, but many existing features do not fully work -- The existing flux based configuration Stores and Actions are not functional components so they have to still use AppObservableStore which is not logically connected to the new replacement ConnectAppContext.jsx Store -- Most of the functional components have been switched to the new useContext() ~ ConnectAppContext.jsx. The Teams and FAQ pages display, and Login works. You can delete a team member. The Team and Person Store/Actions have been replaced enough for the Teams page to display. All the code in Stores meant to manage cache is no longer needed -- react-cache does that automatically. I also found that apiCalming() is no longer needed, react-cache 'calms' api queries automatically too. You make the api request as often as you want on a page, and the request get served with cached data. There is a way to force a cache update if needed. All the breaking changes from react-router 6 and 7 are resolved, this eliminates the need for the 'react-router-dom-v5 compat' library. This router upgrade also nicely simplifies App.jsx. Some class functions need to be upgraded to functional components to work with useContext(), and more still need upgrading. As a first step in switching over to useContext -- I replaced AppObservableStore with ConnectAppContext..jsx, which eliminates all the subscriptions that were needed to be created and destroyed for each component. So, many onAppObservableStoreChange() instances were replaced with useEffect(). ConnectAppContext.jsx is just a "modern" global key value store without specific setters/getters. For all files that I touched, I cleared most of the lint errors. To simplify this migration, lots of "not yet needed" code is commented out, since I rely heavily on lint errors. Not yet used "useState()" pairs were commented out, partially implemented useState() had the resulting errors "suppressed" with eslint no-unused-vars disables. Unused styled components were commented out. Removed Storybook (until we actually need it), it had lots of unresolved version dependencies. Minor note: Boolean props to StyledComponents now need a $ in front of the variable like $largeFont, due to the React upgrade.
Updates the underlying TeamMemberList on the "page", when the button is pressed in a drawer to add/create/delete staff. ------------- Pre Jan 8, 2025 comments ----------- First steps toward replacing flux with react-query. react-query looks like it will be much simpler to use and maintain. This PR is not a full replacement for all the flux stores. This PR compiles, but many existing features do not fully work -- The existing flux based configuration Stores and Actions are not functional components so they have to still use AppObservableStore which is not logically connected to the new replacement ConnectAppContext.jsx Store -- Most of the functional components have been switched to the new useContext() ~ ConnectAppContext.jsx. The Teams and FAQ pages display, and Login works. You can delete a team member. The Team and Person Store/Actions have been replaced enough for the Teams page to display. All the code in Stores meant to manage cache is no longer needed -- react-cache does that automatically. I also found that apiCalming() is no longer needed, react-cache 'calms' api queries automatically too. You make the api request as often as you want on a page, and the request get served with cached data. There is a way to force a cache update if needed. All the breaking changes from react-router 6 and 7 are resolved, this eliminates the need for the 'react-router-dom-v5 compat' library. This router upgrade also nicely simplifies App.jsx. Some class functions need to be upgraded to functional components to work with useContext(), and more still need upgrading. As a first step in switching over to useContext -- I replaced AppObservableStore with ConnectAppContext..jsx, which eliminates all the subscriptions that were needed to be created and destroyed for each component. So, many onAppObservableStoreChange() instances were replaced with useEffect(). ConnectAppContext.jsx is just a "modern" global key value store without specific setters/getters. For all files that I touched, I cleared most of the lint errors. To simplify this migration, lots of "not yet needed" code is commented out, since I rely heavily on lint errors. Not yet used "useState()" pairs were commented out, partially implemented useState() had the resulting errors "suppressed" with eslint no-unused-vars disables. Unused styled components were commented out. Removed Storybook (until we actually need it), it had lots of unresolved version dependencies. Minor note: Boolean props to StyledComponents now need a $ in front of the variable like $largeFont, due to the React upgrade.
Updates the underlying TeamMemberList on the "page", when the button is pressed in a drawer to add/create/delete staff. Questionnaire and Questions display and editing changed over to react-query. ------------- Pre Jan 8, 2025 comments ----------- First steps toward replacing flux with react-query. react-query looks like it will be much simpler to use and maintain. This PR is not a full replacement for all the flux stores. This PR compiles, but many existing features do not fully work -- The existing flux based configuration Stores and Actions are not functional components so they have to still use AppObservableStore which is not logically connected to the new replacement ConnectAppContext.jsx Store -- Most of the functional components have been switched to the new useContext() ~ ConnectAppContext.jsx. The Teams and FAQ pages display, and Login works. You can delete a team member. The Team and Person Store/Actions have been replaced enough for the Teams page to display. All the code in Stores meant to manage cache is no longer needed -- react-cache does that automatically. I also found that apiCalming() is no longer needed, react-cache 'calms' api queries automatically too. You make the api request as often as you want on a page, and the request get served with cached data. There is a way to force a cache update if needed. All the breaking changes from react-router 6 and 7 are resolved, this eliminates the need for the 'react-router-dom-v5 compat' library. This router upgrade also nicely simplifies App.jsx. Some class functions need to be upgraded to functional components to work with useContext(), and more still need upgrading. As a first step in switching over to useContext -- I replaced AppObservableStore with ConnectAppContext..jsx, which eliminates all the subscriptions that were needed to be created and destroyed for each component. So, many onAppObservableStoreChange() instances were replaced with useEffect(). ConnectAppContext.jsx is just a "modern" global key value store without specific setters/getters. For all files that I touched, I cleared most of the lint errors. To simplify this migration, lots of "not yet needed" code is commented out, since I rely heavily on lint errors. Not yet used "useState()" pairs were commented out, partially implemented useState() had the resulting errors "suppressed" with eslint no-unused-vars disables. Unused styled components were commented out. Removed Storybook (until we actually need it), it had lots of unresolved version dependencies. Minor note: Boolean props to StyledComponents now need a $ in front of the variable like $largeFont, due to the React upgrade.
SailingSteve
changed the title
Updates the underlying TeamMemberList on the "page", when the button is pressed in a drawer to add/create/delete staff. Questionnaire and Questions display and editing changed over to react-query. ------------- Pre Jan 8, 2025 comments ----------- First steps toward replacing flux with react-query. react-query looks like it will be much simpler to use and maintain. This PR is not a full replacement for all the flux stores. This PR compiles, but many existing features do not fully work -- The existing flux based configuration Stores and Actions are not functional components so they have to still use AppObservableStore which is not logically connected to the new replacement ConnectAppContext.jsx Store -- Most of the functional components have been switched to the new useContext() ~ ConnectAppContext.jsx. The Teams and FAQ pages display, and Login works. You can delete a team member. The Team and Person Store/Actions have been replaced enough for the Teams page to display. All the code in Stores meant to manage cache is no longer needed -- react-cache does that automatically. I also found that apiCalming() is no longer needed, react-cache 'calms' api queries automatically too. You make the api request as often as you want on a page, and the request get served with cached data. There is a way to force a cache update if needed. All the breaking changes from react-router 6 and 7 are resolved, this eliminates the need for the 'react-router-dom-v5 compat' library. This router upgrade also nicely simplifies App.jsx. Some class functions need to be upgraded to functional components to work with useContext(), and more still need upgrading. As a first step in switching over to useContext -- I replaced AppObservableStore with ConnectAppContext..jsx, which eliminates all the subscriptions that were needed to be created and destroyed for each component. So, many onAppObservableStoreChange() instances were replaced with useEffect(). ConnectAppContext.jsx is just a "modern" global key value store without specific setters/getters. For all files that I touched, I cleared most of the lint errors. To simplify this migration, lots of "not yet needed" code is commented out, since I rely heavily on lint errors. Not yet used "useState()" pairs were commented out, partially implemented useState() had the resulting errors "suppressed" with eslint no-unused-vars disables. Unused styled components were commented out. Removed Storybook (until we actually need it), it had lots of unresolved version dependencies. Minor note: Boolean props to StyledComponents now need a $ in front of the variable like $largeFont, due to the React upgrade.
Updates the underlying TeamMemberList on the "page", when the button is pressed in a drawer to add/create/delete staff. Questionnaire and Questions display and editing changed over to react-query. ------------- Pre Jan 8, 2025 comments ----------- First steps toward replacing flux with react-query. react-query looks like it will be much simpler to use and maintain. This PR is not a full replacement for all the flux stores. This PR compiles, but many existing features do not fully work -- The existing flux based configuration Stores and Actions are not functional components so they have to still use AppObservableStore which is not logically connected to the new replacement ConnectAppContext.jsx Store -- Most of the functional components have been switched to the new useContext() ~ ConnectAppContext.jsx. The Teams and FAQ pages display, and Login works. You can delete a team member. The Team and Person Store/Actions have been replaced enough for the Teams page to display. All the code in Stores meant to manage cache is no longer needed -- react-cache does that automatically. I also found that apiCalming() is no longer needed, react-cache 'calms' api queries automatically too. You make the api request as often as you want on a page, and the request get served with cached data. There is a way to force a cache update if needed. All the breaking changes from react-router 6 and 7 are resolved, this eliminates the need for the 'react-router-dom-v5 compat' library. This router upgrade also nicely simplifies App.jsx. Some class functions need to be upgraded to functional components to work with useContext(), and more still need upgrading. As a first step in switching over to useContext -- I replaced AppObservableStore with ConnectAppContext..jsx, which eliminates all the subscriptions that were needed to be created and destroyed for each component. So, many onAppObservableStoreChange() instances were replaced with useEffect(). ConnectAppContext.jsx is just a "modern" global key value store without specific setters/getters. For all files that I touched, I cleared most of the lint errors. To simplify this migration, lots of "not yet needed" code is commented out, since I rely heavily on lint errors. Not yet used "useState()" pairs were commented out, partially implemented useState() had the resulting errors "suppressed" with eslint no-unused-vars disables. Unused styled components were commented out. Removed Storybook (until we actually need it), it had lots of unresolved version dependencies. Minor note: Boolean props to StyledComponents now need a $ in front of the variable like $largeFont, due to the React upgrade.
Any UI changes that I have made were to aid debugging, so feel free to reverse. Some code seemed "in process" and I tried to get it working the same way using re ------------- Pre Jan 8, 2025 comments ----------- First steps toward replacing flux with react-query. react-query looks like it will be much simpler to use and maintain. This PR is not a full replacement for all the flux stores. This PR compiles, but many existing features do not fully work -- The existing flux based configuration Stores and Actions are not functional components so they have to still use AppObservableStore which is not logically connected to the new replacement ConnectAppContext.jsx Store -- Most of the functional components have been switched to the new useContext() ~ ConnectAppContext.jsx. The Teams and FAQ pages display, and Login works. You can delete a team member. The Team and Person Store/Actions have been replaced enough for the Teams page to display. All the code in Stores meant to manage cache is no longer needed -- react-cache does that automatically. I also found that apiCalming() is no longer needed, react-cache 'calms' api queries automatically too. You make the api request as often as you want on a page, and the request get served with cached data. There is a way to force a cache update if needed. All the breaking changes from react-router 6 and 7 are resolved, this eliminates the need for the 'react-router-dom-v5 compat' library. This router upgrade also nicely simplifies App.jsx. Some class functions need to be upgraded to functional components to work with useContext(), and more still need upgrading. As a first step in switching over to useContext -- I replaced AppObservableStore with ConnectAppContext..jsx, which eliminates all the subscriptions that were needed to be created and destroyed for each component. So, many onAppObservableStoreChange() instances were replaced with useEffect(). ConnectAppContext.jsx is just a "modern" global key value store without specific setters/getters. For all files that I touched, I cleared most of the lint errors. To simplify this migration, lots of "not yet needed" code is commented out, since I rely heavily on lint errors. Not yet used "useState()" pairs were commented out, partially implemented useState() had the resulting errors "suppressed" with eslint no-unused-vars disables. Unused styled components were commented out. Removed Storybook (until we actually need it), it had lots of unresolved version dependencies. Minor note: Boolean props to StyledComponents now need a $ in front of the variable like $largeFont, due to the React upgrade.
Any UI changes that I have made were to aid debugging, so feel free to reverse. Some code seemed "in process" and I tried to get it working the same way using re ------------- Pre Jan 8, 2025 comments ----------- First steps toward replacing flux with react-query. react-query looks like it will be much simpler to use and maintain. This PR is not a full replacement for all the flux stores. This PR compiles, but many existing features do not fully work -- The existing flux based configuration Stores and Actions are not functional components so they have to still use AppObservableStore which is not logically connected to the new replacement ConnectAppContext.jsx Store -- Most of the functional components have been switched to the new useContext() ~ ConnectAppContext.jsx. The Teams and FAQ pages display, and Login works. You can delete a team member. The Team and Person Store/Actions have been replaced enough for the Teams page to display. All the code in Stores meant to manage cache is no longer needed -- react-cache does that automatically. I also found that apiCalming() is no longer needed, react-cache 'calms' api queries automatically too. You make the api request as often as you want on a page, and the request get served with cached data. There is a way to force a cache update if needed. All the breaking changes from react-router 6 and 7 are resolved, this eliminates the need for the 'react-router-dom-v5 compat' library. This router upgrade also nicely simplifies App.jsx. Some class functions need to be upgraded to functional components to work with useContext(), and more still need upgrading. As a first step in switching over to useContext -- I replaced AppObservableStore with ConnectAppContext..jsx, which eliminates all the subscriptions that were needed to be created and destroyed for each component. So, many onAppObservableStoreChange() instances were replaced with useEffect(). ConnectAppContext.jsx is just a "modern" global key value store without specific setters/getters. For all files that I touched, I cleared most of the lint errors. To simplify this migration, lots of "not yet needed" code is commented out, since I rely heavily on lint errors. Not yet used "useState()" pairs were commented out, partially implemented useState() had the resulting errors "suppressed" with eslint no-unused-vars disables. Unused styled components were commented out. Removed Storybook (until we actually need it), it had lots of unresolved version dependencies. Minor note: Boolean props to StyledComponents now need a $ in front of the variable like $largeFont, due to the React upgrade.
Any UI changes that I have made were to aid debugging, so feel free to reverse. Some code seemed "in process" and I tried to get it working the same way using re ------------- Pre Jan 8, 2025 comments ----------- First steps toward replacing flux with react-query. react-query looks like it will be much simpler to use and maintain. This PR is not a full replacement for all the flux stores. This PR compiles, but many existing features do not fully work -- The existing flux based configuration Stores and Actions are not functional components so they have to still use AppObservableStore which is not logically connected to the new replacement ConnectAppContext.jsx Store -- Most of the functional components have been switched to the new useContext() ~ ConnectAppContext.jsx. The Teams and FAQ pages display, and Login works. You can delete a team member. The Team and Person Store/Actions have been replaced enough for the Teams page to display. All the code in Stores meant to manage cache is no longer needed -- react-cache does that automatically. I also found that apiCalming() is no longer needed, react-cache 'calms' api queries automatically too. You make the api request as often as you want on a page, and the request get served with cached data. There is a way to force a cache update if needed. All the breaking changes from react-router 6 and 7 are resolved, this eliminates the need for the 'react-router-dom-v5 compat' library. This router upgrade also nicely simplifies App.jsx. Some class functions need to be upgraded to functional components to work with useContext(), and more still need upgrading. As a first step in switching over to useContext -- I replaced AppObservableStore with ConnectAppContext..jsx, which eliminates all the subscriptions that were needed to be created and destroyed for each component. So, many onAppObservableStoreChange() instances were replaced with useEffect(). ConnectAppContext.jsx is just a "modern" global key value store without specific setters/getters. For all files that I touched, I cleared most of the lint errors. To simplify this migration, lots of "not yet needed" code is commented out, since I rely heavily on lint errors. Not yet used "useState()" pairs were commented out, partially implemented useState() had the resulting errors "suppressed" with eslint no-unused-vars disables. Unused styled components were commented out. Removed Storybook (until we actually need it), it had lots of unresolved version dependencies. Minor note: Boolean props to StyledComponents now need a $ in front of the variable like $largeFont, due to the React upgrade.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Updates the underlying TeamMemberList on the "page", when the button is pressed in a drawer to add/create/delete staff.
Questionnaire and Questions display and editing changed over to react-query.
------------- Pre Jan 8, 2025 comments -----------
First steps toward replacing flux with react-query. react-query looks like it will be much simpler to use and maintain.
This PR is not a full replacement for all the flux stores. This PR compiles, but many existing features do not fully work -- The existing flux based configuration Stores and Actions are not functional components so they have to still use AppObservableStore which is not logically connected to the new replacement ConnectAppContext.jsx Store -- Most of the functional components have been switched to the new useContext() ~ ConnectAppContext.jsx.
The Teams and FAQ pages display, and Login works. You can delete a team member. The Team and Person Store/Actions have been replaced enough for the Teams page to display.
All the code in Stores meant to manage cache is no longer needed -- react-cache does that automatically. I also found that apiCalming() is no longer needed, react-cache 'calms' api queries automatically too. You make the api request as often as you want on a page, and the request get served with cached data. There is a way to force a cache update if needed.
All the breaking changes from react-router 6 and 7 are resolved, this eliminates the need for the 'react-router-dom-v5 compat' library. This router upgrade also nicely simplifies App.jsx.
Some class functions need to be upgraded to functional components to work with useContext(), and more still need upgrading.
As a first step in switching over to useContext -- I replaced AppObservableStore with ConnectAppContext..jsx, which eliminates all the subscriptions that were needed to be created and destroyed for each component. So, many onAppObservableStoreChange() instances were replaced with useEffect(). ConnectAppContext.jsx is just a "modern" global key value store without specific setters/getters.
For all files that I touched, I cleared most of the lint errors.
To simplify this migration, lots of "not yet needed" code is commented out, since I rely heavily on lint errors. Not yet used "useState()" pairs were commented out, partially implemented useState() had the resulting errors "suppressed" with eslint no-unused-vars disables. Unused styled components were commented out.
Removed Storybook (until we actually need it), it had lots of unresolved version dependencies.
Minor note: Boolean props to StyledComponents now need a $ in front of the variable like $largeFont, due to the React upgrade.