Refactor image modal (#61)

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

@@ -12,7 +12,6 @@ import { Channels } from "./Channels";
 import { ChatBody } from "./Chat/ChatBody";
 import { Members } from "./Members";
 import { CommunityModal } from "./Modals/CommunityModal";
-import { PictureModal } from "./Modals/PictureModal";
 
 interface ChatProps {
   theme: Theme;
@@ -41,7 +40,6 @@ export function Chat({ theme, community, fetchMetadata }: ChatProps) {
 
   const [isModalVisible, setIsModalVisible] = useState(false);
   const showModal = () => setIsModalVisible(true);
-  const [image, setImage] = useState("");
 
   return (
     <ChatWrapper>
@@ -72,7 +70,6 @@ export function Chat({ theme, community, fetchMetadata }: ChatProps) {
         onCommunityClick={showModal}
         lastMessage={lastMessage}
         fetchMetadata={fetchMetadata}
-        setImage={setImage}
       />
       {showMembers && !narrow && (
         <Members community={community} setShowChannels={setShowChannels} />
@@ -86,11 +83,6 @@ export function Chat({ theme, community, fetchMetadata }: ChatProps) {
         description={community.description}
         publicKey="0xD95DBdaB08A9FED2D71ac9C3028AAc40905d8CF3"
       />
-      <PictureModal
-        isVisible={!!image}
-        onClose={() => setImage("")}
-        image={image}
-      />
     </ChatWrapper>
   );
 }

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

@@ -36,7 +36,6 @@ interface ChatBodyProps {
   onCommunityClick: () => void;
   lastMessage: Date;
   fetchMetadata?: (url: string) => Promise<Metadata | undefined>;
-  setImage: (image: string) => void;
 }
 
 export function ChatBody({
@@ -56,7 +55,6 @@ export function ChatBody({
   onCommunityClick,
   lastMessage,
   fetchMetadata,
-  setImage,
 }: ChatBodyProps) {
   const narrow = useNarrow();
   const [showChannelsList, setShowChannelsList] = useState(false);
@@ -119,7 +117,6 @@ export function ChatBody({
                     messages={messages}
                     loadNextDay={loadNextDay}
                     fetchMetadata={fetchMetadata}
-                    setImage={setImage}
                   />
                 ) : (
                   <LoadingSkeleton />

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

@@ -4,6 +4,7 @@ import styled from "styled-components";
 import { ChatMessage } from "../../models/ChatMessage";
 import { Metadata } from "../../models/Metadata";
 import { UserIcon } from "../Icons/UserIcon";
+import { PictureModal } from "../Modals/PictureModal";
 import { textSmallStyles } from "../Text";
 
 import { ChatMessageContent } from "./ChatMessageContent";
@@ -12,16 +13,12 @@ type ChatMessagesProps = {
   messages: ChatMessage[];
   loadNextDay: () => void;
   fetchMetadata?: (url: string) => Promise<Metadata | undefined>;
-
-  setImage: (image: string) => void;
 };
 
 export function ChatMessages({
   messages,
   loadNextDay,
   fetchMetadata,
-
-  setImage,
 }: ChatMessagesProps) {
   const [scrollOnBot, setScrollOnBot] = useState(true);
   const ref = useRef<HTMLHeadingElement>(null);
@@ -54,8 +51,15 @@ export function ChatMessages({
     return () => ref.current?.removeEventListener("scroll", setScroll);
   }, [ref, scrollOnBot]);
 
+  const [image, setImage] = useState("");
+
   return (
     <MessagesWrapper ref={ref}>
+      <PictureModal
+        isVisible={!!image}
+        onClose={() => setImage("")}
+        image={image}
+      />
       {messages.map((message, idx) => {
         return (
           <MessageOuterWrapper key={message.date.getTime()}>