Refactor channels (#177)

This commit is contained in:
Szymon Szlachtowicz 2022-01-07 14:21:30 +01:00 committed by GitHub
parent bf2e1b0ee2
commit 97532cc88d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 65 additions and 47 deletions

View File

@ -1,4 +1,4 @@
import React, { useEffect } from "react"; import React from "react";
import styled from "styled-components"; import styled from "styled-components";
import { ChatState, useChatState } from "../../contexts/chatStateProvider"; import { ChatState, useChatState } from "../../contexts/chatStateProvider";
@ -45,43 +45,36 @@ function GenerateChannels({ type, onCommunityClick }: GenerateChannelsProps) {
); );
} }
export function Channels({ onCommunityClick }: ChannelsProps) { type ChatsListProps = {
const { clearNotifications, clearMentions, notifications, activeChannel } = onCommunityClick?: () => void;
useMessengerContext(); };
useEffect(() => {
if (activeChannel) {
if (notifications[activeChannel.id] > 0) {
clearNotifications(activeChannel.id);
clearMentions(activeChannel.id);
}
}
}, [notifications, activeChannel]);
const setChatState = useChatState()[1];
const identity = useIdentity();
function ChatsSideBar({ onCommunityClick }: ChatsListProps) {
const setChatState = useChatState()[1];
return (
<>
<ChatsBar>
<Heading>Chat</Heading>
<EditBtn onClick={() => setChatState(ChatState.ChatCreation)}>
<CreateIcon />
</EditBtn>
</ChatsBar>
<ChatsList>
<GenerateChannels type={"group"} onCommunityClick={onCommunityClick} />
<GenerateChannels type={"dm"} onCommunityClick={onCommunityClick} />
</ChatsList>
</>
);
}
export function Channels({ onCommunityClick }: ChannelsProps) {
const identity = useIdentity();
return ( return (
<ChannelList> <ChannelList>
<GenerateChannels type={"channel"} onCommunityClick={onCommunityClick} /> <GenerateChannels type={"channel"} onCommunityClick={onCommunityClick} />
<Chats> <Chats>
{identity ? ( {identity ? (
<> <ChatsSideBar onCommunityClick={onCommunityClick} />
<ChatsBar>
<Heading>Chat</Heading>
<EditBtn onClick={() => setChatState(ChatState.ChatCreation)}>
<CreateIcon />
</EditBtn>
</ChatsBar>
<ChatsList>
<GenerateChannels
type={"group"}
onCommunityClick={onCommunityClick}
/>
<GenerateChannels
type={"dm"}
onCommunityClick={onCommunityClick}
/>
</ChatsList>
</>
) : ( ) : (
<UserCreation permission={true} /> <UserCreation permission={true} />
)} )}

View File

@ -9,11 +9,11 @@ import { textMediumStyles } from "../Text";
import { ChannelInfo, ChannelLogo, ChannelName } from "./Channel"; import { ChannelInfo, ChannelLogo, ChannelName } from "./Channel";
type EmptyChannelProps = { type ChannelBeggingTextProps = {
channel: ChannelData; channel: ChannelData;
}; };
export function EmptyChannel({ channel }: EmptyChannelProps) { function ChannelBeggingText({ channel }: ChannelBeggingTextProps) {
const identity = useIdentity(); const identity = useIdentity();
const { contacts } = useMessengerContext(); const { contacts } = useMessengerContext();
const members = useMemo(() => { const members = useMemo(() => {
@ -25,23 +25,18 @@ export function EmptyChannel({ channel }: EmptyChannelProps) {
} }
return []; return [];
}, [channel, contacts]); }, [channel, contacts]);
return (
<Wrapper>
<ChannelInfoEmpty>
<ChannelLogoEmpty icon={channel.icon}>
{" "}
{!channel.icon && channel.name.slice(0, 1).toUpperCase()}
</ChannelLogoEmpty>
<ChannelNameEmpty active={true} channel={channel} />
</ChannelInfoEmpty>
{channel.type === "dm" ? ( switch (channel.type) {
case "dm":
return (
<EmptyText> <EmptyText>
Any messages you send here are encrypted and can only be read by you Any messages you send here are encrypted and can only be read by you
and <br /> and <br />
<span>{channel.name.slice(0, 10)}</span>. <span>{channel.name.slice(0, 10)}</span>.
</EmptyText> </EmptyText>
) : channel.type === "group" ? ( );
case "group":
return (
<EmptyTextGroup> <EmptyTextGroup>
{identity && <span>{utils.bufToHex(identity.publicKey)}</span>}{" "} {identity && <span>{utils.bufToHex(identity.publicKey)}</span>}{" "}
created a group with{" "} created a group with{" "}
@ -52,11 +47,32 @@ export function EmptyChannel({ channel }: EmptyChannelProps) {
</span> </span>
))} ))}
</EmptyTextGroup> </EmptyTextGroup>
) : ( );
case "channel":
return (
<EmptyText> <EmptyText>
Welcome to the beginning of the <span>#{channel.name}</span> channel! Welcome to the beginning of the <span>#{channel.name}</span> channel!
</EmptyText> </EmptyText>
)} );
}
return null;
}
type EmptyChannelProps = {
channel: ChannelData;
};
export function EmptyChannel({ channel }: EmptyChannelProps) {
return (
<Wrapper>
<ChannelInfoEmpty>
<ChannelLogoEmpty icon={channel.icon}>
{" "}
{!channel.icon && channel.name.slice(0, 1).toUpperCase()}
</ChannelLogoEmpty>
<ChannelNameEmpty active={true} channel={channel} />
</ChannelInfoEmpty>
<ChannelBeggingText channel={channel} />
</Wrapper> </Wrapper>
); );
} }

View File

@ -228,6 +228,15 @@ export function useMessenger(
[messenger, groupChat, activeChannel] [messenger, groupChat, activeChannel]
); );
useEffect(() => {
if (activeChannel) {
if (notifications[activeChannel.id] > 0) {
clearNotifications(activeChannel.id);
clearMentions(activeChannel.id);
}
}
}, [notifications, activeChannel]);
return { return {
messenger, messenger,
messages, messages,