From 173e400e80db820226ebd173301d61e2d2a452e2 Mon Sep 17 00:00:00 2001
From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com>
Date: Fri, 8 Oct 2021 17:40:53 +0200
Subject: [PATCH] Add modal for images (#60)

---
 packages/react-chat/src/components/Chat.tsx   |  8 +++++
 .../src/components/Chat/ChatBody.tsx          |  3 ++
 .../components/Chat/ChatMessageContent.tsx    | 24 ++++++++++++--
 .../src/components/Chat/ChatMessages.tsx      |  5 +++
 .../src/components/Modals/Modal.tsx           | 11 ++++++-
 .../src/components/Modals/PictureModal.tsx    | 33 +++++++++++++++++++
 6 files changed, 80 insertions(+), 4 deletions(-)
 create mode 100644 packages/react-chat/src/components/Modals/PictureModal.tsx

diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx
index eae7cc7..bff704b 100644
--- a/packages/react-chat/src/components/Chat.tsx
+++ b/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>
   );
 }
diff --git a/packages/react-chat/src/components/Chat/ChatBody.tsx b/packages/react-chat/src/components/Chat/ChatBody.tsx
index f5247c2..f750bc6 100644
--- a/packages/react-chat/src/components/Chat/ChatBody.tsx
+++ b/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 />
diff --git a/packages/react-chat/src/components/Chat/ChatMessageContent.tsx b/packages/react-chat/src/components/Chat/ChatMessageContent.tsx
index da21f32..4f4e844 100644
--- a/packages/react-chat/src/components/Chat/ChatMessageContent.tsx
+++ b/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;
diff --git a/packages/react-chat/src/components/Chat/ChatMessages.tsx b/packages/react-chat/src/components/Chat/ChatMessages.tsx
index 5be98db..072ea35 100644
--- a/packages/react-chat/src/components/Chat/ChatMessages.tsx
+++ b/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>
diff --git a/packages/react-chat/src/components/Modals/Modal.tsx b/packages/react-chat/src/components/Modals/Modal.tsx
index ec10d6c..0965bc3 100644
--- a/packages/react-chat/src/components/Modals/Modal.tsx
+++ b/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;
+  }
 `;
diff --git a/packages/react-chat/src/components/Modals/PictureModal.tsx b/packages/react-chat/src/components/Modals/PictureModal.tsx
new file mode 100644
index 0000000..87a641f
--- /dev/null
+++ b/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%;
+`;