From a07dada0c9ba80976692ee14e256da0a2d6b0112 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sun, 1 Feb 2026 10:16:35 +0900
Subject: refactor(atoms): migrate to jotai-tanstack-query from custom
 reloadable atoms

Replace custom createReloadableAtom/createReloadableAtomFamily with
atomWithSuspenseQuery from jotai-tanstack-query, leveraging TanStack
Query's built-in caching, invalidation, and Suspense support.

- Add @tanstack/query-core and jotai-tanstack-query dependencies
- Create shared QueryClient instance (src/client/queryClient.ts)
- Migrate all data atoms (decks, cards, study, noteTypes) to atomWithSuspenseQuery
- Update page components to use .data destructuring and queryClient.invalidateQueries()
- Update all test files to use QueryClient for data hydration
- Remove src/client/atoms/utils.ts (no longer needed)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/client/pages/NoteTypesPage.tsx | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

(limited to 'src/client/pages/NoteTypesPage.tsx')

diff --git a/src/client/pages/NoteTypesPage.tsx b/src/client/pages/NoteTypesPage.tsx
index 8e742a7..d838e5b 100644
--- a/src/client/pages/NoteTypesPage.tsx
+++ b/src/client/pages/NoteTypesPage.tsx
@@ -7,8 +7,8 @@ import {
 	faTrash,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useAtomValue, useSetAtom } from "jotai";
-import { Suspense, useState, useTransition } from "react";
+import { useAtomValue } from "jotai";
+import { Suspense, useState } from "react";
 import { Link } from "wouter";
 import { type NoteType, noteTypesAtom } from "../atoms";
 import { CreateNoteTypeModal } from "../components/CreateNoteTypeModal";
@@ -16,6 +16,7 @@ import { DeleteNoteTypeModal } from "../components/DeleteNoteTypeModal";
 import { ErrorBoundary } from "../components/ErrorBoundary";
 import { LoadingSpinner } from "../components/LoadingSpinner";
 import { NoteTypeEditor } from "../components/NoteTypeEditor";
+import { queryClient } from "../queryClient";
 
 function NoteTypeList({
 	onEditNoteType,
@@ -24,7 +25,7 @@ function NoteTypeList({
 	onEditNoteType: (id: string) => void;
 	onDeleteNoteType: (noteType: NoteType) => void;
 }) {
-	const noteTypes = useAtomValue(noteTypesAtom);
+	const { data: noteTypes } = useAtomValue(noteTypesAtom);
 
 	if (noteTypes.length === 0) {
 		return (
@@ -114,9 +115,6 @@ function NoteTypeList({
 }
 
 export function NoteTypesPage() {
-	const reloadNoteTypes = useSetAtom(noteTypesAtom);
-	const [, startTransition] = useTransition();
-
 	const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 	const [editingNoteTypeId, setEditingNoteTypeId] = useState<string | null>(
 		null,
@@ -126,9 +124,7 @@ export function NoteTypesPage() {
 	);
 
 	const handleNoteTypeMutation = () => {
-		startTransition(() => {
-			reloadNoteTypes();
-		});
+		queryClient.invalidateQueries({ queryKey: ["noteTypes"] });
 	};
 
 	return (
-- 
cgit v1.3-1-g0d28