feat: add pagination and column controls to My Cookbooks page
- Add pagination controls (12, 24, 48, All items per page) - Add column count selector (3, 5, 7, 9 columns) - Add prev/next page navigation - Save preferences to localStorage - Update URL params for page and limit - Add responsive toolbar styling - Show results count with pagination info - Match UI/UX of All Recipes and Cookbook Detail pages
This commit is contained in:
Paul R Kartchner
@@ -1,11 +1,18 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||
import { Cookbook, Recipe, Tag } from '@basil/shared';
|
||||
import { cookbooksApi, recipesApi, tagsApi } from '../services/api';
|
||||
import '../styles/Cookbooks.css';
|
||||
|
||||
const ITEMS_PER_PAGE_OPTIONS = [12, 24, 48, -1]; // -1 = All
|
||||
|
||||
// LocalStorage keys
|
||||
const LS_ITEMS_PER_PAGE = 'basil_cookbooks_itemsPerPage';
|
||||
const LS_COLUMN_COUNT = 'basil_cookbooks_columnCount';
|
||||
|
||||
function Cookbooks() {
|
||||
const navigate = useNavigate();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [cookbooks, setCookbooks] = useState<Cookbook[]>([]);
|
||||
const [recentRecipes, setRecentRecipes] = useState<Recipe[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
@@ -22,10 +29,49 @@ function Cookbooks() {
|
||||
const [availableTags, setAvailableTags] = useState<Tag[]>([]);
|
||||
const [autoAddCollapsed, setAutoAddCollapsed] = useState(true);
|
||||
|
||||
// Pagination state
|
||||
const [currentPage, setCurrentPage] = useState(() => {
|
||||
const page = searchParams.get('page');
|
||||
return page ? parseInt(page) : 1;
|
||||
});
|
||||
const [itemsPerPage, setItemsPerPage] = useState(() => {
|
||||
const saved = localStorage.getItem(LS_ITEMS_PER_PAGE);
|
||||
if (saved) return parseInt(saved);
|
||||
const param = searchParams.get('limit');
|
||||
return param ? parseInt(param) : 24;
|
||||
});
|
||||
|
||||
// Display controls state
|
||||
const [columnCount, setColumnCount] = useState<3 | 5 | 7 | 9>(() => {
|
||||
const saved = localStorage.getItem(LS_COLUMN_COUNT);
|
||||
if (saved) {
|
||||
const val = parseInt(saved);
|
||||
if (val === 3 || val === 5 || val === 7 || val === 9) return val;
|
||||
}
|
||||
return 5;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
// Save preferences to localStorage
|
||||
useEffect(() => {
|
||||
localStorage.setItem(LS_ITEMS_PER_PAGE, itemsPerPage.toString());
|
||||
}, [itemsPerPage]);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem(LS_COLUMN_COUNT, columnCount.toString());
|
||||
}, [columnCount]);
|
||||
|
||||
// Update URL params
|
||||
useEffect(() => {
|
||||
const params = new URLSearchParams();
|
||||
if (currentPage > 1) params.set('page', currentPage.toString());
|
||||
if (itemsPerPage !== 24) params.set('limit', itemsPerPage.toString());
|
||||
setSearchParams(params, { replace: true });
|
||||
}, [currentPage, itemsPerPage, setSearchParams]);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
@@ -117,6 +163,32 @@ function Cookbooks() {
|
||||
setAutoFilterCookbookTags(autoFilterCookbookTags.filter(t => t !== tag));
|
||||
};
|
||||
|
||||
const handlePageChange = (newPage: number) => {
|
||||
setCurrentPage(newPage);
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
};
|
||||
|
||||
const handleItemsPerPageChange = (value: number) => {
|
||||
setItemsPerPage(value);
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
// Apply pagination to cookbooks
|
||||
const getPaginatedCookbooks = (): Cookbook[] => {
|
||||
if (itemsPerPage === -1) return cookbooks;
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
const endIndex = startIndex + itemsPerPage;
|
||||
return cookbooks.slice(startIndex, endIndex);
|
||||
};
|
||||
|
||||
const paginatedCookbooks = getPaginatedCookbooks();
|
||||
const totalPages = itemsPerPage === -1 ? 1 : Math.ceil(cookbooks.length / itemsPerPage);
|
||||
|
||||
// Grid style with CSS variables
|
||||
const gridStyle: React.CSSProperties = {
|
||||
gridTemplateColumns: `repeat(${columnCount}, 1fr)`,
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="cookbooks-page">
|
||||
@@ -153,6 +225,7 @@ function Cookbooks() {
|
||||
{/* Cookbooks Grid */}
|
||||
<section className="cookbooks-section">
|
||||
<h2>Cookbooks</h2>
|
||||
|
||||
{cookbooks.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
<p>No cookbooks yet. Create your first cookbook to organize your recipes!</p>
|
||||
@@ -161,8 +234,73 @@ function Cookbooks() {
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="cookbooks-grid">
|
||||
{cookbooks.map((cookbook) => (
|
||||
<>
|
||||
{/* Display and Pagination Controls */}
|
||||
<div className="cookbooks-toolbar">
|
||||
<div className="display-controls">
|
||||
<div className="control-group">
|
||||
<label>Columns:</label>
|
||||
<div className="column-buttons">
|
||||
{([3, 5, 7, 9] as const).map((count) => (
|
||||
<button
|
||||
key={count}
|
||||
className={columnCount === count ? 'active' : ''}
|
||||
onClick={() => setColumnCount(count)}
|
||||
>
|
||||
{count}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pagination-controls">
|
||||
<div className="control-group">
|
||||
<label>Per page:</label>
|
||||
<div className="items-per-page">
|
||||
{ITEMS_PER_PAGE_OPTIONS.map((count) => (
|
||||
<button
|
||||
key={count}
|
||||
className={itemsPerPage === count ? 'active' : ''}
|
||||
onClick={() => handleItemsPerPageChange(count)}
|
||||
>
|
||||
{count === -1 ? 'All' : count}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="page-navigation">
|
||||
<button
|
||||
onClick={() => handlePageChange(currentPage - 1)}
|
||||
disabled={currentPage <= 1}
|
||||
>
|
||||
Prev
|
||||
</button>
|
||||
<span className="page-info">
|
||||
Page {currentPage} of {totalPages}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => handlePageChange(currentPage + 1)}
|
||||
disabled={currentPage >= totalPages}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Results count */}
|
||||
<p className="results-count">
|
||||
{itemsPerPage === -1 ? (
|
||||
`Showing all ${cookbooks.length} cookbooks`
|
||||
) : (
|
||||
`Showing ${(currentPage - 1) * itemsPerPage + 1}-${Math.min(currentPage * itemsPerPage, cookbooks.length)} of ${cookbooks.length} cookbooks`
|
||||
)}
|
||||
</p>
|
||||
|
||||
<div className="cookbooks-grid" style={gridStyle}>
|
||||
{paginatedCookbooks.map((cookbook) => (
|
||||
<div
|
||||
key={cookbook.id}
|
||||
className="cookbook-card"
|
||||
@@ -195,6 +333,7 @@ function Cookbooks() {
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
|
||||
|
||||
@@ -37,9 +37,115 @@
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* Toolbar and Pagination Controls */
|
||||
.cookbooks-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 2rem;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
background: white;
|
||||
padding: 1.5rem;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.display-controls,
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: flex-end;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.control-group label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
.column-buttons,
|
||||
.items-per-page {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.column-buttons button,
|
||||
.items-per-page button {
|
||||
min-width: 2.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 2px solid #e0e0e0;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.column-buttons button:hover,
|
||||
.items-per-page button:hover {
|
||||
border-color: #2e7d32;
|
||||
background-color: #f1f8e9;
|
||||
}
|
||||
|
||||
.column-buttons button.active,
|
||||
.items-per-page button.active {
|
||||
background-color: #2e7d32;
|
||||
color: white;
|
||||
border-color: #2e7d32;
|
||||
}
|
||||
|
||||
.page-navigation {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-navigation button {
|
||||
padding: 0.5rem 1.25rem;
|
||||
border: 2px solid #2e7d32;
|
||||
background: white;
|
||||
color: #2e7d32;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.page-navigation button:hover:not(:disabled) {
|
||||
background-color: #2e7d32;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.page-navigation button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: #424242;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.results-count {
|
||||
font-size: 0.95rem;
|
||||
color: #757575;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cookbooks-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@@ -521,6 +627,19 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cookbooks-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.display-controls,
|
||||
.pagination-controls {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.cookbooks-grid,
|
||||
.recipes-grid {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
Reference in New Issue
Block a user