Michael/podcastic
1
0 Fork 0
mirror of https://github.com/R0m1k3/podcastic.git synced 2026-10-21 22:18:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add AddPodcast and Trending pages for podcast discovery and subscription management

Browse Source
This commit is contained in:
Michael committed 2026-04-16 13:01:53 +02:00
1 parent f50d1072a9
commit 38521c45dc
2 files changed
+43 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/pages/AddPodcast.tsx
+21 -3
View File
@@ -3,7 +3,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { discoveryService, DiscoveryPodcast } from '../services/discoveryService';
import { podcastService } from '../services/podcastService';
import Header from '../components/Header';
import { Search, Plus, Loader, Rss } from 'lucide-react';
import { Search, Plus, Loader, Rss, Check } from 'lucide-react';
import { authService } from '../services/authService';
export default function AddPodcast() {
@@ -35,6 +35,15 @@ export default function AddPodcast() {
staleTime: 5 * 60 * 1000,
});
const { data: subsData } = useQuery({
queryKey: ['podcasts', 'subscriptions'],
queryFn: () => podcastService.getUserSubscriptions(),
});
const isSubscribed = (rssUrl: string) => {
return subsData?.podcasts.some(p => p.rssUrl === rssUrl);
};
const subscribeMutation = useMutation({
mutationFn: (podcast: DiscoveryPodcast) =>
discoveryService.subscribeFromDiscovery(podcast.rssUrl, {
@@ -178,14 +187,23 @@ export default function AddPodcast() {
<div className="flex items-center justify-between">
<button
onClick={() => handleSubscribe(podcast)}
disabled={subscribingId === podcast.id || subscribeMutation.isPending}
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
disabled={subscribingId === podcast.id || subscribeMutation.isPending || isSubscribed(podcast.rssUrl)}
className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors font-medium ${
isSubscribed(podcast.rssUrl)
? 'bg-light-200 text-light-500 cursor-default'
: 'bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed'
}`}
>
{subscribingId === podcast.id ? (
<>
<Loader className="w-4 h-4 animate-spin" />
Ajout...
</>
) : isSubscribed(podcast.rssUrl) ? (
<>
<Check className="w-4 h-4" />
Abonné
</>
) : (
<>
<Plus className="w-4 h-4" />
frontend/src/pages/Trending.tsx
+22 -3
View File
@@ -1,8 +1,9 @@
import { useState, useEffect } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { discoveryService, DiscoveryPodcast } from '../services/discoveryService';
import { podcastService } from '../services/podcastService';
import Header from '../components/Header';
import { Loader, Plus, Flame } from 'lucide-react';
import { Loader, Plus, Flame, Check } from 'lucide-react';
import { authService } from '../services/authService';
export default function Trending() {
@@ -28,6 +29,15 @@ export default function Trending() {
staleTime: 30 * 60 * 1000,
});
const { data: subsData } = useQuery({
queryKey: ['podcasts', 'subscriptions'],
queryFn: () => podcastService.getUserSubscriptions(),
});
const isSubscribed = (rssUrl: string) => {
return subsData?.podcasts.some(p => p.rssUrl === rssUrl);
};
const subscribeMutation = useMutation({
mutationFn: (podcast: DiscoveryPodcast) =>
discoveryService.subscribeFromDiscovery(podcast.rssUrl, {
@@ -112,14 +122,23 @@ export default function Trending() {
<div className="flex items-center justify-between">
<button
onClick={() => handleSubscribe(podcast)}
disabled={subscribingId === podcast.id || subscribeMutation.isPending}
className="flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium"
disabled={subscribingId === podcast.id || subscribeMutation.isPending || isSubscribed(podcast.rssUrl)}
className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors font-medium ${
isSubscribed(podcast.rssUrl)
? 'bg-light-200 text-light-500 cursor-default'
: 'bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed'
}`}
>
{subscribingId === podcast.id ? (
<>
<Loader className="w-4 h-4 animate-spin" />
Ajout...
</>
) : isSubscribed(podcast.rssUrl) ? (
<>
<Check className="w-4 h-4" />
Abonné
</>
) : (
<>
<Plus className="w-4 h-4" />