Switch prefs to dexie

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));
 

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() {
+    async setSelectedSubscriptionId(selectedSubscriptionId) {
-        console.log(`[Repository] Loading selected subscription ID from localStorage`);
+        console.log(`[Repository] Saving selected subscription ${selectedSubscriptionId}`);
-        const selectedSubscriptionId = localStorage.getItem('selectedSubscriptionId');
+        db.prefs.put({key: 'selectedSubscriptionId', value: selectedSubscriptionId});
-        return (selectedSubscriptionId) ? selectedSubscriptionId : "";
     }
 
-    saveSelectedSubscriptionId(selectedSubscriptionId) {
+    async getSelectedSubscriptionId() {
-        console.log(`[Repository] Saving selected subscription ${selectedSubscriptionId} to localStorage`);
+        console.log(`[Repository] Loading selected subscription ID`);
-        localStorage.setItem('selectedSubscriptionId', selectedSubscriptionId);
+        const selectedSubscriptionId = await db.prefs.get('selectedSubscriptionId');
+        return (selectedSubscriptionId) ? selectedSubscriptionId.value : "";
     }
 
-    setMinPriority(minPriority) {
+    async setMinPriority(minPriority) {
-        localStorage.setItem('minPriority', minPriority.toString());
+        db.prefs.put({key: 'minPriority', value: minPriority.toString()});
     }
 
-    getMinPriority() {
+    async getMinPriority() {
-        const minPriority = localStorage.getItem('minPriority');
+        const minPriority = await db.prefs.get('minPriority');
-        return (minPriority) ? Number(minPriority) : 1;
+        return (minPriority) ? Number(minPriority.value) : 1;
     }
 
-    setDeleteAfter(deleteAfter) {
+    minPriority() {
-        localStorage.setItem('deleteAfter', deleteAfter.toString());
+        return db.prefs.get('minPriority');
     }
 
-    getDeleteAfter() {
+    async setDeleteAfter(deleteAfter) {
-        const deleteAfter = localStorage.getItem('deleteAfter');
+        db.prefs.put({key:'deleteAfter', value: deleteAfter.toString()});
-        return (deleteAfter) ? Number(deleteAfter) : 604800; // Default is one week
+    }
+
+    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');
     }
 }
 

web/src/app/db.js

@@ -9,7 +9,10 @@ import Dexie from 'dexie';
 const db = new Dexie('ntfy');
 
 db.version(1).stores({
+    subscriptions: '&id',
+    notifications: '&id,subscriptionId',
     users: '&baseUrl,username',
+    prefs: '&key'
 });
 
 export default db;

web/src/components/App.js

@@ -92,9 +92,10 @@ const App = () => {
     // Define hooks: Note that the order of the hooks is important. The "loading" hooks
     // must be before the "saving" hooks.
     useEffect(() => {
+        const load = async () => {
             // Load subscriptions
             const subscriptions = repository.loadSubscriptions();
-        const selectedSubscriptionId = repository.loadSelectedSubscriptionId();
+            const selectedSubscriptionId = await repository.getSelectedSubscriptionId();
             setSubscriptions(subscriptions);
 
             // Set selected subscription
@@ -107,6 +108,8 @@ const App = () => {
             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 (

web/src/components/Preferences.js

@@ -45,7 +45,7 @@ const Preferences = (props) => {
     );
 };
 
-const Notifications = (props) => {
+const Notifications = () => {
     return (
         <Card sx={{p: 3}}>
             <Typography variant="h5">
@@ -60,10 +60,12 @@ const Notifications = (props) => {
 };
 
 const MinPriority = () => {
-    const [minPriority, setMinPriority] = useState(repository.getMinPriority());
+    const minPriority = useLiveQuery(() => repository.getMinPriority());
-    const handleChange = (ev) => {
+    const handleChange = async (ev) => {
-        setMinPriority(ev.target.value);
+        await repository.setMinPriority(ev.target.value);
-        repository.setMinPriority(ev.target.value);
+    }
+    if (!minPriority) {
+        return null; // While loading
     }
     return (
         <Pref title="Minimum priority">
@@ -81,10 +83,12 @@ const MinPriority = () => {
 };
 
 const DeleteAfter = () => {
-    const [deleteAfter, setDeleteAfter] = useState(repository.getDeleteAfter());
+    const deleteAfter = useLiveQuery(async () => repository.getDeleteAfter());
-    const handleChange = (ev) => {
+    const handleChange = async (ev) => {
-        setDeleteAfter(ev.target.value);
+        await repository.setDeleteAfter(ev.target.value);
-        repository.setDeleteAfter(ev.target.value);
+    }
+    if (!deleteAfter) {
+        return null; // While loading
     }
     return (
         <Pref title="Delete notifications">
@@ -101,7 +105,6 @@ const DeleteAfter = () => {
     )
 };
 
-
 const PrefGroup = (props) => {
     return (
         <div style={{
@@ -159,7 +162,7 @@ const DefaultServer = (props) => {
     );
 };
 
-const Users = (props) => {
+const Users = () => {
     const [dialogKey, setDialogKey] = useState(0);
     const [dialogOpen, setDialogOpen] = useState(false);
     const users = useLiveQuery(() => db.users.toArray());