From effc1f42eb425428ba306f847f7b1d18a71670c5 Mon Sep 17 00:00:00 2001 From: Philipp Heckel Date: Tue, 1 Mar 2022 22:01:51 -0500 Subject: [PATCH] Switch prefs to dexie --- web/src/app/ConnectionManager.js | 1 - web/src/app/Repository.js | 43 +++++++++++++++++++------------ web/src/app/db.js | 5 +++- web/src/components/App.js | 31 ++++++++++++---------- web/src/components/Preferences.js | 25 ++++++++++-------- 5 files changed, 61 insertions(+), 44 deletions(-) diff --git a/web/src/app/ConnectionManager.js b/web/src/app/ConnectionManager.js index e9f66c31..62dd13a9 100644 --- a/web/src/app/ConnectionManager.js +++ b/web/src/app/ConnectionManager.js @@ -10,7 +10,6 @@ class ConnectionManager { return; } console.log(`[ConnectionManager] Refreshing connections`); - console.log(users); const subscriptionIds = subscriptions.ids(); const deletedIds = Array.from(this.connections.keys()).filter(id => !subscriptionIds.includes(id)); diff --git a/web/src/app/Repository.js b/web/src/app/Repository.js index 1f5989bd..3eb51dc8 100644 --- a/web/src/app/Repository.js +++ b/web/src/app/Repository.js @@ -1,5 +1,6 @@ import Subscription from "./Subscription"; import Subscriptions from "./Subscriptions"; +import db from "./db"; class Repository { loadSubscriptions() { @@ -41,33 +42,41 @@ class Repository { localStorage.setItem('subscriptions', serialized); } - loadSelectedSubscriptionId() { - console.log(`[Repository] Loading selected subscription ID from localStorage`); - const selectedSubscriptionId = localStorage.getItem('selectedSubscriptionId'); - return (selectedSubscriptionId) ? selectedSubscriptionId : ""; + async setSelectedSubscriptionId(selectedSubscriptionId) { + console.log(`[Repository] Saving selected subscription ${selectedSubscriptionId}`); + db.prefs.put({key: 'selectedSubscriptionId', value: selectedSubscriptionId}); } - saveSelectedSubscriptionId(selectedSubscriptionId) { - console.log(`[Repository] Saving selected subscription ${selectedSubscriptionId} to localStorage`); - localStorage.setItem('selectedSubscriptionId', selectedSubscriptionId); + async getSelectedSubscriptionId() { + console.log(`[Repository] Loading selected subscription ID`); + const selectedSubscriptionId = await db.prefs.get('selectedSubscriptionId'); + return (selectedSubscriptionId) ? selectedSubscriptionId.value : ""; } - setMinPriority(minPriority) { - localStorage.setItem('minPriority', minPriority.toString()); + async setMinPriority(minPriority) { + db.prefs.put({key: 'minPriority', value: minPriority.toString()}); } - getMinPriority() { - const minPriority = localStorage.getItem('minPriority'); - return (minPriority) ? Number(minPriority) : 1; + async getMinPriority() { + const minPriority = await db.prefs.get('minPriority'); + return (minPriority) ? Number(minPriority.value) : 1; } - setDeleteAfter(deleteAfter) { - localStorage.setItem('deleteAfter', deleteAfter.toString()); + minPriority() { + return db.prefs.get('minPriority'); } - getDeleteAfter() { - const deleteAfter = localStorage.getItem('deleteAfter'); - return (deleteAfter) ? Number(deleteAfter) : 604800; // Default is one week + async setDeleteAfter(deleteAfter) { + db.prefs.put({key:'deleteAfter', value: deleteAfter.toString()}); + } + + async getDeleteAfter() { + const deleteAfter = await db.prefs.get('deleteAfter'); + return (deleteAfter) ? Number(deleteAfter.value) : 604800; // Default is one week + } + + deleteAfter() { + return db.prefs.get('deleteAfter'); } } diff --git a/web/src/app/db.js b/web/src/app/db.js index 42d2f883..c890ca7c 100644 --- a/web/src/app/db.js +++ b/web/src/app/db.js @@ -9,7 +9,10 @@ import Dexie from 'dexie'; const db = new Dexie('ntfy'); db.version(1).stores({ - users: '&baseUrl, username', + subscriptions: '&id', + notifications: '&id,subscriptionId', + users: '&baseUrl,username', + prefs: '&key' }); export default db; diff --git a/web/src/components/App.js b/web/src/components/App.js index 20a5f138..8ede0213 100644 --- a/web/src/components/App.js +++ b/web/src/components/App.js @@ -92,21 +92,24 @@ const App = () => { // Define hooks: Note that the order of the hooks is important. The "loading" hooks // must be before the "saving" hooks. useEffect(() => { - // Load subscriptions - const subscriptions = repository.loadSubscriptions(); - const selectedSubscriptionId = repository.loadSelectedSubscriptionId(); - setSubscriptions(subscriptions); + const load = async () => { + // Load subscriptions + const subscriptions = repository.loadSubscriptions(); + const selectedSubscriptionId = await repository.getSelectedSubscriptionId(); + setSubscriptions(subscriptions); - // Set selected subscription - const maybeSelectedSubscription = subscriptions.get(selectedSubscriptionId); - if (maybeSelectedSubscription) { - setSelectedSubscription(maybeSelectedSubscription); - } + // Set selected subscription + const maybeSelectedSubscription = subscriptions.get(selectedSubscriptionId); + if (maybeSelectedSubscription) { + setSelectedSubscription(maybeSelectedSubscription); + } - // Poll all subscriptions - subscriptions.forEach((subscriptionId, subscription) => { - poll(subscription); - }); + // Poll all subscriptions + subscriptions.forEach((subscriptionId, subscription) => { + poll(subscription); + }); + }; + load(); }, [/* initial render */]); useEffect(() => { const notificationClickFallback = (subscription) => setSelectedSubscription(subscription); @@ -124,7 +127,7 @@ const App = () => { useEffect(() => repository.saveSubscriptions(subscriptions), [subscriptions]); useEffect(() => { const subscriptionId = (selectedSubscription) ? selectedSubscription.id : ""; - repository.saveSelectedSubscriptionId(subscriptionId) + repository.setSelectedSubscriptionId(subscriptionId) }, [selectedSubscription]); return ( diff --git a/web/src/components/Preferences.js b/web/src/components/Preferences.js index 79bf8e66..fca5b804 100644 --- a/web/src/components/Preferences.js +++ b/web/src/components/Preferences.js @@ -45,7 +45,7 @@ const Preferences = (props) => { ); }; -const Notifications = (props) => { +const Notifications = () => { return ( @@ -60,10 +60,12 @@ const Notifications = (props) => { }; const MinPriority = () => { - const [minPriority, setMinPriority] = useState(repository.getMinPriority()); - const handleChange = (ev) => { - setMinPriority(ev.target.value); - repository.setMinPriority(ev.target.value); + const minPriority = useLiveQuery(() => repository.getMinPriority()); + const handleChange = async (ev) => { + await repository.setMinPriority(ev.target.value); + } + if (!minPriority) { + return null; // While loading } return ( @@ -81,10 +83,12 @@ const MinPriority = () => { }; const DeleteAfter = () => { - const [deleteAfter, setDeleteAfter] = useState(repository.getDeleteAfter()); - const handleChange = (ev) => { - setDeleteAfter(ev.target.value); - repository.setDeleteAfter(ev.target.value); + const deleteAfter = useLiveQuery(async () => repository.getDeleteAfter()); + const handleChange = async (ev) => { + await repository.setDeleteAfter(ev.target.value); + } + if (!deleteAfter) { + return null; // While loading } return ( @@ -101,7 +105,6 @@ const DeleteAfter = () => { ) }; - const PrefGroup = (props) => { return (
{ ); }; -const Users = (props) => { +const Users = () => { const [dialogKey, setDialogKey] = useState(0); const [dialogOpen, setDialogOpen] = useState(false); const users = useLiveQuery(() => db.users.toArray());