init

lisaaksionova · Dec 2, 2024 · 566148d · 566148d
1 parent 1268ee5
commit 566148d
Show file tree

Hide file tree

Showing 19 changed files with 880 additions and 68 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@dnd-kit/core": "^6.2.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -39,5 +40,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "sass": "^1.81.0"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>My Todo List</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
@@ -1,38 +1,7 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.App{
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+  justify-content: space-between;
+  height: 100vh;
+  background-color: #e5e5dc;
+}
diff --git a/src/App.test.tsx b/src/App.test.tsx
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,24 +1,99 @@
-import React from 'react';
-import logo from './logo.svg';
+import React, {useState} from 'react';
 import './App.css';
+import TaskLine from './features/TaskLine/TaskLine.component';
+import TaskModal from './features/TaskModal/TaskModal.component';
+import { TaskStatus } from './models/TaskStatus';
+import { Task } from './models/Task';
+import { DndContext, DragEndEvent } from '@dnd-kit/core';
 
 function App() {
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [selectedTask, setSelectedTask] = useState<Task | null>(null);
+
+
+  const handleOpenModal = () => setIsModalOpen(true);
+  const handleCloseModal = () => setIsModalOpen(false);
+
+  const handleSaveTask = (task: { id?: number; title: string; text: string }) => {
+    if (task.id) {
+      // Editing an existing task
+      setTasks((prevTasks) =>
+        prevTasks.map((t) =>
+          t.id === task.id ? { ...t, title: task.title, text: task.text } : t
+        )
+      );
+    } else {
+      // Adding a new task
+      const newTask: Task = {
+        id: tasks.length + 1,
+        title: task.title,
+        text: task.text,
+        status: TaskStatus.Pending,
+      };
+      setTasks([...tasks, newTask]);
+    }
+    setSelectedTask(null);
+    setIsModalOpen(false);
+  };
+
+
+  function handleDragEnd(event: DragEndEvent){
+    const {active, over} = event;
+
+    if (!over) return;
+
+    const taskId = active.id as number;
+    const newStatus = over.id as Task['status'];
+
+    setTasks(() => tasks.map(task => task.id === taskId ? {
+      ...task,
+      status: newStatus,
+    } : task))
+  }
+
+  const handleDeleteTask = (id: number) => {
+    console.log("Deleting task with id:", id);
+    setTasks((prevTasks) => prevTasks.filter((task) => task.id !== id));
+  };
+
+  const handleEditTask = (task: Task) => {
+    setSelectedTask(task);
+    setIsModalOpen(true);
+  };
+
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <DndContext onDragEnd={handleDragEnd}>
+      <TaskLine
+  taskLineName="Pending"
+  tasks={tasks.filter((task) => task.status === TaskStatus.Pending)}
+  onCreateTask={handleOpenModal}
+  onDeleteTask={handleDeleteTask}
+  onEditTask={handleEditTask}
+/>
+<TaskLine
+  taskLineName="In Progress"
+  tasks={tasks.filter((task) => task.status === TaskStatus.InProgress)}
+  onDeleteTask={handleDeleteTask}
+  onEditTask={handleEditTask}
+/>
+<TaskLine
+  taskLineName="Done"
+  tasks={tasks.filter((task) => task.status === TaskStatus.Done)}
+  onDeleteTask={handleDeleteTask}
+  onEditTask={handleEditTask}
+/>
+
+      </DndContext>
+      <TaskModal
+  isOpen={isModalOpen}
+  onClose={handleCloseModal}
+  onSave={handleSaveTask}
+  task={selectedTask}
+/>
+
     </div>
   );
 }

