Skip to content

Commit

Permalink
feat(chat): add a delete friend button
Browse files Browse the repository at this point in the history
  • Loading branch information
GabrielCarames committed Nov 14, 2022
1 parent e80f1bc commit 5b953b3
Show file tree
Hide file tree
Showing 6 changed files with 77 additions and 5 deletions.
2 changes: 0 additions & 2 deletions src/components/AddNewGroup/AddNewGroup.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { useAddFriend } from "../AddFriend/useAddFriend"
import CreateGroup from "../CreateGroup/CreateGroup"
import FriendsResults from "../FriendsResults/FriendsResults"
import SearchFriends from "../SearchFriends/SearchFriends"
Expand All @@ -9,7 +8,6 @@ export default function AddNewGroup({
}: {
setShowAddNewGroup: React.Dispatch<React.SetStateAction<boolean>>
}) {
const { addFriendToLoggedUser } = useAddFriend()
const {
friends,
loggedUser,
Expand Down
8 changes: 7 additions & 1 deletion src/components/ChatInfoSidebar/ChatInfoSidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
)
}
15 changes: 15 additions & 0 deletions src/components/ChatInfoSidebar/_ChatInfoSidebar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
9 changes: 8 additions & 1 deletion src/components/ChatInfoSidebar/useChatInfoSidebar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 }
}
46 changes: 46 additions & 0 deletions src/scss/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/scss/index.css.map

Large diffs are not rendered by default.

0 comments on commit 5b953b3

Please sign in to comment.