Disable input without identity (#168)

packages/react-chat/src/components/Chat/ChatBody.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
 
+import { useIdentity } from "../../contexts/identityProvider";
 import { useMessengerContext } from "../../contexts/messengerProvider";
 import { useNarrow } from "../../contexts/narrowProvider";
 import { Reply } from "../../hooks/useReply";
@@ -29,7 +30,7 @@ interface ChatBodyProps {
 export function ChatBody({ onClick, showMembers, permission }: ChatBodyProps) {
   const { messenger, activeChannel, communityData } = useMessengerContext();
   const narrow = useNarrow();
-
+  const identity = useIdentity();
   const [editGroup, setEditGroup] = useState(false);
   const className = useMemo(() => (narrow ? "narrow" : ""), [narrow]);
 
@@ -78,7 +79,11 @@ export function ChatBody({ onClick, showMembers, permission }: ChatBodyProps) {
                 ) : (
                   <LoadingSkeleton />
                 )}
-                <ChatInput reply={reply} setReply={setReply} />
+                <ChatInput
+                  reply={reply}
+                  setReply={setReply}
+                  disabled={!identity}
+                />
               </>
             )}
 
@@ -98,7 +103,7 @@ export function ChatBody({ onClick, showMembers, permission }: ChatBodyProps) {
         ) : (
           <>
             <LoadingSkeleton />
-            <ChatInput reply={reply} setReply={setReply} />
+            <ChatInput reply={reply} setReply={setReply} disabled={!identity} />
           </>
         )}
       </ChatBodyWrapper>

packages/react-chat/src/components/Chat/ChatInput.tsx

@@ -28,9 +28,10 @@ import { textMediumStyles, textSmallStyles } from "../Text";
 interface ChatInputProps {
   reply: Reply | undefined;
   setReply: (val: Reply | undefined) => void;
+  disabled: boolean;
 }
 
-export function ChatInput({ reply, setReply }: ChatInputProps) {
+export function ChatInput({ reply, setReply, disabled }: ChatInputProps) {
   const { sendMessage, contacts } = useMessengerContext();
   const theme = useTheme() as Theme;
   const [content, setContent] = useState("");
@@ -228,6 +229,7 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
       <AddPictureInputWrapper>
         <PictureIcon />
         <AddPictureInput
+          disabled={disabled}
           type="file"
           multiple={true}
           accept="image/png, image/jpeg"
@@ -274,7 +276,8 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
               />
             )}
             <Input
-              contentEditable
+              aria-disabled={disabled}
+              contentEditable={!disabled}
               onInput={onInputChange}
               onKeyDown={onInputKeyPress}
               onKeyUp={handleCursorChange}
@@ -295,7 +298,9 @@ export function ChatInput({ reply, setReply }: ChatInputProps) {
             <ChatButton
               onClick={(e) => {
                 e.stopPropagation();
-                setShowEmoji(!showEmoji);
+                if (!disabled) {
+                  setShowEmoji(!showEmoji);
+                }
               }}
             >
               <EmojiIcon isActive={showEmoji} />