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

View File

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

View File

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