Show channel count for "Без категории" on the categories management page
Reuses the existing GET /api/channels?uncategorized=true endpoint client-side rather than changing the /api/categories response shape, which stays a plain array (kept several existing call sites simple). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
parent
b29bcfb8d7
commit
cdb1c2ded2
2 changed files with 23 additions and 0 deletions
|
|
@ -239,6 +239,16 @@
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.category-row-virtual {
|
||||||
|
background: #f7f7f7;
|
||||||
|
border-style: dashed;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-row-virtual .reorder-buttons {
|
||||||
|
width: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
.reorder-buttons {
|
.reorder-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ import {
|
||||||
createCategory,
|
createCategory,
|
||||||
deleteCategory,
|
deleteCategory,
|
||||||
listCategories,
|
listCategories,
|
||||||
|
listChannels,
|
||||||
reorderCategories,
|
reorderCategories,
|
||||||
updateCategory,
|
updateCategory,
|
||||||
} from '../api/client'
|
} from '../api/client'
|
||||||
|
|
@ -16,6 +17,10 @@ function Categories() {
|
||||||
const [editingName, setEditingName] = useState('')
|
const [editingName, setEditingName] = useState('')
|
||||||
|
|
||||||
const categoriesQuery = useQuery({ queryKey: ['categories'], queryFn: listCategories })
|
const categoriesQuery = useQuery({ queryKey: ['categories'], queryFn: listCategories })
|
||||||
|
const uncategorizedQuery = useQuery({
|
||||||
|
queryKey: ['channels', 'uncategorized-count'],
|
||||||
|
queryFn: () => listChannels({ subscribed: true, uncategorized: true }),
|
||||||
|
})
|
||||||
|
|
||||||
const invalidate = () => {
|
const invalidate = () => {
|
||||||
queryClient.invalidateQueries({ queryKey: ['categories'] })
|
queryClient.invalidateQueries({ queryKey: ['categories'] })
|
||||||
|
|
@ -85,6 +90,14 @@ function Categories() {
|
||||||
{createMutation.isError && <p className="error">{(createMutation.error as Error).message}</p>}
|
{createMutation.isError && <p className="error">{(createMutation.error as Error).message}</p>}
|
||||||
|
|
||||||
<ul className="category-list">
|
<ul className="category-list">
|
||||||
|
<li className="category-row category-row-virtual">
|
||||||
|
<div className="reorder-buttons" />
|
||||||
|
<span className="category-name">Без категории</span>
|
||||||
|
<span className="category-count">
|
||||||
|
{uncategorizedQuery.isLoading ? '…' : `${uncategorizedQuery.data?.length ?? 0} канал(ов)`}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
|
||||||
{categories.map((category, index) => (
|
{categories.map((category, index) => (
|
||||||
<li key={category.id} className="category-row">
|
<li key={category.id} className="category-row">
|
||||||
<div className="reorder-buttons">
|
<div className="reorder-buttons">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue