React - utilities, components, interaction

Author: boolfalse

resources/react/Main.tsx

@@ -1,8 +1,85 @@
 
-function Main() {
+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>
-            <h2 className="test-class">React App</h2>
+            <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 to be able to add tasks.</p>
+                        </div>
+                    ) : (
+                        <AddTaskForm newTask={newTask}
+                                     setNewTask={setNewTask}
+                                     projectId={projectId}
+                                     reloadTasks={reloadTasks}
+                        />
+                    )}
+                </div>
+            </div>
         </div>
     );
 }

resources/react/axiosConfig.ts

@@ -0,0 +1,6 @@
+
+import axios from 'axios';
+
+export default axios.create({
+    baseURL: '/api',
+});

resources/react/components/AddTaskForm.tsx

@@ -0,0 +1,46 @@
+
+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;

resources/react/components/ModalDelete.tsx

@@ -0,0 +1,39 @@
+
+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;

resources/react/components/ModalEdit.tsx

@@ -0,0 +1,49 @@
+
+import {Modal} from "react-responsive-modal";
+import React from "react";
+import {editTask} from "../utils";
+
+
+function ModalEdit({
+                       isModalEditOpen,
+                       setIsModalEditOpen,
+                       modalEditTask,
+                       setModalEditTask,
+                       reloadTasks
+}) {
+    const submitTaskEdit = () => {
+        setIsModalEditOpen(false);
+        editTask(modalEditTask).then(() => {
+            reloadTasks();
+        });
+    };
+
+    return (
+        <Modal open={isModalEditOpen} onClose={() => setIsModalEditOpen(false)} center>
+            <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;

resources/react/components/SelectProject.tsx

@@ -0,0 +1,36 @@
+
+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;

resources/react/components/Task.tsx

@@ -0,0 +1,34 @@
+
+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;

resources/react/components/TaskList.tsx

@@ -0,0 +1,66 @@
+
+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;