diff --git a/packages/react-chat/src/components/Channels.tsx b/packages/react-chat/src/components/Channels/Channel.tsx similarity index 70% rename from packages/react-chat/src/components/Channels.tsx rename to packages/react-chat/src/components/Channels/Channel.tsx index f24d5ea4..f063c05a 100644 --- a/packages/react-chat/src/components/Channels.tsx +++ b/packages/react-chat/src/components/Channels/Channel.tsx @@ -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 ( - - {channels.map((channel) => ( - 0 && !channel.isMuted - ? notifications[channel.name] - : undefined - } - onClick={() => { - onCommunityClick(channel); - }} - /> - ))} - - ); -} +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; diff --git a/packages/react-chat/src/components/Channels/Channels.tsx b/packages/react-chat/src/components/Channels/Channels.tsx new file mode 100644 index 00000000..ac91ea87 --- /dev/null +++ b/packages/react-chat/src/components/Channels/Channels.tsx @@ -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 ( + + {channels.map((channel) => ( + 0 && !channel.isMuted + ? notifications[channel.name] + : undefined + } + onClick={() => { + onCommunityClick(channel); + }} + /> + ))} + + ); +} + +export const ChannelList = styled.div` + display: flex; + flex-direction: column; + overflow-y: scroll; + + &::-webkit-scrollbar { + width: 0; + } +`; diff --git a/packages/react-chat/src/components/EmptyChannel.tsx b/packages/react-chat/src/components/Channels/EmptyChannel.tsx similarity index 93% rename from packages/react-chat/src/components/EmptyChannel.tsx rename to packages/react-chat/src/components/Channels/EmptyChannel.tsx index 30faba55..f6e16275 100644 --- a/packages/react-chat/src/components/EmptyChannel.tsx +++ b/packages/react-chat/src/components/Channels/EmptyChannel.tsx @@ -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; diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx index ca23ce39..9886b7ac 100644 --- a/packages/react-chat/src/components/Chat.tsx +++ b/packages/react-chat/src/components/Chat.tsx @@ -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 { diff --git a/packages/react-chat/src/components/Chat/ChatBody.tsx b/packages/react-chat/src/components/Chat/ChatBody.tsx index a642985a..1656d50e 100644 --- a/packages/react-chat/src/components/Chat/ChatBody.tsx +++ b/packages/react-chat/src/components/Chat/ChatBody.tsx @@ -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"; diff --git a/packages/react-chat/src/components/Members.tsx b/packages/react-chat/src/components/Members.tsx deleted file mode 100644 index c0cdcdb9..00000000 --- a/packages/react-chat/src/components/Members.tsx +++ /dev/null @@ -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 ( - - Members - - - ); -} - -interface MembersListProps { - community: CommunityData; - setShowChannels: (val: boolean) => void; - setShowMembers?: (val: boolean) => void; -} - -export function MembersList({ - community, - setShowChannels, - setShowMembers, -}: MembersListProps) { - return ( - - - You - - - - - Guest564732 - - - - Online - {community.membersList - .filter((member) => member.isOnline) - .map((member) => ( - - ))} - - - Offline - {community.membersList - .filter((member) => !member.isOnline) - .map((member) => ( - - ))} - - - ); -} - -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 ( - - narrow && setShowMembers ? switchMemberList() : setShowChannels(true) - } - > - - {!member.avatar && } - - {member.name} - - ); -} - -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}; - } - } -`; diff --git a/packages/react-chat/src/components/Members/Member.tsx b/packages/react-chat/src/components/Members/Member.tsx new file mode 100644 index 00000000..7d11e75a --- /dev/null +++ b/packages/react-chat/src/components/Members/Member.tsx @@ -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 ( + + narrow && setShowMembers ? switchMemberList() : setShowChannels(true) + } + > + + {!member.avatar && } + + {member.name} + + ); +} + +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}; + } + } +`; diff --git a/packages/react-chat/src/components/Members/Members.tsx b/packages/react-chat/src/components/Members/Members.tsx new file mode 100644 index 00000000..4fbf5c3e --- /dev/null +++ b/packages/react-chat/src/components/Members/Members.tsx @@ -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 ( + + Members + + + ); +} + +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; +`; diff --git a/packages/react-chat/src/components/Members/MembersList.tsx b/packages/react-chat/src/components/Members/MembersList.tsx new file mode 100644 index 00000000..a3cad4ba --- /dev/null +++ b/packages/react-chat/src/components/Members/MembersList.tsx @@ -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 ( + + + You + + + + + Guest564732 + + + + Online + {community.membersList + .filter((member) => member.isOnline) + .map((member) => ( + + ))} + + + Offline + {community.membersList + .filter((member) => !member.isOnline) + .map((member) => ( + + ))} + + + ); +} + +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; +`; diff --git a/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx b/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx index e0fd6684..397dfc8a 100644 --- a/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx +++ b/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx @@ -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"; diff --git a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx b/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx index 81415267..ba46fe6e 100644 --- a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx +++ b/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx @@ -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"; diff --git a/packages/react-chat/src/styles/styles.ts b/packages/react-chat/src/styles/styles.ts deleted file mode 100644 index caf58033..00000000 --- a/packages/react-chat/src/styles/styles.ts +++ /dev/null @@ -1 +0,0 @@ -export const Font = "Inter, sans-serif";