Refactor components (#81)
This commit is contained in:
Maria Rushkova
GitHub
parent
a34dbeeb32
commit
c929c26172
|
|
@ -1,55 +1,10 @@
|
|||
import React, { useEffect, useMemo } from "react";
|
||||
import React, { useMemo } from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { useNarrow } from "../contexts/narrowProvider";
|
||||
import { ChannelData, channels } from "../helpers/channelsMock";
|
||||
|
||||
import { MutedIcon } from "./Icons/MutedIcon";
|
||||
import { textMediumStyles } from "./Text";
|
||||
|
||||
interface ChannelsProps {
|
||||
notifications: { [id: string]: number };
|
||||
clearNotifications: (id: string) => void;
|
||||
onCommunityClick: (val: ChannelData) => void;
|
||||
activeChannelId: number;
|
||||
}
|
||||
|
||||
export function Channels({
|
||||
notifications,
|
||||
onCommunityClick,
|
||||
clearNotifications,
|
||||
activeChannelId,
|
||||
}: ChannelsProps) {
|
||||
useEffect(() => {
|
||||
const channel = channels.find((channel) => channel.id === activeChannelId);
|
||||
if (channel) {
|
||||
if (notifications[channel.name] > 0) {
|
||||
clearNotifications(channel.name);
|
||||
}
|
||||
}
|
||||
}, [notifications, activeChannelId]);
|
||||
|
||||
return (
|
||||
<ChannelList>
|
||||
{channels.map((channel) => (
|
||||
<Channel
|
||||
key={channel.id}
|
||||
channel={channel}
|
||||
isActive={channel.id === activeChannelId}
|
||||
isMuted={channel.isMuted || false}
|
||||
notification={
|
||||
notifications[channel.name] > 0 && !channel.isMuted
|
||||
? notifications[channel.name]
|
||||
: undefined
|
||||
}
|
||||
onClick={() => {
|
||||
onCommunityClick(channel);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</ChannelList>
|
||||
);
|
||||
}
|
||||
import { useNarrow } from "../../contexts/narrowProvider";
|
||||
import { ChannelData } from "../../helpers/channelsMock";
|
||||
import { MutedIcon } from "../Icons/MutedIcon";
|
||||
import { textMediumStyles } from "../Text";
|
||||
|
||||
interface ChannelProps {
|
||||
channel: ChannelData;
|
||||
|
|
@ -118,26 +73,6 @@ export function Channel({
|
|||
);
|
||||
}
|
||||
|
||||
const ChannelDescription = styled.p`
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.1px;
|
||||
color: ${({ theme }) => theme.secondary};
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
export const ChannelList = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const ChannelWrapper = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -216,6 +151,16 @@ export const ChannelName = styled.p`
|
|||
}
|
||||
`;
|
||||
|
||||
const ChannelDescription = styled.p`
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.1px;
|
||||
color: ${({ theme }) => theme.secondary};
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
const NotificationBagde = styled.div`
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
import React, { useEffect } from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { ChannelData, channels } from "../../helpers/channelsMock";
|
||||
|
||||
import { Channel } from "./Channel";
|
||||
|
||||
interface ChannelsProps {
|
||||
notifications: { [id: string]: number };
|
||||
clearNotifications: (id: string) => void;
|
||||
onCommunityClick: (val: ChannelData) => void;
|
||||
activeChannelId: number;
|
||||
}
|
||||
|
||||
export function Channels({
|
||||
notifications,
|
||||
onCommunityClick,
|
||||
clearNotifications,
|
||||
activeChannelId,
|
||||
}: ChannelsProps) {
|
||||
useEffect(() => {
|
||||
const channel = channels.find((channel) => channel.id === activeChannelId);
|
||||
if (channel) {
|
||||
if (notifications[channel.name] > 0) {
|
||||
clearNotifications(channel.name);
|
||||
}
|
||||
}
|
||||
}, [notifications, activeChannelId]);
|
||||
|
||||
return (
|
||||
<ChannelList>
|
||||
{channels.map((channel) => (
|
||||
<Channel
|
||||
key={channel.id}
|
||||
channel={channel}
|
||||
isActive={channel.id === activeChannelId}
|
||||
isMuted={channel.isMuted || false}
|
||||
notification={
|
||||
notifications[channel.name] > 0 && !channel.isMuted
|
||||
? notifications[channel.name]
|
||||
: undefined
|
||||
}
|
||||
onClick={() => {
|
||||
onCommunityClick(channel);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</ChannelList>
|
||||
);
|
||||
}
|
||||
|
||||
export const ChannelList = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
`;
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { ChannelData } from "../helpers/channelsMock";
|
||||
import { ChannelData } from "../../helpers/channelsMock";
|
||||
import { textMediumStyles } from "../Text";
|
||||
|
||||
import { ChannelInfo, ChannelLogo, ChannelName } from "./Channels";
|
||||
import { textMediumStyles } from "./Text";
|
||||
import { ChannelInfo, ChannelLogo, ChannelName } from "./Channel";
|
||||
|
||||
type EmptyChannelProps = {
|
||||
channel: ChannelData;
|
||||
|
|
@ -8,10 +8,10 @@ import { useMessenger } from "../hooks/useMessenger";
|
|||
import { Metadata } from "../models/Metadata";
|
||||
import { Theme } from "../styles/themes";
|
||||
|
||||
import { Channels } from "./Channels";
|
||||
import { Channels } from "./Channels/Channels";
|
||||
import { ChatBody } from "./Chat/ChatBody";
|
||||
import { Community } from "./Community";
|
||||
import { Members } from "./Members";
|
||||
import { Members } from "./Members/Members";
|
||||
import { CommunityModal } from "./Modals/CommunityModal";
|
||||
|
||||
interface ChatProps {
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@ import { CommunityData } from "../../helpers/communityMock";
|
|||
import { ChatMessage } from "../../models/ChatMessage";
|
||||
import { Metadata } from "../../models/Metadata";
|
||||
import { Theme } from "../../styles/themes";
|
||||
import { Channel } from "../Channels";
|
||||
import { Channel } from "../Channels/Channel";
|
||||
import { EmptyChannel } from "../Channels/EmptyChannel";
|
||||
import { Community } from "../Community";
|
||||
import { EmptyChannel } from "../EmptyChannel";
|
||||
import { MembersIcon } from "../Icons/MembersIcon";
|
||||
import { NarrowChannels } from "../NarrowMode/NarrowChannels";
|
||||
import { NarrowMembers } from "../NarrowMode/NarrowMembers";
|
||||
|
|
|
|||
|
|
@ -1,212 +0,0 @@
|
|||
import React, { useCallback } from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { useNarrow } from "../contexts/narrowProvider";
|
||||
import { CommunityData } from "../helpers/communityMock";
|
||||
|
||||
import { Icon } from "./Chat/ChatMessages";
|
||||
import { UserIcon } from "./Icons/UserIcon";
|
||||
|
||||
interface MembersProps {
|
||||
community: CommunityData;
|
||||
setShowChannels: (val: boolean) => void;
|
||||
}
|
||||
|
||||
export function Members({ community, setShowChannels }: MembersProps) {
|
||||
return (
|
||||
<MembersWrapper>
|
||||
<MemberHeading>Members</MemberHeading>
|
||||
<MembersList community={community} setShowChannels={setShowChannels} />
|
||||
</MembersWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
interface MembersListProps {
|
||||
community: CommunityData;
|
||||
setShowChannels: (val: boolean) => void;
|
||||
setShowMembers?: (val: boolean) => void;
|
||||
}
|
||||
|
||||
export function MembersList({
|
||||
community,
|
||||
setShowChannels,
|
||||
setShowMembers,
|
||||
}: MembersListProps) {
|
||||
return (
|
||||
<MembersListWrap>
|
||||
<MemberCategory>
|
||||
<MemberCategoryName>You</MemberCategoryName>
|
||||
<MemberData>
|
||||
<MemberIcon>
|
||||
<UserIcon memberView={true} />
|
||||
</MemberIcon>
|
||||
<MemberName>Guest564732</MemberName>
|
||||
</MemberData>
|
||||
</MemberCategory>
|
||||
<MemberCategory>
|
||||
<MemberCategoryName>Online</MemberCategoryName>
|
||||
{community.membersList
|
||||
.filter((member) => member.isOnline)
|
||||
.map((member) => (
|
||||
<Member
|
||||
key={member.id}
|
||||
member={member}
|
||||
isOnline={member.isOnline}
|
||||
setShowChannels={setShowChannels}
|
||||
setShowMembers={setShowMembers}
|
||||
/>
|
||||
))}
|
||||
</MemberCategory>
|
||||
<MemberCategory>
|
||||
<MemberCategoryName>Offline</MemberCategoryName>
|
||||
{community.membersList
|
||||
.filter((member) => !member.isOnline)
|
||||
.map((member) => (
|
||||
<Member
|
||||
key={member.id}
|
||||
member={member}
|
||||
isOnline={member.isOnline}
|
||||
setShowChannels={setShowChannels}
|
||||
setShowMembers={setShowMembers}
|
||||
/>
|
||||
))}
|
||||
</MemberCategory>
|
||||
</MembersListWrap>
|
||||
);
|
||||
}
|
||||
|
||||
interface MemberProps {
|
||||
member: any;
|
||||
isOnline: boolean;
|
||||
setShowChannels: (val: boolean) => void;
|
||||
setShowMembers?: (val: boolean) => void;
|
||||
}
|
||||
|
||||
export function Member({
|
||||
member,
|
||||
isOnline,
|
||||
setShowChannels,
|
||||
setShowMembers,
|
||||
}: MemberProps) {
|
||||
const narrow = useNarrow();
|
||||
|
||||
const switchMemberList = useCallback(() => {
|
||||
setShowChannels(false);
|
||||
if (setShowMembers) setShowMembers(false);
|
||||
}, [setShowMembers]);
|
||||
|
||||
return (
|
||||
<MemberData
|
||||
onClick={() =>
|
||||
narrow && setShowMembers ? switchMemberList() : setShowChannels(true)
|
||||
}
|
||||
>
|
||||
<MemberIcon
|
||||
style={{
|
||||
backgroundImage: member.avatar ? `url(${member.avatar})` : "unset",
|
||||
}}
|
||||
className={isOnline ? "online" : "offline"}
|
||||
>
|
||||
{!member.avatar && <UserIcon memberView={true} />}
|
||||
</MemberIcon>
|
||||
<MemberName>{member.name}</MemberName>
|
||||
</MemberData>
|
||||
);
|
||||
}
|
||||
|
||||
const MembersWrapper = styled.div`
|
||||
width: 18%;
|
||||
height: 100%;
|
||||
min-width: 164px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: ${({ theme }) => theme.sectionBackgroundColor};
|
||||
padding: 16px;
|
||||
`;
|
||||
|
||||
const MemberHeading = styled.h2`
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
color: ${({ theme }) => theme.primary};
|
||||
margin-bottom: 16px;
|
||||
`;
|
||||
|
||||
const MemberCategoryName = styled.h3`
|
||||
font-weight: normal;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: ${({ theme }) => theme.secondary};
|
||||
margin-bottom: 8px;
|
||||
`;
|
||||
|
||||
const MemberName = styled.p`
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
color: ${({ theme }) => theme.primary};
|
||||
opacity: 0.7;
|
||||
margin-left: 8px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
const MembersListWrap = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const MemberCategory = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 16px;
|
||||
`;
|
||||
|
||||
const MemberData = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
`;
|
||||
|
||||
const MemberIcon = styled(Icon)`
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.offline {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
bottom: -2px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background-color: ${({ theme }) => theme.secondary};
|
||||
border: 2px solid ${({ theme }) => theme.bodyBackgroundColor};
|
||||
}
|
||||
}
|
||||
|
||||
&.online {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
bottom: -2px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background-color: #4ebc60;
|
||||
border: 2px solid ${({ theme }) => theme.bodyBackgroundColor};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
import React, { useCallback } from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { useNarrow } from "../../contexts/narrowProvider";
|
||||
import { Icon } from "../Chat/ChatMessages";
|
||||
import { UserIcon } from "../Icons/UserIcon";
|
||||
|
||||
interface MemberProps {
|
||||
member: any;
|
||||
isOnline: boolean;
|
||||
setShowChannels: (val: boolean) => void;
|
||||
setShowMembers?: (val: boolean) => void;
|
||||
}
|
||||
|
||||
export function Member({
|
||||
member,
|
||||
isOnline,
|
||||
setShowChannels,
|
||||
setShowMembers,
|
||||
}: MemberProps) {
|
||||
const narrow = useNarrow();
|
||||
|
||||
const switchMemberList = useCallback(() => {
|
||||
setShowChannels(false);
|
||||
if (setShowMembers) setShowMembers(false);
|
||||
}, [setShowMembers]);
|
||||
|
||||
return (
|
||||
<MemberData
|
||||
onClick={() =>
|
||||
narrow && setShowMembers ? switchMemberList() : setShowChannels(true)
|
||||
}
|
||||
>
|
||||
<MemberIcon
|
||||
style={{
|
||||
backgroundImage: member.avatar ? `url(${member.avatar})` : "unset",
|
||||
}}
|
||||
className={isOnline ? "online" : "offline"}
|
||||
>
|
||||
{!member.avatar && <UserIcon memberView={true} />}
|
||||
</MemberIcon>
|
||||
<MemberName>{member.name}</MemberName>
|
||||
</MemberData>
|
||||
);
|
||||
}
|
||||
|
||||
export const MemberData = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
`;
|
||||
|
||||
export const MemberName = styled.p`
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
color: ${({ theme }) => theme.primary};
|
||||
opacity: 0.7;
|
||||
margin-left: 8px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
export const MemberIcon = styled(Icon)`
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.offline {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
bottom: -2px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background-color: ${({ theme }) => theme.secondary};
|
||||
border: 2px solid ${({ theme }) => theme.bodyBackgroundColor};
|
||||
}
|
||||
}
|
||||
|
||||
&.online {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
bottom: -2px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background-color: #4ebc60;
|
||||
border: 2px solid ${({ theme }) => theme.bodyBackgroundColor};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { CommunityData } from "../../helpers/communityMock";
|
||||
|
||||
import { MembersList } from "./MembersList";
|
||||
|
||||
interface MembersProps {
|
||||
community: CommunityData;
|
||||
setShowChannels: (val: boolean) => void;
|
||||
}
|
||||
|
||||
export function Members({ community, setShowChannels }: MembersProps) {
|
||||
return (
|
||||
<MembersWrapper>
|
||||
<MemberHeading>Members</MemberHeading>
|
||||
<MembersList community={community} setShowChannels={setShowChannels} />
|
||||
</MembersWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
const MembersWrapper = styled.div`
|
||||
width: 18%;
|
||||
height: 100%;
|
||||
min-width: 164px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: ${({ theme }) => theme.sectionBackgroundColor};
|
||||
padding: 16px;
|
||||
`;
|
||||
|
||||
const MemberHeading = styled.h2`
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
color: ${({ theme }) => theme.primary};
|
||||
margin-bottom: 16px;
|
||||
`;
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
|
||||
import { CommunityData } from "../../helpers/communityMock";
|
||||
import { UserIcon } from "../Icons/UserIcon";
|
||||
|
||||
import { Member, MemberData, MemberIcon } from "./Member";
|
||||
|
||||
interface MembersListProps {
|
||||
community: CommunityData;
|
||||
setShowChannels: (val: boolean) => void;
|
||||
setShowMembers?: (val: boolean) => void;
|
||||
}
|
||||
|
||||
export function MembersList({
|
||||
community,
|
||||
setShowChannels,
|
||||
setShowMembers,
|
||||
}: MembersListProps) {
|
||||
return (
|
||||
<MembersListWrap>
|
||||
<MemberCategory>
|
||||
<MemberCategoryName>You</MemberCategoryName>
|
||||
<MemberData>
|
||||
<MemberIcon>
|
||||
<UserIcon memberView={true} />
|
||||
</MemberIcon>
|
||||
<MemberName>Guest564732</MemberName>
|
||||
</MemberData>
|
||||
</MemberCategory>
|
||||
<MemberCategory>
|
||||
<MemberCategoryName>Online</MemberCategoryName>
|
||||
{community.membersList
|
||||
.filter((member) => member.isOnline)
|
||||
.map((member) => (
|
||||
<Member
|
||||
key={member.id}
|
||||
member={member}
|
||||
isOnline={member.isOnline}
|
||||
setShowChannels={setShowChannels}
|
||||
setShowMembers={setShowMembers}
|
||||
/>
|
||||
))}
|
||||
</MemberCategory>
|
||||
<MemberCategory>
|
||||
<MemberCategoryName>Offline</MemberCategoryName>
|
||||
{community.membersList
|
||||
.filter((member) => !member.isOnline)
|
||||
.map((member) => (
|
||||
<Member
|
||||
key={member.id}
|
||||
member={member}
|
||||
isOnline={member.isOnline}
|
||||
setShowChannels={setShowChannels}
|
||||
setShowMembers={setShowMembers}
|
||||
/>
|
||||
))}
|
||||
</MemberCategory>
|
||||
</MembersListWrap>
|
||||
);
|
||||
}
|
||||
|
||||
const MembersListWrap = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const MemberCategory = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 16px;
|
||||
`;
|
||||
|
||||
const MemberCategoryName = styled.h3`
|
||||
font-weight: normal;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: ${({ theme }) => theme.secondary};
|
||||
margin-bottom: 8px;
|
||||
`;
|
||||
|
||||
const MemberName = styled.p`
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
color: ${({ theme }) => theme.primary};
|
||||
opacity: 0.7;
|
||||
margin-left: 8px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
|
@ -2,7 +2,7 @@ import React from "react";
|
|||
import styled from "styled-components";
|
||||
|
||||
import { ChannelData } from "../../helpers/channelsMock";
|
||||
import { Channels } from "../Channels";
|
||||
import { Channels } from "../Channels/Channels";
|
||||
|
||||
import { NarrowTopbar } from "./NarrowTopbar";
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from "react";
|
|||
import styled from "styled-components";
|
||||
|
||||
import { CommunityData } from "../../helpers/communityMock";
|
||||
import { MembersList } from "../Members";
|
||||
import { MembersList } from "../Members/MembersList";
|
||||
|
||||
import { NarrowTopbar } from "./NarrowTopbar";
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
export const Font = "Inter, sans-serif";
|
||||
Loading…
Reference in New Issue