mirror of
https://github.com/R0m1k3/noteflow.git
synced 2026-10-24 07:38:17 +02:00
Feature: Flux RSS avec 14 articles et pagination
Modification du système d'affichage des flux RSS : Changements : - Augmentation de 8 à 14 articles maximum - Ajout d'un système de pagination (7 articles par page) - Navigation avec flèches ‹ › comme pour les todos - Format compact : "X/Y" pour l'indicateur de page - Hauteur ajustée : max-h-[calc(100vh-500px)] pour inclure la pagination - Réinitialisation automatique à la page 1 lors du rechargement des articles Constantes modifiées : - RSS_MAX_ARTICLES : 8 → 14 - RSS_PER_PAGE : nouveau à 7 - loadRssArticles : 15 → 14 articles chargés États ajoutés : - rssPage : pagination des articles RSS Résultat : - Page 1 : 7 articles - Page 2 : 7 articles - Total : 14 articles avec navigation intuitive
This commit is contained in:
1 file changed
+40
-4
+40
-4
@@ -84,10 +84,12 @@ const Index = () => {
|
|||||||
const [notesPage, setNotesPage] = useState(0);
|
const [notesPage, setNotesPage] = useState(0);
|
||||||
const [todosActivePage, setTodosActivePage] = useState(0);
|
const [todosActivePage, setTodosActivePage] = useState(0);
|
||||||
const [todosCompletedPage, setTodosCompletedPage] = useState(0);
|
const [todosCompletedPage, setTodosCompletedPage] = useState(0);
|
||||||
|
const [rssPage, setRssPage] = useState(0);
|
||||||
|
|
||||||
const NOTES_PER_PAGE = 5;
|
const NOTES_PER_PAGE = 5;
|
||||||
const TODOS_PER_PAGE = 10;
|
const TODOS_PER_PAGE = 10;
|
||||||
const RSS_MAX_ARTICLES = 8;
|
const RSS_MAX_ARTICLES = 14;
|
||||||
|
const RSS_PER_PAGE = 7;
|
||||||
|
|
||||||
// Debounce timer for auto-save
|
// Debounce timer for auto-save
|
||||||
const saveTimerRef = useRef<NodeJS.Timeout | null>(null);
|
const saveTimerRef = useRef<NodeJS.Timeout | null>(null);
|
||||||
@@ -169,7 +171,7 @@ const Index = () => {
|
|||||||
|
|
||||||
const loadRssArticles = async () => {
|
const loadRssArticles = async () => {
|
||||||
try {
|
try {
|
||||||
const articles = await RssService.getArticles(15);
|
const articles = await RssService.getArticles(14);
|
||||||
if (Array.isArray(articles)) {
|
if (Array.isArray(articles)) {
|
||||||
setRssArticles(articles);
|
setRssArticles(articles);
|
||||||
}
|
}
|
||||||
@@ -619,6 +621,10 @@ const Index = () => {
|
|||||||
setTodosCompletedPage(0);
|
setTodosCompletedPage(0);
|
||||||
}, [todos.length]);
|
}, [todos.length]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setRssPage(0);
|
||||||
|
}, [rssArticles.length]);
|
||||||
|
|
||||||
// Pagination for todos
|
// Pagination for todos
|
||||||
const activeTodos = todos.filter(t => !t.completed);
|
const activeTodos = todos.filter(t => !t.completed);
|
||||||
const completedTodos = todos.filter(t => t.completed);
|
const completedTodos = todos.filter(t => t.completed);
|
||||||
@@ -633,6 +639,13 @@ const Index = () => {
|
|||||||
(todosCompletedPage + 1) * TODOS_PER_PAGE
|
(todosCompletedPage + 1) * TODOS_PER_PAGE
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Pagination for RSS
|
||||||
|
const totalRssPages = Math.ceil(rssArticles.length / RSS_PER_PAGE);
|
||||||
|
const paginatedRssArticles = rssArticles.slice(
|
||||||
|
rssPage * RSS_PER_PAGE,
|
||||||
|
(rssPage + 1) * RSS_PER_PAGE
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||||
{/* Top Navigation */}
|
{/* Top Navigation */}
|
||||||
@@ -1392,9 +1405,9 @@ const Index = () => {
|
|||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent>
|
<CardContent>
|
||||||
<div className="space-y-2 max-h-[calc(100vh-400px)] overflow-y-auto">
|
<div className="space-y-2 max-h-[calc(100vh-500px)] overflow-y-auto">
|
||||||
{rssArticles.length > 0 ? (
|
{rssArticles.length > 0 ? (
|
||||||
rssArticles.slice(0, RSS_MAX_ARTICLES).map(article => (
|
paginatedRssArticles.map(article => (
|
||||||
<div
|
<div
|
||||||
key={article.id}
|
key={article.id}
|
||||||
className="p-2.5 border rounded hover:bg-accent/50 transition-colors cursor-pointer"
|
className="p-2.5 border rounded hover:bg-accent/50 transition-colors cursor-pointer"
|
||||||
@@ -1427,6 +1440,29 @@ const Index = () => {
|
|||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
{totalRssPages > 1 && (
|
||||||
|
<div className="flex items-center justify-center gap-2 mt-3 pt-3 border-t">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setRssPage(p => Math.max(0, p - 1))}
|
||||||
|
disabled={rssPage === 0}
|
||||||
|
>
|
||||||
|
‹
|
||||||
|
</Button>
|
||||||
|
<span className="text-xs text-muted-foreground">
|
||||||
|
{rssPage + 1}/{totalRssPages}
|
||||||
|
</span>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setRssPage(p => Math.min(totalRssPages - 1, p + 1))}
|
||||||
|
disabled={rssPage >= totalRssPages - 1}
|
||||||
|
>
|
||||||
|
›
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user