feat(chat): add a delete friend button

src/components/AddNewGroup/AddNewGroup.tsx

@@ -1,4 +1,3 @@
-import { useAddFriend } from "../AddFriend/useAddFriend"
 import CreateGroup from "../CreateGroup/CreateGroup"
 import FriendsResults from "../FriendsResults/FriendsResults"
 import SearchFriends from "../SearchFriends/SearchFriends"
@@ -9,7 +8,6 @@ export default function AddNewGroup({
 }: {
   setShowAddNewGroup: React.Dispatch<React.SetStateAction<boolean>>
 }) {
-  const { addFriendToLoggedUser } = useAddFriend()
   const {
     friends,
     loggedUser,

src/components/ChatInfoSidebar/ChatInfoSidebar.tsx

@@ -4,7 +4,8 @@ import GroupMembers from "../GroupMembers/GroupMembers"
 import { useChatInfoSidebar } from "./useChatInfoSidebar"
 
 export default function ChatInfoSidebar({ chat }: { chat: ChatProps }) {
-  const { defineChatAvatar, defineChatName, closeChatInfoSidebar } = useChatInfoSidebar()
+  const { defineChatAvatar, defineChatName, closeChatInfoSidebar, deleteFriend } =
+    useChatInfoSidebar()
 
   return (
     <aside className="chat-info-sidebar">
@@ -22,6 +23,11 @@ export default function ChatInfoSidebar({ chat }: { chat: ChatProps }) {
         <h3 className="chat-name">{defineChatName(chat)}</h3>
       </div>
       {chat.isGroup ? <GroupMembers /> : null}
+      <div className="danger-zone">
+        <button className="danger-zone__button" onClick={() => deleteFriend(chat)} disabled>
+          Eliminar amigo
+        </button>
+      </div>
     </aside>
   )
 }

src/components/ChatInfoSidebar/_ChatInfoSidebar.scss

@@ -36,6 +36,21 @@
     .chat-name {
     }
   }
+  .danger-zone {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .danger-zone__button {
+      @include gradient-button;
+      border-radius: 10px;
+      background: #ff2949;
+      box-shadow: none;
+      &:hover {
+        background: $purpleColor;
+        box-shadow: none;
+      }
+    }
+  }
 }
 
 @media screen and (max-width: 900px) {

src/components/ChatInfoSidebar/useChatInfoSidebar.ts

@@ -2,11 +2,14 @@ import { useSelector } from "react-redux"
 import { useShowChatInfoSidebarContext } from "../../contexts/ShowChatInfoSIdebarContext"
 import { useShowChatContainerContext } from "../../contexts/ShowChatContainerContext"
 import { ChatProps, RootState } from "../../ts/interfaces"
+import { useFetchingMethod } from "../../apollo/useFetchingMethod"
+import { DELETE_CHAT } from "../../graphql/mutations"
 
 export const useChatInfoSidebar = () => {
   const loggedUser = useSelector((state: RootState) => state.loggedUser)
   const { showChatInfoSidebar, setShowChatInfoSidebar } = useShowChatInfoSidebarContext()
   const { setShowChatContainer } = useShowChatContainerContext()
+  const { lazyQueryMethod: deleteChat } = useFetchingMethod(DELETE_CHAT)
 
   const defineChatAvatar = (chat: ChatProps) =>
     chat.avatar
@@ -21,5 +24,9 @@ export const useChatInfoSidebar = () => {
     setShowChatContainer!(true)
   }
 
-  return { defineChatAvatar, defineChatName, closeChatInfoSidebar }
+  const deleteFriend = (chat: ChatProps) => {
+    deleteChat({ variables: { chatId: chat.id } })
+  }
+
+  return { defineChatAvatar, defineChatName, closeChatInfoSidebar, deleteFriend }
 }

src/scss/index.css

@@ -2079,6 +2079,52 @@ html body #root .App ul {
   height: 50px;
   border-radius: 200px;
 }
+.chat-info-sidebar .danger-zone {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.chat-info-sidebar .danger-zone .danger-zone__button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(93.07deg, #dd4ec6 0%, #8d4fc9 100%);
+  background-size: 100%;
+  background-position: 0;
+  border-radius: 10px;
+  border: none;
+  color: #ffffff;
+  font-family: "Inter";
+  font-size: clamp(12px, 16px, 5vmin);
+  cursor: pointer;
+  transition: all 0.25s;
+  box-shadow: 0 1px 10px 0 #8d4fc9;
+  background-repeat: no-repeat;
+  background-color: #8d4fc9;
+  width: 100%;
+  height: 50px;
+  margin-top: 15px;
+  box-sizing: border-box;
+  padding: 10px;
+  text-align: center;
+  border-radius: 10px;
+  background: #ff2949;
+  box-shadow: none;
+}
+.chat-info-sidebar .danger-zone .danger-zone__button:hover {
+  background-position: -200px;
+  box-shadow: 0 0px 15px 2px #8d4fc9;
+}
+.chat-info-sidebar .danger-zone .danger-zone__button.disabled {
+  background: #2a2c37;
+  box-shadow: none;
+  cursor: not-allowed;
+}
+.chat-info-sidebar .danger-zone .danger-zone__button:hover {
+  background: #8d4fc9;
+  box-shadow: none;
+}
+
 @media screen and (max-width: 900px) {
   .chat-info-sidebar {
     display: inline-block;