create-better-t-stack 2.8.2 → 2.8.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
import { createFileRoute } from "@tanstack/solid-router";
|
|
2
|
-
import { Loader2, Trash2 } from "lucide-solid";
|
|
3
|
-
import { createSignal, For, Show } from "solid-js";
|
|
4
|
-
import { orpc } from "@/utils/orpc";
|
|
5
|
-
import { useQuery, useMutation } from "@tanstack/solid-query";
|
|
6
|
-
|
|
7
|
-
export const Route = createFileRoute("/todos")({
|
|
8
|
-
component: TodosRoute,
|
|
9
|
-
});
|
|
10
|
-
|
|
11
|
-
function TodosRoute() {
|
|
12
|
-
const [newTodoText, setNewTodoText] = createSignal("");
|
|
13
|
-
|
|
14
|
-
const todos = useQuery(() => orpc.todo.getAll.queryOptions());
|
|
15
|
-
|
|
16
|
-
const createMutation = useMutation(() =>
|
|
17
|
-
orpc.todo.create.mutationOptions({
|
|
18
|
-
onSuccess: () => {
|
|
19
|
-
todos.refetch();
|
|
20
|
-
setNewTodoText("");
|
|
21
|
-
},
|
|
22
|
-
}),
|
|
23
|
-
);
|
|
24
|
-
|
|
25
|
-
const toggleMutation = useMutation(() =>
|
|
26
|
-
orpc.todo.toggle.mutationOptions({
|
|
27
|
-
onSuccess: () => todos.refetch(),
|
|
28
|
-
}),
|
|
29
|
-
);
|
|
30
|
-
|
|
31
|
-
const deleteMutation = useMutation(() =>
|
|
32
|
-
orpc.todo.delete.mutationOptions({
|
|
33
|
-
onSuccess: () => todos.refetch(),
|
|
34
|
-
}),
|
|
35
|
-
);
|
|
36
|
-
|
|
37
|
-
const handleAddTodo = (e: Event) => {
|
|
38
|
-
e.preventDefault();
|
|
39
|
-
if (newTodoText().trim()) {
|
|
40
|
-
createMutation.mutate({ text: newTodoText() });
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
const handleToggleTodo = (id: number, completed: boolean) => {
|
|
45
|
-
toggleMutation.mutate({ id, completed: !completed });
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
const handleDeleteTodo = (id: number) => {
|
|
49
|
-
deleteMutation.mutate({ id });
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
return (
|
|
53
|
-
<div class="mx-auto w-full max-w-md py-10">
|
|
54
|
-
<div class="rounded-lg border p-6 shadow-sm">
|
|
55
|
-
<div class="mb-4">
|
|
56
|
-
<h2 class="text-xl font-semibold">Todo List</h2>
|
|
57
|
-
<p class="text-sm">Manage your tasks efficiently</p>
|
|
58
|
-
</div>
|
|
59
|
-
<div>
|
|
60
|
-
<form
|
|
61
|
-
onSubmit={handleAddTodo}
|
|
62
|
-
class="mb-6 flex items-center space-x-2"
|
|
63
|
-
>
|
|
64
|
-
<input
|
|
65
|
-
type="text"
|
|
66
|
-
value={newTodoText()}
|
|
67
|
-
onInput={(e) => setNewTodoText(e.currentTarget.value)}
|
|
68
|
-
placeholder="Add a new task..."
|
|
69
|
-
disabled={createMutation.isPending}
|
|
70
|
-
class="w-full rounded-md border p-2 text-sm"
|
|
71
|
-
/>
|
|
72
|
-
<button
|
|
73
|
-
type="submit"
|
|
74
|
-
disabled={createMutation.isPending || !newTodoText().trim()}
|
|
75
|
-
class="rounded-md bg-blue-600 px-4 py-2 text-sm text-white disabled:opacity-50"
|
|
76
|
-
>
|
|
77
|
-
<Show when={createMutation.isPending} fallback="Add">
|
|
78
|
-
<Loader2 class="h-4 w-4 animate-spin" />
|
|
79
|
-
</Show>
|
|
80
|
-
</button>
|
|
81
|
-
</form>
|
|
82
|
-
|
|
83
|
-
<Show when={todos.isLoading}>
|
|
84
|
-
<div class="flex justify-center py-4">
|
|
85
|
-
<Loader2 class="h-6 w-6 animate-spin" />
|
|
86
|
-
</div>
|
|
87
|
-
</Show>
|
|
88
|
-
|
|
89
|
-
<Show when={!todos.isLoading && todos.data?.length === 0}>
|
|
90
|
-
<p class="py-4 text-center">No todos yet. Add one above!</p>
|
|
91
|
-
</Show>
|
|
92
|
-
|
|
93
|
-
<Show when={!todos.isLoading}>
|
|
94
|
-
<ul class="space-y-2">
|
|
95
|
-
<For each={todos.data}>
|
|
96
|
-
{(todo) => (
|
|
97
|
-
<li class="flex items-center justify-between rounded-md border p-2">
|
|
98
|
-
<div class="flex items-center space-x-2">
|
|
99
|
-
<input
|
|
100
|
-
type="checkbox"
|
|
101
|
-
checked={todo.completed}
|
|
102
|
-
onChange={() =>
|
|
103
|
-
handleToggleTodo(todo.id, todo.completed)
|
|
104
|
-
}
|
|
105
|
-
id={`todo-${todo.id}`}
|
|
106
|
-
class="h-4 w-4"
|
|
107
|
-
/>
|
|
108
|
-
<label
|
|
109
|
-
for={`todo-${todo.id}`}
|
|
110
|
-
class={todo.completed ? "line-through" : ""}
|
|
111
|
-
>
|
|
112
|
-
{todo.text}
|
|
113
|
-
</label>
|
|
114
|
-
</div>
|
|
115
|
-
<button
|
|
116
|
-
type="button"
|
|
117
|
-
onClick={() => handleDeleteTodo(todo.id)}
|
|
118
|
-
aria-label="Delete todo"
|
|
119
|
-
class="ml-2 rounded-md p-1"
|
|
120
|
-
>
|
|
121
|
-
<Trash2 class="h-4 w-4" />
|
|
122
|
-
</button>
|
|
123
|
-
</li>
|
|
124
|
-
)}
|
|
125
|
-
</For>
|
|
126
|
-
</ul>
|
|
127
|
-
</Show>
|
|
128
|
-
</div>
|
|
129
|
-
</div>
|
|
130
|
-
</div>
|
|
131
|
-
);
|
|
132
|
-
}
|