diff --git a/src/features/CreateTask/CreateTask.component.tsx b/src/features/CreateTask/CreateTask.component.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import './CreateTask.styles.scss';
+
+type Props = {
+  onOpenModal: () => void;
+};
+
+
+const CreateTask = ({ onOpenModal }: Props) => {
+  return (
+    <div className="createtask-card" onClick={onOpenModal}>
+      <p>+</p>
+    </div>
+  );
+};
+
+export default CreateTask;
diff --git a/src/features/CreateTask/CreateTask.styles.scss b/src/features/CreateTask/CreateTask.styles.scss
@@ -0,0 +1,18 @@
+.createtask-card{
+  display: flex;
+  width: 180px; 
+  height: 200px; 
+  background-color: #f5f0e1;
+  border-radius: 8px;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.78;
+}
+.createtask-card:hover{
+  opacity: 1;
+}
+.createtask-card > p {
+  color: #1e3d59;
+  font-size: 60px;
+}
diff --git a/src/features/Task/Task.component.tsx b/src/features/Task/Task.component.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import './Task.styles.scss';
+import { Task as TaskType } from '../../models/Task';
+import { useDraggable } from '@dnd-kit/core';
+import { TaskStatus } from '../../models/TaskStatus';
+import { stat } from 'fs/promises';
+
+interface Props {
+  id: number;
+  title: string;
+  text: string;
+  status: TaskStatus;
+  deleteTask: () => void; // Function to delete the task
+  onEdit: () => void; // Function to edit the task
+};
+
+
+const Task= ({ id, title, text, status, deleteTask, onEdit } : Props) => {
+
+  const {attributes, listeners, setNodeRef, transform} = useDraggable({id: id});
+
+  const style = transform ? {
+    position: 'absolute' as 'absolute', 
+    zIndex: '1000',
+    transform: `translate(${transform.x}px, ${transform.y}px)`,
+  } : undefined;  
+
+  // const headerColor = status === TaskStatus.Pending ? "#5c3c92" : 
+  // status === TaskStatus.InProgress ? "#ff6e40" : "#c4a35a";
+
+  return (
+    <div  className='task-card'
+    style={style}>
+      <div className="task-header" ref={setNodeRef} {...listeners} {...attributes}
+      // style={
+      //   {backgroundColor: headerColor}
+      // }
+      >
+        <h3>{title}</h3>
+      </div>
+      <div className="task-textarea" ref={setNodeRef} {...listeners} {...attributes}>
+        <p className='task-text'>{text} </p>
+      </div>
+      <div className="task-footer">
+        <button type="submit" className='button' onClick={onEdit}>Edit</button>
+        <button type="submit" className='button' onClick={deleteTask}>Delete</button>
+      </div>
+    </div>
+  )
+}
+
+export default Task;
diff --git a/src/features/Task/Task.styles.scss b/src/features/Task/Task.styles.scss
@@ -0,0 +1,59 @@
+.task-card{
+  display: flex;
+  flex-direction: column;
+  width: 180px; 
+  height: 200px; 
+  background-color: #f5f0e1;
+  border-radius: 8px;
+  box-shadow: 3px 3px 3px red;
+  overflow: hidden;
+  // position: fixed;
+}
+
+.task-card:active{
+  box-shadow: 5px 5px 5px rgba(255, 0, 0, 0.563);
+}
+
+.task-header{
+  background-color: #ff6e40;
+  color: white;
+  padding: 0.65px;
+  font-size: 13px;
+  font-weight: bold;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.task-textarea{
+  padding: 6px;
+  font-size: 13px;
+  color: #333;
+  text-align: center;
+  overflow: hidden;
+  flex-grow: 1;
+}
+
+.task-footer{
+  display: flex;
+  justify-content: space-between;
+  background-color: #ffc13b;
+  color: #555;
+  padding: 6px;
+  text-align: center;
+  border-top: 1px solid #ddd;
+  flex-shrink: 0;
+}
+
+.button{
+  width: 57px;
+  height: 30px;
+  margin: 0 7px;
+  background-color: #f5f0e1;
+  border: 1.25px solid #ff6e40;
+  border-radius: 6px;
+  color: #1e3d59;
+  font-weight: bold;
+}
+.button:hover{
+  background-color: #f5f0e1ba;
+}
diff --git a/src/features/TaskLine/TaskLine.component.tsx b/src/features/TaskLine/TaskLine.component.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import './TaskLine.styles.scss';
+import Task from '../Task/Task.component';
+import CreateTask from '../CreateTask/CreateTask.component';
+import { TaskStatus } from '../../models/TaskStatus';
+import { Task as TaskType } from '../../models/Task';
+import { useDroppable } from '@dnd-kit/core';
+
+type Props = {
+  taskLineName: string;
+  tasks: TaskType[];
+  onCreateTask?: () => void;
+  onDeleteTask: (id: number) => void;
+  onEditTask: (task: TaskType) => void;
+}
+
+const TaskLine = ({ taskLineName, tasks, onCreateTask, onDeleteTask, onEditTask} : Props) => {
+
+  const backgroundColor = 
+  taskLineName === "Pending" ? "#077b8a" : 
+  taskLineName === "In Progress" ? "#e0a96d" : "#77c593" ;
+
+  const { setNodeRef } = useDroppable({id: taskLineName});
+
+  return (
+
+    <div ref={setNodeRef} className='tasklist-container' style={{ backgroundColor }}>
+      <h3 className='tasklist-name'>{taskLineName}</h3>
+       <div  className='taskline'>
+       {tasks.map((task) => (
+         <Task
+         key={task.id}
+         {...task}
+         deleteTask={() => onDeleteTask(task.id)}
+         onEdit={() => onEditTask(task)}
+       />
+        ))}
+        {taskLineName === "Pending" && onCreateTask && (
+          <CreateTask onOpenModal={onCreateTask} />
+        )}
+      </div>
+    </div>
+
+
+  )
+}
+export default TaskLine;