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

Updated react-router v6 to v7, and replaces flux with react-query #16

Merged
merged 24 commits into from
Jan 23, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
891f2e1
Merged react-router v6 to v7, and replaces flux with react-query
SailingSteve Jan 15, 2025
563417c
Merged react-router v6 to v7, and replaces flux with react-query
SailingSteve Jan 15, 2025
5ae8ec5
Merged react-router v6 to v7, and replaces flux with react-query
SailingSteve Jan 16, 2025
ceab724
Merged react-router v6 to v7, and replaces flux with react-query
SailingSteve Jan 16, 2025
22d4e14
Merged react-router v6 to v7, and replaces flux with react-query
SailingSteve Jan 17, 2025
795f362
Merged react-router v6 to v7, and replaces flux with react-query
SailingSteve Jan 17, 2025
f8c11b7
Merged react-router v6 to v7, and replaces flux with react-query
SailingSteve Jan 18, 2025
f41fa69
Merged react-router v6 to v7, and replaces flux with react-query
SailingSteve Jan 18, 2025
0378b80
Merged react-router v6 to v7, and replaces flux with react-query
SailingSteve Jan 18, 2025
1e33765
Merged react-router v6 to v7, and replaces flux with react-query
SailingSteve Jan 18, 2025
fcaa748
Merged react-router v6 to v7, and replaces flux with react-query
SailingSteve Jan 20, 2025
48f223c
Merged react-router v6 to v7, and replaces flux with react-query
SailingSteve Jan 20, 2025
aa4d406
Merged react-router v6 to v7, and replaces flux with react-query
SailingSteve Jan 20, 2025
85b7a7d
merge
SailingSteve Jan 21, 2025
0be1738
merge
SailingSteve Jan 21, 2025
f089262
merge
SailingSteve Jan 21, 2025
f9a7463
merge
SailingSteve Jan 21, 2025
1bc99c8
merge
SailingSteve Jan 21, 2025
f547fad
merge
SailingSteve Jan 21, 2025
b0e804b
merge
SailingSteve Jan 22, 2025
a4c71ee
merge
SailingSteve Jan 22, 2025
782a33b
merge
SailingSteve Jan 22, 2025
2daec11
merge
SailingSteve Jan 22, 2025
a9a8613
merge
SailingSteve Jan 22, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
"react-hooks/exhaustive-deps": "warn", // Checks effect dependencies
"react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
"react/button-has-type": 1,
"react/jsx-one-expression-per-line": 0,
"react/destructuring-assignment": 0, // Dec 2018: We should do this! But right now we have 3990 warnings/errors if enabled.
"react/forbid-prop-types": 0, // Dec 2018: Should consider someday
"react/indent-prop": 0,
Expand Down
52 changes: 52 additions & 0 deletions docs/FluxEliminated.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
### Flux eliminated
* flux has been deprecated and archived for more than 2 years, eventually is will become a problem for WebApp
* flux has been removed from weconnect-client (it still is in some non-used parts, but will be deleted)
* see [React Query Makes Writing React Code 200% Better](https://youtu.be/lVLz_ASqAio?si=7Ji0xWIDoh-DM6VU)
* react-router also has been updated from 6 to 7, which brings routing changes

#### Changing to react-query

* Stores and actions go away, along with tons of boiler plate code in the pages and components -- maybe half the code in the app goes away, with no loss in functionality.
* All the listeners go away, since cache is managed by react-query, so we don't have to listen for changes.
* The key is that instead of preprocessing data from the API in stores, and writing lots of code to maintain store
"freshness" react-query automatically maintains fresh data.
* You can pre-process cached data into the AppContext (react app cache not related to react-query). Store smaller sets of pre-process stored data,
but it seems super-fast to just reprocess the data as you need it.

* TeamHome line 41, an API query --
```
const { data, isSuccess, isFetching, isStale } = useFetchData(['team-list-retrieve'], {});
```
useFetchData() is called each time the page is rendered.
If nothing has invalidated the cache, the result of the query is served from cache -- no API call is made.

* AddPersonDrawerMainContent line 28, a cache invalidation on a mutation
```
const personSaveMutation = useMutation({
mutationFn: (params) => weConnectQueryFn('person-save', params),
onSuccess: () => {
console.log('--------- personSaveMutation EditPersonForm mutated ---------');
queryClient.invalidateQueries(['team-list-retrieve']).then(() => {});
},
});
```
Mutations only run when called from something like an onClick(). In this case they update a person record,
which makes the team-list-retrieve in cache stale, so it needs to be invalidated. The next time a page is
loaded that relies on the data from team-list-retrieve the API fires and the cache regains freshness.

#### Watch out for
* It is easy to get in endless loops if you are updating state in a component, and have no way to preven subsequent
updates from further updating the same state variable.
* useEffect() can solve the problem here, since with no `useEffect` dependencies in square brackets, since this is like the old `componentDidUnmount()`.
* Unfigured out:
* Sometimes parameters that come into a functional component (with a render call), don't appear in the component.
* Sometimes `const params = useParams();` gets the params (maybe if coming in as URL params).
* Almost always something like 'getAppContextValue('addPersonDrawerOpen');' works
* Getters and Setters like 'const [team, setTeam] = useState({});' work well, but this fails...
```
const [bob, setBob] = useState('yes');
console.log(bob); // returns undefined
```
Since the state initialization is not complete until the component re-renders.
* 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.
Loading
Loading