From 34a8a0a899250c0ea05214dca4a631cbc96842e8 Mon Sep 17 00:00:00 2001
From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com>
Date: Tue, 16 Nov 2021 08:44:40 +0100
Subject: [PATCH] Improve profile modal (#129)

---
 .../src/components/Form/ContactMenu.tsx       | 24 ++++++--
 .../src/components/Icons/ChatIcon.tsx         | 38 +++++++++++++
 .../src/components/Modals/ProfileModal.tsx    | 55 ++++++++++++++++++-
 .../src/contexts/friendsProvider.tsx          | 27 +++++++++
 4 files changed, 137 insertions(+), 7 deletions(-)
 create mode 100644 packages/react-chat/src/components/Icons/ChatIcon.tsx
 create mode 100644 packages/react-chat/src/contexts/friendsProvider.tsx

diff --git a/packages/react-chat/src/components/Form/ContactMenu.tsx b/packages/react-chat/src/components/Form/ContactMenu.tsx
index c5597fde..7378b871 100644
--- a/packages/react-chat/src/components/Form/ContactMenu.tsx
+++ b/packages/react-chat/src/components/Form/ContactMenu.tsx
@@ -2,11 +2,13 @@ import React, { useMemo } from "react";
 import styled from "styled-components";
 
 import { useBlockedUsers } from "../../contexts/blockedUsersProvider";
+import { useFriends } from "../../contexts/friendsProvider";
 import { useModal } from "../../contexts/modalProvider";
 import { ChatMessage } from "../../models/ChatMessage";
 import { Icon } from "../Chat/ChatMessages";
 import { AddContactSvg } from "../Icons/AddContactIcon";
 import { BlockSvg } from "../Icons/BlockIcon";
+import { ChatSvg } from "../Icons/ChatIcon";
 import { EditSvg } from "../Icons/EditIcon";
 import { ProfileSvg } from "../Icons/ProfileIcon";
 import { UntrustworthIcon } from "../Icons/UntrustworthIcon";
@@ -38,6 +40,10 @@ export function ContactMenu({
     [blockedUsers, id]
   );
 
+  const { friends, setFriends } = useFriends();
+
+  const userIsFriend = useMemo(() => friends.includes(id), [friends, id]);
+
   const { setModal } = useModal(ProfileModalName);
 
   return (
@@ -65,10 +71,18 @@ export function ContactMenu({
           <ProfileSvg width={16} height={16} />
           <MenuText>View Profile</MenuText>
         </MenuItem>
-        <MenuItem>
-          <AddContactSvg width={16} height={16} />
-          <MenuText>Send Contact Request</MenuText>
-        </MenuItem>
+        {!userIsFriend && (
+          <MenuItem onClick={() => setFriends((prev) => [...prev, id])}>
+            <AddContactSvg width={16} height={16} />
+            <MenuText>Send Contact Request</MenuText>
+          </MenuItem>
+        )}
+        {userIsFriend && (
+          <MenuItem>
+            <ChatSvg width={16} height={16} />
+            <MenuText>Send Message</MenuText>
+          </MenuItem>
+        )}
         <MenuItem>
           <EditSvg width={16} height={16} />
           <MenuText>Rename</MenuText>
@@ -88,7 +102,7 @@ export function ContactMenu({
           </MenuText>
         </MenuItem>
 
-        {!userInBlocked && (
+        {!userIsFriend && (
           <MenuItem
             onClick={() => {
               userInBlocked
diff --git a/packages/react-chat/src/components/Icons/ChatIcon.tsx b/packages/react-chat/src/components/Icons/ChatIcon.tsx
new file mode 100644
index 00000000..dbf998ac
--- /dev/null
+++ b/packages/react-chat/src/components/Icons/ChatIcon.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import styled from "styled-components";
+
+type ChatSvgProps = {
+  width: number;
+  height: number;
+};
+
+export function ChatSvg({ width, height }: ChatSvgProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.69922 7.99922C1.69922 4.51983 4.51983 1.69922 7.99922 1.69922C11.4786 1.69922 14.2992 4.51983 14.2992 7.99922V11.9992C14.2992 13.2695 13.2695 14.2992 11.9992 14.2992H7.99922C4.51983 14.2992 1.69922 11.4786 1.69922 7.99922ZM7.99922 3.19922C5.34825 3.19922 3.19922 5.34825 3.19922 7.99922C3.19922 10.6502 5.34825 12.7992 7.99922 12.7992H11.9992C12.441 12.7992 12.7992 12.441 12.7992 11.9992V7.99922C12.7992 5.34825 10.6502 3.19922 7.99922 3.19922Z"
+      />
+    </svg>
+  );
+}
+
+export const ChatIcon = () => {
+  return <Icon width={16} height={16} />;
+};
+
+const Icon = styled(ChatSvg)`
+  & > path {
+    fill: ${({ theme }) => theme.tertiary};
+  }
+
+  &:hover > path {
+    fill: ${({ theme }) => theme.bodyBackgroundColor};
+  }
+`;
diff --git a/packages/react-chat/src/components/Modals/ProfileModal.tsx b/packages/react-chat/src/components/Modals/ProfileModal.tsx
index bc96f0fb..962cb593 100644
--- a/packages/react-chat/src/components/Modals/ProfileModal.tsx
+++ b/packages/react-chat/src/components/Modals/ProfileModal.tsx
@@ -1,6 +1,8 @@
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
 import styled from "styled-components";
 
+import { useBlockedUsers } from "../../contexts/blockedUsersProvider";
+import { useFriends } from "../../contexts/friendsProvider";
 import { copy } from "../../utils";
 import { buttonStyles } from "../Buttons/buttonStyle";
 import { CopySvg } from "../Icons/CopyIcon";
@@ -22,6 +24,17 @@ interface ProfileModalProps {
 export const ProfileModal = ({ user, image }: ProfileModalProps) => {
   const [isUntrustworthy, setIsUntrustworthy] = useState(false);
 
+  const { blockedUsers, setBlockedUsers } = useBlockedUsers();
+
+  const userInBlocked = useMemo(
+    () => blockedUsers.includes(user),
+    [blockedUsers, user]
+  );
+
+  const { friends, setFriends } = useFriends();
+
+  const userIsFriend = useMemo(() => friends.includes(user), [friends, user]);
+
   return (
     <Modal name={ProfileModalName} className="profile">
       <Section>
@@ -57,7 +70,26 @@ export const ProfileModal = ({ user, image }: ProfileModalProps) => {
         <EmojiKey>🎩🍞🥑🦍🌈📡💅🏻♣️🔔⛸👵🅱</EmojiKey>
       </Section>
       <ButtonSection>
-        <ProfileBtn className="red">Remove Contact</ProfileBtn>
+        {!userIsFriend && (
+          <ProfileBtn
+            className={userInBlocked ? "" : "red"}
+            onClick={() => {
+              userInBlocked
+                ? setBlockedUsers((prev) => prev.filter((e) => e != user))
+                : setBlockedUsers((prev) => [...prev, user]);
+            }}
+          >
+            {userInBlocked ? "Unblock" : "Block"}
+          </ProfileBtn>
+        )}
+        {userIsFriend && (
+          <ProfileBtn
+            className="red"
+            onClick={() => setFriends((prev) => prev.filter((e) => e != user))}
+          >
+            Remove Contact
+          </ProfileBtn>
+        )}
         <ProfileBtn
           className={isUntrustworthy ? "" : "red"}
           onClick={() => setIsUntrustworthy(!isUntrustworthy)}
@@ -66,6 +98,11 @@ export const ProfileModal = ({ user, image }: ProfileModalProps) => {
             ? "Remove Untrustworthy Mark"
             : "Mark as Untrustworthy"}
         </ProfileBtn>
+        {!userIsFriend && (
+          <Btn onClick={() => setFriends((prev) => [...prev, user])}>
+            Send Contact Request
+          </Btn>
+        )}
       </ButtonSection>
     </Modal>
   );
@@ -151,6 +188,10 @@ const ProfileBtn = styled.button`
     color: ${({ theme }) => theme.redColor};
   }
 
+  &.red:hover {
+    background: ${({ theme }) => theme.buttonNoBgHover};
+  }
+
   &:hover {
     background: ${({ theme }) => theme.buttonBgHover};
   }
@@ -161,3 +202,13 @@ const CopyButton = styled.button`
     fill: ${({ theme }) => theme.tertiary};
   }
 `;
+
+const Btn = styled.button`
+  padding: 11px 24px;
+  margin-left: 8px;
+  ${buttonStyles}
+
+  &:hover {
+    background: ${({ theme }) => theme.buttonBgHover};
+  }
+`;
diff --git a/packages/react-chat/src/contexts/friendsProvider.tsx b/packages/react-chat/src/contexts/friendsProvider.tsx
new file mode 100644
index 00000000..d94e69da
--- /dev/null
+++ b/packages/react-chat/src/contexts/friendsProvider.tsx
@@ -0,0 +1,27 @@
+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}
+    />
+  );
+}