Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DO NOT MERGE: Changed from React 17 to 19, React-router from 5 to 7, AppObservableStore to a useContext() / ConnectAppContext #12

Open
wants to merge 14 commits into
base: develop
Choose a base branch
from

Conversation

SailingSteve
Copy link
Member

@SailingSteve SailingSteve commented Dec 31, 2024

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.

…tore to a useContext() / WeAppContext

This PR does not fully work -- The configuration Stores and Actions still use  AppObservableStore which is not connected to the new WeAppContext.jsx Store-- Most of the functional components have been switched to the new useContext() ~ WeAppContext.jsx improvement/rough equivalent.  The Teams and FAQ pages display, Login works, none of the actions/stores work yet, but they do not block compilation.
 All the breaking changes from react-router 6 and 7 are resolved, this eliminates the need for react-router-dom-v5 compat.  This router upgrade has big changes (nice simplifications) for App.jsx.
Some class functions needed to upgraded to functional components to work with useContext(), and more still need upgrading.
As a first demo of using useContext -- replaced AppObservableStore with WeAppContext.jsx, which eliminates all the subscriptions than needed to be created and destroyed for each component that used it.  So many onAppObservableStoreChange() instances were replaced with useEffect().  WeAppContext.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.  Not yet used "useState()" pairs were commented out, partially implemented useState() had the errors that resulted "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.
…tore to a useContext() / WeAppContext

This PR does not fully work -- The configuration Stores and Actions still use  AppObservableStore which is not connected to the new WeAppContext.jsx Store-- Most of the functional components have been switched to the new useContext() ~ WeAppContext.jsx improvement/rough equivalent.  The Teams and FAQ pages display, Login works, none of the actions/stores work yet, but they do not block compilation.
 All the breaking changes from react-router 6 and 7 are resolved, this eliminates the need for react-router-dom-v5 compat.  This router upgrade has big changes (nice simplifications) for App.jsx.
Some class functions needed to upgraded to functional components to work with useContext(), and more still need upgrading.
As a first demo of using useContext -- replaced AppObservableStore with WeAppContext.jsx, which eliminates all the subscriptions than needed to be created and destroyed for each component that used it.  So many onAppObservableStoreChange() instances were replaced with useEffect().  WeAppContext.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.  Not yet used "useState()" pairs were commented out, partially implemented useState() had the errors that resulted "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.
…tore to a useContext() / WeAppContext

This PR does not fully work -- The configuration Stores and Actions still use  AppObservableStore which is not connected to the new WeAppContext.jsx Store-- Most of the functional components have been switched to the new useContext() ~ WeAppContext.jsx improvement/rough equivalent.  The Teams and FAQ pages display, Login works, none of the actions/stores work yet, but they do not block compilation.
 All the breaking changes from react-router 6 and 7 are resolved, this eliminates the need for react-router-dom-v5 compat.  This router upgrade has big changes (nice simplifications) for App.jsx.
Some class functions needed to upgraded to functional components to work with useContext(), and more still need upgrading.
As a first demo of using useContext -- replaced AppObservableStore with WeAppContext.jsx, which eliminates all the subscriptions than needed to be created and destroyed for each component that used it.  So many onAppObservableStoreChange() instances were replaced with useEffect().  WeAppContext.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.  Not yet used "useState()" pairs were commented out, partially implemented useState() had the errors that resulted "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.
… but many existing features do not fully work -- The existing flux based configuration Stores and Actions are not functional components and 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. Throughout the app the flux actions/stores need to be replaced with the much simpler react-query, but the lack of these changes do not block compilation. 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 found that apiCalming() is no longer needed, react-cache does that automatically too. You make the api request as often as you want on a page, and 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 has big changes (nice simplifications) for App.jsx.

Some class functions needed to 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 relied 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.

Boolean props to StyledComponents now need a $ in front of the variable like $largeFont, due to the React upgrade.
@SailingSteve SailingSteve changed the title DO NOT MERGE: Changed from React 17 to 19, React-router from 5 to 7, AppObservableStore to a useContext() / WeAppContext DO NOT MERGE: Changed from React 17 to 19, React-router from 5 to 7, AppObservableStore to a useContext() / ConnectAppContext Jan 3, 2025
… but many existing features do not fully work -- The existing flux based configuration Stores and Actions are not functional components and 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. Throughout the app the flux actions/stores need to be replaced with the much simpler react-query, but the lack of these changes do not block compilation. 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 found that apiCalming() is no longer needed, react-cache does that automatically too. You make the api request as often as you want on a page, and 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 has big changes (nice simplifications) for App.jsx.

Some class functions needed to 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 relied 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.

Boolean props to StyledComponents now need a $ in front of the variable like $largeFont, due to the React upgrade.
… 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.
… 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.
…modifies the list, the underlying TeamMemberList on the "page" is now updated.

------------- Pre Jan 8, 2025
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.
… or edit a team member's info, modifies the list, the underlying TeamMemberList on the "page" is now updated.

------------- Pre Jan 8, 2025
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.
… or edit a team member's info, modifies the list, the underlying TeamMemberList on the "page" is now updated.

------------- Pre Jan 8, 2025
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.
… or edit a team member's info, modifies the list, the underlying TeamMemberList on the "page" is now updated.

------------- Pre Jan 8, 2025
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.
…is pressed in a drawer to add/create/delete staff.

------------- Pre Jan 8, 2025
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.
…is pressed in a drawer to add/create/delete staff.

------------- Pre Jan 8, 2025
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.
…is pressed in a drawer to add/create/delete staff.

------------- Pre Jan 8, 2025
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
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant