astra/ntfy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Move more stuff out of App.js

Browse source
This commit is contained in:
Philipp Heckel 2022-03-05 22:33:34 -05:00
parent acde2e5b6e
commit 09b128f27a
4 changed files with 132 additions and 136 deletions
Download patch file Download diff file Expand all files Collapse all files

24
web/src/components/App.js
View file

@ -47,31 +47,21 @@ const Root = () => {
const subscriptions = useLiveQuery(() => subscriptionManager.all());
const selectedSubscription = findSelected(location, subscriptions);
const handleSubscriptionClick = async (subscriptionId) => {
const subscription = await subscriptionManager.get(subscriptionId);
navigate(subscriptionRoute(subscription));
}
const handleSubscribeSubmit = async (subscription) => {
console.log(`[App] New subscription: ${subscription.id}`, subscription);
navigate(subscriptionRoute(subscription));
handleRequestPermission();
};
const handleUnsubscribe = async (subscriptionId) => {
console.log(`[App] Unsubscribing from ${subscriptionId}`);
const newSelected = await subscriptionManager.first(); // May be undefined
if (newSelected) {
navigate(subscriptionRoute(newSelected));
}
};
const handleRequestPermission = () => {
notificationManager.maybeRequestPermission(granted => setNotificationsGranted(granted));
};
// Define hooks: Note that the order of the hooks is important. The "loading" hooks
// must be before the "saving" hooks.
useEffect(() => {
poller.startWorker();
pruner.startWorker();
}, [/* initial render */]);
useEffect(() => {
const handleNotification = async (subscriptionId, notification) => {
try {
@ -93,14 +83,17 @@ const Root = () => {
// This is for the use of 'navigate' // FIXME
//eslint-disable-next-line
}, [/* initial render */]);
useEffect(() => { connectionManager.refresh(subscriptions, users) }, [subscriptions, users]); // Dangle!
useEffect(() => {
connectionManager.refresh(subscriptions, users);
}, [subscriptions, users]); // Dangle!
return (
<Box sx={{display: 'flex'}}>
<CssBaseline/>
<ActionBar
subscriptions={subscriptions}
selectedSubscription={selectedSubscription}
onUnsubscribe={handleUnsubscribe}
onMobileDrawerToggle={() => setMobileDrawerOpen(!mobileDrawerOpen)}
/>
<Box component="nav" sx={{width: {sm: Navigation.width}, flexShrink: {sm: 0}}}>
@ -110,7 +103,6 @@ const Root = () => {
mobileDrawerOpen={mobileDrawerOpen}
notificationsGranted={notificationsGranted}
onMobileDrawerToggle={() => setMobileDrawerOpen(!mobileDrawerOpen)}
onSubscriptionClick={handleSubscriptionClick}
onSubscribeSubmit={handleSubscribeSubmit}
onRequestPermissionClick={handleRequestPermission}
/>