import React from "react" ; import styled , { css } from "styled-components" ; import { Link } from "react-router-dom" ; import { FiMoreVertical } from "react-icons/fi" ; import { FaUsers , FaTrash , FaUserPlus } from "react-icons/fa" ; import { useDeleteRoomMutation , ListCurrentUserRoomsDocument , } from "graphql/generated/graphql" ; import { Flex , Button , Dropdown , IconButton } from "@convoy-ui" ; import { useModalContext } from "contexts/ModalContext" ; const StyledRoomLink = styled . div < { isSelected ? : boolean ; } > `
  padding: 10px 20px;
  padding-right: 10px;

  ${ p => css `
    margin-bottom: ${ p . theme . space . small }px;
    border-radius: ${ p . theme . radius . small }px;
    background-color: ${ p . theme . colors . dark3 };
    color: ${ p . isSelected ? p . theme . colors . primary : p . theme . colors . white };
  ` }

  a {
    color: inherit;
  }
  &:hover {
    color: ${ p => p . theme . colors . primary };
  }
` ; interface IRoomLink { name : string ; id : string ; isSelected ? : boolean ; onInviteMemberClick ? : ( roomId : string ) => void ; } const RoomLink = ( { name , id , isSelected , onInviteMemberClick , } ) => { const { dispatch } = useModalContext ( ) ; const [ deleteRoom , { loading : isDeleting } ] = useDeleteRoomMutation ( { onError ( err ) { console . log ( err . message ) ; } , refetchQueries : [ { query : ListCurrentUserRoomsDocument } ] , } ) ; const handleDelete = ( ) => { deleteRoom ( { variables : { roomId : id , } , } ) . catch ( console . log ) ; } ; const handleAddMembers = ( ) => { dispatch ( { type : "OPEN" , modal : "InviteMembers" } ) ; onInviteMemberClick ( id ) ; } ; return ( < StyledRoomLink isSelected = { isSelected } > < Flex align = "center" justify = "space-between" nowrap > < Link to = { `/room/${ id }` } > < Flex gap = "medium" align = "center" nowrap > < FaUsers /> < span > { name } < /span> < /Flex> < /Link> < Dropdown > < Dropdown . Toggle > < IconButton icon = { < FiMoreVertical />}/ > < /Dropdown.Toggle> < Dropdown . Content style = { { right : "initial" } } > < Dropdown . Item > < Button variant = "secondary" onClick = { handleAddMembers } icon = { FaUserPlus } > Add Members < /Button> < /Dropdown.Item> < Dropdown . Item > < Button variant = "danger" isLoading = { isDeleting } onClick = { handleDelete } icon = { FaTrash } > Delete < /Button> < /Dropdown.Item> < /Dropdown.Content> < /Dropdown> < /Flex> < /StyledRoomLink>); } ; export default React . memo ( RoomLink ) ;