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.
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.
DaleMcGrew
approved these changes
Jan 23, 2025
There was a problem hiding this comment.
Hi @SailingSteve this is an impressive body of work! Thank you for refactoring and upgrading our new system to the latest and greatest methodologies. None of these comments are urgent, and we can discuss when we meet on Monday. I'm going to start working on new features in weconnect-client over the next few days to familiarize myself with the new approaches, and I'll plan to check in every 24-48 hours. Thank you again!
| "pre-commit": "^1.2.2", | ||
| "react-hot-loader": "^4.13.1", | ||
| "storybook": "^7.6.3", | ||
| "pre-commit": "^1.0.10", |
There was a problem hiding this comment.
It looks like react-hot-loader was removed from the dev dependencies. Do we have an alternate for hot loading?
| <Link to="/" id="logoHeaderBar"> | ||
| <HeaderLogoImage src={light ? normalizedImagePath(logoLight) : normalizedImagePath(logoDark)} /> | ||
| </Link> | ||
| // Hack 1/14/25 |
There was a problem hiding this comment.
When you get a moment, it would be great at get the link on the logo back.
| renderLog('CopyQuestionnaireLink'); // Set LOG_RENDER_EVENTS to log all renders | ||
| const [linkCopied, setLinkCopied] = React.useState(false); | ||
| const [linkToBeShared, setLinkToBeShared] = React.useState(''); | ||
| const CopyQuestionnaireLink = () => { |
There was a problem hiding this comment.
Hi @SailingSteve I'm thinking that it would be good to have intelligent controller objects/functions related to data types like People, Questionnaires, etc. These would contain functions that operate on those data types like how we used to use the stores. That way we can pass a personId or questionnaireId into a component like this, and then look up a person by personId for example.
| </Link> | ||
| <EditQuestionnaire onClick={() => editQuestionnaireClick(questionnaire.questionnaireId)}> | ||
| {/* {console.log('questionnaireList.map((questionnaire)', questionnaire.questionnaireId)} */} | ||
| <GoToQuestionairePage onClick={() => goToQuestionnairePageClick(questionnaire)}> |
There was a problem hiding this comment.
Hi @SailingSteve for links like this we need them to be links you can copy and paste into a browser address bar. That is why I over time migrate many onClick elements over to Link.
| // console.log('TeamHome onRetrieveTeamChange, teamIdIncoming:', teamIdIncoming); | ||
| const teamTemp = TeamStore.getTeamById(teamIdIncoming); | ||
| setTeam(teamTemp); | ||
| const updateTeam = (tList) => { |
There was a problem hiding this comment.
Because we have so many junior/intermediate engineers who are trying to understand code from so many angles, I want to keep variable names written out to help them understand code as they are reading it. So instead of "tList", I'd prefer "teamList".
| const teamIdTemp = convertToInteger(params.teamId); | ||
| if (teamIdTemp >= 0) { | ||
| setTeamId(teamIdTemp); | ||
| const { data: dataP, isSuccess: isSuccessP, isFetching: isFetchingP, isStale: isStaleP } = useFetchData(['person-list-retrieve'], {}); |
There was a problem hiding this comment.
Would prefer fully written out variables since out of context one would need to look up dataP. Instead something like personLocalData gives more context. Even now, after researching I realize this is in fact a list of people, so personListLocalData would be better.
| @@ -91,12 +64,19 @@ const TeamHome = ({ classes, match }) => { // classes, teamId | |||
| {' '} | |||
| {webAppConfig.NAME_FOR_BROWSER_TAB_TITLE} | |||
| </title> | |||
| {/* TODO 1/12/25: The following line might be reloading the app, consider using navigate() */} | |||
There was a problem hiding this comment.
This link tag within a <Helmet tag communicates to search engines the URL we want stored, so if a search engine finds this page on multiple paths, this tells the search engine which URL to use. The search engine will then ignore the other paths used to get to this page.
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.
Everything has been converted from stores to react-query, QuestionnaireResponsesList.jsx still needs some work.
All of the AppObservableStore calls have been replaced with calls ConnectAppContext.jsx, except in the now abandoned stores and actions.
Be careful about changing ConnectAppContext values, if you make changes outside of a useEffect() block, you can get into endless render loops.
------------- Pre Jan 15, 2025 comments (edited) -----------
react-query looks like it will be much simpler to use and maintain.
All the code in Stores meant to manage cache state 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. You can force a cache update if needed with queryClient.invalidateQueries().
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.
AppObservableStore has been replaced with ConnectAppContext.jsx, which eliminates all the subscriptions that needed to be created and destroyed for each component.
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, or removed, since I relied heavily on lint errors. Unused styled components were removed or commented out.
Commented out 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.