status-im
/
status-web
mirror of https://github.com/status-im/status-web.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Refactor image modal (#61)

This commit is contained in:
Szymon Szlachtowicz 2021-10-11 14:54:06 +02:00 committed by GitHub
parent 173e400e80
commit 296f6856fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/react-chat/src/components/Chat.tsx
View File

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

3
packages/react-chat/src/components/Chat/ChatBody.tsx
View File

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

12
packages/react-chat/src/components/Chat/ChatMessages.tsx
View File

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