From 4852d90546a90946923c90ceb67ace2ab5a15985 Mon Sep 17 00:00:00 2001
From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com>
Date: Fri, 19 Nov 2021 09:31:49 +0100
Subject: [PATCH] Refactor channels and providers (#134)

---
 .../src/components/Channels/Channel.tsx       | 132 +++++++++---------
 .../src/components/Channels/Channels.tsx      |  43 ++----
 .../src/components/Channels/EmptyChannel.tsx  |  10 +-
 packages/react-chat/src/components/Chat.tsx   |  15 +-
 .../src/components/Chat/ChatBody.tsx          |  13 +-
 .../src/components/Chat/ChatCreation.tsx      |   7 +-
 .../react-chat/src/components/ChatLoader.tsx  |   5 +-
 .../src/components/Form/ContactMenu.tsx       |  15 +-
 .../src/components/Modals/EditModal.tsx       |  10 +-
 .../src/components/Modals/ProfileModal.tsx    |  26 ++--
 .../components/NarrowMode/NarrowChannels.tsx  |  11 +-
 .../react-chat/src/components/ReactChat.tsx   |  17 +--
 .../react-chat/src/components/SearchBlock.tsx |  12 +-
 .../src/contexts/chatStateProvider.tsx        |  25 ++++
 .../src/contexts/friendsProvider.tsx          |  27 ----
 .../src/contexts/messengerProvider.tsx        |   1 +
 .../src/hooks/messenger/useMessenger.ts       |   1 +
 .../react-chat/src/hooks/useManageContact.ts  |  20 ++-
 packages/react-chat/src/models/ChannelData.ts |   2 +-
 packages/react-chat/src/models/Contact.ts     |   1 +
 .../react-chat/src/styles/GlobalStyle.tsx     |   1 -
 21 files changed, 178 insertions(+), 216 deletions(-)
 create mode 100644 packages/react-chat/src/contexts/chatStateProvider.tsx
 delete mode 100644 packages/react-chat/src/contexts/friendsProvider.tsx

diff --git a/packages/react-chat/src/components/Channels/Channel.tsx b/packages/react-chat/src/components/Channels/Channel.tsx
index 59443e5..8b849bc 100644
--- a/packages/react-chat/src/components/Channels/Channel.tsx
+++ b/packages/react-chat/src/components/Channels/Channel.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React from "react";
 import styled from "styled-components";
 
 import { useNarrow } from "../../contexts/narrowProvider";
@@ -7,12 +7,51 @@ import { GroupIcon } from "../Icons/GroupIcon";
 import { MutedIcon } from "../Icons/MutedIcon";
 import { textMediumStyles } from "../Text";
 
+function RenderChannelName({
+  channel,
+  className,
+}: {
+  channel: ChannelData;
+  className?: string;
+}) {
+  switch (channel.type) {
+    case "group":
+      return (
+        <div className={className}>
+          <GroupIcon />
+          {channel.name}
+        </div>
+      );
+    case "channel":
+      return <div className={className}>{`# ${channel.name}`}</div>;
+    case "dm":
+      return <div className={className}>{channel.name}</div>;
+  }
+}
+
+function ChannelIcon({
+  channel,
+  activeView,
+}: {
+  channel: ChannelData;
+  activeView?: boolean;
+}) {
+  const narrow = useNarrow();
+  return (
+    <ChannelLogo
+      icon={channel.icon}
+      className={activeView ? "active" : narrow ? "narrow" : ""}
+    >
+      {!channel.icon && channel.name.slice(0, 1).toUpperCase()}
+    </ChannelLogo>
+  );
+}
+
 interface ChannelProps {
   channel: ChannelData;
-  notification?: number;
+  notified?: boolean;
   mention?: number;
   isActive: boolean;
-  isMuted: boolean;
   activeView?: boolean;
   onClick?: () => void;
 }
@@ -20,75 +59,48 @@ interface ChannelProps {
 export function Channel({
   channel,
   isActive,
-  isMuted,
   activeView,
   onClick,
-  notification,
+  notified,
   mention,
 }: ChannelProps) {
   const narrow = useNarrow();
-  const className = useMemo(
-    () => (narrow && !activeView ? "narrow" : activeView ? "active" : ""),
-    [narrow]
-  );
+
   return (
     <ChannelWrapper
-      className={
-        (isActive && !activeView) || (isActive && narrow) ? "active" : ""
-      }
-      style={{ width: narrow && activeView ? "calc(100% - 162px)" : "100%" }}
+      className={`${isActive && "active"}`}
+      isNarrow={narrow && activeView}
       onClick={onClick}
     >
       <ChannelInfo>
-        <ChannelLogo
-          style={{
-            backgroundImage: channel.icon ? `url(${channel.icon}` : "",
-          }}
-          className={className}
-        >
-          {!channel.icon && channel.name.slice(0, 1).toUpperCase()}
-        </ChannelLogo>
+        <ChannelIcon channel={channel} activeView={activeView} />
         <ChannelTextInfo>
           <ChannelName
-            className={
-              isActive || narrow
-                ? "active"
-                : notification && notification > 0
-                ? "notified"
-                : isMuted
-                ? "muted"
-                : ""
-            }
-          >
-            {channel.type && channel.type === "group" ? (
-              <GroupIcon />
-            ) : channel.type === "dm" ? (
-              ""
-            ) : (
-              "#"
-            )}{" "}
-            {channel.name}
-          </ChannelName>
+            channel={channel}
+            active={isActive || narrow}
+            muted={channel?.isMuted}
+            notified={notified}
+          />
           {activeView && (
-            <ChannelDescription> {channel.description}</ChannelDescription>
+            <ChannelDescription>{channel.description}</ChannelDescription>
           )}
         </ChannelTextInfo>
       </ChannelInfo>
-      {notification && notification > 0 && !activeView && mention && (
+      {!activeView && !!mention && mention > 0 && !channel?.isMuted && (
         <NotificationBagde>{mention}</NotificationBagde>
       )}
-      {isMuted && !notification && <MutedIcon />}
+      {channel?.isMuted && <MutedIcon />}
     </ChannelWrapper>
   );
 }
 
-const ChannelWrapper = styled.div`
+const ChannelWrapper = styled.div<{ isNarrow?: boolean }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px;
   cursor: pointer;
-
+  width: ${({ isNarrow }) => (isNarrow ? "calc(100% - 162px)" : "100%")};
   &.active {
     background-color: ${({ theme }) => theme.activeChannelBackground};
     border-radius: 8px;
@@ -109,7 +121,7 @@ const ChannelTextInfo = styled.div`
   white-space: nowrap;
 `;
 
-export const ChannelLogo = styled.div`
+export const ChannelLogo = styled.div<{ icon?: string }>`
   width: 24px;
   height: 24px;
   display: flex;
@@ -124,45 +136,37 @@ export const ChannelLogo = styled.div`
   background-color: ${({ theme }) => theme.iconColor};
   background-size: cover;
   background-repeat: no-repeat;
+  backgroundimage: ${({ icon }) => icon && `url(${icon}`};
   color: ${({ theme }) => theme.iconTextColor};
 
   &.active {
     width: 36px;
     height: 36px;
     font-size: 20px;
-    line-height: 20px;
   }
 
   &.narrow {
     width: 40px;
     height: 40px;
     font-size: 20px;
-    line-height: 20px;
   }
 `;
 
-export const ChannelName = styled.div`
-  font-weight: 500;
-  opacity: 0.7;
+export const ChannelName = styled(RenderChannelName)<{
+  muted?: boolean;
+  notified?: boolean;
+  active?: boolean;
+}>`
+  font-weight: ${({ notified, muted, active }) =>
+    notified && !muted && !active ? "600" : "500"};
+  opacity: ${({ notified, muted, active }) =>
+    muted ? "0.4" : notified || active ? "1.0" : "0.7"};
   color: ${({ theme }) => theme.primary};
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 
   ${textMediumStyles}
-
-  &.active,
-  &.notified {
-    opacity: 1;
-  }
-
-  &.muted {
-    opacity: 0.4;
-  }
-
-  &.notified {
-    font-weight: 600;
-  }
 `;
 
 const ChannelDescription = styled.p`
diff --git a/packages/react-chat/src/components/Channels/Channels.tsx b/packages/react-chat/src/components/Channels/Channels.tsx
index 6833f46..e863277 100644
--- a/packages/react-chat/src/components/Channels/Channels.tsx
+++ b/packages/react-chat/src/components/Channels/Channels.tsx
@@ -1,13 +1,13 @@
 import React, { useEffect } from "react";
 import styled from "styled-components";
 
+import { ChatState, useChatState } from "../../contexts/chatStateProvider";
 import { useMessengerContext } from "../../contexts/messengerProvider";
 import { CreateIcon } from "../Icons/CreateIcon";
 
 import { Channel } from "./Channel";
 
 interface ChannelsProps {
-  setCreateChat: (val: boolean) => void;
   onCommunityClick?: () => void;
 }
 
@@ -15,13 +15,10 @@ type GenerateChannelsProps = ChannelsProps & {
   type: string;
 };
 
-function GenerateChannels({
-  type,
-  onCommunityClick,
-  setCreateChat,
-}: GenerateChannelsProps) {
+function GenerateChannels({ type, onCommunityClick }: GenerateChannelsProps) {
   const { mentions, notifications, activeChannel, setActiveChannel, channels } =
     useMessengerContext();
+  const setChatState = useChatState()[1];
   return (
     <>
       {Object.values(channels)
@@ -31,23 +28,14 @@ function GenerateChannels({
             key={channel.id}
             channel={channel}
             isActive={channel.id === activeChannel.id}
-            isMuted={channel.isMuted || false}
-            notification={
-              notifications[channel.id] > 0 && !channel.isMuted
-                ? notifications[channel.id]
-                : undefined
-            }
-            mention={
-              mentions[channel.id] > 0 && !channel.isMuted
-                ? mentions[channel.id]
-                : undefined
-            }
+            notified={notifications?.[channel.id] > 0}
+            mention={mentions?.[channel.id]}
             onClick={() => {
               setActiveChannel(channel);
               if (onCommunityClick) {
                 onCommunityClick();
               }
-              setCreateChat(false);
+              setChatState(ChatState.ChatBody);
             }}
           />
         ))}
@@ -55,7 +43,7 @@ function GenerateChannels({
   );
 }
 
-export function Channels({ setCreateChat, onCommunityClick }: ChannelsProps) {
+export function Channels({ onCommunityClick }: ChannelsProps) {
   const { clearNotifications, clearMentions, notifications, activeChannel } =
     useMessengerContext();
   useEffect(() => {
@@ -66,19 +54,15 @@ export function Channels({ setCreateChat, onCommunityClick }: ChannelsProps) {
       }
     }
   }, [notifications, activeChannel]);
-
+  const setChatState = useChatState()[1];
   return (
     <ChannelList>
-      <GenerateChannels
-        type={"channel"}
-        onCommunityClick={onCommunityClick}
-        setCreateChat={setCreateChat}
-      />
+      <GenerateChannels type={"channel"} onCommunityClick={onCommunityClick} />
 
       <Chats>
         <ChatsBar>
           <Heading>Chat</Heading>
-          <EditBtn onClick={() => setCreateChat(true)}>
+          <EditBtn onClick={() => setChatState(ChatState.ChatCreation)}>
             <CreateIcon />
           </EditBtn>
         </ChatsBar>
@@ -86,13 +70,8 @@ export function Channels({ setCreateChat, onCommunityClick }: ChannelsProps) {
           <GenerateChannels
             type={"group"}
             onCommunityClick={onCommunityClick}
-            setCreateChat={setCreateChat}
-          />
-          <GenerateChannels
-            type={"dm"}
-            onCommunityClick={onCommunityClick}
-            setCreateChat={setCreateChat}
           />
+          <GenerateChannels type={"dm"} onCommunityClick={onCommunityClick} />
         </ChatsList>
       </Chats>
     </ChannelList>
diff --git a/packages/react-chat/src/components/Channels/EmptyChannel.tsx b/packages/react-chat/src/components/Channels/EmptyChannel.tsx
index e9298c0..873a984 100644
--- a/packages/react-chat/src/components/Channels/EmptyChannel.tsx
+++ b/packages/react-chat/src/components/Channels/EmptyChannel.tsx
@@ -16,17 +16,11 @@ export function EmptyChannel({ channel }: EmptyChannelProps) {
   return (
     <Wrapper>
       <ChannelInfoEmpty>
-        <ChannelLogoEmpty
-          style={{
-            backgroundImage: channel.icon ? `url(${channel.icon}` : "",
-          }}
-        >
+        <ChannelLogoEmpty icon={channel.icon}>
           {" "}
           {!channel.icon && channel.name.slice(0, 1).toUpperCase()}
         </ChannelLogoEmpty>
-        <ChannelNameEmpty className={"active"}>
-          {channel.name.slice(0, 10)}
-        </ChannelNameEmpty>
+        <ChannelNameEmpty active={true} channel={channel} />
       </ChannelInfoEmpty>
 
       {channel.type === "dm" ? (
diff --git a/packages/react-chat/src/components/Chat.tsx b/packages/react-chat/src/components/Chat.tsx
index 6fa9a2b..99149af 100644
--- a/packages/react-chat/src/components/Chat.tsx
+++ b/packages/react-chat/src/components/Chat.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 
+import { ChatState, useChatState } from "../contexts/chatStateProvider";
 import { useNarrow } from "../contexts/narrowProvider";
 
 import { Channels } from "./Channels/Channels";
@@ -23,9 +24,8 @@ function Modals() {
 }
 
 export function Chat() {
-  const [showMembers, setShowMembers] = useState(true);
-  const [createChat, setCreateChat] = useState(false);
-
+  const [state] = useChatState();
+  const [showMembers, setShowMembers] = useState(false);
   const narrow = useNarrow();
 
   return (
@@ -33,18 +33,17 @@ export function Chat() {
       {!narrow && (
         <ChannelsWrapper>
           <StyledCommunity />
-          <Channels setCreateChat={setCreateChat} />
+          <Channels />
         </ChannelsWrapper>
       )}
-      {!createChat && (
+      {state === ChatState.ChatBody && (
         <ChatBody
           onClick={() => setShowMembers(!showMembers)}
           showMembers={showMembers}
-          setCreateChat={setCreateChat}
         />
       )}
-      {showMembers && !narrow && !createChat && <Members />}
-      {createChat && <ChatCreation setCreateChat={setCreateChat} />}
+      {showMembers && !narrow && state === ChatState.ChatBody && <Members />}
+      {state === ChatState.ChatCreation && <ChatCreation />}
       <Modals />
     </ChatWrapper>
   );
diff --git a/packages/react-chat/src/components/Chat/ChatBody.tsx b/packages/react-chat/src/components/Chat/ChatBody.tsx
index f322eea..b5c245c 100644
--- a/packages/react-chat/src/components/Chat/ChatBody.tsx
+++ b/packages/react-chat/src/components/Chat/ChatBody.tsx
@@ -27,14 +27,9 @@ enum ChatBodyState {
 interface ChatBodyProps {
   onClick: () => void;
   showMembers: boolean;
-  setCreateChat: (val: boolean) => void;
 }
 
-export function ChatBody({
-  onClick,
-  showMembers,
-  setCreateChat,
-}: ChatBodyProps) {
+export function ChatBody({ onClick, showMembers }: ChatBodyProps) {
   const { messenger, activeChannel, communityData } = useMessengerContext();
   const narrow = useNarrow();
   const [showChannelMenu, setShowChannelMenu] = useState(false);
@@ -61,7 +56,7 @@ export function ChatBody({
   return (
     <ChatBodyWrapper className={className}>
       {editGroup && communityData ? (
-        <ChatCreation setCreateChat={setCreateChat} editGroup={editGroup} />
+        <ChatCreation editGroup={editGroup} />
       ) : (
         <ChatTopbar
           className={narrow && showState !== ChatBodyState.Chat ? "narrow" : ""}
@@ -78,10 +73,9 @@ export function ChatBody({
                 <Channel
                   channel={activeChannel}
                   isActive={
-                    narrow ? showState === ChatBodyState.Channels : true
+                    narrow ? showState === ChatBodyState.Channels : false
                   }
                   activeView={true}
-                  isMuted={false}
                   onClick={() => switchShowState(ChatBodyState.Channels)}
                 />
               </>
@@ -132,7 +126,6 @@ export function ChatBody({
           {showState === ChatBodyState.Channels && (
             <NarrowChannels
               setShowChannels={() => switchShowState(ChatBodyState.Channels)}
-              setCreateChat={setCreateChat}
             />
           )}
           {showState === ChatBodyState.Members && (
diff --git a/packages/react-chat/src/components/Chat/ChatCreation.tsx b/packages/react-chat/src/components/Chat/ChatCreation.tsx
index 57dc1e3..ccb9e9c 100644
--- a/packages/react-chat/src/components/Chat/ChatCreation.tsx
+++ b/packages/react-chat/src/components/Chat/ChatCreation.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useState } from "react";
 import { bufToHex } from "status-communities/dist/cjs/utils";
 import styled from "styled-components";
 
+import { ChatState, useChatState } from "../../contexts/chatStateProvider";
 import { useIdentity } from "../../contexts/identityProvider";
 import { useMessengerContext } from "../../contexts/messengerProvider";
 import { buttonStyles } from "../Buttons/buttonStyle";
@@ -10,16 +11,16 @@ import { Member } from "../Members/Member";
 import { SearchBlock } from "../SearchBlock";
 import { textMediumStyles } from "../Text";
 interface ChatCreationProps {
-  setCreateChat: (val: boolean) => void;
   editGroup?: boolean;
 }
 
-export function ChatCreation({ setCreateChat, editGroup }: ChatCreationProps) {
+export function ChatCreation({ editGroup }: ChatCreationProps) {
   const identity = useIdentity();
   const [query, setQuery] = useState("");
   const [styledGroup, setStyledGroup] = useState<string[]>([]);
 
   const { contacts, setChannel } = useMessengerContext();
+  const setChatState = useChatState()[1];
 
   const addMember = useCallback(
     (member: string) => {
@@ -51,7 +52,7 @@ export function ChatCreation({ setCreateChat, editGroup }: ChatCreationProps) {
           type: "dm",
           description: "Contact",
         });
-    setCreateChat(false);
+    setChatState(ChatState.ChatBody);
   };
 
   return (
diff --git a/packages/react-chat/src/components/ChatLoader.tsx b/packages/react-chat/src/components/ChatLoader.tsx
index f58e44a..a3a6c8d 100644
--- a/packages/react-chat/src/components/ChatLoader.tsx
+++ b/packages/react-chat/src/components/ChatLoader.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { Identity } from "status-communities/dist/cjs";
 
+import { ChatStateProvider } from "../contexts/chatStateProvider";
 import { IdentityProvider } from "../contexts/identityProvider";
 import { MessengerProvider } from "../contexts/messengerProvider";
 
@@ -18,7 +19,9 @@ export function ChatLoader({ communityKey }: ChatLoaderProps) {
     return (
       <IdentityProvider identity={identity}>
         <MessengerProvider identity={identity} communityKey={communityKey}>
-          <Chat />
+          <ChatStateProvider>
+            <Chat />
+          </ChatStateProvider>
         </MessengerProvider>
       </IdentityProvider>
     );
diff --git a/packages/react-chat/src/components/Form/ContactMenu.tsx b/packages/react-chat/src/components/Form/ContactMenu.tsx
index 58fedc8..3dca75e 100644
--- a/packages/react-chat/src/components/Form/ContactMenu.tsx
+++ b/packages/react-chat/src/components/Form/ContactMenu.tsx
@@ -2,7 +2,6 @@ import React, { useMemo } from "react";
 import { bufToHex } from "status-communities/dist/cjs/utils";
 import styled from "styled-components";
 
-import { useFriends } from "../../contexts/friendsProvider";
 import { useIdentity } from "../../contexts/identityProvider";
 import { useModal } from "../../contexts/modalProvider";
 import { useManageContact } from "../../hooks/useManageContact";
@@ -33,10 +32,8 @@ export function ContactMenu({ id, setShowMenu }: ContactMenuProps) {
   );
 
   const { setModal } = useModal(ProfileModalName);
-  const { friends, setFriends } = useFriends();
-
-  const userIsFriend = useMemo(() => friends.includes(id), [friends, id]);
-  const { contact, setBlocked, setIsUntrustworthy } = useManageContact(id);
+  const { contact, setBlocked, setIsUntrustworthy, setIsUserFriend } =
+    useManageContact(id);
 
   if (!contact) return null;
   return (
@@ -63,13 +60,13 @@ export function ContactMenu({ id, setShowMenu }: ContactMenuProps) {
           <ProfileSvg width={16} height={16} />
           <MenuText>View Profile</MenuText>
         </MenuItem>
-        {!userIsFriend && (
-          <MenuItem onClick={() => setFriends((prev) => [...prev, id])}>
+        {!contact.isFriend && (
+          <MenuItem onClick={() => setIsUserFriend(true)}>
             <AddContactSvg width={16} height={16} />
             <MenuText>Send Contact Request</MenuText>
           </MenuItem>
         )}
-        {userIsFriend && (
+        {contact.isFriend && (
           <MenuItem>
             <ChatSvg width={16} height={16} />
             <MenuText>Send Message</MenuText>
@@ -98,7 +95,7 @@ export function ContactMenu({ id, setShowMenu }: ContactMenuProps) {
           </MenuText>
         </MenuItem>
 
-        {!userIsFriend && !isUser && (
+        {!contact.isFriend && !isUser && (
           <MenuItem
             onClick={() => {
               setBlocked(!contact.blocked);
diff --git a/packages/react-chat/src/components/Modals/EditModal.tsx b/packages/react-chat/src/components/Modals/EditModal.tsx
index 69e5f0e..3c412f9 100644
--- a/packages/react-chat/src/components/Modals/EditModal.tsx
+++ b/packages/react-chat/src/components/Modals/EditModal.tsx
@@ -55,15 +55,7 @@ export const EditModal = () => {
         </NameSection>
         <LogoSection>
           <Label>Group image</Label>
-          <GroupLogo
-            style={{
-              backgroundImage: image
-                ? `url(${image}`
-                : activeChannel.icon
-                ? `url(${activeChannel.icon}`
-                : "",
-            }}
-          >
+          <GroupLogo icon={image || activeChannel.icon}>
             {!activeChannel.icon &&
               !image &&
               activeChannel.name.slice(0, 1).toUpperCase()}
diff --git a/packages/react-chat/src/components/Modals/ProfileModal.tsx b/packages/react-chat/src/components/Modals/ProfileModal.tsx
index 21a1914..c4a8c37 100644
--- a/packages/react-chat/src/components/Modals/ProfileModal.tsx
+++ b/packages/react-chat/src/components/Modals/ProfileModal.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useMemo, useState } from "react";
 import { bufToHex } from "status-communities/dist/cjs/utils";
 import styled from "styled-components";
 
-import { useFriends } from "../../contexts/friendsProvider";
 import { useIdentity } from "../../contexts/identityProvider";
 import { useModal } from "../../contexts/modalProvider";
 import { useManageContact } from "../../hooks/useManageContact";
@@ -40,17 +39,18 @@ export const ProfileModal = () => {
     [id, identity]
   );
 
-  const { friends, setFriends } = useFriends();
-
-  const userIsFriend = useMemo(() => friends.includes(id), [friends, id]);
-
   const [renaming, setRenaming] = useState(renamingState ?? false);
   useEffect(() => {
     setRenaming(renamingState ?? false);
   }, [renamingState]);
 
-  const { contact, setBlocked, setCustomName, setIsUntrustworthy } =
-    useManageContact(id);
+  const {
+    contact,
+    setBlocked,
+    setCustomName,
+    setIsUntrustworthy,
+    setIsUserFriend,
+  } = useManageContact(id);
   const [customNameInput, setCustomNameInput] = useState("");
 
   if (!contact) return null;
@@ -134,7 +134,7 @@ export const ProfileModal = () => {
           </>
         ) : (
           <>
-            {!userIsFriend && !isUser && (
+            {!contact.isFriend && !isUser && (
               <ProfileBtn
                 className={contact.blocked ? "" : "red"}
                 onClick={() => {
@@ -144,12 +144,10 @@ export const ProfileModal = () => {
                 {contact.blocked ? "Unblock" : "Block"}
               </ProfileBtn>
             )}
-            {userIsFriend && (
+            {contact.isFriend && (
               <ProfileBtn
                 className="red"
-                onClick={() =>
-                  setFriends((prev) => prev.filter((e) => e != id))
-                }
+                onClick={() => setIsUserFriend(false)}
               >
                 Remove Contact
               </ProfileBtn>
@@ -162,8 +160,8 @@ export const ProfileModal = () => {
                 ? "Remove Untrustworthy Mark"
                 : "Mark as Untrustworthy"}
             </ProfileBtn>
-            {!userIsFriend && (
-              <Btn onClick={() => setFriends((prev) => [...prev, id])}>
+            {!contact.isFriend && (
+              <Btn onClick={() => setIsUserFriend(true)}>
                 Send Contact Request
               </Btn>
             )}
diff --git a/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx b/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx
index b7be428..508e4b8 100644
--- a/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx
+++ b/packages/react-chat/src/components/NarrowMode/NarrowChannels.tsx
@@ -7,20 +7,13 @@ import { NarrowTopbar } from "./NarrowTopbar";
 
 interface NarrowChannelsProps {
   setShowChannels: (val: boolean) => void;
-  setCreateChat: (val: boolean) => void;
 }
 
-export function NarrowChannels({
-  setShowChannels,
-  setCreateChat,
-}: NarrowChannelsProps) {
+export function NarrowChannels({ setShowChannels }: NarrowChannelsProps) {
   return (
     <ListWrapper>
       <NarrowTopbar list="Channels" />
-      <Channels
-        onCommunityClick={() => setShowChannels(false)}
-        setCreateChat={setCreateChat}
-      />
+      <Channels onCommunityClick={() => setShowChannels(false)} />
     </ListWrapper>
   );
 }
diff --git a/packages/react-chat/src/components/ReactChat.tsx b/packages/react-chat/src/components/ReactChat.tsx
index 4a66e93..9482598 100644
--- a/packages/react-chat/src/components/ReactChat.tsx
+++ b/packages/react-chat/src/components/ReactChat.tsx
@@ -3,7 +3,6 @@ import { ThemeProvider } from "styled-components";
 import styled from "styled-components";
 
 import { FetchMetadataProvider } from "../contexts/fetchMetadataProvider";
-import { FriendsProvider } from "../contexts/friendsProvider";
 import { ModalProvider } from "../contexts/modalProvider";
 import { NarrowProvider } from "../contexts/narrowProvider";
 import { Metadata } from "../models/Metadata";
@@ -28,15 +27,13 @@ export function ReactChat({
     <ThemeProvider theme={theme}>
       <NarrowProvider myRef={ref}>
         <FetchMetadataProvider fetchMetadata={fetchMetadata}>
-          <FriendsProvider>
-            <ModalProvider>
-              <Wrapper ref={ref}>
-                <GlobalStyle />
-                <ChatLoader communityKey={communityKey} />
-                <div id="modal-root" />
-              </Wrapper>
-            </ModalProvider>
-          </FriendsProvider>
+          <ModalProvider>
+            <Wrapper ref={ref}>
+              <GlobalStyle />
+              <ChatLoader communityKey={communityKey} />
+              <div id="modal-root" />
+            </Wrapper>
+          </ModalProvider>
         </FetchMetadataProvider>
       </NarrowProvider>
     </ThemeProvider>
diff --git a/packages/react-chat/src/components/SearchBlock.tsx b/packages/react-chat/src/components/SearchBlock.tsx
index 2f3228f..43fa8cc 100644
--- a/packages/react-chat/src/components/SearchBlock.tsx
+++ b/packages/react-chat/src/components/SearchBlock.tsx
@@ -3,8 +3,8 @@ import styled from "styled-components";
 
 import { useMessengerContext } from "../contexts/messengerProvider";
 
-import { Channel } from "./Channels/Channel";
 import { ContactsList } from "./Chat/ChatCreation";
+import { Member } from "./Members/Member";
 
 interface SearchBlockProps {
   query: string;
@@ -39,15 +39,9 @@ export const SearchBlock = ({
           .filter((member) => member.id.includes(query))
           .filter((member) => !dsicludeList.includes(member.id))
           .map((member) => (
-            <Channel
+            <Member
               key={member.id}
-              channel={{
-                id: member.id,
-                name: member.id.slice(0, 10),
-                type: "dm",
-              }}
-              isActive={false}
-              isMuted={false}
+              contact={member}
               onClick={() => onClick(member.id)}
             />
           ))}
diff --git a/packages/react-chat/src/contexts/chatStateProvider.tsx b/packages/react-chat/src/contexts/chatStateProvider.tsx
new file mode 100644
index 0000000..44b9bba
--- /dev/null
+++ b/packages/react-chat/src/contexts/chatStateProvider.tsx
@@ -0,0 +1,25 @@
+import React, { createContext, useContext, useState } from "react";
+
+export enum ChatState {
+  ChatCreation,
+  ChatBody,
+}
+
+type ChatStateContextType = [
+  ChatState,
+  React.Dispatch<React.SetStateAction<ChatState>>
+];
+
+const ChatStateContext = createContext<ChatStateContextType>([
+  ChatState.ChatBody,
+  () => undefined,
+]);
+
+export function useChatState() {
+  return useContext(ChatStateContext);
+}
+
+export function ChatStateProvider({ children }: { children: React.ReactNode }) {
+  const state = useState(ChatState.ChatBody);
+  return <ChatStateContext.Provider value={state} children={children} />;
+}
diff --git a/packages/react-chat/src/contexts/friendsProvider.tsx b/packages/react-chat/src/contexts/friendsProvider.tsx
deleted file mode 100644
index d94e69d..0000000
--- a/packages/react-chat/src/contexts/friendsProvider.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { createContext, useContext, useState } from "react";
-
-const FriendsContext = createContext<{
-  friends: string[];
-  setFriends: React.Dispatch<React.SetStateAction<string[]>>;
-}>({
-  friends: [],
-  setFriends: () => undefined,
-});
-
-export function useFriends() {
-  return useContext(FriendsContext);
-}
-
-interface FriendsProviderProps {
-  children: React.ReactNode;
-}
-
-export function FriendsProvider({ children }: FriendsProviderProps) {
-  const [friends, setFriends] = useState<string[]>([]);
-  return (
-    <FriendsContext.Provider
-      value={{ friends, setFriends }}
-      children={children}
-    />
-  );
-}
diff --git a/packages/react-chat/src/contexts/messengerProvider.tsx b/packages/react-chat/src/contexts/messengerProvider.tsx
index 94d0509..9ac0e47 100644
--- a/packages/react-chat/src/contexts/messengerProvider.tsx
+++ b/packages/react-chat/src/contexts/messengerProvider.tsx
@@ -19,6 +19,7 @@ const MessengerContext = createContext<MessengerType>({
   activeChannel: {
     id: "",
     name: "",
+    type: "channel",
   },
   channels: {},
   setChannel: () => undefined,
diff --git a/packages/react-chat/src/hooks/messenger/useMessenger.ts b/packages/react-chat/src/hooks/messenger/useMessenger.ts
index f4a5e1b..25612fb 100644
--- a/packages/react-chat/src/hooks/messenger/useMessenger.ts
+++ b/packages/react-chat/src/hooks/messenger/useMessenger.ts
@@ -49,6 +49,7 @@ export function useMessenger(
     id: "",
     name: "",
     description: "",
+    type: "channel",
   });
 
   const chatId = useMemo(() => activeChannel.id, [activeChannel]);
diff --git a/packages/react-chat/src/hooks/useManageContact.ts b/packages/react-chat/src/hooks/useManageContact.ts
index 6fefa50..556a45f 100644
--- a/packages/react-chat/src/hooks/useManageContact.ts
+++ b/packages/react-chat/src/hooks/useManageContact.ts
@@ -38,5 +38,23 @@ export function useManageContact(id: string) {
     },
     [id]
   );
-  return { contact, setCustomName, setBlocked, setIsUntrustworthy };
+
+  const setIsUserFriend = useCallback(
+    (isFriend: boolean) => {
+      setContacts((prev) => {
+        const prevUser = prev[id];
+        if (!prevUser) return prev;
+        return { ...prev, [id]: { ...prevUser, isFriend } };
+      });
+    },
+    [id]
+  );
+
+  return {
+    contact,
+    setCustomName,
+    setBlocked,
+    setIsUntrustworthy,
+    setIsUserFriend,
+  };
 }
diff --git a/packages/react-chat/src/models/ChannelData.ts b/packages/react-chat/src/models/ChannelData.ts
index 8617c2d..d2ce2c4 100644
--- a/packages/react-chat/src/models/ChannelData.ts
+++ b/packages/react-chat/src/models/ChannelData.ts
@@ -3,7 +3,7 @@ import { Contact } from "./Contact";
 export type ChannelData = {
   id: string;
   name: string;
-  type?: "channel" | "dm" | "group";
+  type: "channel" | "dm" | "group";
   description?: string;
   icon?: string;
   isMuted?: boolean;
diff --git a/packages/react-chat/src/models/Contact.ts b/packages/react-chat/src/models/Contact.ts
index 910ce49..d122906 100644
--- a/packages/react-chat/src/models/Contact.ts
+++ b/packages/react-chat/src/models/Contact.ts
@@ -5,6 +5,7 @@ export type Contact = {
   customName?: string;
   isUntrustworthy: boolean;
   blocked: boolean;
+  isFriend?: boolean;
 };
 
 export type Contacts = {
diff --git a/packages/react-chat/src/styles/GlobalStyle.tsx b/packages/react-chat/src/styles/GlobalStyle.tsx
index 4e4cfb9..f707d42 100644
--- a/packages/react-chat/src/styles/GlobalStyle.tsx
+++ b/packages/react-chat/src/styles/GlobalStyle.tsx
@@ -14,7 +14,6 @@ export const GlobalStyle = createGlobalStyle`
   html {
     margin: 0;
     font-family: 'Inter', sans-serif;
-    font-weight: normal;
     font-size: 15px;
     line-height: 22px;
   }