список задач по запросу к api

Author: Saltein

src/entities/task/api/api.js

@@ -1,5 +1,5 @@
 import api from '../../../shared/api/base'
 
 export const taskAPI = {
-    getTask: (data) => api.get('/tasks', data)
+    getTasks: async (data) => api.get('/tasks', data)
 }

src/entities/task/index.js

@@ -1 +1,2 @@
-export { Task } from "./ui/Task"
+export { Task } from "./ui/Task"
+export { taskAPI } from "./api/api"

src/entities/task/ui/Task.jsx

@@ -1,12 +1,19 @@
 import s from "./Task.module.css"
+import priorityIcon from "./assets/prioritize.png"
 
 export const Task = (props) => {
     return (
         <div className={s.wrapper}>
             <button className={s.doneButton}>✔</button>
-            <div>
-                <label className={s.title}>{props.title}</label>
-                <p className={s.description}>{props.description}</p>
+            <div className={s.container}>
+                <div>
+                    <label className={s.title}>{props.title}</label>
+                    <p className={s.description}>{props.description}</p>
+                </div>
+                <div className={s.buttPriority}>
+                    <button className={s.deleteButton}>x</button>
+                    <span><img className={s.image} src={priorityIcon} />{props.priority}</span>
+                </div>
             </div>
         </div>
     )

src/entities/task/ui/Task.module.css

@@ -3,6 +3,9 @@
     padding: 8px;
     align-items: center;
     gap: 8px;
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: 500;
+    color: rgb(60, 60, 60);
 }
 
 .doneButton {
@@ -24,4 +27,23 @@
     border-bottom: 2px solid rgb(64, 11, 11);
     color: white;
     transition: 0s;
+}
+
+.image {
+    width: 16px;
+    height: 16px;
+}
+
+.container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.buttPriority {
+    display: flex;
+    flex-direction: column;
+    min-width: 40px;
+    justify-content: space-between;
 }

src/entities/task/ui/assets/prioritize.png

@@ -1,6 +1,6 @@
 import api from '../../../shared/api/base'
 
 export const userAPI = {
-    login: (data) => api.post('/login', data),
-    registration: (data) => api.post('/registration', data),
+    login: async (data) => api.post('/login', data),
+    registration: async (data) => api.post('/registration', data),
 }

src/entities/user/api/api.js

@@ -0,0 +1 @@
+export { userAPI } from "./api/api"

src/entities/user/index.js

@@ -1,5 +1,5 @@
-import {userAPI} from '../../entities/user/api/api';
-import {taskAPI} from '../../entities/task/api/api';
+import {userAPI} from '../../entities/user';
+import {taskAPI} from '../../entities/task';
 
 export const APIs = {
     user: userAPI,

src/shared/api/index.js

@@ -1,33 +1,54 @@
+import { useEffect, useState } from "react"
 import { Task } from "../../../entities/task"
+import { APIs } from "../../../shared"
 import { DefaultDivider } from "../../../shared/ui/DefaultDivider/DefaultDivider"
 import s from "./TaskList.module.css"
 
-const data = {
-    tasks: [
-        { id: 1, title: "title 1", description: "description 1", priority: 1, status: false, pomodoros: 3 },
-        { id: 2, title: "title 2", description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.", priority: 2, status: false, pomodoros: 3 },
-        { id: 3, title: "title 3", description: "description 3", priority: 3, status: false, pomodoros: 3 },
-        { id: 4, title: "title 4", description: "description 4", priority: 4, status: false, pomodoros: 3 },
-        { id: 4, title: "title 4", description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.", priority: 4, status: false, pomodoros: 3 },
-        { id: 4, title: "title 4", description: "description 4", priority: 4, status: false, pomodoros: 3 },
-        { id: 4, title: "title 4", description: "description 4", priority: 4, status: false, pomodoros: 3 },
-        { id: 4, title: "title 4", description: "description 4", priority: 4, status: false, pomodoros: 3 },
-        { id: 4, title: "title 4", description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.", priority: 4, status: false, pomodoros: 3 },
-        { id: 4, title: "title 4", description: "description 4", priority: 4, status: false, pomodoros: 3 },
-        { id: 4, title: "title 4", description: "description 4", priority: 4, status: false, pomodoros: 3 },
-        { id: 4, title: "title 4", description: "description 4", priority: 4, status: false, pomodoros: 3 },
-        { id: 4, title: "title 4", description: "description 4", priority: 4, status: false, pomodoros: 3 },
-    ]
-}
-
 export const TaskList = (props) => {
+    const [tasks, setTasks] = useState([])
+    const [loading, setLoading] = useState(true)
+    const [error, setError] = useState(null)
+
+    useEffect(() => {
+        const fetchTasks = async () => {
+            try {
+                const response = await APIs.task.getTasks()
+                
+                // Убедитесь, что response.data существует и является массивом
+                const tasksData = response?.data ?? []
+                
+                if (!Array.isArray(tasksData)) {
+                    throw new Error("Received tasks data is not an array")
+                }
+                
+                setTasks(tasksData)
+            } catch (err) {
+                setError(err.message || "Failed to fetch tasks")
+                console.error("Error fetching tasks:", err)
+                setTasks([]) // Устанавливаем пустой массив в случае ошибки
+            } finally {
+                setLoading(false)
+            }
+        }
+
+        fetchTasks()
+    }, [])
+
+    if (loading) return <div>Loading...</div>
+    if (error) return <div>Error: {error}</div>
+
+    // Дополнительная проверка на массив перед рендерингом
+    if (!Array.isArray(tasks)) {
+        console.error("Tasks is not an array:", tasks)
+        return <div>Error: Tasks data is invalid</div>
+    }
+
     return (
         <div className={s.wrapper}>
-            {data.tasks.map((task, index) => (
-                <div key={task.id}>
-                    <Task {...task} /> {/* {...task} — это синтаксис spread-оператора (...) в JSX, 
-                    который используется для передачи всех свойств объекта task в компонент Task в виде отдельных пропсов. */}
-                    {index !== data.tasks.length - 1 && <DefaultDivider margin="16px" />}
+            {tasks.map((task, index) => (
+                <div key={task.id || index}>
+                    <Task {...task} />
+                    {index !== tasks.length - 1 && <DefaultDivider margin="16px" />}
                 </div>
             ))}
         </div>