ساخت برنامه Todo با Drizzle و PostgreSQL , MySQL و SQLite در NextJS

npx create-next-app@latest drizzle-todo-app

import type { NextApiRequest, NextApiResponse } from 'next';
import { db } from '@/db';
import { todoTable, TodoType } from '@/schema';
import { eq } from 'drizzle-orm';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const { method } = req;

switch (method) {
  case 'POST':
    const { text } = req.body;
    await db.insert(todoTable).values({ text });
    res.status(201).end();
    break;

  case 'GET':
    const todos: TodoType[] = await db.select().from(todoTable);
    res.status(200).json(todos);
    break;

  case 'PUT':
    const { id, text: newText, done } = req.body;
    await db.update(todoTable).set({ text: newText, done: done ? true : false }).where(eq(todoTable.id, id));
    res.status(200).end();
    break;

  case 'DELETE':
    const { id: deleteId } = req.body;
    await db.delete(todoTable).where(eq(todoTable.id, deleteId));
    res.status(200).end();
    break;

  default:
    res.setHeader('Allow', ['GET', 'POST', 'PUT', 'DELETE']);
    res.status(405).end(`Method ${method} Not Allowed`);
}
}

import { useState, FormEvent } from 'react';

interface AddTodoProps {
onAdd: () => void;
}

const AddTodo = ({ onAdd }: AddTodoProps) => {
const [text, setText] = useState<string>('');

const handleSubmit = async (e: FormEvent) => {
  e.preventDefault();
  if (!text.trim()) return;

  const res = await fetch('/api/todos', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ text }),
  });

  if (res.ok) {
    onAdd();
    setText('');
  }
};

return (
  <form onSubmit={handleSubmit}>
    <input 
      type="text" 
      value={text} 
      onChange={(e) => setText(e.target.value)} 
      placeholder="Add a new task" 
    />
    <button type="submit">Add</button>
  </form>
);
};

export default AddTodo;

import { useState } from 'react';
import { TodoType } from '@/schema';

interface TodoProps {
todo: TodoType;
onUpdate: () => void;
onDelete: () => void;
}

const Todo = ({ todo, onUpdate, onDelete }: TodoProps) => {
const [isEditing, setIsEditing] = useState(false);
const [text, setText] = useState(todo.text);

const handleEdit = async () => {
  await fetch('/api/todos', {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ id: todo.id, text, done: todo.done }),
  });
  setIsEditing(false);
  onUpdate();
};

const handleToggle = async () => {
  await fetch('/api/todos', {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ id: todo.id, text: todo.text, done: !todo.done }),
  });
  onUpdate();
};

const handleDelete = async () => {
  await fetch('/api/todos', {
    method: 'DELETE',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ id: todo.id }),
  });
  onDelete();
};

return (
  <div className="todo-item">
    {isEditing ? (
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
    ) : (
      <span className={`todo-text ${todo.done ? 'done' : ''}`}>
        {todo.text}
      </span>
    )}
    <div className="todo-actions">
      {isEditing ? (
        <button onClick={handleEdit}>Save</button>
      ) : (
        <>
          <button onClick={() => setIsEditing(true)}>Edit</button>
          <button onClick={handleToggle}>
            {todo.done ? 'Undone' : 'Done'}
          </button>
          <button onClick={handleDelete}>Delete</button>
        </>
      )}
    </div>
  </div>
);
};

export default Todo;

// src/components/Todos.tsx
import { useState, useEffect } from 'react';
import Todo from './Todo';
import AddTodo from './AddTodo';
import { TodoType } from '@/schema';

const Todos = () => {
const [todos, setTodos] = useState<TodoType[]>([]);

const fetchTodos = async () => {
  const res = await fetch('/api/todos');
  const data: TodoType[] = await res.json();
  setTodos(data);
};

useEffect(() => {
  fetchTodos();
}, []);

const activeTodos = todos.filter(todo => !todo.done);
const doneTodos = todos.filter(todo => todo.done);

return (
  <div>
    <AddTodo onAdd={fetchTodos} />
    <h2>Active Todos</h2>
    <div>
      {activeTodos.map((todo) => (
        <Todo key={todo.id} todo={todo} onUpdate={fetchTodos} onDelete={fetchTodos} />
      ))}
    </div>
    <h2>Done Todos</h2>
    <div>
      {doneTodos.map((todo) => (
        <Todo key={todo.id} todo={todo} onUpdate={fetchTodos} onDelete={fetchTodos} />
      ))}
    </div>
  </div>
);
};

export default Todos;

import Todos from '@/components/Todos';

export default function Home() {
return (
  <div>
    <h1>Todo List</h1>
    <Todos />
  </div>
);
}

npm run dev