-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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
Hooks for frequently made operations #2293
Conversation
✅ Deploy Preview for actualbudget ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Bundle Stats — desktop-clientHey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle. As this PR is updated, I'll keep you updated on how the bundle size is impacted. Total
Changeset
View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger
Smaller
Unchanged
|
Bundle Stats — loot-coreHey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle. As this PR is updated, I'll keep you updated on how the bundle size is impacted. Total
Changeset No files were changed View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger No assets were bigger Smaller No assets were smaller Unchanged
|
fd367e6
to
f5498e8
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Very exciting! This clean-up was long overdue. Thanks for undertaking it.
dispatch(getAccounts()); | ||
} | ||
|
||
return useSelector(state => state.queries.accounts); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💬 suggestion: would be nice to also return the loading state. I bet it will be useful in some cases.
return useSelector(state => state.queries.accounts); | |
return { isLoading: !accountLoaded, data: useSelector(state => state.queries.accounts) }; |
|
||
export function usePayee(id: string) { | ||
const payees = usePayees(); | ||
return useMemo(() => payees.find(p => p.id === id), [id]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🔨 warning:
return useMemo(() => payees.find(p => p.id === id), [id]); | |
return useMemo(() => payees.find(p => p.id === id), [id, payees]); |
dispatch(getPayees()); | ||
} | ||
|
||
return useSelector(state => state.queries.payees); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🥜 nitpick: would be nice to return the loading
state here too (but up to you to decide)
); | ||
} | ||
|
||
export function CachedAccounts({ children, idKey }) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👏 praise: amazing!
useEffect(() => { | ||
actions.getAccounts(); | ||
actions.getCategories(); | ||
actions.getPayees(); | ||
}, []); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
❓ question: do we need these if the data is loaded automatically where the hook is used?
send('backups-get', { id: budgetId }).then(setBackups); | ||
}, [budgetId]); | ||
send('backups-get', { id: budgetIdToLoad }).then(setBackups); | ||
}, [budgetIdToLoad]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
❓ question: why do we need this functional change?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Originally, the budget id was being retrieved by the root Modals
component and passed to this component. I just moved that retrieval logic to this component.
export function useLocalPref<K extends keyof LocalPrefs>( | ||
prefName: K, | ||
): LocalPrefs[K] { | ||
return useSelector(state => state.prefs.local?.[prefName]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🥜 nitpick: my wishlist item (but don't feel pressured to actually implement this) - for these hooks to have both setter & getter and a default value.
const [myPref, setMyPref] = useLocalPref('budget.collapsed', true);
// Usage:
console.log('my pref:', myPref);
<Button onClick={(someNewValue) => setMyPref(someNewValue)}>Click me</Button>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is a good idea! Implemented this :)
9472e9e
to
e2c4606
Compare
fd9efe5
to
7968fac
Compare
What changed in the VRT screenshot is the default visible column on smaller screens. This defaults to the Budgeted column instead of the Spent. I've also removed some props that were passed in several layers deep in favor of the new hooks. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Much cleaner! Great job!
Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv>
* Hooks for frequently made operations * Release notes * Fix typecheck errors * Remove useGlobalPrefs * Add null checks * Fix showCleared pref * Add loaded flag for categories, accounts and payees state * Refactor to reduce unnecessary states * Fix eslint errors * Fix hooks deps * Add useEffect * Fix typecheck error * Set local and global pref hooks * Fix lint error * VRT * Fix typecheck error * Remove eager loading * Fix typecheck error * Fix typo * Fix typecheck error * Update useTheme * Typecheck errors * Typecheck error * defaultValue * Explicitly check undefined * Remove useGlobalPref and useLocalPref defaults * Fix default prefs * Default value * Fix lint error * Set default theme * Default date format in Account * Update packages/desktop-client/src/style/theme.tsx Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv> --------- Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv>
Add hooks for frequently made operations in the codebase:
useAccounts
useAccount
useBudgetedAccounts
useOffBudgetAccounts
useClosedAccounts
useFailedAccounts
usePayees
usePayee
useLocalPrefs
useLocalPref
useGlobalPrefs
useGlobalPref
useDateFormat