Adds updated times to the cards

Author: kiwicopple

example/next-storage/components/ProfileCard.tsx

@@ -2,11 +2,20 @@ import { Profile } from '../lib/constants'
 import Avatar from './Avatar'
 
 export default function ProfileCard({ profile }: { profile: Profile }) {
+  const lastUpdated = profile.updated_at ? new Date(profile.updated_at) : null
   return (
     <div className="card">
       <Avatar url={profile.avatar_url} size={50} />
       <p>Username: {profile.username}</p>
       <p>Website: {profile.website}</p>
+      <p>
+        <small>
+          Last updated{' '}
+          {lastUpdated
+            ? `${lastUpdated.toLocaleDateString()} ${lastUpdated.toLocaleTimeString()}`
+            : 'Never'}
+        </small>
+      </p>
     </div>
   )
 }

example/next-storage/components/ProfileList.tsx

@@ -4,27 +4,25 @@ import { Subscription, SupabaseRealtimePayload } from '@supabase/supabase-js'
 import { supabase } from '../lib/api'
 import { useState, useEffect } from 'react'
 
-var realtimeProfiles: Subscription | null
-
 export default function ProfileList() {
   const [profiles, setProfiles] = useState<Profile[]>([])
 
   useEffect(() => {
     getPublicProfiles()
 
-    realtimeProfiles = supabase
+    const realtimeProfiles = supabase
       .from('profiles')
       .on('*', (payload: SupabaseRealtimePayload<Profile>) => profileUpdated(payload.new))
       .subscribe()
 
     return () => {
       supabase.removeSubscription(realtimeProfiles)
-      realtimeProfiles = null
     }
   }, [])
 
   function profileUpdated(profile: Profile) {
     const otherProfiles = profiles?.filter((x) => x.id != profile.id)
+    console.log('otherProfiles', otherProfiles)
     setProfiles([profile, ...otherProfiles])
   }
 

example/next-storage/lib/constants.ts

@@ -8,4 +8,5 @@ export type Profile = {
   avatar_url: string
   username: string
   website: string
+  updated_at: string
 }