fix: show channel joining banner on mobile

mobile/src/components/features/chat-space/ChatInterface.tsx

@@ -1,6 +1,6 @@
 import { IonHeader, IonFooter, IonContent, useIonViewWillEnter, IonBackButton, IonButton, IonIcon, IonSpinner } from '@ionic/react'
 import { useFrappeGetCall } from 'frappe-react-sdk'
-import { useMemo, useRef, createContext, useState } from 'react'
+import { useMemo, useRef, createContext, useState, useContext } from 'react'
 import { ErrorBanner } from '../../layout'
 import { ChatInput } from '../chat-input'
 import { ChatHeader } from './chat-header'
@@ -15,6 +15,8 @@ import { useInView } from 'react-intersection-observer'
 import { DateSeparator } from './chat-view/DateSeparator'
 import { MessageBlockItem } from './chat-view/MessageBlock'
 import ChatViewFirstMessage from './chat-view/ChatViewFirstMessage'
+import { UserContext } from '@/utils/auth/UserProvider'
+import JoinChannelButton from './JoinChannelButton'
 
 export type ChannelMembersMap = Record<string, UserFields>
 export const ChannelMembersContext = createContext<ChannelMembersMap>({})
@@ -76,7 +78,7 @@ export const ChatInterface = ({ channel }: { channel: ChannelListItem | DMChanne
 
     const { data: channelMembers } = useFrappeGetCall<{ message: ChannelMembersMap }>('raven.api.chat.get_channel_members', {
         channel_id: channel.name
-    }, undefined, {
+    }, `raven.api.chat.get_channel_members.${channel.name}`, {
         revalidateOnFocus: false,
         revalidateIfStale: false,
         revalidateOnReconnect: false
@@ -101,6 +103,16 @@ export const ChatInterface = ({ channel }: { channel: ChannelListItem | DMChanne
 
     const [isScrolling, setIsScrolling] = useState(false)
 
+    const { currentUser } = useContext(UserContext)
+    const isUserInChannel = useMemo(() => {
+        if (currentUser && channelMembers) {
+            return currentUser in channelMembers.message
+        }
+        return false
+    }, [currentUser, channelMembers])
+
+    const isDM = channel?.is_direct_message === 1 || channel?.is_self_message === 1
+
     return (
         <>
             <IonHeader>
@@ -199,18 +211,22 @@ export const ChatInterface = ({ channel }: { channel: ChannelListItem | DMChanne
                 hidden={!!error}
                 className='block relative z-10 order-1 w-full'
             >
-                <div
-                    className='overflow-visible 
+                {channel && channel.is_archived === 0 && !isDM && !isUserInChannel && channel.type !== 'Open' ?
+                    <JoinChannelButton channelData={channel} /> :
+
+                    <div
+                        className='overflow-visible 
                     text-foreground
                     bg-background
                     border-t-gray-4
                     border-t
                     px-1
                     pb-2
                     pt-1'
-                >
-                    <ChatInput channelID={channel.name} allMembers={parsedMembers} allChannels={parsedChannels} />
-                </div>
+                    >
+                        <ChatInput channelID={channel.name} allMembers={parsedMembers} allChannels={parsedChannels} />
+                    </div>
+                }
             </IonFooter>
             <MessageActionModal selectedMessage={selectedMessage} onDismiss={onDismiss} />
         </>

mobile/src/components/features/chat-space/JoinChannelButton.tsx

@@ -0,0 +1,51 @@
+import { ChannelListItem } from "@/utils/channel/ChannelListProvider"
+import { useFrappeCreateDoc, useSWRConfig } from "frappe-react-sdk"
+import { Box, Flex, Text, Button } from "@radix-ui/themes"
+import { ErrorBanner } from "@/components/layout"
+import { useContext } from "react"
+import { UserContext } from "@/utils/auth/UserProvider"
+interface JoinChannelBoxProps {
+    channelData: ChannelListItem,
+}
+
+const JoinChannelButton = ({ channelData }: JoinChannelBoxProps) => {
+
+    const { currentUser } = useContext(UserContext)
+    const { mutate } = useSWRConfig()
+    const { createDoc, error, loading } = useFrappeCreateDoc()
+
+    const joinChannel = async () => {
+        return createDoc('Raven Channel Member', {
+            channel_id: channelData?.name,
+            user_id: currentUser
+        }).then(() => {
+
+            mutate(`raven.api.chat.get_channel_members.${channelData.name}`)
+        })
+    }
+
+    return (
+        <Box>
+            <Flex
+                direction='column'
+                align='center'
+                gap='3'
+                className="rounded-md bg-surface animate-fadein"
+                p='4'
+                pb='8'>
+                <ErrorBanner error={error} />
+                <Text as='span'>You are not a member of this channel.</Text>
+                <Button
+                    onClick={joinChannel}
+                    size='3'
+                    loading={loading}>
+                    <span className="inline-flex gap-1">Join
+                        "{channelData.channel_name}"
+                    </span>
+                </Button>
+            </Flex>
+        </Box>
+    )
+}
+
+export default JoinChannelButton