Improve profile modal (#129)

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>
+        {!userIsFriend && (
-          <AddContactSvg width={16} height={16} />
+          <MenuItem onClick={() => setFriends((prev) => [...prev, id])}>
-          <MenuText>Send Contact Request</MenuText>
+            <AddContactSvg width={16} height={16} />
-        </MenuItem>
+            <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

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};
+  }
+`;

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};
+  }
+`;

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}
+    />
+  );
+}