realtime: Add footer channel to www application (supabase#36707)

Co-authored-by: Ivan Vasilov <[email protected]>

Author: filipecabaco

apps/www/components/Footer/index.tsx

@@ -1,15 +1,18 @@
 import { CheckIcon } from '@heroicons/react/outline'
+import { REALTIME_CHANNEL_STATES } from '@supabase/supabase-js'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { Badge, IconDiscord, IconGitHubSolid, IconTwitterX, IconYoutubeSolid, cn } from 'ui'
-import SectionContainer from '../Layouts/SectionContainer'
+import { useEffect } from 'react'
 
 import * as supabaseLogoWordmarkDark from 'common/assets/images/supabase-logo-wordmark--dark.png'
 import * as supabaseLogoWordmarkLight from 'common/assets/images/supabase-logo-wordmark--light.png'
 import footerData from 'data/Footer'
+import { Badge, IconDiscord, IconGitHubSolid, IconTwitterX, IconYoutubeSolid, cn } from 'ui'
 import { ThemeToggle } from 'ui-patterns/ThemeToggle'
+import supabase from '~/lib/supabase'
 import useDarkLaunchWeeks from '../../hooks/useDarkLaunchWeeks'
+import SectionContainer from '../Layouts/SectionContainer'
 
 interface Props {
   className?: string
@@ -23,6 +26,24 @@ const Footer = (props: Props) => {
   const isGAWeek = pathname.includes('/ga-week')
   const forceDark = isDarkLaunchWeek
 
+  useEffect(() => {
+    const channel = supabase.channel('footer')
+    if (channel.state === REALTIME_CHANNEL_STATES.closed) {
+      channel.subscribe((status: string) => {
+        if (status == 'SUBSCRIBED') {
+          channel.send({
+            type: 'broadcast',
+            event: 'footer_subscribed',
+            payload: { ts: Date.now() },
+          })
+        }
+      })
+    }
+    return () => {
+      channel.unsubscribe()
+    }
+  }, [])
+
   if (props.hideFooter) {
     return null
   }