Add modal for images (#60)

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

@@ -12,6 +12,7 @@ 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;
@@ -40,6 +41,7 @@ export function Chat({ theme, community, fetchMetadata }: ChatProps) {
 
   const [isModalVisible, setIsModalVisible] = useState(false);
   const showModal = () => setIsModalVisible(true);
+  const [image, setImage] = useState("");
 
   return (
     <ChatWrapper>
@@ -70,6 +72,7 @@ export function Chat({ theme, community, fetchMetadata }: ChatProps) {
         onCommunityClick={showModal}
         lastMessage={lastMessage}
         fetchMetadata={fetchMetadata}
+        setImage={setImage}
       />
       {showMembers && !narrow && (
         <Members community={community} setShowChannels={setShowChannels} />
@@ -83,6 +86,11 @@ 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,6 +36,7 @@ interface ChatBodyProps {
   onCommunityClick: () => void;
   lastMessage: Date;
   fetchMetadata?: (url: string) => Promise<Metadata | undefined>;
+  setImage: (image: string) => void;
 }
 
 export function ChatBody({
@@ -55,6 +56,7 @@ export function ChatBody({
   onCommunityClick,
   lastMessage,
   fetchMetadata,
+  setImage,
 }: ChatBodyProps) {
   const narrow = useNarrow();
   const [showChannelsList, setShowChannelsList] = useState(false);
@@ -117,6 +119,7 @@ export function ChatBody({
                     messages={messages}
                     loadNextDay={loadNextDay}
                     fetchMetadata={fetchMetadata}
+                    setImage={setImage}
                   />
                 ) : (
                   <LoadingSkeleton />

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

@@ -13,11 +13,15 @@ const regEx =
 type ChatMessageContentProps = {
   message: ChatMessage;
   fetchMetadata?: (url: string) => Promise<Metadata | undefined>;
+
+  setImage: (image: string) => void;
 };
 
 export function ChatMessageContent({
   message,
   fetchMetadata,
+
+  setImage,
 }: ChatMessageContentProps) {
   const { content, image } = useMemo(() => message, [message]);
   const [elements, setElements] = useState<(string | React.ReactElement)[]>([
@@ -71,7 +75,15 @@ export function ChatMessageContent({
   return (
     <ContentWrapper>
       <div>{elements.map((el) => el)}</div>
-      {image && <MessageImage src={image} />}
+      {image && (
+        <MessageImageWrapper
+          onClick={() => {
+            setImage(image);
+          }}
+        >
+          <MessageImage src={image} />
+        </MessageImageWrapper>
+      )}
       {openGraph && (
         <PreviewWrapper
           onClick={() => window?.open(link, "_blank", "noopener")?.focus()}
@@ -87,13 +99,19 @@ export function ChatMessageContent({
   );
 }
 
-const MessageImage = styled.img`
+const MessageImageWrapper = styled.div`
   width: 147px;
   height: 196px;
-  border-radius: 16px;
   margin-top: 8px;
 `;
 
+const MessageImage = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 16px;
+`;
+
 const PreviewSiteNameWrapper = styled.div`
   font-family: Inter;
   font-style: normal;

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

@@ -12,12 +12,16 @@ 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);
@@ -80,6 +84,7 @@ export function ChatMessages({
                   <ChatMessageContent
                     message={message}
                     fetchMetadata={fetchMetadata}
+                    setImage={setImage}
                   />
                 </MessageText>
               </ContentWrapper>

packages/react-chat/src/components/Modals/Modal.tsx

@@ -44,7 +44,7 @@ export const Modal = ({
     <ModalView>
       <ModalOverlay onClick={onClose} />
       <ModalBody className={className}>
-        <CloseButton onClick={onClose}>
+        <CloseButton onClick={onClose} className={className}>
           <CrossIcon />
         </CloseButton>
         {children}
@@ -75,6 +75,11 @@ const ModalBody = styled.div`
   background: ${({ theme }) => theme.bodyBackgroundColor};
   border-radius: 8px;
   overflow-y: auto;
+
+  &.picture {
+    max-width: 820px;
+    border-radius: 0;
+  }
 `;
 
 const ModalOverlay = styled.div`
@@ -94,4 +99,8 @@ const CloseButton = styled.button`
   top: 12px;
   right: 12px;
   padding: 10px;
+
+  &.picture {
+    display: none;
+  }
 `;

packages/react-chat/src/components/Modals/PictureModal.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import styled from "styled-components";
+
+import { BasicModalProps, Modal } from "./Modal";
+
+interface PictureModalProps extends BasicModalProps {
+  image: string;
+}
+
+export const PictureModal = ({
+  isVisible,
+  onClose,
+  image,
+}: PictureModalProps) => {
+  return (
+    <Modal isVisible={isVisible} onClose={onClose} className="picture">
+      <ModalImageWrapper>
+        <ModalImage src={image}></ModalImage>
+      </ModalImageWrapper>
+    </Modal>
+  );
+};
+
+const ModalImageWrapper = styled.div`
+  display: flex;
+  max-width: 820px;
+  max-height: 820px;
+`;
+
+const ModalImage = styled.img`
+  width: 100%;
+  height: 100%;
+`;