mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-30 19:36:25 +02:00
feat: Reduce memory footprint for PGlite, Implement user-specific Electric SQL database management
- Added cleanup logic for other users' databases on login to ensure data isolation. - Introduced best-effort cleanup on logout to remove stale databases. - Updated Electric client initialization to support user-specific databases. - Refactored hooks to utilize the Electric context for better state management and prevent race conditions. - Enhanced error handling and logging for Electric SQL operations.
This commit is contained in:
Anish Sarkar
parent
eb1ddf0c92
commit
703ec08d19
9 changed files with 752 additions and 489 deletions
|
|
@ -1,81 +1,81 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useState, useCallback, useRef } from "react";
|
||||
import { initElectric, type ElectricClient, type SyncHandle } from "@/lib/electric/client";
|
||||
import { useElectricClient } from "@/lib/electric/context";
|
||||
import type { SyncHandle } from "@/lib/electric/client";
|
||||
import type { Notification } from "@/contracts/types/notification.types";
|
||||
import { authenticatedFetch } from "@/lib/auth-utils";
|
||||
|
||||
export type { Notification } from "@/contracts/types/notification.types";
|
||||
|
||||
export function useNotifications(userId: string | null) {
|
||||
const [electric, setElectric] = useState<ElectricClient | null>(null);
|
||||
/**
|
||||
* Hook for managing notifications with Electric SQL real-time sync
|
||||
*
|
||||
* Uses the Electric client from context (provided by ElectricProvider)
|
||||
* instead of initializing its own - prevents race conditions and memory leaks
|
||||
*
|
||||
* @param userId - The user ID to fetch notifications for
|
||||
* @param searchSpaceId - The search space ID to filter notifications (null shows global notifications only)
|
||||
*/
|
||||
export function useNotifications(userId: string | null, searchSpaceId: number | null) {
|
||||
// Get Electric client from context - ElectricProvider handles initialization
|
||||
const electricClient = useElectricClient();
|
||||
|
||||
const [notifications, setNotifications] = useState<Notification[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
const syncHandleRef = useRef<SyncHandle | null>(null);
|
||||
const liveQueryRef = useRef<{ unsubscribe: () => void } | null>(null);
|
||||
// Use ref instead of state to track initialization - prevents cleanup from running when set
|
||||
const initializedRef = useRef(false);
|
||||
const syncKeyRef = useRef<string | null>(null);
|
||||
|
||||
// Initialize Electric SQL and start syncing with real-time updates
|
||||
// Start syncing when Electric client is available
|
||||
useEffect(() => {
|
||||
// Use ref to prevent re-initialization without triggering cleanup
|
||||
if (!userId || initializedRef.current) return;
|
||||
initializedRef.current = true;
|
||||
// Wait for both userId and Electric client to be available
|
||||
if (!userId || !electricClient) {
|
||||
setLoading(!electricClient); // Still loading if waiting for Electric
|
||||
return;
|
||||
}
|
||||
|
||||
// Create a unique key for this sync - includes searchSpaceId for proper tracking
|
||||
// Note: We sync ALL user notifications but filter by searchSpaceId in queries (memory efficient)
|
||||
const syncKey = `notifications_${userId}_space_${searchSpaceId ?? "global"}`;
|
||||
if (syncKeyRef.current === syncKey) {
|
||||
// Already syncing for this user/searchSpace combo
|
||||
return;
|
||||
}
|
||||
|
||||
let mounted = true;
|
||||
syncKeyRef.current = syncKey;
|
||||
|
||||
async function init() {
|
||||
async function startSync() {
|
||||
try {
|
||||
const electricClient = await initElectric();
|
||||
if (!mounted) return;
|
||||
console.log("[useNotifications] Starting sync for user:", userId, "searchSpace:", searchSpaceId);
|
||||
|
||||
setElectric(electricClient);
|
||||
|
||||
// Start syncing notifications for this user via Electric SQL
|
||||
// Note: user_id is stored as TEXT in PGlite (UUID from backend is converted)
|
||||
console.log("Starting Electric SQL sync for user:", userId);
|
||||
|
||||
// Use string format for WHERE clause (PGlite sync plugin expects this format)
|
||||
// The user_id is a UUID string, so we need to quote it properly
|
||||
// Sync ALL notifications for this user (one subscription for all search spaces)
|
||||
// This is memory efficient - we filter by searchSpaceId in queries only
|
||||
const handle = await electricClient.syncShape({
|
||||
table: "notifications",
|
||||
where: `user_id = '${userId}'`,
|
||||
primaryKey: ["id"],
|
||||
});
|
||||
|
||||
console.log("Electric SQL sync started:", {
|
||||
console.log("[useNotifications] Sync started:", {
|
||||
isUpToDate: handle.isUpToDate,
|
||||
hasStream: !!handle.stream,
|
||||
hasInitialSyncPromise: !!handle.initialSyncPromise,
|
||||
});
|
||||
|
||||
// Optimized: Check if already up-to-date before waiting
|
||||
if (handle.isUpToDate) {
|
||||
console.log("Sync already up-to-date, skipping wait");
|
||||
} else if (handle.initialSyncPromise) {
|
||||
// Only wait if not already up-to-date
|
||||
console.log("Waiting for initial sync to complete...");
|
||||
// Wait for initial sync with timeout
|
||||
if (!handle.isUpToDate && handle.initialSyncPromise) {
|
||||
try {
|
||||
// Use Promise.race with a shorter timeout to avoid long waits
|
||||
await Promise.race([
|
||||
handle.initialSyncPromise,
|
||||
new Promise((resolve) => setTimeout(resolve, 2000)), // Max 2s wait
|
||||
new Promise((resolve) => setTimeout(resolve, 2000)),
|
||||
]);
|
||||
console.log("Initial sync promise resolved or timed out, checking status:", {
|
||||
isUpToDate: handle.isUpToDate,
|
||||
});
|
||||
} catch (syncErr) {
|
||||
console.error("Initial sync failed:", syncErr);
|
||||
console.error("[useNotifications] Initial sync failed:", syncErr);
|
||||
}
|
||||
}
|
||||
|
||||
// Check status after waiting
|
||||
console.log("Sync status after waiting:", {
|
||||
isUpToDate: handle.isUpToDate,
|
||||
hasStream: !!handle.stream,
|
||||
});
|
||||
|
||||
if (!mounted) {
|
||||
handle.unsubscribe();
|
||||
return;
|
||||
|
|
@ -85,119 +85,88 @@ export function useNotifications(userId: string | null) {
|
|||
setLoading(false);
|
||||
setError(null);
|
||||
|
||||
// Fetch notifications after sync is complete (we already waited above)
|
||||
await fetchNotifications(electricClient.db);
|
||||
// Fetch initial notifications
|
||||
await fetchNotifications();
|
||||
|
||||
// Set up real-time updates using PGlite live queries
|
||||
// Electric SQL syncs data to PGlite in real-time via HTTP streaming
|
||||
// PGlite live queries detect when the synced data changes and trigger callbacks
|
||||
try {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const db = electricClient.db as any;
|
||||
|
||||
// Use PGlite's live query API for real-time updates
|
||||
// CORRECT API: await db.live.query() then use .subscribe()
|
||||
if (db.live?.query && typeof db.live.query === "function") {
|
||||
// IMPORTANT: db.live.query() returns a Promise - must await it!
|
||||
const liveQuery = await db.live.query(
|
||||
`SELECT * FROM notifications WHERE user_id = $1 ORDER BY created_at DESC`,
|
||||
[userId]
|
||||
);
|
||||
|
||||
if (!mounted) {
|
||||
liveQuery.unsubscribe?.();
|
||||
return;
|
||||
}
|
||||
|
||||
// Set initial results immediately from the resolved query
|
||||
if (liveQuery.initialResults?.rows) {
|
||||
console.log("📋 Initial live query results:", liveQuery.initialResults.rows.length);
|
||||
setNotifications(liveQuery.initialResults.rows);
|
||||
} else if (liveQuery.rows) {
|
||||
// Some versions have rows directly on the result
|
||||
console.log("📋 Initial live query results (direct):", liveQuery.rows.length);
|
||||
setNotifications(liveQuery.rows);
|
||||
}
|
||||
|
||||
// Subscribe to changes - this is the correct API!
|
||||
// The callback fires automatically when Electric SQL syncs new data to PGlite
|
||||
if (typeof liveQuery.subscribe === "function") {
|
||||
liveQuery.subscribe((result: { rows: Notification[] }) => {
|
||||
console.log(
|
||||
"🔔 Live query update received:",
|
||||
result.rows?.length || 0,
|
||||
"notifications"
|
||||
);
|
||||
if (mounted && result.rows) {
|
||||
setNotifications(result.rows);
|
||||
}
|
||||
});
|
||||
console.log("✅ Real-time notifications enabled via PGlite live queries");
|
||||
} else {
|
||||
console.warn("⚠️ Live query subscribe method not available");
|
||||
}
|
||||
|
||||
// Store for cleanup
|
||||
if (typeof liveQuery.unsubscribe === "function") {
|
||||
liveQueryRef.current = liveQuery;
|
||||
}
|
||||
} else {
|
||||
console.error("❌ PGlite live queries not available - db.live.query is not a function");
|
||||
console.log("db.live:", db.live);
|
||||
}
|
||||
} catch (liveErr) {
|
||||
console.error("❌ Failed to set up real-time updates:", liveErr);
|
||||
}
|
||||
// Set up live query for real-time updates
|
||||
await setupLiveQuery();
|
||||
} catch (err) {
|
||||
if (!mounted) return;
|
||||
console.error("Failed to initialize Electric SQL:", err);
|
||||
setError(err instanceof Error ? err : new Error("Failed to initialize Electric SQL"));
|
||||
// Still mark as loaded so the UI doesn't block
|
||||
console.error("[useNotifications] Failed to start sync:", err);
|
||||
setError(err instanceof Error ? err : new Error("Failed to sync notifications"));
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchNotifications(
|
||||
db: InstanceType<typeof import("@electric-sql/pglite").PGlite>
|
||||
) {
|
||||
async function fetchNotifications() {
|
||||
try {
|
||||
// Debug: Check all notifications first
|
||||
const allNotifications = await db.query<Notification>(
|
||||
`SELECT * FROM notifications ORDER BY created_at DESC`
|
||||
);
|
||||
console.log(
|
||||
"All notifications in PGlite:",
|
||||
allNotifications.rows?.length || 0,
|
||||
allNotifications.rows
|
||||
);
|
||||
|
||||
// Use PGlite's query method (not exec for SELECT queries)
|
||||
const result = await db.query<Notification>(
|
||||
// Filter by user_id AND searchSpaceId (or global notifications where search_space_id IS NULL)
|
||||
const result = await electricClient.db.query<Notification>(
|
||||
`SELECT * FROM notifications
|
||||
WHERE user_id = $1
|
||||
AND (search_space_id = $2 OR search_space_id IS NULL)
|
||||
ORDER BY created_at DESC`,
|
||||
[userId]
|
||||
[userId, searchSpaceId]
|
||||
);
|
||||
console.log(`Notifications for user ${userId}:`, result.rows?.length || 0, result.rows);
|
||||
|
||||
if (mounted) {
|
||||
// PGlite query returns { rows: [] } format
|
||||
setNotifications(result.rows || []);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch notifications:", err);
|
||||
// Log more details for debugging
|
||||
console.error("Error details:", err);
|
||||
console.error("[useNotifications] Failed to fetch:", err);
|
||||
}
|
||||
}
|
||||
|
||||
init();
|
||||
async function setupLiveQuery() {
|
||||
try {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const db = electricClient.db as any;
|
||||
|
||||
if (db.live?.query && typeof db.live.query === "function") {
|
||||
// Filter by user_id AND searchSpaceId (or global notifications)
|
||||
const liveQuery = await db.live.query(
|
||||
`SELECT * FROM notifications
|
||||
WHERE user_id = $1
|
||||
AND (search_space_id = $2 OR search_space_id IS NULL)
|
||||
ORDER BY created_at DESC`,
|
||||
[userId, searchSpaceId]
|
||||
);
|
||||
|
||||
if (!mounted) {
|
||||
liveQuery.unsubscribe?.();
|
||||
return;
|
||||
}
|
||||
|
||||
// Set initial results
|
||||
if (liveQuery.initialResults?.rows) {
|
||||
setNotifications(liveQuery.initialResults.rows);
|
||||
} else if (liveQuery.rows) {
|
||||
setNotifications(liveQuery.rows);
|
||||
}
|
||||
|
||||
// Subscribe to changes
|
||||
if (typeof liveQuery.subscribe === "function") {
|
||||
liveQuery.subscribe((result: { rows: Notification[] }) => {
|
||||
if (mounted && result.rows) {
|
||||
setNotifications(result.rows);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (typeof liveQuery.unsubscribe === "function") {
|
||||
liveQueryRef.current = liveQuery;
|
||||
}
|
||||
}
|
||||
} catch (liveErr) {
|
||||
console.error("[useNotifications] Failed to set up live query:", liveErr);
|
||||
}
|
||||
}
|
||||
|
||||
startSync();
|
||||
|
||||
return () => {
|
||||
mounted = false;
|
||||
// Reset initialization state so we can reinitialize with a new userId
|
||||
initializedRef.current = false;
|
||||
setLoading(true);
|
||||
syncKeyRef.current = null;
|
||||
|
||||
if (syncHandleRef.current) {
|
||||
syncHandleRef.current.unsubscribe();
|
||||
syncHandleRef.current = null;
|
||||
|
|
@ -207,15 +176,11 @@ export function useNotifications(userId: string | null) {
|
|||
liveQueryRef.current = null;
|
||||
}
|
||||
};
|
||||
// Only depend on userId - using ref for initialization tracking to prevent cleanup issues
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [userId]);
|
||||
}, [userId, searchSpaceId, electricClient]);
|
||||
|
||||
// Mark notification as read via backend API
|
||||
// Electric SQL will automatically sync the change to all clients
|
||||
const markAsRead = useCallback(async (notificationId: number) => {
|
||||
try {
|
||||
// Call backend API - Electric SQL will sync the change automatically
|
||||
const response = await authenticatedFetch(
|
||||
`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/notifications/${notificationId}/read`,
|
||||
{ method: "PATCH" }
|
||||
|
|
@ -226,8 +191,6 @@ export function useNotifications(userId: string | null) {
|
|||
throw new Error(error.detail || "Failed to mark notification as read");
|
||||
}
|
||||
|
||||
// Electric SQL will sync the change from PostgreSQL to PGlite automatically
|
||||
// The live query subscription will update the UI
|
||||
return true;
|
||||
} catch (err) {
|
||||
console.error("Failed to mark notification as read:", err);
|
||||
|
|
@ -236,10 +199,8 @@ export function useNotifications(userId: string | null) {
|
|||
}, []);
|
||||
|
||||
// Mark all notifications as read via backend API
|
||||
// Electric SQL will automatically sync the changes to all clients
|
||||
const markAllAsRead = useCallback(async () => {
|
||||
try {
|
||||
// Call backend API - Electric SQL will sync all changes automatically
|
||||
const response = await authenticatedFetch(
|
||||
`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/notifications/read-all`,
|
||||
{ method: "PATCH" }
|
||||
|
|
@ -250,8 +211,6 @@ export function useNotifications(userId: string | null) {
|
|||
throw new Error(error.detail || "Failed to mark all notifications as read");
|
||||
}
|
||||
|
||||
// Electric SQL will sync the changes from PostgreSQL to PGlite automatically
|
||||
// The live query subscription will update the UI
|
||||
return true;
|
||||
} catch (err) {
|
||||
console.error("Failed to mark all notifications as read:", err);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue