From 0d9788fb03e6fcc4ccf9c42e0626e09ca1f7259c Mon Sep 17 00:00:00 2001 From: lisaaksionova bc2024-6 Date: Mon, 9 Dec 2024 18:31:11 +0200 Subject: [PATCH] update status and dragging overflow fixed --- package-lock.json | 60 ++++++++++++++++++++++++++++++++++++++-- package.json | 3 ++ src/App.tsx | 17 ++++++------ src/api/agent.ts | 2 +- src/models/TaskStatus.ts | 2 +- 5 files changed, 70 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index 37b16aa..24ae354 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "@dnd-kit/core": "^6.2.0", + "@dnd-kit/modifiers": "^9.0.0", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -17,6 +18,7 @@ "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "antd": "^5.22.3", + "axios": "^1.7.9", "mobx": "^6.13.5", "mobx-react-lite": "^4.0.7", "react": "^18.3.1", @@ -26,6 +28,7 @@ "web-vitals": "^2.1.4" }, "devDependencies": { + "@types/axios": "^0.14.4", "sass": "^1.81.0" } }, @@ -2350,9 +2353,9 @@ } }, "node_modules/@dnd-kit/core": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.2.0.tgz", - "integrity": "sha512-KVK/CJmaYGTxTPU6P0+Oy4itgffTUa80B8317sXzfOr1qUzSL29jE7Th11llXiu2haB7B9Glpzo2CDElin+geQ==", + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz", + "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==", "dependencies": { "@dnd-kit/accessibility": "^3.1.1", "@dnd-kit/utilities": "^3.2.2", @@ -2363,6 +2366,19 @@ "react-dom": ">=16.8.0" } }, + "node_modules/@dnd-kit/modifiers": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/@dnd-kit/modifiers/-/modifiers-9.0.0.tgz", + "integrity": "sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw==", + "dependencies": { + "@dnd-kit/utilities": "^3.2.2", + "tslib": "^2.0.0" + }, + "peerDependencies": { + "@dnd-kit/core": "^6.3.0", + "react": ">=16.8.0" + } + }, "node_modules/@dnd-kit/utilities": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz", @@ -3968,6 +3984,16 @@ "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==" }, + "node_modules/@types/axios": { + "version": "0.14.4", + "resolved": "https://registry.npmjs.org/@types/axios/-/axios-0.14.4.tgz", + "integrity": "sha512-9JgOaunvQdsQ/qW2OPmE5+hCeUB52lQSolecrFrthct55QekhmXEwT203s20RL+UHtCQc15y3VXpby9E7Kkh/g==", + "deprecated": "This is a stub types definition. axios provides its own type definitions, so you do not need this installed.", + "dev": true, + "dependencies": { + "axios": "*" + } + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -5266,6 +5292,29 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.7.9", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz", + "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz", + "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/axobject-query": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz", @@ -13349,6 +13398,11 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/psl": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.13.0.tgz", diff --git a/package.json b/package.json index 086d444..b48882d 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "@dnd-kit/core": "^6.2.0", + "@dnd-kit/modifiers": "^9.0.0", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -12,6 +13,7 @@ "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "antd": "^5.22.3", + "axios": "^1.7.9", "mobx": "^6.13.5", "mobx-react-lite": "^4.0.7", "react": "^18.3.1", @@ -45,6 +47,7 @@ ] }, "devDependencies": { + "@types/axios": "^0.14.4", "sass": "^1.81.0" } } diff --git a/src/App.tsx b/src/App.tsx index 293d052..c926a9f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,6 +9,7 @@ import { observer } from "mobx-react-lite"; import { useStore } from "./stores/store"; import { useEffect } from "react"; import { toJS } from "mobx"; +import { restrictToWindowEdges } from "@dnd-kit/modifiers"; function App() { const { taskStore } = useStore(); @@ -29,19 +30,17 @@ function App() { const taskId = active.id as number; const newStatus = over.id as Task["taskType"]; - taskStore.tasks = taskStore.tasks.map((task) => - task.id === taskId - ? { - ...task, - taskType: newStatus, - } - : task - ); + const task = taskStore.tasks.find((t) => t.id === taskId); + if (task) { + task.taskType = newStatus as Task["taskType"]; + taskStore.saveTask(task); + } + console.log(taskStore.tasks); } return ( - + task.taskType === "Pending")} diff --git a/src/api/agent.ts b/src/api/agent.ts index 5b6b03a..ce022d6 100644 --- a/src/api/agent.ts +++ b/src/api/agent.ts @@ -1,7 +1,7 @@ import axios, { AxiosResponse } from "axios"; import { Task } from "../models/Task"; -axios.defaults.baseURL = " http://localhost:5000/api"; +axios.defaults.baseURL = "http://localhost:5000/api"; const responseBody = (response: AxiosResponse) => response.data; diff --git a/src/models/TaskStatus.ts b/src/models/TaskStatus.ts index 600a318..58082fb 100644 --- a/src/models/TaskStatus.ts +++ b/src/models/TaskStatus.ts @@ -1,5 +1,5 @@ export enum TaskStatus { Pending = "Pending", - InProgress = "In Progress", + InProgress = "InProgress", Done = "Done", }