Files
Iris/src/js/components/Fields/FollowButton.js
2022-09-29 15:32:11 +13:00

65 lines
1.8 KiB
JavaScript
Executable File

import React from 'react';
import { createNotification } from '../../services/ui/actions';
import { following } from '../../services/spotify/actions';
import { i18n } from '../../locale';
import { Button } from '../Button';
import { makeLoadingSelector } from '../../util/selectors';
import { useSelector } from 'react-redux';
const loadingSelector = makeLoadingSelector(['(.*)(follow)|(me\/albums)(.*)']);
const FollowButton = ({
uri,
addText,
removeText,
is_following,
}) => {
const loading = useSelector(loadingSelector);
const spotify_authorized = useSelector((state) => state.spotify.authorization);
const remove = () => dispatch(following(uri, 'DELETE'));
const add = () => dispatch(following(uri, 'PUT'));
const unauthorized = () => dispatch(
createNotification({
content: i18n('errors.authorization_required', { provider: i18n('services.spotify.title') }),
level: 'warning',
}),
);
if (!uri) return null;
if (!spotify_authorized) {
return (
<Button
disabled
working={loading}
onClick={unauthorized}
tracking={{ category: 'FollowButton', action: 'Add (disabled)' }}
>
{addText || i18n('actions.add_to_library')}
</Button>
);
} if (is_following === true) {
return (
<Button
type="destructive"
working={loading}
onClick={remove}
tracking={{ category: 'FollowButton', action: 'Remove' }}
>
{removeText || i18n('actions.remove_from_library')}
</Button>
);
}
return (
<Button
onClick={add}
working={loading}
tracking={{ category: 'FollowButton', action: 'Add' }}
>
{addText || i18n('actions.add_to_library')}
</Button>
);
}
export default FollowButton;