From 296f6856fc3100984016c224f63786cf4c95afc4 Mon Sep 17 00:00:00 2001 From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com> Date: Mon, 11 Oct 2021 14:54:06 +0200 Subject: [PATCH] Refactor image modal (#61) --- packages/react-chat/src/components/Chat.tsx | 8 -------- packages/react-chat/src/components/Chat/ChatBody.tsx | 3 --- .../react-chat/src/components/Chat/ChatMessages.tsx | 12 ++++++++---- 3 files changed, 8 insertions(+), 15 deletions(-) diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx index bff704b2..eae7cc7f 100644 --- a/packages/react-chat/src/components/Chat.tsx +++ b/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 ( @@ -72,7 +70,6 @@ export function Chat({ theme, community, fetchMetadata }: ChatProps) { onCommunityClick={showModal} lastMessage={lastMessage} fetchMetadata={fetchMetadata} - setImage={setImage} /> {showMembers && !narrow && ( @@ -86,11 +83,6 @@ export function Chat({ theme, community, fetchMetadata }: ChatProps) { description={community.description} publicKey="0xD95DBdaB08A9FED2D71ac9C3028AAc40905d8CF3" /> - setImage("")} - image={image} - /> ); } diff --git a/packages/react-chat/src/components/Chat/ChatBody.tsx b/packages/react-chat/src/components/Chat/ChatBody.tsx index f750bc62..f5247c2a 100644 --- a/packages/react-chat/src/components/Chat/ChatBody.tsx +++ b/packages/react-chat/src/components/Chat/ChatBody.tsx @@ -36,7 +36,6 @@ interface ChatBodyProps { onCommunityClick: () => void; lastMessage: Date; fetchMetadata?: (url: string) => Promise; - 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} /> ) : ( diff --git a/packages/react-chat/src/components/Chat/ChatMessages.tsx b/packages/react-chat/src/components/Chat/ChatMessages.tsx index 072ea35b..1b9f3134 100644 --- a/packages/react-chat/src/components/Chat/ChatMessages.tsx +++ b/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; - - setImage: (image: string) => void; }; export function ChatMessages({ messages, loadNextDay, fetchMetadata, - - setImage, }: ChatMessagesProps) { const [scrollOnBot, setScrollOnBot] = useState(true); const ref = useRef(null); @@ -54,8 +51,15 @@ export function ChatMessages({ return () => ref.current?.removeEventListener("scroll", setScroll); }, [ref, scrollOnBot]); + const [image, setImage] = useState(""); + return ( + setImage("")} + image={image} + /> {messages.map((message, idx) => { return (