59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
//@ts-nocheck
|
|
import React, { useEffect, useState } from 'react'
|
|
import stl from './bookmark.css'
|
|
import { Icon } from 'UI'
|
|
import { toggleFavorite } from 'Duck/sessions'
|
|
import { connect } from 'react-redux'
|
|
import { toast } from 'react-toastify';
|
|
import { Tooltip } from 'react-tippy';
|
|
|
|
interface Props {
|
|
toggleFavorite: (sessionId: string) => Promise<void>,
|
|
favorite: Boolean,
|
|
sessionId: any,
|
|
isEnterprise: Boolean
|
|
}
|
|
function Bookmark(props : Props ) {
|
|
const { sessionId, favorite, isEnterprise } = props;
|
|
const [isFavorite, setIsFavorite] = useState(favorite);
|
|
const ADDED_MESSAGE = isEnterprise ? 'Session added to vault' : 'Session added to your favorites';
|
|
const REMOVED_MESSAGE = isEnterprise ? 'Session removed from vault' : 'Session removed from your favorites';
|
|
const TOOLTIP_TEXT_ADD = isEnterprise ? 'Add to vault' : 'Add to favorites';
|
|
const TOOLTIP_TEXT_REMOVE = isEnterprise ? 'Remove from vault' : 'Remove from favorites';
|
|
|
|
const ACTIVE_ICON = isEnterprise ? 'safe-fill' : 'star-solid';
|
|
const INACTIVE_ICON = isEnterprise ? 'safe' : 'star';
|
|
|
|
|
|
useEffect(() => {
|
|
setIsFavorite(favorite);
|
|
}, [favorite]);
|
|
|
|
const toggleFavorite = async () => {
|
|
props.toggleFavorite(sessionId).then(() => {
|
|
toast.success(isFavorite ? REMOVED_MESSAGE : ADDED_MESSAGE);
|
|
setIsFavorite(!isFavorite);
|
|
});
|
|
}
|
|
|
|
return (
|
|
<Tooltip
|
|
delay={500}
|
|
arrow
|
|
title={isFavorite ? TOOLTIP_TEXT_REMOVE : TOOLTIP_TEXT_ADD}
|
|
hideOnClick={true}
|
|
>
|
|
<div
|
|
className={ stl.favoriteWrapper }
|
|
onClick={ toggleFavorite }
|
|
data-favourite={ isFavorite }
|
|
>
|
|
<Icon name={ isFavorite ? ACTIVE_ICON : INACTIVE_ICON } color="teal" size="20" />
|
|
</div>
|
|
</Tooltip>
|
|
)
|
|
}
|
|
|
|
export default connect(state => ({
|
|
isEnterprise: state.getIn([ 'user', 'client', 'edition' ]) === 'ee',
|
|
}), { toggleFavorite })(Bookmark)
|