updated

Author: wpcodevo

src/components/TodoForm.tsx

@@ -7,6 +7,7 @@ export default function TodoForm() {
   const [newTodo, setNewTodo] = useState("");
 
   const handleCreateTodo = async () => {
+    if (newTodo.length === 0) return alert("Todo input must not be empty");
     try {
       setLoading(true);
       const todo = { title: newTodo };

src/components/TodoItem.tsx

@@ -39,7 +39,9 @@ const TodoItem: React.FC<TodoItemProps> = ({ todo }) => {
       </span>
       <button
         disabled={loading}
-        className="px-2 py-1 bg-red-500 text-white rounded"
+        className={`px-2 py-1 text-white rounded ${
+          loading ? "bg-gray-400" : "bg-red-500"
+        }`}
         onClick={handleDelete}
       >
         Delete

src/store.ts

@@ -18,11 +18,15 @@ type TodoStore = {
   deleteTodo: (id: number) => void;
 };
 
+const URL = process.env.NEXT_PUBLIC_VERCEL_URL
+  ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}/api`
+  : "http://localhost:3000/api";
+
 export const useStore = create<TodoStore>((set) => ({
   todos: [],
   fetchTodos: async () => {
     try {
-      const response = await fetch("/api/todos");
+      const response = await fetch(`${URL}/todos`);
       const todos = await response.json();
       set({ todos });
     } catch (error) {
@@ -31,7 +35,7 @@ export const useStore = create<TodoStore>((set) => ({
   },
   addTodo: async (todo) => {
     try {
-      const response = await fetch("/api/todos", {
+      const response = await fetch(`${URL}/todos`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -46,7 +50,7 @@ export const useStore = create<TodoStore>((set) => ({
   },
   updateTodo: async (updatedTodo) => {
     try {
-      const response = await fetch(`/api/todos/${updatedTodo.id}`, {
+      const response = await fetch(`${URL}/todos/${updatedTodo.id}`, {
         method: "PATCH",
         headers: {
           "Content-Type": "application/json",
@@ -65,7 +69,7 @@ export const useStore = create<TodoStore>((set) => ({
   },
   deleteTodo: async (id) => {
     try {
-      await fetch(`/api/todos/${id}`, {
+      await fetch(`${URL}/todos/${id}`, {
         method: "DELETE",
       });
       set((state) => ({