init commit,

99_references/supabase-examples/slack-clone/nextjs-slack-clone/pages/channels/[id].js

@@ -0,0 +1,52 @@
+import Layout from '~/components/Layout'
+import Message from '~/components/Message'
+import MessageInput from '~/components/MessageInput'
+import { useRouter } from 'next/router'
+import { useStore, addMessage } from '~/lib/Store'
+import { useContext, useEffect, useRef } from 'react'
+import UserContext from '~/lib/UserContext'
+
+const ChannelsPage = (props) => {
+  const router = useRouter()
+  const { user, authLoaded, signOut } = useContext(UserContext)
+  const messagesEndRef = useRef(null)
+
+  // Else load up the page
+  const { id: channelId } = router.query
+  const { messages, channels } = useStore({ channelId })
+
+  useEffect(() => {
+    messagesEndRef.current.scrollIntoView({
+      block: 'start',
+      behavior: 'smooth',
+    })
+  }, [messages])
+
+  // redirect to public channel when current channel is deleted
+  useEffect(() => {
+    if (!channels.some((channel) => channel.id === Number(channelId))) {
+      router.push('/channels/1')
+    }
+  }, [channels, channelId])
+
+  // Render the channels and messages
+  return (
+    <Layout channels={channels} activeChannelId={channelId}>
+      <div className="relative h-screen">
+        <div className="Messages h-full pb-16">
+          <div className="p-2 overflow-y-auto">
+            {messages.map((x) => (
+              <Message key={x.id} message={x} />
+            ))}
+            <div ref={messagesEndRef} style={{ height: 0 }} />
+          </div>
+        </div>
+        <div className="p-2 absolute bottom-0 left-0 w-full">
+          <MessageInput onSubmit={async (text) => addMessage(text, channelId, user.id)} />
+        </div>
+      </div>
+    </Layout>
+  )
+}
+
+export default ChannelsPage