<?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; use Illuminate\Database\Eloquent\Relations\HasMany; class Project extends Model { use HasFactory; protected $table = 'projects'; public $timestamps = false; protected $fillable = [ 'id', // primary key, auto-increment, integer 'name', // string ]; // a project can have multiple tasks public function tasks(): HasMany { return $this->hasMany(Task::class); } }

 <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; use Illuminate\Database\Eloquent\Relations\BelongsTo; use Illuminate\Database\Eloquent\SoftDeletes; class Task extends Model { use HasFactory, SoftDeletes; protected $table = 'tasks'; protected $fillable = [ 'id', // primary key, auto-increment, integer 'project_id', // foreign key, integer 'priority', // integer 'title', // string 'description', // text ]; protected $appends = [ 'created', ]; // each task belongs to a single project public function project(): BelongsTo { return $this->belongsTo(Project::class); } public function getCreatedAttribute() { return $this->created_at->diffForHumans(); } }

 <?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; return new class extends Migration { public function up(): void { Schema::create('projects', function (Blueprint $table) { $table->id(); $table->string('name'); }); } public function down(): void { Schema::dropIfExists('projects'); } };

 <?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; return new class extends Migration { public function up(): void { Schema::create('tasks', function (Blueprint $table) { $table->id(); $table->foreignId('project_id')->nullable()->constrained(); $table->integer('priority'); $table->string('title'); $table->text('description')->nullable(); $table->timestamps(); $table->softDeletes(); }); } public function down(): void { // drop existing foreign keys Schema::table('tasks', function (Blueprint $table) { if (Schema::hasColumn('tasks', 'project_id')) { $table->dropForeign(['project_id']); } }); // drop the table Schema::dropIfExists('tasks'); } };

 <?php namespace Database\Seeders; use App\Models\Project; use Illuminate\Database\Seeder; class ProjectsSeeder extends Seeder { public function run(): void { for ($i = 1; $i <= 3; $i++) { Project::create([ 'name' => "Project $i", ]); } } }

 <?php namespace Database\Seeders; use App\Models\Project; use App\Models\Task; use Illuminate\Database\Seeder; class TasksSeeder extends Seeder { public function run(): void { $project_ids = Project::all()->pluck('id')->toArray(); $now = now(); $tasks = []; $project_priorities = []; foreach ($project_ids as $project_id) { $project_priorities[$project_id] = 0; } for ($i = 1; $i <= 10; $i++) { $project_id = $project_ids[array_rand($project_ids)]; $project_priorities[$project_id]++; $tasks[] = [ 'project_id' => $project_id, 'priority' => $project_priorities[$project_id], 'title' => "Task " . $project_priorities[$project_id], 'description' => "Description for Task " . $project_priorities[$project_id], 'created_at' => $now, 'updated_at' => $now, ]; } Task::insert($tasks); } }

 <?php namespace Database\Seeders; use Illuminate\Database\Seeder; class DatabaseSeeder extends Seeder { public function run(): void { $this->call([ ProjectsSeeder::class, TasksSeeder::class, ]); } }

 DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE="<DATABASE_NAME>" DB_USERNAME="<USERNAME>" DB_PASSWORD="<PASSWORD>"

 <?php namespace App\Services; use App\Models\Project; use Illuminate\Database\Eloquent\Collection; class ProjectService { public function getAll(): Collection { return Project::all(); } }

 <?php namespace App\Services; use App\Models\Task; use Illuminate\Support\Facades\DB; class TaskService { public function list(int $projectId) { return Task::with('project')->where('project_id', $projectId) ->orderBy('priority')->get(); } public function getById(int $id) { return Task::where('id', $id)->with('project')->first(); } public function store($data): void { $count = Task::where('project_id', $data['project_id'])->count(); $data['priority'] = $count + 1; Task::create($data); } public function update(int $id, array $data): void { $task = $this->getById($id); if (!$task) { return; } $task->update($data); } public function delete(int $id): void { $task = $this->getById($id); if (!$task) { return; } $task->delete(); $tasks = Task::where('project_id', $task->project_id) ->where('priority', '>', $task->priority)->get(); if ($tasks->isEmpty()) { return; } $when_then = ""; $where_in = ""; foreach ($tasks as $task) { $when_then .= "WHEN ".$task->id ." THEN ".($task->priority - 1)." "; $where_in .= $task->id.","; } $table_name = (new Task())->getTable(); $bulk_update_query = "UPDATE `".$table_name ."` SET `priority` = (CASE `id` ".$when_then."END)" ." WHERE `id` IN(".substr($where_in, 0, -1).");"; // there is no way to be SQL injected here // because all the values are not provided by the user DB::update($bulk_update_query); } public function reorder(int $project_id, int $start, int $end): void { $items = Task::where('project_id', $project_id) ->orderBy('priority')->pluck('priority', 'id')->toArray(); if ($start > count($items) || $end > count($items)) { return; } $ids = []; $priorities = []; foreach ($items as $id => $priority) { $ids[] = $id; $priorities[] = $priority; } $out_priority = array_splice($priorities, $start - 1, 1); array_splice($priorities, $end - 1, 0, $out_priority); $when_then = ""; $where_in = ""; foreach ($priorities as $out_k => $out_v) { $id = $ids[$out_v - 1]; $when_then .= "WHEN ".$id." THEN ".($out_k + 1)." "; $where_in .= $id.","; } $table_name = (new Task())->getTable(); $bulk_update_query = "UPDATE `".$table_name ."` SET `priority` = (CASE `id` ".$when_then."END)" ." WHERE `id` IN(".substr($where_in, 0, -1).")" ." AND `deleted_at` IS NULL;"; // soft delete DB::update($bulk_update_query); } }

 <?php use Illuminate\Support\Facades\Route; use App\Http\Controllers\TaskController; Route::group(['prefix' => '/', 'as' => 'tasks.'], function () { Route::get('/', [TaskController::class, 'index'])->name('index'); });

 <?php use Illuminate\Support\Facades\Route; use App\Http\Controllers\TaskController; Route::group(['prefix' => '/tasks', 'as' => 'tasks.'], function () { Route::get('/', [TaskController::class, 'list']); Route::get('/{id}', [TaskController::class, 'get']) ->where('id', '[1-9][0-9]*'); Route::post('/', [TaskController::class, 'store']); Route::put('/{id}', [TaskController::class, 'update']) ->where('id', '[1-9][0-9]*'); Route::delete('/{id}', [TaskController::class, 'delete']) ->where('id', '[1-9][0-9]*'); Route::put('/', [TaskController::class, 'reorder']); });

 return [ 'project_id' => 'required|integer|exists:projects,id', 'title' => 'required|string|max:255', 'description' => 'nullable|string', ];

 return [ 'project_id' => 'required|integer|exists:projects,id', ];

 return [ 'project_id' => 'required|integer|exists:projects,id', 'start' => 'required|integer', 'end' => 'required|integer|different:start', ];

 return [ 'title' => 'required|string|max:255', 'description' => 'nullable|string', ];

 public function authorize(): bool { return true; }

 <?php namespace App\Http\Controllers; use App\Http\Requests\Task\CreateTaskRequest; use App\Http\Requests\Task\ListTasksRequest; use App\Http\Requests\Task\ReorderTasksRequest; use App\Http\Requests\Task\UpdateTaskRequest; use App\Services\ProjectService; use App\Services\TaskService; use Illuminate\Http\JsonResponse; class TaskController extends Controller { protected ?TaskService $taskService = null; public function __construct(TaskService $taskService) { $this->taskService = $taskService; } public function index() { $projects = (new ProjectService())->getAll(); return view('tasks.index', [ 'projects' => $projects, ]); } public function list(ListTasksRequest $request): JsonResponse { $tasks = $this->taskService->list($request->get('project_id')); return response()->json([ 'success' => true, 'tasks' => $tasks, 'message' => "Tasks retrieved successfully.", ]); // 200 } public function store(CreateTaskRequest $request): JsonResponse { $this->taskService->store($request->all()); return response()->json([ 'success' => true, 'message' => "Task created successfully.", ], 201); } public function get(int $id): JsonResponse { $task = $this->taskService->getById($id); if ($task) { return response()->json([ 'success' => true, 'task' => $task, 'message' => "Task retrieved successfully.", ]); // 200 } else { return response()->json([ 'success' => false, 'message' => "Task not found!", ], 404); } } public function update(UpdateTaskRequest $request, int $id): JsonResponse { $this->taskService->update($id, $request->all()); return response()->json([ 'success' => true, 'message' => "Task updated successfully.", ], 201); } public function delete(int $id): JsonResponse { $this->taskService->delete($id); return response()->json([ 'success' => true, 'message' => "Task deleted successfully.", ], 201); } public function reorder(ReorderTasksRequest $request): JsonResponse { $this->taskService->reorder( $request->get('project_id'), $request->get('start'), $request->get('end') ); return response()->json([ 'success' => true, 'message' => "Tasks reordered successfully.", ], 201); } }

 import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import react from '@vitejs/plugin-react'; import 'dotenv/config'; export default defineConfig({ build: { minify: process.env.APP_ENV === 'production' ? 'esbuild' : false, cssMinify: process.env.APP_ENV === 'production', }, plugins: [ laravel({ input: ['resources/react/app.tsx'], refresh: true, }), react(), ], });

 <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>{{ config("app.name") }}</title> <link rel="shortcut icon" href="{{ asset('favicon.ico') }}" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> @viteReactRefresh @vite('resources/react/app.tsx') </head> <body> <div id="app" data-projects="{{ json_encode($projects) }}"></div> </body> </html>

 import ReactDOM from 'react-dom/client'; import Main from "./Main"; import './index.css' ReactDOM.createRoot(document.getElementById('app')).render( <Main /> );

 .test-class { color: red; }

 function Main() { return ( <div> <h2 className="test-class">React App</h2> </div> ); } export default Main;

 body { background-color: whitesmoke; color: rgba(255, 255, 255, 0.7); font-family: "Montserrat", sans-serif; cursor: default; margin: auto 0; } /* MODAL start */ .modal-content { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #fff; padding: 20px; border-radius: 5px; width: 500px; color: #2d3748; } .modal-header { font-size: 1.5rem; font-weight: 600; margin-bottom: 20px; } .modal-input-header { font-weight: 600; margin-bottom: 10px; } .modal-input { width: 100%; height: 30px; border: 1px solid #ccc; border-radius: 5px; padding: 5px; } .modal-textarea { width: 100%; height: 100px; border: 1px solid #ccc; border-radius: 5px; padding: 5px; margin-bottom: 20px; resize: vertical; } .modal-actions { display: flex; justify-content: space-between; align-items: center; width: 100%; } .modal-btn { padding: 10px 20px; border-radius: 5px; cursor: pointer; } .modal-btn-cancel { background-color: #e53e3e; color: #fff; border: none; } .modal-btn-cancel:hover { background-color: #c53030; } .modal-btn-submit { background-color: #2d3748; color: #fff; border: none; } .modal-btn-submit:hover { background-color: #4a5568; } .modal-question { font-size: 1.2rem; font-weight: 600; margin-bottom: 20px; } /* MODAL end */ /* LEFT & RIGHT SIDE start */ .left-side { width: 50%; float: left; } .right-side { width: 50%; float: left; } /* LEFT & RIGHT SIDE end */ /* LEFT SIDE start */ .left-side .no-tasks { font-size: 1.2rem; font-weight: 600; margin-bottom: 20px; text-align: center; color: #2d3748; } .left-side .task-item { padding: 10px; margin: 10px; min-height: 20px; min-width: 200px; color: #2d3748; list-style-type: none; } .left-side .task-item-content { display: flex; justify-content: space-between; align-items: center; } .left-side .task-project { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 10px; } .left-side .task-project-name { font-size: 1.5rem; font-weight: 600; margin-bottom: 5px; } .left-side .task-time { font-size: 0.8rem; } .left-side .task-title { font-size: 1.2rem; } .left-side .task-actions { display: flex; justify-content: space-between; align-items: center; } .left-side .task-edit-btn { background-color: #2d3748; color: #fff; border: none; border-radius: 5px; padding: 5px 10px; cursor: pointer; margin: 0 5px; } .left-side .task-edit-btn:hover { background-color: #4a5568; } .left-side .task-delete-btn { background-color: #e53e3e; color: #fff; border: none; border-radius: 5px; padding: 5px 10px; cursor: pointer; margin: 0 5px; } .left-side .task-delete-btn:hover { background-color: #c53030; } /* LEFT SIDE end */ /* RIGHT SIDE start */ .right-side .projects { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .right-side .projects-select { width: 100%; height: 30px; border: 1px solid #ccc; border-radius: 5px; padding: 5px; } .right-side .no-project-selected { font-size: 1.2rem; font-weight: 600; margin-bottom: 20px; } .right-side .right-side-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #fff; padding: 20px; border-radius: 5px; color: #2d3748; } .right-side .add-task-header { font-size: 1.5rem; font-weight: 600; margin-bottom: 20px; } .right-side .add-task-input-header { font-weight: 600; margin-bottom: 10px; } .right-side .add-task-input { width: 100%; height: 30px; border: 1px solid #ccc; border-radius: 5px; padding: 5px; } .right-side .add-task-textarea { width: 100%; height: 100px; border: 1px solid #ccc; border-radius: 5px; padding: 5px; margin-bottom: 20px; resize: vertical; } .right-side .add-task-actions { display: flex; justify-content: space-between; align-items: center; width: 100%; } .right-side .add-task-btn { padding: 10px 20px; border-radius: 5px; cursor: pointer; } .right-side .add-task-btn-cancel { background-color: #e53e3e; color: #fff; border: none; } .right-side .add-task-btn-cancel:hover { background-color: #c53030; } .right-side .add-task-btn-submit { background-color: #2d3748; color: #fff; border: none; } .right-side .add-task-btn-submit:hover { background-color: #4a5568; } /* RIGHT SIDE end */

 import axios from 'axios'; export default axios.create({ baseURL: '/api' });

 import axiosConfig from './axiosConfig'; import { toast } from 'react-toastify'; export const getErrorMessage = (error: unknown) => { if (error instanceof Error) return error.message; return String(error) } export const getTasks = async (projectId) => { if (!projectId) { toast.error("Project is required!"); return; } try { const response = await axiosConfig.get(`/tasks?project_id=${projectId}`); const { success, tasks, message } = response.data; if (success) { return tasks; } else { toast.error(message); return []; } } catch (err) { toast.error(getErrorMessage(err)); return []; } } export const reorderTasks = async (projectId, start, end) => { try { const response = await axiosConfig.put('/tasks', { project_id: projectId, start, end, }); const { success, message } = response.data; toast[success ? 'success' : 'error'](message); } catch (err) { toast.error(getErrorMessage(err)); } } export const editTask = async (task) => { if (!task.id) return; if (!task.title) { toast.error("Title is required!"); return; } try { const response = await axiosConfig.put(`/tasks/${task.id}`, { title: task.title, description: task.description, }); const { success, message } = response.data; toast[success ? 'success' : 'error'](message); } catch (err) { toast.error(getErrorMessage(err)); } } export const deleteTask = async (id) => { if (!id) { toast.error("Invalid task!"); return; } try { const response = await axiosConfig.delete(`/tasks/${id}`); const { success, message } = response.data; toast[success ? 'success' : 'error'](message); } catch (err) { toast.error(getErrorMessage(err)); } } export const createTask = async (task, projectId) => { if (!projectId) { toast.error("Project is required!"); return; } if (!task.title) { toast.error("Title is required!"); return; } try { const response = await axiosConfig.post(`/tasks?project_id=${projectId}`, { title: task.title, description: task.description, }); const { success, message } = response.data; toast[success ? 'success' : 'error'](message); } catch (err) { toast.error(getErrorMessage(err)); } }

 import {getTasks} from "../utils"; function SelectProject({projectId, projects, setProjectId, setTasks}) { const selectProject = (e) => { const value = e.target.value; setProjectId(value); if (value === '') { setTasks([]); } else { getTasks(value).then((tasksData) => setTasks(tasksData)); } }; return ( <div className="projects"> <select className="projects-select" value={projectId} onChange={selectProject}> <option value="" defaultValue>Choose a project</option> {projects.map((project) => ( <option key={project.id} value={project.id}>{project.name}</option> ))} </select> </div> ); } export default SelectProject;

 import {DragDropContext, Draggable, Droppable} from "react-beautiful-dnd"; import Task from "./Task"; import {reorderTasks} from "../utils"; const getItemStyle = (isDragging, draggableStyle) => ({ background: isDragging ? 'lightgreen' : 'grey', ...draggableStyle, }); function TaskList({ tasks, setIsModalEditOpen, setModalEditTask, setIsModalDeleteOpen, setModalDeleteTaskId, projectId, setTasks }) { const handleDragEnd = (result) => { if (!result.destination || result.destination.index === result.source.index) { return; } const items = Array.from(tasks); const [reorderedItem] = items.splice(result.source.index, 1); items.splice(result.destination.index, 0, reorderedItem); reorderTasks(projectId, result.source.index + 1, result.destination.index + 1); setTasks(items); }; return ( <DragDropContext onDragEnd={handleDragEnd}> <Droppable droppableId="droppable"> {(provided) => ( <ul {...provided.droppableProps} ref={provided.innerRef}> {tasks.map((task, index) => ( <Draggable key={task.id.toString()} draggableId={task.id.toString()} index={index}> {(provided, snapshot) => ( <li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} className="task-item" style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)} > <Task task={task} setIsModalEditOpen={setIsModalEditOpen} setModalEditTask={setModalEditTask} setIsModalDeleteOpen={setIsModalDeleteOpen} setModalDeleteTaskId={setModalDeleteTaskId} /> </li> )} </Draggable> ))} {provided.placeholder} </ul> )} </Droppable> </DragDropContext> ); } export default TaskList;

 function Task({ task, setIsModalEditOpen, setModalEditTask, setIsModalDeleteOpen, setModalDeleteTaskId }) { const handleEdit = () => { setModalEditTask(task); setIsModalEditOpen(true); }; const handleDelete = () => { setModalDeleteTaskId(task.id); setIsModalDeleteOpen(true); }; return ( <div className="task-item-content"> <span className="task-project"> <span className="task-project-name"> {task.project.name} </span> <span className="task-time"> Created {task.created} </span> </span> <span className="task-title">{task.title}</span> <div className="task-actions"> <button className="task-edit-btn" onClick={handleEdit}>Edit</button> <button className="task-delete-btn" onClick={handleDelete}>Delete</button> </div> </div> ); } export default Task;

 import {createTask} from "../utils"; function AddTaskForm({newTask, setNewTask, projectId, reloadTasks }) { const clearTaskCreate = () => { setNewTask({title: '', description: ''}); }; const submitTaskCreate = () => { createTask(newTask, projectId).then(() => { setNewTask({title: '', description: ''}); reloadTasks(); }); }; return ( <> <h2 className="add-task-header">Add Task</h2> <h3 className="add-task-header">Title</h3> <input type="text" className="add-task-input" onChange={(e) => setNewTask({ ...newTask, title: e.target.value })} value={newTask.title} /> <h3 className="add-task-input-header">Description</h3> <textarea className="add-task-textarea" onChange={(e) => setNewTask({ ...newTask, description: e.target.value })} value={newTask.description || ''} /> <div className="add-task-actions"> <button className="add-task-btn add-task-btn-cancel" onClick={clearTaskCreate}>Clear </button> <button className="add-task-btn add-task-btn-submit" onClick={submitTaskCreate}>Add</button> </div> </> ); } export default AddTaskForm;

 import {Modal} from "react-responsive-modal"; import React from "react"; import {editTask} from "../utils"; function ModalEdit({ isModalEditOpen, setIsModalEditOpen, setModalEditTask, modalEditTask, reloadTasks }) { const submitTaskEdit = () => { setIsModalEditOpen(false); editTask(modalEditTask).then(() => { reloadTasks(); }); }; return ( <Modal open={isModalEditOpen} center onClose={() => setIsModalEditOpen(false)}> <div className="modal-content"> <h2 className="modal-header">Edit Task</h2> <h3 className="modal-input-header">Title</h3> <input type="text" value={modalEditTask.title} className="modal-input" onChange={(e) => setModalEditTask({ ...modalEditTask, title: e.target.value })} /> <h3 className="modal-input-header">Description</h3> <textarea className="modal-textarea" onChange={(e) => setModalEditTask({ ...modalEditTask, description: e.target.value })} value={modalEditTask.description || ''} /> <div className="modal-actions"> <button className="modal-btn modal-btn-cancel" onClick={() => setIsModalEditOpen(false)} >Close </button> <button className="modal-btn modal-btn-submit" onClick={submitTaskEdit} >Save</button> </div> </div> </Modal> ) } export default ModalEdit;

 import {Modal} from "react-responsive-modal"; import {deleteTask} from "../utils"; function ModalDelete({ isModalDeleteOpen, setIsModalDeleteOpen, modalDeleteTaskId, reloadTasks }) { const submitTaskDelete = () => { setIsModalDeleteOpen(false); deleteTask(modalDeleteTaskId).then(() => { reloadTasks(); }); }; return ( <Modal open={isModalDeleteOpen} onClose={() => setIsModalDeleteOpen(false)} center> <div className="modal-content"> <h2 className="modal-header">Delete Task</h2> <p className="modal-question"> Are you sure you want to delete this task? </p> <div className="modal-actions"> <button className="modal-btn modal-btn-cancel" onClick={() => setIsModalDeleteOpen(false)} >Cancel</button> <button className="modal-btn modal-btn-submit" onClick={submitTaskDelete} >Yes</button> </div> </div> </Modal> ); } export default ModalDelete;

 import { useState } from 'react'; import {getTasks} from "./utils"; import "react-responsive-modal/styles.css"; import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import ModalEdit from "./components/ModalEdit"; import ModalDelete from "./components/ModalDelete"; import TaskList from "./components/TaskList"; import SelectProject from "./components/SelectProject"; import AddTaskForm from "./components/AddTaskForm"; function Main () { const [projectId, setProjectId] = useState(''); const projectsData = document.getElementById('app').getAttribute('data-projects'); const projects = JSON.parse(projectsData); const [tasks, setTasks] = useState([]); const [isModalEditOpen, setIsModalEditOpen] = useState(false); const [modalEditTask, setModalEditTask] = useState({id: '', title: '', description: ''}); const [isModalDeleteOpen, setIsModalDeleteOpen] = useState(false); const [modalDeleteTaskId, setModalDeleteTaskId] = useState(''); const [newTask, setNewTask] = useState({title: '', description: ''}); const reloadTasks = () => { getTasks(projectId).then((tasksData) => setTasks(tasksData)); }; return ( <div> <ToastContainer autoClose={2000} /> <ModalEdit isModalEditOpen={isModalEditOpen} setIsModalEditOpen={setIsModalEditOpen} modalEditTask={modalEditTask} setModalEditTask={setModalEditTask} reloadTasks={reloadTasks} /> <ModalDelete isModalDeleteOpen={isModalDeleteOpen} setIsModalDeleteOpen={setIsModalDeleteOpen} modalDeleteTaskId={modalDeleteTaskId} reloadTasks={reloadTasks} /> <div className="left-side"> {tasks.length > 0 ? ( <TaskList tasks={tasks} setIsModalEditOpen={setIsModalEditOpen} setModalEditTask={setModalEditTask} setIsModalDeleteOpen={setIsModalDeleteOpen} setModalDeleteTaskId={setModalDeleteTaskId} projectId={projectId} setTasks={setTasks} /> ) : ( <div className="no-tasks"> {projectId === '' ? ( <p>Choose a project to see its tasks.</p> ) : ( <p>This project has no tasks.</p> )} </div> )} </div> <div className="right-side"> <div className="right-side-wrapper"> <SelectProject projectId={projectId} projects={projects} setProjectId={setProjectId} setTasks={setTasks} /> {projectId === '' ? ( <div className="no-project-selected"> <p>Please select a project.</p> </div> ) : ( <AddTaskForm newTask={newTask} setNewTask={setNewTask} projectId={projectId} reloadTasks={reloadTasks} /> )} </div> </div> </div> ); } export default Main;