fix: backend none templates (#241)

apps/cli/templates/examples/todo/web/react/next/src/app/todos/page.tsx.hbs

@@ -12,20 +12,48 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Loader2, Trash2 } from "lucide-react";
 import { useState } from "react";
-import { useMutation, useQuery } from "@tanstack/react-query";
 
-{{#if (eq api "orpc")}}
+{{#if (eq backend "convex")}}
+import { useMutation, useQuery } from "convex/react";
+import { api } from "@{{projectName}}/backend/convex/_generated/api.js";
+import type { Id } from "@{{projectName}}/backend/convex/_generated/dataModel.d.ts";
+{{else}}
+import { useMutation, useQuery } from "@tanstack/react-query";
+  {{#if (eq api "orpc")}}
 import { orpc } from "@/utils/orpc";
-{{/if}}
-{{#if (eq api "trpc")}}
+  {{/if}}
+  {{#if (eq api "trpc")}}
 import { trpc } from "@/utils/trpc";
+  {{/if}}
 {{/if}}
 
 
 export default function TodosPage() {
   const [newTodoText, setNewTodoText] = useState("");
 
-  {{#if (eq api "orpc")}}
+  {{#if (eq backend "convex")}}
+  const todos = useQuery(api.todos.getAll);
+  const createTodoMutation = useMutation(api.todos.create);
+  const toggleTodoMutation = useMutation(api.todos.toggle);
+  const deleteTodoMutation = useMutation(api.todos.deleteTodo);
+
+  const handleAddTodo = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const text = newTodoText.trim();
+    if (!text) return;
+    await createTodoMutation({ text });
+    setNewTodoText("");
+  };
+
+  const handleToggleTodo = (id: Id<"todos">, currentCompleted: boolean) => {
+    toggleTodoMutation({ id, completed: !currentCompleted });
+  };
+
+  const handleDeleteTodo = (id: Id<"todos">) => {
+    deleteTodoMutation({ id });
+  };
+  {{else}}
+    {{#if (eq api "orpc")}}
     const todos = useQuery(orpc.todo.getAll.queryOptions());
     const createMutation = useMutation(
       orpc.todo.create.mutationOptions({
@@ -45,8 +73,8 @@ export default function TodosPage() {
         onSuccess: () => todos.refetch(),
       }),
     );
-  {{/if}}
-  {{#if (eq api "trpc")}}
+    {{/if}}
+    {{#if (eq api "trpc")}}
     const todos = useQuery(trpc.todo.getAll.queryOptions());
     const createMutation = useMutation(
       trpc.todo.create.mutationOptions({
@@ -66,7 +94,7 @@ export default function TodosPage() {
         onSuccess: () => todos.refetch(),
       }),
     );
-  {{/if}}
+    {{/if}}
 
   const handleAddTodo = (e: React.FormEvent) => {
     e.preventDefault();
@@ -82,6 +110,7 @@ export default function TodosPage() {
   const handleDeleteTodo = (id: number) => {
     deleteMutation.mutate({ id });
   };
+  {{/if}}
 
   return (
     <div className="mx-auto w-full max-w-md py-10">
@@ -99,20 +128,73 @@ export default function TodosPage() {
               value={newTodoText}
               onChange={(e) => setNewTodoText(e.target.value)}
               placeholder="Add a new task..."
+              {{#if (eq backend "convex")}}
+              {{else}}
               disabled={createMutation.isPending}
+              {{/if}}
             />
             <Button
               type="submit"
+              {{#if (eq backend "convex")}}
+              disabled={!newTodoText.trim()}
+              {{else}}
               disabled={createMutation.isPending || !newTodoText.trim()}
+              {{/if}}
             >
+              {{#if (eq backend "convex")}}
+                Add
+              {{else}}
                 {createMutation.isPending ? (
                   <Loader2 className="h-4 w-4 animate-spin" />
                 ) : (
                   "Add"
                 )}
+              {{/if}}
             </Button>
           </form>
 
+          {{#if (eq backend "convex")}}
+            {todos === undefined ? (
+              <div className="flex justify-center py-4">
+                <Loader2 className="h-6 w-6 animate-spin" />
+              </div>
+            ) : todos.length === 0 ? (
+              <p className="py-4 text-center">No todos yet. Add one above!</p>
+            ) : (
+              <ul className="space-y-2">
+                {todos.map((todo) => (
+                  <li
+                    key={todo._id}
+                    className="flex items-center justify-between rounded-md border p-2"
+                  >
+                    <div className="flex items-center space-x-2">
+                      <Checkbox
+                        checked={todo.completed}
+                        onCheckedChange={() =>
+                          handleToggleTodo(todo._id, todo.completed)
+                        }
+                        id={`todo-${todo._id}`}
+                      />
+                      <label
+                        htmlFor={`todo-${todo._id}`}
+                        className={`${todo.completed ? "line-through text-muted-foreground" : ""}`}
+                      >
+                        {todo.text}
+                      </label>
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => handleDeleteTodo(todo._id)}
+                      aria-label="Delete todo"
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </li>
+                ))}
+              </ul>
+            )}
+          {{else}}
             {todos.isLoading ? (
               <div className="flex justify-center py-4">
                 <Loader2 className="h-6 w-6 animate-spin" />
@@ -155,6 +237,7 @@ export default function TodosPage() {
                 ))}
               </ul>
             )}
+          {{/if}}
         </CardContent>
       </Card>
     </div>

apps/cli/templates/examples/todo/web/react/react-router/src/routes/todos.tsx.hbs

@@ -126,7 +126,6 @@ export default function Todos() {
               onChange={(e) => setNewTodoText(e.target.value)}
               placeholder="Add a new task..."
               {{#if (eq backend "convex")}}
-              {{!-- Convex mutations don't have an easy isPending state here, disable based on text --}}
               {{else}}
               disabled={createMutation.isPending}
               {{/if}}