allow interaction only if account is member

packages/status-react/src/protocol/use-account.tsx

@@ -9,7 +9,7 @@ export const useAccount = () => {
     account,
     createAccount: () => client.createAccount(),
     deleteAccount: () => client.deleteAccount(),
-    isMember: account ? client.community.isMember(account.chatKey) : false,
+    isMember: account?.membership === 'approved',
   } as const
 }
 

packages/status-react/src/routes/chat/components/chat-input/index.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 
 import { useChatContext } from '../../../../contexts/chat-context'
+import { useAccount } from '../../../../protocol'
 // import { EmojiIcon } from '../../../../icons/emoji-icon'
 // import { GifIcon } from '../../../../icons/gif-icon'
 // import { ImageIcon } from '../../../../icons/image-icon'
@@ -19,6 +20,8 @@ interface Props {
 export const ChatInput = (props: Props) => {
   const { value, editing, onSubmit } = props
 
+  const { isMember } = useAccount()
+
   const [inputValue, setInputValue] = useState(value ?? '')
   const { state, dispatch } = useChatContext()
 
@@ -56,10 +59,15 @@ export const ChatInput = (props: Props) => {
         <InputWrapper>
           <Input
             ref={inputRef}
-            placeholder="Message"
+            placeholder={
+              isMember
+                ? 'Message'
+                : 'You need to join this community to send messages'
+            }
             value={inputValue}
             onChange={handleChange}
             onKeyDown={handleKeyDown}
+            disabled={!isMember}
           />
           {/* <Flex>
             <IconButton label="Pick emoji">
@@ -109,4 +117,13 @@ const Input = styled('input', {
   background: 'none',
   alignItems: 'center',
   width: '100%',
+  fontSize: '15px',
+
+  '&:disabled': {
+    cursor: 'not-allowed',
+  },
+
+  '&::placeholder': {
+    color: '$accent-5',
+  },
 })

packages/status-react/src/routes/chat/components/chat-message/index.tsx

@@ -6,7 +6,7 @@ import { useMatch } from 'react-router-dom'
 import { useChatContext } from '../../../../contexts/chat-context'
 // import { BellIcon } from '../../../../icons/bell-icon'
 // import { PinIcon } from '../../../../icons/pin-icon'
-import { useProtocol } from '../../../../protocol'
+import { useAccount, useProtocol } from '../../../../protocol'
 import { keyframes, styled } from '../../../../styles/config'
 import {
   Avatar,
@@ -60,6 +60,7 @@ export const ChatMessage = (props: Props) => {
   const { message, collapse, highlight } = props
 
   const { client, account } = useProtocol()
+  const { isMember } = useAccount()
   const { params } = useMatch(':id')!
 
   const chatId = params.id!
@@ -237,7 +238,7 @@ export const ChatMessage = (props: Props) => {
         {response && <MessageReply message={response} />}
         {renderMessage()}
 
-        {account && (
+        {isMember && (
           <Actions
             owner={owner}
             pinned={pinned}
@@ -268,8 +269,8 @@ const backgroundAnimation = keyframes({
 // TODO: Use compound variants https://stitches.dev/docs/variants#compound-variants
 const Wrapper = styled('div', {
   position: 'relative',
-  padding: '2px 16px',
-  marginTop: 14,
+  padding: '8px 16px',
+  marginTop: 2,
   gap: '$2',
 
   transitionProperty: 'background-color, border-color, color, fill, stroke',

packages/status-react/src/routes/chat/components/chat-message/reactions.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 
 import {
   emojis,
@@ -19,9 +19,13 @@ interface Props {
 export const MessageReactions = (props: Props) => {
   const { reactions, onClick } = props
 
+  const { isMember } = useAccount()
+
   const [open, setOpen] = useState(false)
 
-  const hasReaction = Object.values(reactions).some(value => value.size > 0)
+  const hasReaction = useMemo(() => {
+    return Object.values(reactions).some(value => value.size > 0)
+  }, [reactions])
 
   if (hasReaction === false) {
     return null
@@ -43,16 +47,18 @@ export const MessageReactions = (props: Props) => {
         />
       ))}
 
-      <ReactionPopover
-        open={open}
-        onOpenChange={setOpen}
-        reactions={reactions}
-        onClick={handlePopoverClick}
-      >
-        <AddReactionButton aria-label="Add Reaction">
-          <ReactionIcon width={16} height={16} />
-        </AddReactionButton>
-      </ReactionPopover>
+      {isMember && (
+        <ReactionPopover
+          open={open}
+          onOpenChange={setOpen}
+          reactions={reactions}
+          onClick={handlePopoverClick}
+        >
+          <AddReactionButton aria-label="Add Reaction">
+            <ReactionIcon width={16} height={16} />
+          </AddReactionButton>
+        </ReactionPopover>
+      )}
     </Flex>
   )
 }

packages/status-react/src/routes/chat/index.tsx

@@ -6,7 +6,7 @@ import { useLocation, useMatch } from 'react-router-dom'
 import { MemberSidebar } from '../../components/member-sidebar'
 import { useAppState } from '../../contexts/app-context'
 import { ChatProvider, useChatContext } from '../../contexts/chat-context'
-import { useAccount, useChat, useMessages, useProtocol } from '../../protocol'
+import { useChat, useMessages, useProtocol } from '../../protocol'
 import { styled } from '../../styles/config'
 import { Avatar, Flex, Heading, Text } from '../../system'
 import { ChatInput } from './components/chat-input'
@@ -44,7 +44,6 @@ const ChatStart = (props: ChatStartProps) => {
 const Body = () => {
   const { client } = useProtocol()
   const { state } = useChatContext()
-  const { account } = useAccount()
 
   const { params } = useMatch(':id')! // eslint-disable-line @typescript-eslint/no-non-null-assertion
   const chatId = params.id!
@@ -125,7 +124,7 @@ const Body = () => {
   return (
     <>
       <ContentWrapper ref={contentRef}>{renderContent()}</ContentWrapper>
-      {account && <ChatInput onSubmit={handleMessageSubmit} />}
+      <ChatInput onSubmit={handleMessageSubmit} />
     </>
   )
 }