refactor(examples): nested collection query improvements

Author: cabljac

examples/react/kitchen-sink/src/App.tsx

@@ -1,9 +1,10 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { useState } from "react";
-import { Routes, Route, Link, useLocation } from "react-router-dom";
-import { IdTokenExample } from "./components/IdTokenExample";
+import { Link, Route, Routes, useLocation } from "react-router-dom";
 import { CollectionQueryExample } from "./components/CollectionQueryExample";
+import { IdTokenExample } from "./components/IdTokenExample";
+import { NestedCollectionsExample } from "./components/NestedCollectionsExample";
 
 import "./firebase";
 
@@ -16,7 +17,7 @@ function App() {
             staleTime: 60 * 1000,
           },
         },
-      })
+      }),
   );
 
   return (
@@ -32,6 +33,10 @@ function App() {
                 path="/firestore/collection-query"
                 element={<CollectionQueryExample />}
               />
+              <Route
+                path="/nested-collections"
+                element={<NestedCollectionsExample />}
+              />
             </Routes>
           </div>
         </div>

examples/react/kitchen-sink/src/components/CollectionQueryExample.tsx

@@ -1,5 +1,8 @@
 import {
-  addDoc,
+  useAddDocumentMutation,
+  useCollectionQuery,
+} from "@tanstack-query-firebase/react/firestore";
+import {
   collection,
   deleteDoc,
   doc,
@@ -8,11 +11,6 @@ import {
   where,
 } from "firebase/firestore";
 import { useState } from "react";
-import {
-  useCollectionQuery,
-  useAddDocumentMutation,
-  useDeleteDocumentMutation,
-} from "@tanstack-query-firebase/react/firestore";
 
 interface Task {
   id: string;
@@ -50,9 +48,6 @@ export function CollectionQueryExample() {
   // Add task mutation
   const addTaskMutation = useAddDocumentMutation(tasksCollection);
 
-  // Delete task mutation
-  const deleteTaskMutation = useDeleteDocumentMutation();
-
   const handleAddTask = async () => {
     if (!newTaskTitle.trim()) return;
 
@@ -74,9 +69,8 @@ export function CollectionQueryExample() {
 
   const handleToggleTask = async (
     taskId: string,
-    currentCompleted: boolean
+    currentCompleted: boolean,
   ) => {
-    const taskRef = doc(firestore, "tasks", taskId);
     // Note: In a real app, you'd use useUpdateDocumentMutation here
     // For simplicity, we're just showing the query functionality
     console.log(`Would toggle task ${taskId} to ${!currentCompleted}`);
@@ -85,7 +79,7 @@ export function CollectionQueryExample() {
   const handleDeleteTask = async (taskId: string) => {
     const taskRef = doc(firestore, "tasks", taskId);
     try {
-      await deleteTaskMutation.mutateAsync(taskRef);
+      await deleteDoc(taskRef);
     } catch (error) {
       console.error("Failed to delete task:", error);
     }
@@ -263,15 +257,14 @@ export function CollectionQueryExample() {
                   </div>
                   <span
                     className={`px-2 py-1 rounded-full text-xs font-medium ${getPriorityColor(
-                      task.priority
+                      task.priority,
                     )}`}
                   >
                     {task.priority}
                   </span>
                 </div>
                 <button
                   onClick={() => handleDeleteTask(task.id)}
-                  disabled={deleteTaskMutation.isPending}
                   className="ml-4 px-3 py-1 text-red-600 hover:bg-red-50 rounded-md text-sm font-medium"
                 >
                   Delete
@@ -298,8 +291,8 @@ export function CollectionQueryExample() {
             {filterCompleted === null
               ? "All"
               : filterCompleted
-              ? "Completed"
-              : "Pending"}
+                ? "Completed"
+                : "Pending"}
           </p>
           <p>
             <strong>Status:</strong>{" "}

examples/react/kitchen-sink/src/components/IdTokenExample.tsx

@@ -9,7 +9,7 @@ export function IdTokenExample() {
   const [refreshCount, setRefreshCount] = useState(0);
   const [previousToken, setPreviousToken] = useState<string | null>(null);
   const [lastForceRefreshTime, setLastForceRefreshTime] = useState<Date | null>(
-    null
+    null,
   );
 
   // Listen for auth state changes
@@ -44,7 +44,7 @@ export function IdTokenExample() {
     if (token) {
       console.log(
         "Token retrieved successfully:",
-        `${token.substring(0, 20)}...`
+        `${token.substring(0, 20)}...`,
       );
 
       // Check if token changed
@@ -129,7 +129,7 @@ export function IdTokenExample() {
           ) : (
             <div>
               <div className="space-y-3">
-                <p className="text-sm text-gray-600 font-mono text-xs">
+                <p className="text-sm text-gray-600 font-mono">
                   Token hash: {token ? `${btoa(token).slice(0, 16)}...` : ""}
                 </p>
                 {lastRefreshTime && (
@@ -170,7 +170,7 @@ export function IdTokenExample() {
             <p className="text-gray-600">Loading fresh token...</p>
           ) : freshToken ? (
             <div className="space-y-3">
-              <p className="text-sm text-gray-600 font-mono text-xs">
+              <p className="text-sm text-gray-600 font-mono">
                 Token hash:{" "}
                 {freshToken ? `${btoa(freshToken).slice(0, 16)}...` : ""}
               </p>
@@ -237,7 +237,7 @@ export function IdTokenExample() {
                       const result = [];
                       const maxLength = Math.max(
                         token.length,
-                        freshToken.length
+                        freshToken.length,
                       );
 
                       for (let i = 0; i < maxLength; i++) {
@@ -252,13 +252,13 @@ export function IdTokenExample() {
                               className="bg-yellow-300 text-red-600 font-bold"
                             >
                               {freshToken[i] || "∅"}
-                            </span>
+                            </span>,
                           );
                         } else {
                           result.push(
                             <span key={i} className="text-gray-600">
                               {token[i]}
-                            </span>
+                            </span>,
                           );
                         }
                       }