chore: update next-storage example to use the new Realtime API

Author: w3b6x9

example/next-storage/components/Account.tsx

@@ -35,10 +35,10 @@ export default function Account({
         throw 'You must select an image to upload.'
       }
 
-      const user = supabase.auth.user()
+      const { user } = await supabase.auth.getUser()
       const file = event.target.files[0]
       const fileExt = file.name.split('.').pop()
-      const fileName = `${session?.user.id}${Math.random()}.${fileExt}`
+      const fileName = `${session?.user?.id}${Math.random()}.${fileExt}`
       const filePath = `${fileName}`
 
       let { error: uploadError } = await supabase.storage
@@ -127,7 +127,7 @@ export default function Account({
     <div className="account">
       <div>
         <label htmlFor="email">Email</label>
-        <input id="email" type="text" value={session.user.email} disabled />
+        <input id="email" type="text" value={session?.user?.email} disabled />
       </div>
       <div>
         <label htmlFor="username">Name</label>

example/next-storage/components/ProfileList.tsx

@@ -1,25 +1,27 @@
 import ProfileCard from '../components/ProfileCard'
 import { Profile } from '../lib/constants'
-import { Subscription, SupabaseRealtimePayload } from '@supabase/supabase-js'
+import { SupabaseRealtimePayload } from '@supabase/supabase-js'
 import { supabase } from '../lib/api'
 import { useState, useEffect } from 'react'
 
-var realtimeProfiles: Subscription | null = null
-
 export default function ProfileList() {
   const [profiles, setProfiles] = useState<Profile[]>([])
 
   useEffect(() => {
     // getPublicProfiles()
     getUserProfile()
 
-    realtimeProfiles = supabase
-      .from('profiles')
-      .on('*', (payload: SupabaseRealtimePayload<Profile>) => profileUpdated(profiles, payload.new))
+    const realtimeProfiles = supabase
+      .channel('profiles-channel')
+      .on(
+        'realtime',
+        { event: '*', schema: 'public', table: 'profiles' },
+        (payload: SupabaseRealtimePayload<Profile>) => profileUpdated(profiles, payload.new)
+      )
       .subscribe()
 
     return () => {
-      if (realtimeProfiles) supabase.removeSubscription(realtimeProfiles)
+      if (realtimeProfiles) supabase.removeChannel(realtimeProfiles)
     }
   }, [])
 
@@ -29,12 +31,12 @@ export default function ProfileList() {
   }
 
   async function getUserProfile() {
-    const user = supabase.auth.user()
+    const { user } = await supabase.auth.getUser()
     try {
       const { data, error } = await supabase
         .from('profiles')
         .select('id, username, avatar_url, website, updated_at')
-        .eq('id', user.id)
+        .eq('id', user?.id)
         .order('updated_at', { ascending: false })
       if (error) {
         throw error