style(13-03): apply Prettier formatting across repo
Mechanical reformat — no logic changes. 398 files changed, 19125 insertions(+), 16457 deletions(-). Prettier 3.8.4 with .prettierrc (singleQuote:true, semi:true, tabWidth:2, trailingComma:all, printWidth:100). Isolated per D-13-08 for reviewability.
This commit is contained in:
@@ -18,75 +18,75 @@
|
||||
* as plain-text JSX children — no dangerouslySetInnerHTML anywhere.
|
||||
*/
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { useNavigate } from 'react-router'
|
||||
import { Plus } from 'lucide-react'
|
||||
import { fetchLists, deleteList } from '../api/listsClient.js'
|
||||
import type { List, ListsResponse } from '../api/listsClient.js'
|
||||
import { useListsStore } from '../store/listsStore.js'
|
||||
import { ListCard } from '../components/ListCard.js'
|
||||
import { ListDeleteDialog } from '../components/ListDeleteDialog.js'
|
||||
import { ListsEmptyState } from '../components/ListsEmptyState.js'
|
||||
import { CreateListSheet } from '../components/CreateListSheet.js'
|
||||
import { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useNavigate } from 'react-router';
|
||||
import { Plus } from 'lucide-react';
|
||||
import { fetchLists, deleteList } from '../api/listsClient.js';
|
||||
import type { List, ListsResponse } from '../api/listsClient.js';
|
||||
import { useListsStore } from '../store/listsStore.js';
|
||||
import { ListCard } from '../components/ListCard.js';
|
||||
import { ListDeleteDialog } from '../components/ListDeleteDialog.js';
|
||||
import { ListsEmptyState } from '../components/ListsEmptyState.js';
|
||||
import { CreateListSheet } from '../components/CreateListSheet.js';
|
||||
|
||||
// ── Main Component ─────────────────────────────────────────────────────────
|
||||
|
||||
export function ListsIndex() {
|
||||
const navigate = useNavigate()
|
||||
const queryClient = useQueryClient()
|
||||
const setCreateListSheetOpen = useListsStore((s) => s.setCreateListSheetOpen)
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const setCreateListSheetOpen = useListsStore((s) => s.setCreateListSheetOpen);
|
||||
|
||||
const [deleteTarget, setDeleteTarget] = useState<List | null>(null)
|
||||
const [deleteTarget, setDeleteTarget] = useState<List | null>(null);
|
||||
|
||||
const { data, isLoading, isError, refetch } = useQuery({
|
||||
queryKey: ['lists'],
|
||||
queryFn: fetchLists,
|
||||
retry: 2,
|
||||
staleTime: 30 * 1000,
|
||||
})
|
||||
});
|
||||
|
||||
const lists = data?.lists ?? []
|
||||
const lists = data?.lists ?? [];
|
||||
|
||||
// Delete mutation with optimistic removal
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: (listId: number) => deleteList(listId),
|
||||
onMutate: async (listId) => {
|
||||
await queryClient.cancelQueries({ queryKey: ['lists'] })
|
||||
const previous = queryClient.getQueryData<ListsResponse>(['lists'])
|
||||
await queryClient.cancelQueries({ queryKey: ['lists'] });
|
||||
const previous = queryClient.getQueryData<ListsResponse>(['lists']);
|
||||
queryClient.setQueryData<ListsResponse>(['lists'], (old) => ({
|
||||
lists: (old?.lists ?? []).filter((l) => l.id !== listId),
|
||||
}))
|
||||
return { previous }
|
||||
}));
|
||||
return { previous };
|
||||
},
|
||||
onError: (_err, _vars, context) => {
|
||||
if (context?.previous) {
|
||||
queryClient.setQueryData(['lists'], context.previous)
|
||||
queryClient.setQueryData(['lists'], context.previous);
|
||||
}
|
||||
// TODO: surface "Couldn't delete. Try again." toast (Plan 06 / notification layer)
|
||||
},
|
||||
onSettled: () => {
|
||||
// fire-and-forget: cache invalidation; React Query handles the refetch lifecycle
|
||||
void queryClient.invalidateQueries({ queryKey: ['lists'] })
|
||||
void queryClient.invalidateQueries({ queryKey: ['lists'] });
|
||||
},
|
||||
onSuccess: () => {
|
||||
void navigate('/lists')
|
||||
setDeleteTarget(null)
|
||||
void navigate('/lists');
|
||||
setDeleteTarget(null);
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
const handleDeleteRequest = (list: List) => {
|
||||
setDeleteTarget(list)
|
||||
}
|
||||
setDeleteTarget(list);
|
||||
};
|
||||
|
||||
const handleDeleteConfirm = () => {
|
||||
if (!deleteTarget) return
|
||||
deleteMutation.mutate(deleteTarget.id)
|
||||
}
|
||||
if (!deleteTarget) return;
|
||||
deleteMutation.mutate(deleteTarget.id);
|
||||
};
|
||||
|
||||
const handleDeleteClose = () => {
|
||||
setDeleteTarget(null)
|
||||
}
|
||||
setDeleteTarget(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -196,7 +196,9 @@ export function ListsIndex() {
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { void refetch() }}
|
||||
onClick={() => {
|
||||
void refetch();
|
||||
}}
|
||||
style={{
|
||||
background: 'var(--color-member-0)',
|
||||
color: '#fff',
|
||||
@@ -229,11 +231,7 @@ export function ListsIndex() {
|
||||
}}
|
||||
>
|
||||
{lists.map((list) => (
|
||||
<ListCard
|
||||
key={list.id}
|
||||
list={list}
|
||||
onDelete={handleDeleteRequest}
|
||||
/>
|
||||
<ListCard key={list.id} list={list} onDelete={handleDeleteRequest} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
@@ -251,5 +249,5 @@ export function ListsIndex() {
|
||||
{/* Create list sheet (D-01) */}
|
||||
<CreateListSheet />
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user