index.tsx raw

   1  import ChannelView from '@/components/Chat/ChannelView'
   2  import { Button } from '@/components/ui/button'
   3  import { Titlebar } from '@/components/Titlebar'
   4  import { useSecondaryPage } from '@/PageManager'
   5  import { useChat } from '@/providers/ChatProvider'
   6  import { TPageRef } from '@/types'
   7  import { ChevronLeft } from 'lucide-react'
   8  import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
   9  
  10  interface ChatChannelPageProps {
  11    channelId?: string
  12  }
  13  
  14  const ChatChannelPage = forwardRef<TPageRef, ChatChannelPageProps>(
  15    ({ channelId }, ref) => {
  16      const layoutRef = useRef<TPageRef>(null)
  17      const { selectChannelById } = useChat()
  18      const { pop } = useSecondaryPage()
  19  
  20      useImperativeHandle(ref, () => layoutRef.current as TPageRef)
  21  
  22      // Select the channel when this page mounts
  23      useEffect(() => {
  24        if (channelId) {
  25          selectChannelById(channelId)
  26        }
  27      }, [channelId, selectChannelById])
  28  
  29      // Clear channel selection when page unmounts
  30      useEffect(() => {
  31        return () => {
  32          selectChannelById(null)
  33        }
  34      }, [])
  35  
  36      const handleBack = () => {
  37        selectChannelById(null)
  38        pop()
  39      }
  40  
  41      return (
  42        <div className="flex flex-col h-[var(--vh)]">
  43          <Titlebar className="p-1 shrink-0" hideBottomBorder>
  44            <div className="flex items-center w-full px-1">
  45              <Button
  46                className="flex gap-1 items-center justify-start pl-2 pr-1"
  47                variant="ghost"
  48                size="titlebar-icon"
  49                title="Back to channels"
  50                onClick={handleBack}
  51              >
  52                <ChevronLeft />
  53              </Button>
  54            </div>
  55          </Titlebar>
  56          <div className="flex-1 min-h-0">
  57            <ChannelView />
  58          </div>
  59        </div>
  60      )
  61    }
  62  )
  63  
  64  ChatChannelPage.displayName = 'ChatChannelPage'
  65  export default ChatChannelPage
  66