51 lines
1.8 KiB
TypeScript
51 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
|
|
export default function ChannelSubscribeButton({ channelId, channelName }: { channelId: string; channelName: string }) {
|
|
const [subscribed, setSubscribed] = useState(false);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
fetch(`/api/subscribe?channel_id=${encodeURIComponent(channelId)}`)
|
|
.then(r => r.json())
|
|
.then(data => setSubscribed(data.subscribed))
|
|
.catch(() => setSubscribed(false));
|
|
}, [channelId]);
|
|
|
|
const handleSubscribe = async () => {
|
|
if (loading || !channelId) return;
|
|
setLoading(true);
|
|
try {
|
|
if (subscribed) {
|
|
const res = await fetch(`/api/subscribe?channel_id=${encodeURIComponent(channelId)}`, { method: 'DELETE' });
|
|
if (res.ok) setSubscribed(false);
|
|
} else {
|
|
const res = await fetch('/api/subscribe', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
channel_id: channelId,
|
|
channel_name: channelName || channelId,
|
|
channel_avatar: channelName ? channelName[0].toUpperCase() : '?',
|
|
}),
|
|
});
|
|
if (res.ok) setSubscribed(true);
|
|
}
|
|
} catch (error) {
|
|
console.error('Subscribe error:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<button
|
|
className={`channel-subscribe-btn ${subscribed ? 'subscribed' : ''}`}
|
|
onClick={handleSubscribe}
|
|
disabled={loading}
|
|
>
|
|
{loading ? '...' : subscribed ? 'Subscribed' : 'Subscribe'}
|
|
</button>
|
|
);
|
|
}
|