Testing it out

Made this push to test things in vercel to check if realtime really does or does not work with it.

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next"
+}

package.json

@@ -38,6 +38,8 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "eslint": "9.16.0",
+    "eslint-config-next": "15.1.0",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"

src/app/api/user/send/request/route.ts

@@ -57,9 +57,9 @@ export async function POST(request: Request) {
 		}
 		
 		return NextResponse.json({success: true});
-	} catch (error) {
+	} catch (err) {
 		return NextResponse.json(
-			{error: "Failed to update requests"},
+			{error: `Failed to update requests: ${err}`},
 			{status: 500}
 		);
 	}

src/app/page.tsx

@@ -153,7 +153,7 @@ export default function SiPher() {
 					<div className="max-w-2xl space-y-6 text-center">
 						<p className="text-lg md:text-xl font-medium leading-relaxed text-primary">
 							Where shadows dance and secrets nest, Silent Whisper serves as the dark sanctuary for those
-							who value discretion above all. Born from ancient corvid traditions, this messenger's haven ensures your
+							who value discretion above all. Born from ancient corvid traditions, this messenger&rsquo;s haven ensures your
 							whispers remain unheard by all but their intended recipients.
 						</p>
 						

src/components/main/realtime/request.tsx

@@ -4,6 +4,7 @@
 import {useEffect} from 'react'
 import {useToast} from "@/hooks/use-toast"
 import {useUser} from "@/contexts/user"
+import {createBrowserClient} from "@/lib/supabase/browser";
 
 export function RealtimeRequests() {
 	const {toast} = useToast()
@@ -12,50 +13,15 @@ export function RealtimeRequests() {
 	useEffect(() => {
 		if (!user) return
 		
-		const eventSource = new EventSource('/api/user/actions/realtime/requests')
+		createBrowserClient().channel("realtime requests").on("postgres_changes", {
-		
+			event: 'UPDATE',
-		eventSource.onmessage = (event) => {
+			schema: 'public',
-			try {
+			table: 'users',
-				const data = JSON.parse(event.data)
+			filter: `uuid=eq.${user.uuid}`,
-				switch (data.type) {
+		}, async (payload) => {
-					case 'connected':
+			console.log(payload)
-						console.log('SSE connected:', data.message)
+		}).subscribe()
-						break
+	}, [])
-					case 'requests_update':
-						// Update the user context with new requests
-						updateUser({...user, requests: data.data})
-						// Show a toast notification
-						toast({
-							title: "New Request",
-							description: "You have a new request pending",
-							duration: 5000,
-						})
-						break
-					default:
-						console.log('Unknown message type:', data.type)
-				}
-			} catch (error) {
-				console.error('Error parsing SSE message:', error)
-			}
-		}
-		
-		eventSource.onerror = (error) => {
-			console.error('SSE error:', error)
-			eventSource.close()
-			
-			// Optionally show an error toast
-			toast({
-				title: "Connection Error",
-				description: "Failed to connect to realtime updates",
-				variant: "destructive",
-				duration: 5000,
-			})
-		}
-		
-		return () => {
-			eventSource.close()
-		}
-	}, [user, updateUser, toast])
 	
 	return null
 }

src/components/main/sidebar/sidebar.tsx

@@ -41,7 +41,7 @@ function Sidebar(
 	
 	const [pendingRequest, setPendingRequest] = useState<number>(0);
 	
-	const user = useUser().user!;
+	const {user, getUser} = useUser()
 	
 	const {
 		username,
@@ -96,7 +96,9 @@ function Sidebar(
 					</li>
 				)
 			} else {
-				const fetchOtherUser = await useUser().getUser("fetchOtherUser - const", thread.id)
+				const fetchOtherUser = async () => {
+					await getUser("fetchOtherUser - const", thread.id)
+				}
 			}
 		})
 	}, [threads])
@@ -150,7 +152,7 @@ function Sidebar(
 								{
 									pendingRequest > 0 && user.requests.map((request, item) => {
 										return (
-											<p>{request}</p>
+											<p key={request}>{request}</p>
 										)
 									}) || (
 										<p>Nothing new here</p>

src/lib/supabase/browser.tsx

@@ -0,0 +1,10 @@
+"use client"
+import {createBrowserClient as browserClient} from '@supabase/ssr'
+
+export function createBrowserClient() {
+	// Create a supabase client on the browser with project's credentials
+	return browserClient(
+		process.env.NEXT_PUBLIC_SUPABASE_URL!,
+		process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+	)
+}